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 相关文章推荐
js本身的局限性 别让javascript做太多事
Mar 23 Javascript
基于Jquery的实现回车键Enter切换焦点
Sep 14 Javascript
js getBoundingClientRect() 来获取页面元素的位置
Nov 25 Javascript
jQuery1.6 类型判断实现代码
Sep 01 Javascript
document.createElement()用法及注意事项(ff下不兼容)
Mar 13 Javascript
javascript屏蔽右键代码
May 15 Javascript
javascript使用appendChild追加节点实例
Jan 12 Javascript
jQuery ui实现动感的圆角渐变网站导航菜单效果代码
Aug 26 Javascript
JavaScript知识点总结(四)之逻辑OR运算符详解
May 31 Javascript
基于Phantomjs生成PDF的实现方法
Nov 07 Javascript
纯js实现html转pdf的简单实例(推荐)
Feb 16 Javascript
基于iview的router常用控制方式
May 30 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
Snoopy类使用小例子
2008/04/15 PHP
使用PHP会话(Session)实现用户登陆功能
2013/06/29 PHP
PHP仿博客园 个人博客(1) 数据库与界面设计
2013/07/05 PHP
C# WinForm中实现快捷键自定义设置实例
2015/01/23 PHP
在Yii2中使用Pjax导致Yii2内联脚本载入失败的原因分析
2016/03/06 PHP
php实现xml与json之间的相互转换功能实例
2016/07/07 PHP
php compact 通过变量创建数组
2016/11/15 PHP
php登录超时检测功能实例详解
2017/03/21 PHP
JavaScript模块随意拖动示例代码
2014/05/27 Javascript
javascript属性访问表达式用法分析
2015/04/25 Javascript
javascript实现五星评价代码(源码下载)
2015/08/11 Javascript
JQuery和PHP结合实现动态进度条上传显示
2016/11/23 Javascript
Extjs表单输入框异步校验的插件实现方法
2017/03/20 Javascript
JS自定义滚动条效果简单实现代码
2020/10/27 Javascript
vue指令只能输入正数并且只能输入一个小数点的方法
2018/06/08 Javascript
微信小程序实现自定义modal弹窗封装的方法
2018/06/15 Javascript
angularJs使用ng-repeat遍历后选中某一个的方法
2018/09/30 Javascript
详解处理Vue单页面应用SEO的另一种思路
2018/11/09 Javascript
jQuery操作动画完整实例分析
2020/01/10 jQuery
[02:40]DOTA2英雄基础教程 先知
2013/11/29 DOTA
详解python的ORM中Pony用法
2018/02/09 Python
Django 登陆验证码和中间件的实现
2018/08/17 Python
Python3简单实现串口通信的方法
2019/06/12 Python
详解Python中的正斜杠与反斜杠
2019/08/09 Python
Pytorch 高效使用GPU的操作
2020/06/27 Python
python爬虫看看虎牙女主播中谁最“顶”步骤详解
2020/12/01 Python
HTML中meta标签及Keywords
2020/04/15 HTML / CSS
食堂员工工作职责
2013/12/18 职场文书
2014年五一促销活动方案
2014/03/09 职场文书
听课评语大全
2014/04/30 职场文书
村级个人对照检查材料
2014/08/22 职场文书
实习生矿工检讨书
2014/10/13 职场文书
求职自我推荐信
2015/03/24 职场文书
用Python写一个简易版弹球游戏
2021/04/13 Python
详解Python牛顿插值法
2021/05/11 Python
JS中如何优雅的使用async await详解
2021/10/05 Javascript