基于mpvue框架搭建微信小程序

简介

mpvue 是一个使用 Vue.js 开发小程序的前端框架。框架基于 Vue.js 核心，mpvue 修改了 Vue.js 的 runtime 和 compiler 实现，使其可以运行在小程序环境中，从而为小程序开发引入了整套 Vue.js 开发体验。

小程序文档

mpvue文档

vue文档

flyio文档(微信ajax封装)

一、mpvue安装

# 全局安装 vue-cli
$ npm install --global vue-cli

# 创建一个基于 mpvue-quickstart 模板的新项目
$ vue init mpvue/mpvue-quickstart my-project

# 安装依赖
$ cd my-project
$ npm install
# 启动构建
$ npm run dev

接下来，你只需要启动 微信开发者工具 ，引入项目dist目录即可预览到你的第一个 mpvue 小程序。

二、子页面路由配置

mpvue因为新加子页面的配置很繁琐，而且新增一个都要重启构建,非常不方便。

解决办法：使用 mpvue-entry 构建页面路由

npm install mpvue-entry -D
删除app.json文件里的page属性，
新建文件router/index.js

webpack.base.conf.js文件改写内容

const MpvueEntry = require('mpvue-entry')

const entry = MpvueEntry.getEntry("src/router/index.js")
module.exports = {
  entry:entry,
  ...
}
 plugins: [
    new MpvueEntry(),
    ...
    ])
  ]

删除对应文件main.js文件
重启项目，都要编译router/index.js 文件，不然app.json不会有pages属性

三、整合vuex+持久化vuex-persistedstate

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

vuex-persistedstate 刷新不丢失数据

npm i vuex vuex-persistedstate -S

# store/modules/test.js

const states = {};
const getters = {};
const mutatons = {};
const actions = {};


export default {
  states,
  mutatons,
  getters,
  actions
};

#store/index.js

import Vue from "vue";
import Vuex from "vuex";

// 持久层 刷新不会丢失数据
import createPersistedState from "vuex-persistedstate";

import test from "./modules/test";

Vue.use(Vuex);

export default new Vuex.Store({
  modules: {
    test
  },
  plugins: [
    createPersistedState({
      storage: {
        getItem: key => wx.getStorageSync(key),
        setItem: (key, value) => wx.setStorageSync(key, value),
        removeItem: key => {
        }
      }
    })
  ]
});

# app/main.js

import store from "./store";

Vue.prototype.$store = store;

四、flyio 整合微信小程序网络请求

npm i flyio qs -S

# fly/index.js

import Vue from "vue"
import Fly from "flyio/dist/npm/wx";
import qs from "qs";
import { ajaxBaseUrl } from "./config";

// https://wendux.github.io/dist/#/doc/flyio/interceptor 文档
const fly = new Fly();

console.log(fly)

// 配置请求基地址


// 设置超时
fly.config.timeout = 20000;

// 设置请求基地址
fly.config.baseURL = ajaxBaseUrl;


// 定义公共headers
fly.config.headers["Content-Type"] = "application/json;charset=UTF-8";


//添加请求拦截器
fly.interceptors.request.use((config) => {

  //给所有请求添加自定义header 比如token
  // request.headers["X-Tag"] = "flyio";

  if (config.form === true) {
    // form表单请求
    config.headers["Content-Type"] = "application/x-www-form-urlencoded;charset=utf-8";
    config.data = qs.stringify(config.data);
  } else {
    config.data = json.stringify(config.data);
  }

  //可以显式返回request, 也可以不返回，没有返回值时拦截器中默认返回request
  return config;

});

//添加响应拦截器，响应拦截器会在then/catch处理之前执行
fly.interceptors.response.use(
  (response) => {
    //只将请求结果的data字段返回
    return response.data;
  },
  (err) => {
    //发生网络错误后会走到这里
    return Promise.reject(err);
  }
);
Vue.prototype.$fly = fly; //将fly实例挂在vue原型上

export default fly;

# app/main.js
import fly from "./fly"

五、css使用stylus构建语法

npm i stylu stylus-loader -D

六、使用第三方组件

# router/index.js
  {
    path: "pages/index/index",
    config: { // page.json 的内容
      navigationBarTitleText: "首页",
      //引入UI组件
      usingComponents: {
        "i-button": "../../static/iview/button/index"
      }
    }
  },