mpvue 是一个使用 Vue.js 开发小程序的前端框架。框架基于 Vue.js 核心，mpvue 修改了 Vue.js 的 runtime 和 compiler 实现，使其可以运行在小程序环境中，从而为小程序开发引入了整套 Vue.js 开发体验
开发这款小程序主要是为了体验mpvue框架的开发流程，所以在部分界面功能上借鉴了其他开源项目(mpvue-node)，对此表示非常感谢!
由于涉及个人小程序未允许内容：文娱-资讯（含有评论功能）,所有小程序没有发布成功，只能在本地浏览
本文主要是为了记录在使用mpvue开发时所遇到的一些地方
1. vuex 的使用
//在src/main.js 中
import store from './store/index';
Vue.prototype.$store = store;
复制代码2. 提示：单个 JS 文件的体积超过了 500KB，则会跳过 ES6 转 ES5 以及代码压缩的处理
在开发过程中，微信开发工具会提醒你提示：单个 JS 文件的体积超过了 500KB，则会跳过 ES6 转 ES5 以及代码压缩的处理; 其实这个不需要处理，因为mpvue的构建工具已经有 ES6 转 ES5 和压缩功能，可以关闭开发者工具的这些功能issues
目前mpvue不支持分包加载，如果需要使用可参考590 672
3.接口请求失败
小程序开发所用的接口，均来源于cNode社区，在开发中如果提示你接口请求失败，可能是你没有设置request合法域名，在小程序开公众平台->开发设置->服务器域名中设置request合法域名
4.this指向问题
在开发中，有时会调用小程序的官网api，会导致this指向出错获取不到真确数据
//例如
export default {
data(){
return{
accesstoken:null
}
},
methods:{
dd(){
//
let vue = this;
wx.showModal({
content:'这是弹窗'，
showCancel: false,
confirmText: "确定",
complete() {
//扫描二维码
wx.scanCode({
success(res) {
//这里的this会指向wx，需要使用上面定义的vue
vue.accesstoken = res.result;
}
});
}
})
}
}
}
复制代码5.mpvue 不支持部分复杂的 JavaScript 渲染表达式
也就是你在模板中不能直接只有methods中方法
//这样写页面无法渲染
<div>{{getTimeInfo(item.create_at)}}</div>
复制代码需要这样写
//template
<div>{{item.createTime}}</div>
//js
//需要在获取数据的时候，处理数据
this.list = this._normalizeTopics(res)
_normalizeTopics(json) {
return json.map(item => {
return Object.assign(item, {
createTime: formatTime(item.create_at),
});
});
}
复制代码6.created生命周期
所有页面的created会在小程序加载的时候一起执行，不管页面你是否打开，
如果需要在页面加载的时候执行操作，可利用小程序本身的生命周期
async onLoad(){}
复制代码7.路由及参数
mpvue中不能使用vue-router，所有需要用小程序自身的api进行页面跳转，如
wx.navigateTo({
url: 'test?id=1'
})
复制代码如果需要获取路由参数，有下面两种方式
async onLoad(option) {
//通过option参数获取
let id = option.id;
//通过this.$root.$mp.query方式获取
let id = this.$root.$mp.query.id
}
复制代码8.列表渲染时需增加索引，否则会发生警告
<div v-for="(item,index) in list" :key="index">
复制代码9. 改变page 标签的css属性
在开发时，有时需要设置页面100%的高度,在平时开发时，只需要
page{
height:100%
}
复制代码但是在mpvue中开始不起作用，后来发现是scoped属性的原因去掉即可
<style lang="scss"></style>
复制代码预览
目前小程序初始的样子已经开发完成，但是还有很多待完善的地方，由于首次开发小程序，所有在代码上还存在很多不足之处，项目纯属自娱自乐，勿喷！！！
项目地址mpvue-node