评论

mpvue开发音频类小程序踩坑和建议

mpvue开发音频类小程序踩坑指南

前言

这是我第一次开发小程序,开发的产品是音频类的,在大佬的建议下采用了mpvue,一周时间把功能都做出来,由于不太熟悉mpvue和微信小程序,足足用了一周时间来改bug才出来一个能用的版本,在这里整理分享下我开发时遇到的一些问题和给出一些建议。

Linux上开发小程序

在公司电脑装了双系统,日常用的是Ubuntu系统,Linux或Mac的开发环境对前端相对来说会友好一些。微信小程序官方的开发者工具只有WindowsMac版本,所以这就尴尬了。

不过还好,发现已经有大神在GitHub上做了Linux的支持,推荐给大家:Linux微信web开发者工具
根据教程安装使用即可,使用时就用./bin/wxdt命令打开。不过用了几天后面觉得不太方便,就索性切回Windows系统用官方最新的版本了。

封装wx.request为Promise

wx.request用于发起http请求,但平时习惯了Promise的写法,所以还是封装一下这个方法为Promise的形式。
我看很多小程序会使用fly这个库。

但个人觉得发起请求不需要那么强大的功能,小程序本身就应该是一个轻量级的东西,引入一个库可能会导致项目打包变大,可能让小程序更卡,所以本着能自己写就自己写吧的心态,索性自己封装一下算了。

src/utils,新建一个request.js:

const apiUrl = 'https://your server.com/api/'
const request = (apiName, reqData, isShowLoading = true) => {
  // 某些请求可能不需要显示loading
  if (isShowLoading) {
    wx.showLoading({
      title: '正在努力加载中',
      mask: true
    })
  }

  return new Promise(function (resolve, reject) {
    wx.request({
      url: apiUrl + apiName,
      method: 'POST',
      data: reqData,
      header: {
        'content-type': 'application/json' // 默认值
      },
      success (res) {
        if (res.data.code === 0) {
          // 与后端约定code=0时才是正常的
          resolve(res)
        } else {
          reject(res)
        }
      },
      fail (err) {
        reject(err)
      },
      complete (res) {
        wx.hideLoading()
      }
    })
  })
}

export default request

当然这是个简化版的,我实际项目中还会在初始化时加入一些token之类的参数,大家能看明白是这样封装成Promise的就可以啦。

使用vant-weapp

小程序已经支持了npm安装,但不太会弄。还是按网上方法,将项目clone下来放进static目录下。

git clone https://github.com/youzan/vant-weapp.git

然后将vant-weappdist目录拷贝到项目的static目录下(尽可能精简,删掉一些奇奇怪怪的如.github的东西,所以直接使用dist目录),改名为vant(也可以不改名)。全局使用时,可以在app.json引入:

  "usingComponents": {
    "van-button": "/static/vant/button/index",
    "van-field": "/static/vant/field/index"
  },

注意:需要打开微信开发者工具中的ES6转ES5功能

一开始以为使用起来和web端的没啥差别,但没想到那么麻烦。比如:在vue中是可以使用v-model的,但在mpvue中的小程序中不能使用,只能

"password" type="password" @change="pwdChange" input-class="myClass" />

而且不能随意灵活添加class修改组件的样式,需要vant组件支持提供外部样式才可修改,比如上面的van-field是通过input-class来添加样式控制的,很不方便。而且某些内部样式由于没有外部样式表,根本改不了。

综上: 在微信小程序使用第三方组件库不太方便,样式修改比较麻烦,如果产品是有UI设计时,尽量不使用,有时候自己实现样式可能更快,而且项目体积更小。

使用vuex

mpvue官方的快速模板中是将vuex放在counter 这个page目录下,可能习惯了vue官方写法的很多同学(包括我)不太喜欢,所以最好就改为vuex官方的写法。

在src目录下建一个store的文件夹,分别建以下文件:


项目不太复杂时不建议使用modules,使用起来比较麻烦。

贴一下index.js的代码,其他的actions.js,getters.js按官方的写法就好啦。

import Vue from 'vue'
import Vuex from 'vuex'
import * as actions from './actions'
import * as getters from './getters'
import state from './state'
import mutations from './mutations'
import createLogger from 'vuex/dist/logger'

Vue.use(Vuex)

const debug = process.env.NODE_ENV !== 'production'

export default new Vuex.Store({
  actions,
  getters,
  state,
  mutations,
  strict: debug,
  plugins: debug ? [createLogger()] : []
})

vuex/dist/logger是vuex在开发环境可以自动打印日志的工具,debug比较方便,建议使用。
然后在src/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({
  store
})
app.$mount()

这样就可以在项目中正常使用啦,完全支持mapState,mapActions,mapGetters的写法,比如在pages/index/index.vue中使用: