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


Posted in Javascript onSeptember 30, 2018

本文介绍了mpvue+vuex搭建小程序详细教程(完整步骤),分享给大家,具体如下:

源码

mpvue-vuex-demo

构成
1、采用mpvue 官方脚手架搭建项目底层结构
2、采用Fly.js 作为http请求库
3、引入mpvue-router-patach,以便在mpvue小程序中能使用vue-router的写法

目录结构

├── 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等配置

快速创建一个mpvue项目

# 全局安装 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

1、配置公共设置

src/http/config.js

/*
  fly配置文件
  by:David 2018.6.14
*/
//引入 fly
var 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

2、配置个性设置

src/http/api.js

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.stringify
export const login = params => {
  return fly.post('/login', params)
};

host配置

config.js

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

配置vuex
1、目录结构

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

2、main.js中引入store, 并绑定到Vue构造函数的原型上,这样在每个vue的组件都可以通过this.$store访问store对象。

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

3、定义初始变量store/state.js

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

4、mutation类型

方便检测错误和书写,一般写方法

export const SET_OPEN_ID = 'SET_OPEN_ID'

5、store/mutations.js

写处理方法

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

6、store/index.js

汇总配置

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,
})

使用vuex

ps:没有用到复杂计算,因此没有引入getters.js和actions.js

栗子:App.vue

<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状态持久化(缓存到本地)

store/index.hs的export default中添加配置:

// 引入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 => {}
      }
    })
  ]
})

 Tips

  • 遇到安装依赖后,运行项目,但dist下没有app.js等入口文件的,将package.json里的mpvue-loader的版本前的^去掉,删除依赖,重新安装即可
  • 在onLoad周期内执行获取数据等初始化操作,因为mpvue的created钩子执行要早得多(小程序运行时)

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Jquery中getJSON在asp.net中的使用说明
Mar 10 Javascript
Prototype源码浅析 String部分(四)之补充
Jan 16 Javascript
js和jquery设置disabled属性为true使按钮失效
Aug 07 Javascript
IE6-IE9中tbody的innerHTML不能赋值的解决方法
Sep 26 Javascript
angular.bind使用心得
Oct 26 Javascript
javascript生成随机数方法汇总
Nov 12 Javascript
jQuery防止重复绑定事件的解决方法
May 14 Javascript
Vue.js教程之计算属性
Nov 11 Javascript
基于jQuery实现滚动刷新效果
Jan 09 Javascript
JQuery查找子元素find()和遍历集合each的方法总结
Mar 07 Javascript
使用JavaScript实现链表的数据结构的代码
Aug 02 Javascript
JavaScript实现移动端带transition动画的轮播效果
Mar 24 Javascript
mpvue项目中使用第三方UI组件库的方法
Sep 30 #Javascript
mpvue将vue项目转换为小程序
Sep 30 #Javascript
angularJs中ng-model-options设置数据同步的方法
Sep 30 #Javascript
vue-cli 脚手架基于Nightwatch的端到端测试环境的过程
Sep 30 #Javascript
对angularJs中ng-style动态改变样式的实例讲解
Sep 30 #Javascript
使用angularjs.foreach时return的问题解决
Sep 30 #Javascript
angular将html代码输出为内容的实例
Sep 30 #Javascript
You might like
全国FM电台频率大全 - 14 江西省
2020/03/11 无线电
用PHP即时捕捉PHP中的错误并发送email通知的实现代码
2013/01/19 PHP
表单提交错误后返回内容消失问题的解决方法(PHP网站)
2015/10/20 PHP
PHP内核探索之变量
2015/12/22 PHP
php自定义分页类完整实例
2015/12/25 PHP
js 面向对象的技术创建高级 Web 应用程序
2010/02/25 Javascript
javascript深入理解js闭包
2010/07/03 Javascript
遨游,飞飞,IE,空中网 浏览器无提示关闭方法
2011/07/11 Javascript
jquery实现商品拖动选择效果代码(自写)
2013/05/28 Javascript
jquery中animate动画积累的解决方法
2013/10/05 Javascript
Jquery ajax执行顺序 返回自定义错误信息(实例讲解)
2013/11/06 Javascript
javascript 闭包详解
2015/02/15 Javascript
jQuery实现高亮显示网页关键词的方法
2015/08/07 Javascript
简单谈谈Javascript中类型的判断
2015/10/19 Javascript
很不错的两款Bootstrap Icon图标选择组件
2016/01/28 Javascript
jquery对象和DOM对象的相互转换详解
2016/10/18 Javascript
DOM 事件的深入浅出(一)
2016/12/05 Javascript
Javascript的this用法
2017/01/16 Javascript
vue.js提交按钮时进行简单的if判断表达式详解
2018/08/08 Javascript
vue 组件之间事件触发($emit)与event Bus($on)的用法说明
2020/07/28 Javascript
Python3.6实现连接mysql或mariadb的方法分析
2018/05/18 Python
Python常用库Numpy进行矩阵运算详解
2020/07/21 Python
Python在线和离线安装第三方库的方法
2020/10/31 Python
餐饮业的创业计划书范文
2013/12/26 职场文书
经典导游欢迎词大全
2014/01/16 职场文书
正风肃纪剖析材料
2014/02/18 职场文书
我爱我家教学反思
2014/05/01 职场文书
责任担保书范文
2014/05/21 职场文书
专科应届毕业生求职信
2014/06/04 职场文书
小学校长汇报材料
2014/08/20 职场文书
司法局2014法制宣传日活动总结
2014/11/01 职场文书
2014年党支部书记工作总结
2014/12/04 职场文书
2014年办公室文秘工作总结
2014/12/09 职场文书
Python opencv缺陷检测的实现及问题解决
2021/04/24 Python
Pytorch 如何实现常用正则化
2021/05/27 Python
Python+SeaTable实现计算两个日期间的工作日天数
2022/07/07 Python