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
})
}
})
}
