mpvue开发cnode社区问题记录

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