这是我第一次开发小程序，开发的产品是音频类的，在大佬的建议下采用了 mpvue ,一周时间把功能都做出来，由于不太熟悉mpvue和微信小程序，足足用了一周时间来改bug才出来一个能用的版本，在这里整理分享下我开发时遇到的一些问题和给出一些建议。
在 Linux 上开发小程序
在公司电脑装了双系统，日常用的是 Ubuntu 系统，Linux或Mac的开发环境对前端相对来说会友好一些。微信小程序官方的开发者工具只有 Windows 和 Mac 版本，所以这就尴尬了。
不过还好，发现已经有大神在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-weapp 的 dist 目录拷贝到项目的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中的小程序中不能使用，只能
<van-field :value="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 引入：