小程序结合mpvue踩坑 - Go语言中文社区

小程序结合mpvue踩坑


路由,栈

小程序路由跳转的方式:

1,打开新页面:wx.navigateTo
2,页面重定向:wx.redirectTo
3,页面返回: wx.navigateBack
4,Tab 切换 wx.switchTab

使用场景:

当你想保留当前页跳转到下一个页面时,应当使用wx.navigateTo
返回某个页面使用wx.navigateBack
Tab切换需要使用wx.switchTab才有效(排除自定义Tab);
当你想关闭当前页面,跳转到下一页,请使用wx.redirectTo

路由传参

页面跳转的url后面可以带参数的只能是wx.navigateTowx.redirectTowx.switchTabwx.navigateBack无法在url后面携带参数。

特别说明:

当需要在返回上一个栈,且携带参数回到上一个栈中时,可以使用getCurrentPages获取上一个页面的数据,再通过setData去改变上一个页面数据(这个方法只适合在原生小程序中,mpvue证实只能获取上个页面数据,无法setData,这是个巨坑。。)

let pages = getCurrentPages()
<!--上一个页面信息-->
let prevPage = pages[pages.length - 2]
prevPage.setData({
test: 121321
})

注:mpvue老老实实用缓存或者vuex吧~

获取参数

通过url获取的参数可以使用root.root.mp.query,或者getCurrentPages获取
后者获取参数方式getQuery的封装

/* 获取当前页带参数的url */
export function getQuery () {
  /* 获取当前路由栈数组 */
  /*eslint-disable*/
  let pages = getCurrentPages()
  if (pages.length === 0) {
    return ''
  }
  let currentPage = pages[pages.length - 1]
  let options = currentPage.options
  return options
}

授权

小程序现在授权必须要使用button触发,之前的wx.getUserInfo(OBJECT)接口不再出现授权弹窗:

<button  class="au-btn" open-type="getUserInfo" lang="zh_CN" @getuserinfo="bindGetUserInfo">
          获取授权
          开启购物
 </button>

open-type="getUserInfo引导用户去授权,@getuserinfo监听用户允许还是拒绝授权操作
注:
授权按钮建议单独写一个页面,主页面设置成首页,当授权成功就跳转到首页,失败就返回授权页,这样就可以避免授权成功后,授权按钮偶尔闪现的原因。

生命周期

mpvue的同时支持小程序的生命周期和vue的生命周期
这里主要讲一下mounted和onshow的使用。
每次进入页面需要执行的操作,需要放到onshow里面执行,mounted只会执行一次

分享转发

默认分享:

wx.showShareMenu

自定义分享:

onShareAppMessage,监听用户页面内转发按钮(button 组件 open-type=“share”),或右上角菜单“转发”按钮的行为,并自定义转发内容。

接收分享参数

onload中的options可以获取到参数

onload:function(options){
    console.log(options)
}

字符串特殊符号处理

对于特殊符号例如&,+,JSON.string之后JSON.parse会解析出错。需要使用encodeURIComponent先进行编码,然后再使用encodeURIComponent解码

域名配置

小程序的域名只支持https,本地调试可以使用http(勾选不校验域名和https证书等)
域名的配置包括:

在这里插入图片描述

注:一般本地调试正常,已发到线上就请求不到数据十有八九都是域名没有配置的原因~

审核相关

建议一天当中提交审核次数尽量少一点,周五,六,日尽量不要提交审核,基本石沉大海。。。

版权声明:本文来源CSDN,感谢博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
原文链接:https://blog.csdn.net/qq_20074443/article/details/90718986
站方申明:本站部分内容来自社区用户分享,若涉及侵权,请联系站方删除。

0 条评论

请先 登录 后评论

官方社群

GO教程

猜你喜欢