mpvue
官方文档：http://mpvue.com/mpvue/
mpvue 是一个使用 Vue.js 开发小程序的前端框架。框架基于 Vue.js 核心，mpvue 修改了 Vue.js 的 runtime 和 compiler 实现，使其可以运行在小程序环境中，从而为小程序开发引入了整套 Vue.js 开发体验。
- mp：mini program 的缩写
- mpvue：Vue.js in mini program
如果已经安装了 vue-cli 3，那么需要安装一个桥接工具
# 安装 vue-cli 3 中 init 命令的桥接工具 npm install -g @vue/cli-init # 创建一个基于 mpvue-quickstart 模板的新项目 $ vue init mpvue/mpvue-quickstart my-project 输入各种配置信息后，项目创建成功
# 进入项目 cd my-project # 下载依赖文件 npm install # 运行服务 npm run dev 接下来，你只需要启动微信开发者工具，引入项目即可预览到你的第一个 mpvue 小程序。
打开微信开发者工具 -> 导入项目 -> 选择刚才的mpvue根目录。
在 vscode 或 HBuilderX 中，修改 src 目录下的 vue 文件就可以了。
关闭 eslint
找到 build/webpack.base.conf.js 页面，找到 module 下的 rules 的 eslint-loader，注释掉。
不关闭 eslint 会报各种代码编写的风格错误。
module: { rules: [ /* { test: /\.(js|vue)$/, loader: 'eslint-loader', enforce: 'pre', include: [resolve('src'), resolve('test')], options: { formatter: require('eslint-friendly-formatter') } }, */ tabBar
找到 src/pages/index，完整的复制一份，改名为goods。
找到 src/app.json，找到 tabBar 的 list，把刚才的 goods 添加进去。
找到 src/app.json，找到 pages，把 goods 添加进去。
保存后看看 tabBar 的位置是否有更新，如果没有更新，执行 npm run build
mpvue 的自动编译不够灵敏，所以微信开发工具中如果没有自动更新过来，那么手动点击编译按钮。
在vue项目里，src目录下的app.json文件中，tabBar属性中可以添加新页面（pages中需要注册），然后执行 npm run build，然后微信开发者工具中点击编译，这样就可以在小程序中看到新页面了。
无效的 appJSON"tabBar" 不用管它，它是给别的百度、头条、支付宝小程序用的，微信无法识别它。
请求响应
因为微信小程序要求必须使用 wx.request 发请求，所以无法使用 axios
注意：如果是本地测试，需要将不校验合法域名开启了。
在 pages/goods/goods.js页面中
export default { data() { return { arr : [] } }, async mounted(){ wx.request({ url : 'http://localhost:3000/goods', success : (res)=>{ this.arr = res.data; } }) } } <div v-for="(item,index) in arr" :key="index"> <img :src="'http://localhost:3000/'+item.img" /><br/> {{item.title}}<br /> <button>添加到购物车</button> </div> vuex
在 src 目录下建立 store 目录，里面建立 index.js 文件。
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const store = new Vuex.Store({ state: { goods: [] }, mutations: { add: (state, payload) => { state.goods.push(payload); } }, actions: { add: (context, payload)=>{ context.commit('add', payload); } } }) store.subscribe((mutation, state)=>{ console.log('数据修改了', state.goods) }) export default store 在 src/main.js 文件中
import store from './store/index.js' Vue.prototype.$store = store; 在 src/pages/goods/index.vue 文件中
<button @click="fn(item)">添加到购物车</button> methods:{ fn(item){ this.$store.dispatch('add', item); } } 用 vue 的形式开发微信小程序，如果有哪些功能无法用 vue 做，那就是小程序不支持，换成小程序的写法就好了，比如 axios 换成 wx.request
wepy
WePY 是 腾讯 参考了Vue 等框架对原生小程序进行再次封装的框架。
官方文档：https://tencent.github.io/wepy/document.html#/
npm install wepy-cli -g 创建项目
wepy init standard myproject 创建时，不要用 eslint 和 redux。
cd myproject 安装依赖
npm install 开始实时编译
wepy build --watch 小程序开发工具导入wepy项目
直接导入即可
tabBar
将 src/pages/index.wpy 复制一份，改名为 goods.wpy，或直接写：
<style lang="less"> </style> <template> <view> 商品页123 </view> </template> <script> import wepy from 'wepy' export default class Index extends wepy.page { config = { navigationBarTitleText: '商品页' } components = { } data = { } methods = { } } </script> 在 src/app.wpy 中配置 tabBar
config = { pages: [ 'pages/index', 'pages/goods', ], tabBar:{ list:[ { "text": "首页", "pagePath": "pages/index" }, { "text": "商品", "pagePath": "pages/goods" } ] } } 有些时候不会自动编译，需要命令行执行 wepy build
列表与更新
<view wx:for="{{arr}}" wx:key="index"> {{item.title}} </view> data = { arr : [] } onShow(){ wx.request({ url:'http://localhost:3000/goods', success:(res)=>{ this.setData({ arr : res.data }) } }) } 原文链接：https://blog.csdn.net/lff18277233091/article/details/104438903
