mpVue 开发小程序总结

开始踩坑

未做过小程序开发，但是使用过Vue开发移动端项目。目前公司需要做小程序项目，直接开撸mpvue。mpvue是使用vue开发小程序的前端框架，语法几乎一致，相比原生小程序开发要来得快

设置首页

为什么要设置首页？当你新增或修改了代码，想看看效果。小程序会重新编译，当你打开开发者工具看到的是首页，如果开发的页面是很深层的内页，那就尴尬了。 因此，开发过程中可以将你想看到的页面设置为首页。

mpvue 2.0 新版本修改：

app.json
    pages: []
复制代码

pages中第一个为首页。

---

mpvue 1.0 旧版本修改：

    main.js
        config: {
            pages: [^]
        }
复制代码

pages中带^符号的为首页。

设置完首页，保存代码后，会直接跳入首页哦～

设置标题、下拉刷新

想为每个页面设置，那么在pages里都有main.js，因此新增：

    export default {
        config: {
            navigationBarTitleText: '列表', //标题
            enablePullDownRefresh: true, //是否下拉、上拉，
        }
    }
复制代码

在vue里：

onPullDownRefresh(){
    //刷新完成后关闭
    wx.stopPullDownRefresh()
}
onReachBottom(){
    this.page ++;
    ...
}
复制代码

动态的设置小程序标题

onLoad(option){
    let title = option.title ? option.title : '**'
    wx.setNavigationBarTitle({
        title: title
    })
}
复制代码

跳转方式

//隐藏当前，跳转至
wx.navigateTo({
    url: '...'
})

//关闭当前页，跳转非tabBar
wx.redirectTo({
    url: '...'
})

//跳转tabBar页面
wx.switchTab({
    url: '...'
})
复制代码

页面传参

传出页面：

   wx.navigateTo({
       url: `/pages/index/main?id=${id}`
   })
 
复制代码

接收页面：

    mounted(){
        const id = this.$root.$mp.query.id
    }
    
    //or
    
    onLoad(option) {
        const id = option.id
    }
复制代码

简单得传参数可以如此，复杂参数的当然就用vuex了。

嵌套的webview

webview使用很简单

<web-view :src="src" ></web-view>
复制代码

嵌套的页面上拉下拉居然有回弹，相当影响体验。因为嵌套的页面不需要滚动，因此直接禁用 touchmove 就好了。禁止网页下拉显示网页域名就解决了。

在需要嵌套页面加上：

window.onload = function () {
  document.body.addEventListener('touchmove', function (e) {
    e.preventDefault()
    //阻止默认的处理方式(阻止下拉滑动的效果)
  }, {passive: false})
}
复制代码

获取微信信息、手机号授权

需要用户点击button获取，wx官方说是不能通过api获取了:

<!--手机号-->
<button v-if="!phoneNumber"open-type="getPhoneNumber "@getphonenumber="getPhoneNumber">手机号</button>
复制代码

<!--微信信息-->
<button  open-type="getUserInfo" lang="zh_CN" @getuserinfo="getUserInfo">微信信息</button>
复制代码

首先需要调用

wx.login({
    success(res){
        //获取res.code
    }
})
复制代码

拿到res.code 和 button的 回调 获取的信息，请求后台的接口解密获取最终的用户信息。

小程序使用bindgetuserinfo、bindgetPhoneNumber，在mpvue里得将bind替换成@

---

微信支付

也需要调用wx.login

//第一步
 wx.login({
    success(res){
        //获取res.code
        ...
    }
})
//第二步

    //通过code，以及后台需要的参数信息，请求后台接口(例如：下单后请求)
    //获取微信支付所需要得参数res
    
//第三步
wx.requestPayment({
    timeStamp: res.timeStamp,
    nonceStr: res.nonceStr,
    package: res.package,
    signType: res.signType,
    paySign: res.paySign,
    success: res => {
        ...
    },
    fail: res => {
        ...
    },
    complete: res => {
        ...
    }
})
复制代码

结语

目前遇到的坑不太多，会继续找坑往里跳^_^。