mpvue开发小程序总结

一，mpvue的目标是：在未来最理想的状态下，可以一套代码可以直接跑在多端：WEB、微信小程序、支付宝小程序、Native（借助weex）。不过由于各个端之间都存在一些比较明显的差异性，从产品的层面上讲，不建议这么做，这个框架的官方他们对它的期望的也只是开发和调试体验的一致。

二，mpvue开发小程序的优点：

     1，彻底的组件化开发能力：提高代码复用性

     2，完整的 Vue.js 开发体验

     3，方便的 Vuex 数据管理方案：方便构建复杂应用

     4，快捷的 webpack 构建机制：自定义构建策略、开发阶段 hotReload

     5，支持使用 npm 外部依赖

     6，使用 Vue.js 命令行工具 vue-cli 快速初始化项目

     7，H5 代码转换编译成小程序目标代码的能力

 三，mpvue搭建项目流程：

     1，全局安装vue-cli

$ npm install --global vue-cli

    2，创建一个基于 mpvue-quickstart 模板的新项目

vue init mpvue/mpvue-quickstart mpvue-project

    3，进入我的项目，安装依赖

cd mpvue-project
npm install  //npm，cnpm都可以的

    4，启动构建

npm run dev

这样一个简单的项目框架就已经构建成功了。

生成的基本页面和目录结构

四，目录结构介绍：

dist  您启动和打包应使用程序时,(编译成小程序代码的地方)

src  vue代码处

src/components 封装组件存放处

src/index/main.js 页面标题，最后解析成index.json

main.js    项目配置文件，config字段就是小程序的全局配置

index.html  挂载入口

utils/index.js  工具函数

五，请求方法的封装：

因为小程序，登录后请求数据需要加入用户的唯一标识token，登录后会把用户唯一标识存入缓存或者设置全局变量，但在mpvue中设置全局变量在main.js里面，会存在一个时间差。更多的时候会把token存入缓存，这个时候封装一个请求方法就非常的必要，避免每次都要从缓存里面拿数据：

​
import Fly from 'flyio/dist/npm/wx'

const flyio = new Fly;
export const Http_URL = '-------------------------';

export function ajaxData(conf) {
  wx.showLoading({
    title: '加载中',
    mask:true
  });
  let user = wx.getStorageSync('token');
  conf.type = conf.type ? conf.type : 'post';
  conf.data.token = user ;
  
  flyio.request(Http_URL + conf.url, conf.data , {
    method: conf.type,
  }).then(d => {
    wx.hideLoading();
    conf.callback(d.data);
  }).catch((e) => 
  console.log(e),
   wx.showToast({
     title: '请求失败！',
     icon: 'none',
     duration: 2000
   })
  )
}

​

把url和封装的请求方法，挂载到原型里面，用的时候特别方便

 _this.$Http({
          url:'member/kdorder_add',
          type:'GET',
          data:{},
          callback(res){
               //请求得到数据
          }
})

六，使用weui作为ui框架

七，封装登录弹出获取用户信息组件

八，监听事件，当用户点击别人分享的二维码进入小程序，分享二维码者可以得到赏金，也就是分享功能。在登录的时候把别人的用户id作为参数传到后台。