您好,欢迎访问三七文档
当前位置:首页 > 商业/管理/HR > 信息化管理 > 初探微信小程序:大致流程,实现机制及开发前须知
初探微信小程序:大致流程,实现机制及开发前须知分享者:treadpit原文地址一、小程序是什么?一种介于原生app、和webapp的hybrid,比webapp的开发成本还低;通过微信进行加载;相对原生app来说,更加轻量、更新实时、跨平台;相对webapp来说,资源离线,体验更流畅;低频、无强粘性;可以使用微信的支付功能二、接入小程序的大致流程:注册小程序:尚未对个人开放,需要对公打款或完成微信认证才有微信支付功能;资料完善:包括小程序命名、描述、服务范围等;功能开发;提交审核:需要保证功能的完整性。开发者工具开发文档三、实现机制基于微信提供的一套应用框架。微信通过封装微信客户端提供的文件系统、网络通信、任务管理、数据安全等基础功能,对上层提供了一套完整的JavascriptApi,开发者能够非常方便的调用微信客户端提供的各种基础功能。视图层描述语言.WXML和.WXSS,以及基于JavaScript的逻辑层框架,并在视图层与逻辑层之间通过单向数据绑定进行数据传输四、开发前须知AppStore问题;发布的项目包体积1M,只适合轻量级;由于现在官方的限制,只能7天内能够给使用过该小程序的用户进行消息发送,所以关于消息发布还需要更多的斟酌;开发基于微信框架,部分功能受限,不能操作DOM,没有script标签,要引入则需加入到项目;没有与浏览器BOM相关的API;没有cookie;用storage替代了H5中的localstorage、sessionstorage、storage对每个小程序的大小是10M,支持同步和异步。同时只能存在5个url请求;小程序页面只能同时打开5个,如果交互流程较长难以支持;为了方便开发者减少配置项,规定描述页面的这四个文件必须具有相同的路径与文件名;其他注意事项设计文档运营规范注意:cookie问题,在请求发送时,可以动态设置Header发送报文的cookie,但是cookie本身不能在客户端进行读写。wx.request({header:{cookie:abcd1234},url:/getinfo,data:{},...})五、路由1.pages里面的第一个元素即为首页;2.每个页面需要手动在app.json中进行注册,否则不能访问;3.路由跳转:组件跳转(navigator)/API跳转;4.只能同时打开5个页面,否则wx.navigateTo不能正常打开新页面,避免多层级的交互方式,或者使用wx.redirectTo。//navigator/组件内部不能再嵌套navigator/组件。只能是单层存在navigatorurl=search/searchviewclass=serach_view_showbindtap=bindtap搜索/view/navigator//APIwx.navigateTo({//保留当前页url:,...})wx.redirectTo({//关闭当前页url:,...})六、Tab页1.由app.json定义;2.最多5个;3.每个页面的.json文件可以覆盖定义导航栏。七、页面结构由同路径下同名的四个不同后缀文件的组成:.js文件是脚本文件.json文件是配置文件.wxss是样式表文件.wxml文件是页面结构文件app.json必须,微信框架配置文件入口,整个小程序的全局配置。包括页面注册,网络设置,以及小程序的window背景色,配置导航条样式,配置默认标题。app.js必须,可以什么都不需要写,后期再监听并处理小程序的生命周期函数、声明全局变量。.wxml文件//wxml语法blockwx:for={{shareItems}}wx:for-index=idxviewid={{idx}}class=flexshare-itemboxbox-tbviewclass=flexboxbox-lrarticle-infoviewclass=flextitle{{item.articleInfo.title}}/view/viewviewclass=user-infoboxbox-lrimagesrc={{item.articleInfo.isApproved?icon.approved:icon.approve}}class=iconapprove-icon/image/view/view/block1..wxml文件通过相同的名称,将页面与逻辑js、样式、配置进行关联匹配2..wxml组件语法3..wxml提供两种文件引用方式import(有作用域)和include4.事件绑定方式//test.wxmlviewclass=flextitlebindtap=getInfo{{userName}}/view//test.jspage({data:{},getInfo:function(){this.setData({userName:Tom})}}).wxss文件/**app.wxss**/@importcommon.wxss;view{padding:15px;}1.可通过@import(后跟相对路径)样式表;2.尺寸单位:有两种单位:(1)、引入rpx(根据屏幕宽度进行自适应)的概念;(2)、rem;3.支持内联4.选择器:不再支持媒体查询,支持.demo,#demo,view,viewinput,view::after,view::before;5.增加了app的flex布局;6.weui官方样式库规定屏幕宽为750rpx,如iPhone6,1rpx=1物理像素=0.5px;规定屏幕宽度为20rem,1rem=(750/20)rpx;.js文件1.模块运行(类似node,框架自动添加外层define);2.形式上支持CommonJs,通过require加载;3.data应约定为只读,不能直接修改data值,否则容易造成data中的数据与view不一致;4.更新View需使用setData(),与data中的数据进行Diff比较,不同才会更新。setData()单次设置的数据1M,要避免一次设置过多的数据;支持ES6中的…操作符展开模块数据。//js引入//a.jsfunctionsayHi(){console.log(hellowxAPP!);}module.exports={say:sayHi}//b.jsvarsay=require(a.js);//data操作page({data:{name:'one'},handleData(){//错误操作方式,虽不会报错,但不会更新viewthis.data.name='two';//正确操作方式this.setData({name:'tow'})}}).json文件各个页面的配置性文件八、事件绑定事件类型描述touchstart手指触摸动作开始touchmove手指触摸后移动touchcancel手指触摸动作被打断,如来电提醒,弹窗tap手指触摸后马上离开longtap手指触摸后,超过350ms再离开bind或catch开头,然后跟上事件的类型,如bindtapbind事件绑定不会阻止冒泡事件向上冒泡,catch事件绑定可以阻止冒泡事件向上冒泡。viewbindtap=clickMe绑定事件/view八、杂项微信支付申请微信支付设置密钥和下载证书配置Https服务器小程序与JSSDK微信支付比较data操作Page({data:{user:{name:{nickName:'Tom'}}},changeData(){//data设置,key可以非常灵活,以数据路径的形式给出,如array[2].message,a.b.c.dthis.setData({'user.name.nickName':'汤姆'})//可以不预先在this.data中定义this.setData({'sex':'male'})}})---------------------------------------------------------------------------------------------//标签自定义data取值//index.wxmlviewdata-name=teardata-type=someTypebindlongtap=getData绑定事件/view//index.jsPage({getData(e){const_data=e.currentTarget.dataset;//={name:'tear',type:'someType'}}})十、坑编辑器问题;调试工具和手机表现不一致问题(如弹框标题);API在调试工具和真机上返回值不一样(如wx.showModal());模拟器对css的支持比较完整,真机只支持部分,但是文档没有.列出来;如果api是post请求,参数是key-value形式,那么直接设置Object是不行的,必须手动拼;view标签不识别'/n'换行符,text组件可以;toast有success和loading状态,竟然没有失败状态,宽度是写死的,字一多就丑得要死;navigateTo无法封装到另一个js方法中,只能直接写,而且失败还不走失败的回调;元素不能获取自定义data的完整对象值,只能传基本数据类型;开发工具更新后,原先height:auto失效,必须指定image的高度为具体数值,不然高度为0。text可以嵌套text,但不可以嵌套viewbutton的边框是用:after方式实现的,用户如果在button上定义边框会出现两条线分隔线高度使用rpx问题
本文标题:初探微信小程序:大致流程,实现机制及开发前须知
链接地址:https://www.777doc.com/doc-4265838 .html