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利用Array.splice实现Array的insert/remove
Jan 13 Javascript
google jQuery 引用文件,jQuery 引用地址集合(jquery 1.2.6至jquery1.5.2)
Apr 24 Javascript
jquery attr 设定src中含有&amp;(宏)符号问题的解决方法
Jul 26 Javascript
javascript之bind使用介绍
Oct 09 Javascript
jQuery 菜单随滚条改为以定位方式(固定要浏览器顶部)
May 24 Javascript
JS小功能(offsetLeft实现图片滚动效果)实例代码
Nov 28 Javascript
一个JavaScript用逗号分割字符串实例
Sep 22 Javascript
JavaScript框架是什么?怎样才能叫做框架?
Jul 01 Javascript
发布订阅模式在vue中的实际运用实例详解
Jun 09 Javascript
vue学习笔记之给组件绑定原生事件操作示例
Feb 27 Javascript
微信小程序之滑动页面隐藏和显示组件功能的实现代码
Jun 19 Javascript
Vue如何将页面导出成PDF文件
Aug 17 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
层叠菜单的动态生成
2006/10/09 PHP
基于Snoopy的PHP近似完美获取网站编码的代码
2011/10/23 PHP
MyEclipse常用配置图文教程
2014/09/11 PHP
ThinkPHP采用原生query实现关联查询left join实例
2014/12/02 PHP
php实现将任意进制数转换成10进制的方法
2015/04/17 PHP
[原创]保存的js无法执行的解决办法
2007/02/25 Javascript
Javascript 中文字符串处理额外注意事项
2009/11/15 Javascript
JQuery一种取同级值的方式(比如你在GridView中)
2012/03/15 Javascript
javascript自动改变文字大小和颜色的效果的小例子
2013/08/02 Javascript
javascript 数组操作详解
2015/01/29 Javascript
Javascript变量的作用域和作用域链详解
2015/04/02 Javascript
XMLHttpRequest Level 2 使用指南
2016/08/26 Javascript
原生js实现简单的模态框示例
2017/09/08 Javascript
浅谈Vue.js中ref ($refs)用法举例总结
2017/12/19 Javascript
js+canvas实现滑动拼图验证码功能
2018/03/26 Javascript
JS中数组实现代码(倒序遍历数组,数组连接字符串)
2019/12/29 Javascript
Js Snowflake(雪花算法)生成随机ID的实现方法
2020/08/26 Javascript
[02:22:36]《加油!DOTA》总决赛
2014/09/19 DOTA
[02:23]2018DOTA2亚洲邀请赛趣味视频——反应测试
2018/04/04 DOTA
[02:37]TI8勇士令状不朽珍藏II视频展示
2018/06/23 DOTA
python解析html开发库pyquery使用方法
2014/02/07 Python
python实现基本进制转换的方法
2015/07/11 Python
谈谈python中GUI的选择
2018/03/01 Python
python 字典修改键(key)的几种方法
2018/08/10 Python
Python3实现的判断环形链表算法示例
2019/03/07 Python
在Python中COM口的调用方法
2019/07/03 Python
Django和Flask框架优缺点对比
2019/10/24 Python
解决Python Matplotlib绘图数据点位置错乱问题
2020/05/16 Python
python函数map()和partial()的知识点总结
2020/05/26 Python
澳洲小众品牌的集合网站:BNKR
2018/02/23 全球购物
创优争先心得体会
2014/09/11 职场文书
公司财务经理岗位职责
2015/04/08 职场文书
预防艾滋病宣传活动总结
2015/05/09 职场文书
道歉信怎么写
2015/05/12 职场文书
优秀毕业生主要事迹材料
2015/11/04 职场文书
错误码NET::ERR_CERT_DATE_INVALID证书已过期解决方法?
2022/07/07 数码科技