mpvue+vuex搭建小程序详细教程(完整步骤)_vue.js

├── src // 我们的项目的源码编写文件│ ├── components // 组件目录│ ├── common //静态资源│ │ └── font // iconfont图标│ │ └── img // 图片│ │ └── js // js│ │ │└── mixins.js // js│ │ │└── tips.js // js│ │ │└── utils.js // js│ │ └── scss // scss样式│ │ │└── base.scss // 自定义样式│ │ │└── icon.scss // iconfont图标│ │ │└── index.scss // 基础汇总│ │ │└── mixin.scss // 混合等工具样式│ │ │└── reset.scss // 初始化样式│ │ │└── variable.scss // 全局主题色样式│ ├── http //http请求配置文件│ │ └── api // 接口调用文件│ │ └── config //fly 配置文件│ ├── pages //项目页面目录│ ├── components //项目复用组件目录│ ├── store //状态管理 vuex配置目录│ │ └── actions.js //actions异步修改状态│ │ └── getters.js //getters计算过滤操作│ │ └── mutation-types.js //mutations 类型│ │ └── mutations.js //修改状态│ │ └── index.js //我们组装模块并导出 store 的地方│ │ └── state.js //数据源定义│ ├── untils //工具函数目录│ │ └── index.js│ ├── App.vue // APP入口文件│ ├── main.js // 主配置文件│ ├── config.js // host等配置

# 全局安装 vue-cli$ npm install -g vue-cli # 创建一个基于 mpvue-quickstart 模板的新项目，记得选择安装vuex$ vue init mpvue/mpvue-quickstart mpvue-demo # 安装fly$ npm i flyio --save # 安装依赖$ cd mpvue-demo$ npm i# 启动构建$ npm run dev

/*  fly配置文件  by:David 2018.6.14*///引入 flyvar Fly = require("flyio/dist/npm/wx")var fly = new Fly;import config from '@/config'//配置请求基地址// //定义公共headers// fly.config.headers={xx:5,bb:6,dd:7}// //设置超时fly.config.timeout = 20000;// //设置请求基地址fly.config.baseURL = config.host//添加请求拦截器fly.interceptors.request.use((request) => {  //给所有请求添加自定义header  request.headers["X-Tag"] = "flyio";  //打印出请求体  // console.log(request.body)  //终止请求  //var err=new Error("xxx")  //err.request=request  //return Promise.reject(new Error(""))  //可以显式返回request, 也可以不返回，没有返回值时拦截器中默认返回request  return request;})//添加响应拦截器，响应拦截器会在then/catch处理之前执行fly.interceptors.response.use(  (response) => {    //只将请求结果的data字段返回    return response.data  },  (err) => {    //发生网络错误后会走到这里    //return Promise.resolve("ssss")  })// Vue.prototype.$http=fly //将fly实例挂在vue原型上export default fly

import fly from './config'import qs from 'qs'import config from '../config'const host = config.host;const appKey = config.appKey;const appid = config.appid;/** * 接口模版====post * * export const test = params => {return fly.post(`${root}/xx/xx`, qs.stringify(params))}; * * 接口模版====get * * export const test1 = function(){return fly.get(`${root}/api/getNewsList`)} * * * 用法： * 在 页面用引入 test * import {test} from '../../http/api.js' * * test(params).then(res=>{ console.log(res) }) */// 通用的get请求export const get = (params) => {  return fly.get(`${host}${params.url}`, qs.stringify(params.data))};// 通用的post请求export const post = (params) => {  return fly.post(`${host}${params.url}`, qs.stringify(params.data))};// 封装的登录请求，根据后台接收方式选择是否加qs.stringifyexport const login = params => {  return fly.post('/login', params)};

const host = 'http://xxx.xxx';const appid = '';const appKey = '';const config = { host, appid,  appKey,}export default config

│ ├── store   //状态管理 vuex配置目录│ │ └── actions.js  //actions异步修改状态│ │ └── getters.js  //getters计算过滤操作│ │ └── mutation-types.js  //mutations 类型│ │ └── mutations.js  //修改状态│ │ └── index.js  //我们组装模块并导出 store 的地方│ │ └── state.js  //数据源定义

import store from './store/index'Vue.prototype.$store=store;

const state={ openId: '',}export default state

export const SET_OPEN_ID = 'SET_OPEN_ID'

import * as types from './mutation-types'const matations={ /**  * state:当前状态树  * v: 提交matations时传的参数  */ [types.SET_OPEN_ID] (state, v) {  state.openId = v; }, } export default matations

import Vue from 'vue';import Vuex from 'vuex';import state from './state'import mutations from './mutations' Vue.use(Vuex); export default new Vuex.Store({ state, mutations,})

 <script>  import { login } from '@/http/api'  import { mapState, mapMutations } from 'vuex'  import { SET_OPEN_ID } from './store/mutation-types'  const App = getApp();  export default {    data: {      globalData: {}    },    computed: {      ...mapState([        'openId'      ])    },    methods: {      ...mapMutations({        setOpenId: 'SET_OPEN_ID'      }),      // 使用了async+await的语法，用同步的方式写异步脚本      async login(code) {        let _this = this;        try {          const resData = await login({ code: code });          if (resData.returnCode == 200) {            _this.setOpenId(resData.data.accountId)          }        } catch (err) {          console.error(err);        }      },      // 拆分wx.login，结构更清晰      _login() {        let _this = this;        wx.login({          success(res) {            if (res.code) {              console.log('wx.login成功,code:', res.code);              let code = res.code;              _this.login(code)            } else {              _this.$tips.toast('微信登录失败')            }          }        });      }    },    onLaunch() {      this._login()    }  }</script>

// 引入vuex-persistedstate，将vuex的数据持久化到本地export default new Vuex.Store({  state,  mutations,  getters,  actions,  plugins: [    createPersistedState({      storage: {        getItem: key => wx.getStorageSync(key),        setItem: (key, value) => wx.setStorageSync(key, value),        removeItem: key => {}      }    })  ]})