通过一个月的小程序开发，记录下一点点小心思...首先请大家问候一下~~1.wx.previewImage预览图后关闭后会再次触发onShow方法：在全局变量中定义一个全局变量switch来控制，调用预览图时将其反转，不再触发onShow事件data(){return{isShow:true}},onShow(){if(this.isShow){...处理事件}else{this.isShow=true;return;}}在调用wx.previewImage()方法之前，this.isShow=false;思路是用一个全局变量巧妙的防止预览图片再次执行可以看到wx.previewImage()跳转到了新的页面进行图片预览，关闭后又回到了上一个页面，导致onShow再次触发。2、mpvue中的路由参数是在接收页面的页面生命周期函数的onShow或onLoad函数中通过this.$root.$mp.query获取的。获取参数名称。3、mpvue中的路由跳转参数(1)，通过wx.navigateTo({url:'/test/test?params='+paramsStr})由于url的限制，当传递的参数过多时，它会被拦截和过滤并丢失，所以在这种情况下你需要通过encodeURIComponent()对所有参数字符串进行编码并传递下去。在接收页面的页面生命周期函数的onShow或onLoad函数中，通过this.$root.$mp.query.params获取上一页传递的参数。然后通过decodeURIComponent()方法对参数进行解码，得到对应的参数哈希值。顺便把参数字符串拆分成对象的方法贴出来，方便大家直接使用。//请求参数序列化函数formatParams(params){letstr=decodeURIComponent(params);让paras={};str=str.split('&');for(letninstr){letname=str[n].split('=')[0];让val=str[n].split('=')[1];参数[名称]=val；}returnparas;}eg:params=a=1&b=2&c=3//传递wx.navigateTo({url:'/test/test?params='+encodeURIComponent(params)})//接收onShow(){letparams=this.$root.$mp.query.params;let{a,b,c}=formatParams(params)//这里可以获取上一页传递的多个参数~不错~}PS：如果要传递对象数据，需要传递JSON.stringify()处理数据（2），通过数据缓存传递数据的页面//passtry{wx.setStorage({key:'',data:{...},success:()=>{//缓存成功..跳转wx.navigatorTo({url:'/pages/test/main'})}})}catch(e){}//在onShow或onLoad页面生命函数中通过wx接收.getStorage({key:'',success:()=>{//接收成功//初始化数据页}})或wx.getStorageSync('key')获取参数并初始化数据页4.页面数据在unLoad后不通过在main.js中传递Vue.mixin对数来初始化数据恢复初始化Vue.mixin({onUnload(){if(typeofthis.$options.data==='function'){try{Object.assign(this.$data,this.$options.data());}catch(e){console.log(e)}}}})5、如何查看小程序的版本更新，更新版本？官方文档传送门=>[https://developers.weixin.qq....]()基本上我会对官方文档的公共方法做一层封装，包括wx.showToast等方法，会执行aprocessingcheckversion更新是一样的。这里是基于代码结合网上自封装的一个集成/*小程序监听更新信息*/exportfunctioncheckUpdateVersion(){//创建一个UpdateManager实例constupdateManager=wx.getUpdateManager();//检测小程序版本更新updateManager.onCheckForUpdate((res)=>{//请求新版本信息后回调if(res.hasUpdate){//监听小程序有版本更新事件updateManager.onUpdateReady(()=>{showConfirm({title:'更新提醒',content:'新版本已准备好，是否要重启应用？',ok(res){//新版本下载完成后，调用applyUpdate应用新版本并重启updateManager.applyUpdate();}})})//监听小程序更新失败事件updateManager.onUpdateFailed(()=>{//新版本下载失败showConfirm({title:'已经有新版本了~',content:'请在微信中查找"发现-小程序”页面删除当前小程序，通过搜索小程序名称重新打开。使用最新版本',})})}})}6.小程序获取页面堆栈信息和参数官网提供getCurrentPages()获取当前小程序打开的页面所有的页面栈信息，文档是这样写的，打印出结果，可以清楚的看到页面栈的相关信息，包括页面路径和页面参数当我们打开多个对象，会有多个页面结果在实际开发中，会遇到这样的场景。当用户未登录时，会记录当前用户操作的页面，自动跳转到登录页面，用户登录成功后自动跳回之前未登录的页面。此时需要通过此API执行操作。通过处理，共享一个任意页面的栈信息，可以得到当前所有打开的页面。/*获取页面栈信息和参数参数pageDefaultgetcurrentpage=1*/exportfunctiongetPagesInfo(page=1){letrouteHistory=getCurrentPages();让长度=routeHistory.length;letroute=routeHistory[length-page]['route']letparams=routeHistory[length-page]['options'];让url='';让选项='';Object.keys(params).forEach(key=>{option+=`${key}=${params[key]}`;})url=`/${route}${option?'?'+option:''}`;url=encodeURIComponent(url)returnurl;}7、mpvue动态设置样式Style通过Mpvue官网我们知道当我们需要为Dom渲染动态设置一系列样式时，会出现问题，所以需要处理styleObject再一步。也在这里分享解决方案！导出函数样式（obj）{letstylesStr='';for(letstyleNameinobj){if(obj.hasOwnProperty(styleName))stylesStr+=`${styleName.replace(/([A-Z])/g,"-$1").toLowerCase()}:${px2rpx}(obj[styleName])};`;}returnstylesStr;}exportfunctionpx2rpx(str){if(/rpx/.test(str))返回strelseif(/px/.test(str)){letval=str.substring(0,str.indexOf('px'))return`${(val-0)*2}rpx`}elsereturnstr}eg:
