记一次mpvue开发完整小程序相关笔记

时间 2019-11-17

标签一次 mpvue 开发完整程序相关笔记繁體版

原文原文链接

经过一个月的小程序开发，记录下一点点当心得······css

先给各位大佬请安了~~~~~~前端

一、wx.previewImage预览图片关闭后会再次触发onShow方法：

在全局变量里定义一个全局变量开关来控制，调用预览图片的时候将其取反再也不触发onShow的事件vue

data(){
    return {
        isShow:true
    }
},
onShow(){
if(this.isShow){
    ...处理事件
}
else{
    this.isShow = true; 
    return;
}
}
复制代码

调用wx.previewImage()方法前，this.isShow = false; 思路就是用一个全局变量巧妙的阻止预览图片后再次执行，能够看出wx.previewImage()是跳到一个新的页面进行图片预览，关闭后又返回了上一个页面，从而致使了onShow再次触发。npm

二、mpvue中路由参数获取

在接收页面在页面生命周期函数的onShow或者onLoad函数里经过 this.$root.$mp.query.参数名 进行获取json

三、mpvue中路由跳转传参

(1)、经过

wx.navigateTo({
      url: '/test/test?params='+paramsStr
    })
复制代码

由于url的限制，当须要传递的参数过多的时候会出现被截取过滤丢失的状况，因此在这种状况下须要经过encodeURIComponent()把全部的参数字符串编码后进行传递，在接收页面在页面生命周期函数的onShow或者onLoad函数里经过this.$root.$mp.query.params获取到上一个页面传递的参数。再将该参数经过decodeURIComponent()方法进行解码处理，便可获得对应的参数hash值。这里顺带把参数字符串拆分红对象的方法贴出来，方便你们直接使用。小程序

// 请求参数序列化
function formatParams(params) {
    let str = decodeURIComponent(params);
    let paras = {};
    str = str.split('&');
    for (let n in str) {
        let name = str[n].split('=')[0];
        let val = str[n].split('=')[1];
        paras[name] = val;
    }
    return paras;
}
复制代码

eg:params = a=1&b=2&c=3缓存

//传递
wx.navigateTo({
      url: '/test/test?params='+encodeURIComponent(params)
    })
复制代码

//接收
onShow(){
let params = this.$root.$mp.query.params;
let {a,b,c } =  formatParams(params)
//到这里就能够拿到上一个页面传递的多个参数了~奈斯~
}
复制代码

PS:若是想要传递对象数据，则须要经过JSON.stringify()对数据进行处理一下bash

（2）、经过数据缓存进行数据的页面传递

//传递微信

try{
    wx.setStorage({
        key:'',
        data:{...},
        success:()=>{
            //缓存成功 ..进行跳转
            wx.navigatorTo({
            url:'/pages/test/main'
            })
        }
    })
}
catch(e){}
复制代码

//接收在onShow或者onLoad页面生命函数里经过app

wx.getStorage({
key:'',
success:()=>{
//接收成功
//进行数据页面初始化
}
})
复制代码

或者

wx.getStorageSync('key')
复制代码

获取到参数进行数据页面初始化

四、页面数据在unLoad以后没有被初始化

经过在main.js里经过Vue.mixin对数据进行恢复初始化

Vue.mixin({
  onUnload() {
    if (typeof this.$options.data === 'function') {
      try {
        Object.assign(this.$data, this.$options.data());
      } catch (e) {
        console.log(e)
      }
    }
  }
})
复制代码

五、如何检查小程序版本更新进行更新版本？

官方文档传送门=> developers.weixin.qq.com/miniprogram… 基本上官方文档的公共方法我都会作一层封装，包括wx.showToast等方法均会进行一个处理检查版本更新也是同样这边也是参考网上的结合本身封装的代码进行一个整合

/* 小程序监听更新信息 */
export function checkUpdateVersion() {
    //建立 UpdateManager 实例
    const updateManager = wx.getUpdateManager();
    //检测小程序版本更新
    updateManager.onCheckForUpdate((res) => {
        // 请求完新版本信息的回调
        if (res.hasUpdate) {
            //监听小程序有版本更新事件
            updateManager.onUpdateReady(() => {
                showConfirm({
                title: '更新提示',
                content: '新版本已经准备好，是否重启应用？',
                ok(res) {
                    // 新的版本下载完毕，调用 applyUpdate 应用新版本并重启
                    updateManager.applyUpdate();
                }
                })
            })
            //监听小程序更新失败事件
            updateManager.onUpdateFailed(() => {
                // 新版本下载失败
                showConfirm({
                title: '已经有新版本咯~',
                content: '请在微信 “发现-小程序” 页删除当前小程序，从新经过小程序名称搜索打开使用最新版本',
                })
            })
        }
    })
}
复制代码

六、小程序获取页面栈信息和参数

官网提供了 getCurrentPages()来获取当前小程序打开的页面的全部页面栈信息，文档是这么写的，

打印出来该结果，能够清晰的看到页面栈的相关信息，包括页面路径以及页面参数

当咱们打开多个对象的时候，这个页面结果也会有多条。在实际开发中，我会碰到这样一个场景，在用户未登录的状况下会记录下当前用户操做的页面，自动跳转登录页，待用户登录成功后自动跳回上一个未登录的页面，这个时候就须要经过这个API进行操做处理了。经过处理，分享一个能够获取当前全部打开的页面的任一页面的栈信息。

/* 
获取页面栈信息和参数
参数 page 默认获取当前页面 =1
*/
export function getPagesInfo(page = 1) {
  let routeHistory = getCurrentPages();

  let length = routeHistory.length;
  let route = routeHistory[length - page]['route']

  let params = routeHistory[length - page]['options'];
  let url = '';
  let option = '';
  Object.keys(params).forEach(key => {
    option += `${key}=${params[key]}`;
  })
  url = `/${route}${option?'?'+option:''}`;
  url = encodeURIComponent(url)

  return url;
}
复制代码

七、mpvue动态设置样式Style

经过Mpvue官网，咱们知道

这时候当咱们须要动态设置一系列样式给Dom渲染的时候，就出现了问题，因此须要多一步对styleObject进行处理。这里也分享一下解决方案!

export function styles(obj) {
  let stylesStr = '';
  for (let styleName in obj) {
    if (obj.hasOwnProperty(styleName)) stylesStr += `${styleName.replace(/([A-Z])/g, "-$1").toLowerCase()}:${px2rpx(obj[styleName])};`;
  }
  return stylesStr;
}

export function px2rpx(str) {
  if (/rpx/.test(str)) return str
  else if (/px/.test(str)) {
    let val = str.substring(0, str.indexOf('px'))
    return `${(val - 0) * 2}rpx`
  } else return str
}
复制代码

eg: <div :style='styleObject'></div>
//在之前，可能咱们只须要这样
computed:{
    styleObject(){
        return {
            backgroundColor:'#fff',
            color:'#000'
        }
    }
}
//在mpvue中，这是不被支持的，因此咱们须要经过上面的函数多一层转换，转成样式字符串才能够。
//更改以下
computed:{
    styleObject(){
        return styles({
            backgroundColor:'#fff',
            color:'#000'
        })
    }
}
复制代码

八、mpvue中设置默认转发分享信息

一样在main.js中经过Vue.mixin()里经过API里的onShareAppMessage()来设置分享

//这里能够默认一套全部页面的默认分享信息
  onShareAppMessage(e) {
    return {
      title: "***商城",
      path: "/pages/home/main",
      imageUrl: ../../图片路径,
      success: res => {
        showToast({
          title: "分享成功！",
          icon: "success"
        });
      },
      fail: res => {
        showToast({
          title: "分享失败！"
        });
      }
    };
  }
复制代码

九、关于v-show使用的相关问题

v-show作到的只是切换css样式属性显隐
对元素不支持
对v-else不支持

在实际开发之中，很常常碰到一种状况就是经过v-show来控制组件显隐失效的问题，特别是直接对公共组件进行使用的时候，实际上已经直接建立了组件没有达到预期的效果。

eg:

<template>
    <components v-show='show'></components>
</template>
复制代码

这种时候，即便show是true组件也一样会被建立出来，没有办法经过该变量来响应对应的显示隐藏状态。

~~最简单粗暴的~~解决办法就是用v-if来代替v-show直接销毁组件。

十、经过npm run dev 编译的时候，部分页面跳转提示不存在页面

注意

检查dist/app.json 是否与 src/main.json保持一致，保险方法直接copy一下main.json里的到app.json里便可

第一次编译的时候发现找不到tabBar图标，依葫芦画瓢把src/assets下的图片拷贝到dist/assets便可

十一、新增页面没有被编译出来

新增的页面须要从新经过npm run build 命令来生成对应的mpvue的文件目录，从新npm run dev才能够

好了，差很少了，快想不出来还碰上什么问题了~~~~ 第一次发表文章，不喜轻喷...

关注前端公虾米,更多前端干货等你哟~