mpvue入坑记录

MarJet
811 阅读5分钟

使用MpVue开发小程序记录

        当下轻应用，遍布各大互联网公司。像百度、支付宝、微信、字节都是有自己的小程序形式，就现在QQ也推出了小程序的形式，像这种轻应用又不需要安装，就能打开，而且也类似了app形式。当然相对于形式也不能说不会开发吧，该学的还是得学。所以现在也有很多基于框架延伸而出的打包生成多个平台的小程序，例如 基于react的taro、还有wepy、mpvue目前应该这个三个最火热了，然后我尝试了mpvue开发了过程不说坑还是有的。自己也是一步步解决，所以决定记录一下。

  1. 首先就搭建了项目使用相关环境自己也是全部尝试了一遍安装了scss环境以及vuex，好像有解决的vue-router自己没有尝试.

    1.1 首先讲下scss的mixin我在全局的时候引入在页面页面中能用，为什么在组件中用不了这是啥我也不是清楚。还有就是我在scss中使用font字体的问题，在此中我通过本地的方式引入发现就是加载不了，后来寻找方案在交流群中得知是得将文件放在static文件下并且使用绝对路径的方式引用，是有效不报错了。但是小程序打包又上传了不了，后来我就直接干脆放服务器上了，再通过引用，这下总没问题了。

    1.2 再次就是vuex在main.js中引用在vue的原型上加而不是像vue-cli中使用一样 直接写在new VUE中。

    在main.js中定义

    import Vue from 'vue'
import App from './App'
import store from './store'

Vue.config.productionTip = false
App.mpType = 'app'
Vue.prototype.$store = store

const app = new Vue(App)
app.$mount()

    在页面中使用

    this.$store.state

    也可以使用vuex的mapState引用某个state

    // 头部导入
import { mapState } from 'vuex'

// 在计算属性中

...mapState([
  'carBrandCityPrev' // 对应stae中定义的
]),

  2. 自定义TabBar自己刚开始使用也是一头水雾，微信小程序更新的很快。我之前写的一个小程序用的是原生开发的时候，那时候还没有什么定义TabBar啊、导航栏、组件啊什么的。后来我也是看了下官方的demo以及github中mpuve项目的issue中找解决方案，最终还是直接上手搞了一波。中途也是坎坎坷坷。

    贴个自定义tabbar地址: github.com/jetBn/mpvue…

  3. 小程序中获取地理位置授权问题，只有在第一次进入的会提示是否授权如果拒绝了授权第二进入都不会授权，都会走授权位置的fail方法,所以这个原因问题。我们只能是通过微信的获取用户的当前设置检查 wx.getSettingapi去检查当前是否授权，通过此方法放在fail方法中检测当前是否开启授权地理位置，如果没有重新调用地理位置授权的方法。

    相关检查是否授权方法：

       // fn指相关重新授权的方法
     export function checkGetLocationPermison (fn) {
       wx.getSetting({
         success: (res) => {
           const status = res.authSetting
           if (!status['scope.userLocation']) {
             wx.showModal({
               title: '是否授权当前位置',
               content: '需要获取您的地理位置，请确认授权，否则地图功能将无法使用获取不了优惠券信息',
               success: (subRes) => {
                 if (subRes.confirm) {
                   wx.openSetting({
                     success: (subRes) => {
                       if (subRes.authSetting['scope.userLocation'] === true) {
                         wx.showToast({
                           title: '授权成功',
                           icon: 'success',
                           duration: 1000
                         })
                         fn()
                       } else {
                         wx.showToast({
                           title: '授权失败',
                           icon: 'success',
                           duration: 1000
                         })
                       }
                     }
                   })
                 }
               }
             })
           }
         },
         fail: () => {
           wx.showToast({
             title: '调用授权窗口失败',
             icon: 'success',
             duration: 1000
           })
         }
       })
     }

  4. 在mpvue是axios全局处理请求返回值以及请求头设置等等。在npm i axios qs后新建request.js文件，引入qs处理axios中post请求，然后微信小程序中是使用wx.request发送请求的并不是直接使用axios就可以的，所以使用axios的adapter 属性进行我们的请求操作。

    // 创建axios实例
const Axios = axios.create({
  baseURL: '', // 设置请求域名地址
  timeout: 1000 * 60 * 10, // 设置请求超时时间
  responseType: 'json' // 设置返回值类型
})


// 然后使用Axios实例的adapter进行封装微信请求
Axios.defaults.adapter = (config) => {
  return new Promise((resolve, reject) => {
    let data = config.method === 'get' ? config.params : qs.stringify(config.params)
    wx.request({
      url: config.url,
      method: config.method,
      header: {'Content-type': 'application/x-www-form-urlencoded'},
      data,
      success: (res) => (resolve(res)),
      fail: (err) => (reject(err))
    })
  })
}

// 请求拦截
Axios.interceptors.request.use((request) => {
  return request
}, (error) => {
  return Promise.reject(error)
})

// 响应拦截
Axios.interceptors.response.use((response) => {
    return response
}, (error) => {
     return Promise.reject(error)
})

// 导出响应的方法
export function fetch (options) {
  return new Promise((resolve, reject) => {
    Axios(options)
      .then(response => {
        resolve(response)
      })
      .catch(error => {
        reject(error)
      })
  })
}

  5. 相关自定义头部导航栏根据相关设备判断设置高度，相关计算是顶部状态栏的高度加上相关定义的高度。

    //微信获取相关设备信息的API
wx.getSystemInfo({
  success (system) {
    // console.log(`system:`, system)
    self.statusBarHeight = system.statusBarHeight
    self.platform = system.platform
    const windowHeight = system.windowHeight
    let platformReg = /ios/i
    if (platformReg.test(system.platform)) {
      self.titleBarHeight = 44  // iso的高度
    } else {
      self.titleBarHeight = 48  //android 的高度
    }
    self.navBarHeight = self.statusBarHeight + self.titleBarHeight
  }
})

  6. mpvue中使用组件式封装 然后是内容使用插槽形式，在使用组件的使用插槽内的内容数据更新页面不会实时更新 。（父组件插槽内容块中使用的也是组件封装的组件）（问题1）。然后我使用了 不封装组件 直接写页面样式点击组件的事件会触发插槽中的事件？？？（问题2） 事件跟插槽中的事件不在同一个div中。最后就是不用插槽才解决了上述问题1，2

  7. npm run dev 会卡在node build/dev-server.js wx 最后我自己也是在官方的github仓库中的issu中找到解决方案在build文件夹的build.js中require('./check-versions')()注释掉然后也就能正常运行了。具体的好像是在经过check-versions函数的时候执行特别的慢。

       最后总结下MpVue这个相对于vue针对于小程序的框架，大部分都是使用vue相关语法所以对于熟悉vue的来说还是很容易上手的。开发效率也还可以。感觉会使用vue再次熟悉微信小程序官方的API开发效率还是很高的，不过还是有挺多坑的，我这边坑可能是没有遇到很多。很幸运，具体的相关的语法情况可以对应官方网站的介绍情况。

       最后附上相关网站地址：

       官方网站：mpvue.com

       github相关仓库地址： github.com/Meituan-Dia…

avatar
文章
阅读
粉丝