mpvue+vant踩坑笔记和完成template模板

这段时间boss要我写一个小程序，因为公司的前端技术栈为Vue，因此我坚决果断就选择了mpvue来减小学习成本，UI框架则是选择了有赞的Vant。在此记录下这次踩坑的心得，以及顺带写了一个vue的模板😍，方便下次开发小程序的时候不用再去折腾环境以及webpack的一些配置。后面会送上GitHub地址 😏

此文档假定你已经了解vue、webpack以及node和npm一些基础知识

快速了解小程序

• 小程序官方文档

• 小程序开发工具

• mpvue介绍

• Vant框架

---

小程序没有单页面应用的一些特性，mpvue以及一些插件只是封装。开发小程序最重要是开发的项目要尽可能简单，能两个页面就完成的尽可能不要开发多页面，功能尽可能简洁，突出重要功能。并且也能加快微信官方的审核速度。

---

安装环境（直接拉取GitHub上的模板，不用再去折腾，请先安装vue-cli）

vue init Mercer-Lee/mpvue-template 你的项目名字

• 若是没有什么特殊配置，一路无脑回车就行，而后依次执行命令

• 打开微信开发者工具，以下图操做，本地预览项目，能正常显示没有报错就是跑通环境了，可使用vscode等工具编写代码，微信开发者工具做为预览和调试的工具，改动都是热更新的

• 把vant文件下载（就在这个项目这里，自行下载）放到安装的dist文件夹目录下，这样才能使用

• src下文件存放路径说明：

• Vuex和各类封装的工具函数要想使用以下：

  import store from './vuex'
  import MpvueRouterPatch from 'mpvue-router-patch'
  import httpLint from './utils/httpLint'
  import request from './utils/request'
  
  Vue.prototype.$httpLint = httpLint
  Vue.prototype.$store = store
  Vue.use(MpvueRouterPatch)
  Vue.prototype.$request = request
  复制代码

• 路由配置详解：

mpvue的一些注意事项：

• 生命周期钩子:

  你进入项目的时候全部页面的created钩子都会触发，并且页面跳转的时候不会再触发， 全部用小程序自带的onload()代替。好比要接收路由跳转时的带过来的keyword参数，例子以下：

mounted：你若是从页面B返回页面A，页面A的mounted钩子不会触发，由于页面没有 从新加载（mpvue并无真正的组件挂载的完整生命周期）。因此请用小程序的onShow代替

最坑的是不要用v-show这个指令来指定渲染元素， 不然没法完全隐藏掉元素，请用v-if代替，不用太在乎v-if重复渲染带来的性能问题

由于是热更新，因此每次更改配置文件或者eslint检测到代码不规范，就不会执行热更新，这时候去控制台检查下错误就行， 是配置文件更改了须要从新执行npm run dev

Vant的一些注意事项：

不少组件中诸如bind:search要改成@search，以及例如搜索组件中的input的 alue没法实现数据双向绑定，获取值的方法以下：

---

小程序的注意事项：

一、小程序中的图片资源若是前缀没有http或者https是没法显示图片的，不过在本地的微信开发者工具能够预览到，因此请检验服务器的图片资源，好比写个httpLint.js

二、就算是在mpvue框架上咱们能写浏览器的标准标签，可是咱们没法操做dom。

三、不建议使用小程序的scroll-view来作视图滚动到底部触发的请求加载，建议使用onReachBottom( )来监听。好比我要在视图滚动到底部时发送一个请求，例子以下：

四、提交审核的时候请先看关注下当时微信官方审核的一些规则和注意事项以及提醒，通常1——3天就会有审核结果。

这次也算是一个小踩坑，可是小程序的开发整体给人的开发体验仍是很是很差的🤷，并且不少缘由也是利益相关🤔，毕竟这个最后仍是依赖于微信平台😅，对了，最后发下这个模板的 GitHub地址😘。