iOS开发之模仿微信小程序
白羽 2018-07-16 来源 :网络 阅读 2205 评论 0

摘要:本文将带你了解iOS开发之模仿微信小程序,希望本文对大家学IOS有所帮助






微信小程序的toast
 wx.showToast({
     title: '这是微信的Toast'
 })








微信toast



微信小程序modal
 wx.showModal({
     title: 'wx modal',
     content: '这是微信modal的content',
 })








微信modal

自行实现类微信的提示
目标:


独立性--不依赖其他现有的js框架,所以所有的UI以及css用原始js实现

简单--方法调用简单,封装方法到一个对象中,类似wx.showToast({})

适应性--我们前端项目使用viewport标签进行固定布局,但是viewport的width值却不尽相同(前期留下的问题),需要适应任意width对应的显示要正常

可配置性--对于显示toast,modal的title,content,对应的颜色,确认按钮和取消按钮的颜色都可以通过参数配置

实现思路:

很简单


有一个viewport的概念,需要指导,请自行Google or baidu or bing


找出head所有mata标签中,name="viewport",最后一个width的大小(即为有效的viewport大小)
计算出1种得到的width和标准的viewport的width比例
创建toast和modal的模版,根据2中的比例,动态设置好css属性
实现显示,隐藏,是否调用回调函数,等逻辑

展示效果:


toast效果
 vhs.showToast({
     content: "这是自行封装的toast--巴拉巴拉巴拉巴拉巴拉巴拉",
     complete: function() {
             console.log("消失的回调函数")
     }
 });








vhs_show_toast


modal效果

    vhs.showModal({
            title: "提示",
            content: "这是自行封装的modal--巴拉巴拉",
            cancelTitle: "取消",
            cancel: function() {
                console.log("取消事件回调");
            },
            confirmTitle: "确认",
            confirm: function() {
                console.log("确认按钮回调");
            }
        });






vhs_show_modal

使用

引入vhs-modal.js

toast
 /** 使用方式
 *
 * vhs.showToast({
 *       content: "toast内容",
 *       complete: function() {
 *           console.log("toast消失回调");
 *       }
 *   });
 */



modal
 /** 使用方式
 *
 * vhs.showModal({
 *       title: "提示",
 *       content: "modal内容",
 *       cancelTitle: "取消按钮文本",
 *       cancel: function() {
 *           console.log("取消事件回调");
 *       },
 *       confirmTitle: "确认按钮文本",
 *       confirm: function() {
 *           console.log("确认按钮回调");
 *       }
 *   });
 */



后续
还可以添加更多的配置,例如toast的倒计时配置,还有其他模式的提示,可以后续加入。
获取
旨在分享,github -- vhs-modal.js库
意见
如果有更好的意见,欢迎分享。
不是很好,键盘侠请留情 -- 毕竟还是一个从native开发者边学前端的初试者
最后
还是感谢微信小程序的一些设计,给我一种新的思路。
问题

如何实现API的人性化提示,在微信小程序,或者其他其他语言,例如Objective-C,Swift,Java中,在方法的调用时候,都能给出很人性化的提示,方便调用方很简单的使用,但是目前没有实现。咨询后被告知--"利用原生JavaScript写的API对方法的提示是弱化的",是否是这样的?

对参数传递的形式一点思考
在js,
1>. function fun(args1, args2, args3, ....)

2>. function fun({ args1: "", args2: "", args3: "" })


由于在js的方法中,如1,参数在不需要的时候,是可以省略的,但是在靠后的参数需要的时候,前面的参数则一定要保留,否则会参数传递错误。这样严重的影响了API的美观,和调用者阅读的感觉。
采用2的方式,虽然在调用时候,需要多写参数的键值,但是可以清晰的让调用者知道,当前的参数/方法的作用。
综上,采用第二种方式   

 

本文由职坐标整理并发布,希望对同学们有所帮助。了解更多详情请关注职坐标移动开发之IOS频道!


本文由 @白羽 发布于职坐标。未经许可,禁止转载。
喜欢 | 0 不喜欢 | 0
看完这篇文章有何感觉?已经有0人表态,0%的人喜欢 快给朋友分享吧~
评论(0)
后参与评论

您输入的评论内容中包含违禁敏感词

我知道了

助您圆梦职场 匹配合适岗位
验证码手机号,获得海同独家IT培训资料
选择就业方向:
人工智能物联网
大数据开发/分析
人工智能Python
Java全栈开发
WEB前端+H5

请输入正确的手机号码

请输入正确的验证码

获取验证码

您今天的短信下发次数太多了,明天再试试吧!

提交

我们会在第一时间安排职业规划师联系您!

您也可以联系我们的职业规划师咨询:

小职老师的微信号:z_zhizuobiao
小职老师的微信号:z_zhizuobiao

版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
 沪公网安备 31011502005948号    

©2015 www.zhizuobiao.com All Rights Reserved

208小时内训课程