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 相关文章推荐
JavaScript 学习笔记(十五)
Jan 28 Javascript
HTTP 304错误的详细讲解
Nov 13 Javascript
ff下JQuery无法监听input的keyup事件的解决方法
Dec 12 Javascript
js闭包实例汇总
Nov 09 Javascript
jquery+ajax实现跨域请求的方法
Jan 20 Javascript
利用JavaScript的AngularJS库制作电子名片的方法
Jun 18 Javascript
用JavaScript来美化HTML的select标签的下拉列表效果
Nov 17 Javascript
VUEJS实战之构建基础并渲染出列表(1)
Jun 13 Javascript
使用cookie绕过验证码登录的实现代码
Oct 12 Javascript
js删除数组中的元素delete和splice的区别详解
Feb 03 Javascript
新手必须知的Node.js 4个JavaScript基本概念
Sep 16 Javascript
实例分析Array.from(arr)与[...arr]到底有何不同
Apr 09 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
php与XML、XSLT、Mysql的结合运用实现代码
2009/11/19 PHP
PHP中ini_set与ini_get用法实例
2014/11/04 PHP
php字符串过滤与替换小结
2015/01/26 PHP
基于PHP实现等比压缩图片大小
2016/03/04 PHP
Laravel5框架添加自定义辅助函数的方法
2018/08/01 PHP
Ucren Virtual Desktop V2.0
2006/11/07 Javascript
IE无法设置短域名下Cookie
2010/09/23 Javascript
JS滚轮事件onmousewheel使用介绍
2013/11/01 Javascript
jQuery制作的别致导航有阴影背景高亮模式窗口
2014/04/15 Javascript
JS组件Bootstrap Table表格多行拖拽效果实现代码
2015/12/08 Javascript
jquery按回车键实现表单提交的简单实例
2016/05/25 Javascript
基于MVC5和Bootstrap的jQuery TreeView树形控件(二)之数据支持json字符串、list集合
2016/08/11 Javascript
基于JavaScript实现验证码功能
2017/04/01 Javascript
使用jQuery卸载全部事件的思路详解
2017/04/03 jQuery
详解vue-cli 构建Vue项目遇到的坑
2017/08/30 Javascript
vue的token刷新处理的方法
2018/07/17 Javascript
解决Vue使用swiper动态加载数据,动态轮播数据显示白屏的问题
2018/09/27 Javascript
JavaScript Date对象功能与用法学习记录
2020/04/28 Javascript
[04:52]2015国际邀请赛LGD战队晋级之路
2015/08/14 DOTA
使用Python编写一个简单的tic-tac-toe游戏的教程
2015/04/16 Python
【Python】Python的urllib模块、urllib2模块批量进行网页下载文件
2016/11/19 Python
Python存取XML的常见方法实例分析
2017/03/21 Python
详解Python是如何实现issubclass的
2019/07/24 Python
pytorch 更改预训练模型网络结构的方法
2019/08/19 Python
如何快速理解python的垃圾回收机制
2020/09/01 Python
详解Python中的GIL(全局解释器锁)详解及解决GIL的几种方案
2021/01/29 Python
IE浏览器单独写CSS样式的几种方法
2014/10/14 HTML / CSS
Tretorn美国官网:瑞典外套和鞋类品牌,抵御风雨
2018/07/19 全球购物
数控专业毕业生求职信范文
2013/09/21 职场文书
廉洁使者实施方案
2014/03/29 职场文书
规范化管理年活动总结
2014/08/29 职场文书
公司宣传语大全
2015/07/13 职场文书
团结友爱主题班会
2015/08/13 职场文书
团委副书记工作总结
2015/08/14 职场文书
Windows下redis下载、redis安装及使用教程
2021/06/02 Redis
在NumPy中深拷贝和浅拷贝相关操作的定义和背后的原理
2022/04/14 Python