微信小程序开发总结

微信小程序开发总结一、框架对比小程序原生厂商：小程序官方小程序原生uni-app厂商：DClouduni-appWePY厂商：腾讯（最早开源的小程序Framework）WePYmpvueVendor:MeituanmpvueTaroManufacturer:JingdongTaro小程序开发框架对比（wepy/mpvue/uni-app/taro）小程序框架对比（TaroVSuni-app）强烈推荐：小程序常用的6款框架小程序框架总结：WePY/mpvue/uni-app/Taro2。开发准备公众号平台小程序开发工具下载地址微信公众平台接口测试账号申请小程序公众号（认证服务号），注册域名（https），安装小程序开发工具注意：必须是服务号3。Applet代码结构.JSON配置文件，后缀为json.WXML模板文件，后缀为wxml.WXSS样式文件，后缀为wxss.JS脚本逻辑文件，后缀为js。json示例配置{"pages":["pages/index/index","pages/logs/index"],"window":{"navigationBarTitleText":"Demo"},"tabBar":{"list":[{"pagePath":"pages/index/index","text":"Homepage"},{"pagePath":"pages/logs/logs","text":"logs"}]},"networkTimeout":{“请求”：10000，“道琼斯nloadFile":10000},"debug":true,}全局配置4.生命周期4.1小程序生命周期//app.jsApp({onLaunch(options){//启动时做一些初始化。},onShow(options){//显示时做一些事情。},onHide(){//隐藏时做一些事情。},onError(msg){console.log(msg)},globalData:'我是全局数据'})4.2页面生命周期//index.jsPage({data:{text:"Thisispagedata."},onLoad:function(options){//页面创建时执行},onShow:function(){//页面创建时执行出现在前台},onReady:function(){//当页面第一次渲染时执行},onHide:function(){//当页面从前台变为后台时执行},onUnload:function(){//页面销毁时执行},onPullDownRefresh:function(){//触发下拉刷新时执行},onReachBottom:function(){//页面触底时执行},onShareAppMessage:function(){//当页面被分享时执行bytheuser},onPageScroll:function(){//当页面滚动时执行},onResize:function(){//当页面大小改变时执行},onTabItemTap(item){//当标签被点击时执行console.log(item.index)console.log(它em.pagePath)console.log(item.text)},//事件响应函数viewTap:function(){this.setData({text:'设置一些用于更新视图的数据。'},function(){//thisissetDatacallback})},//freedatacustomData:{hi:'MINA'}})4.3小程序生命周期图页面路由（页面栈路由模式触发时机路由前页面路由页面初始化后小程序第一次是打开页面onLoad、onShow打开新页面调用APIwx.navigateTo使用组件onHide页面重定向调用APIwx.redirectTo使用组件onUnload页面返回调用APIwx.navigateBack使用组件用户按下返回按钮onUnloadTab在左上角切换调用APIwx.switchTab使用组件用户switchesTab重启调用APIwx.reLaunch使用组件onUnloadnavigateTo，redirectTo只能打开非tabBar页面switchTab只能打开tabBar页面。reLaunch可以打开任何页面。页面底部的tabBar由页面决定，即只要页面定义为tabBar，底部就有tabBar。调用页面路由的参数可以在目标页面的onLoad中获取。常用APIwx.switchTab(Objectobject)跳转到tabBar页面并关闭所有其他非tabBar页面wx.switchTab({url:'/index'})wx.reLaunch(Objectobject)关闭所有页面并打开到application一个页面wx.reLaunch({url:'test?id=1'})wx.redirectTo(Objectobject)关闭当前页面并跳转到应用程序中的一个页面。但是不允许跳转到tabbar页面wx.redirectTo({url:'test?id=1'})wx.navigateTo(Objectobject)保持当前页面，跳转到应用中的某个页面。但是不能跳转到tabbar页面。使用wx.navigateBack返回到原始页面。小程序中的页面栈最多有十层。wx.navigateTo({url:'test?id=1'})wx.navigateBack(Objectobject)关闭当前页面并返回上一页或多级页面。可以通过getCurrentPages获取当前页面栈来判断需要返回多少层。//注意：调用navigateTo跳转时，调用该方法的页面会被加入栈中，redirectTo方法不会。看下面的示例代码//这里是A页面wx.navigateTo({url:'B?id=1'})//这里是B页面wx.navigateTo({url:'C?id=1'})//C页面中的navigateBack会返回到A页面wx.navigateBack({delta:2})wx.navigateToMiniProgram(Objectobject)打开另一个小程序，在开发者工具上调用该接口实际上不会跳转到Another小程序wx.navigateToMiniProgram({appId:'',path:'page/index/index?id=123',extraData:{foo:'bar'},envVersion:'develop',success(res){//打开成功}})wx.navigateBackMiniProgram(Objectobject)返回上一个小程序。只有当前小程序被其他小程序打开才能调用成功wx.navigateBackMiniProgram({extraData:{foo:'bar'},success(res){//返回成功}})wx.login(Objectobject)程序登录wx.login({success(res){if(res.code){//发起网络请求wx.request({url:'https://example.com/onLogin',data:{code:res.code}})}else{console.log('登录失败!'+res.errMsg)}}})wx.checkSession(Objectobject)检查登录状态是否过期wx.checkSession({success(){//session_keyisnotExpiredandvalidinthislifecycle},fail(){//session_key已经过期，需要重新执行登录流程wx.login()//重新登录}})wx.getUserProfile(Objectobject)获取用户信息wx.getUserProfile({desc:'用于完善会员资料',//声明获取用户个人信息的目的，稍后会在弹窗中显示，成功请谨慎填写：(res)=>{this.setData({userInfo:res.userInfo,hasUserInfo:true})}})wx.getUserInfo(Objectobject)获取用户信息wx.getUserInfo({success:function(res){console.log(res.userInfo)}})7.数据缓存wx.setStorageSync(stringkey,anydata)将数据存储在本地缓存中的指定key中（同步）wx.getStorageSync(stringkey)从本地缓存中同步获取指定key的内容wx.removeStorageSync(stringgkey)从本地缓存中取出指定key（同步）wx.setStorage(Objectobject)将指定key中的数据存储到本地缓存中wx.getStorage(Objectobject)异步从本地缓存中获取指定key的内容wx.removeStorage(Objectobject)从本地缓存中移除指定keywx.getStorageInfo(Objectobject)异步获取当前存储信息wx.getStorageInfoSync()同步获取当前存储信息wx.clearStorageSync()清除本地数据cache(synchronous)wx.clearStorage(Objectobject)清除本地数据缓存小程序本地缓存setStorage和setStorageSync的区别wx.setStorage()是异步缓存，wx.setStorageSyn()是同步缓存；不同的是：使用异步缓存，无论成功与否，程序都会向下执行；使用同步缓存，只有缓存成功，程序才会向下执行；异步缓存性能更好，用户体验更好；同步缓存数据更安全8.组件组件化9.富文本rich-textrich-text官方文档//index.wxml//index.jsPage({data:{html:'HelloWorld!