mpvue + vuex搭建小程序详细教程
源码
mpvue-vuex-demo
构成
1、采用mpvue 官方脚手架搭建项目底层结构
2、采用Fly.js 作为http请求库
3、引入mpvue-router-patach,以便在mpvue小程序中能使用vue-router的写法
当当当当!mpvue2更新啦,感动,我爱vue(雾)
为了庆祝一波,作者决定近期进行2.0版本的mpvue-vuex-demo的开发,预计将有以下改动:
- 适配最新的mpvue等所有依赖版本~~
- 大幅优化api部分的代码封装,使其更接近真实的生成环境,解决api权限和封装代码臃肿丑陋的问题。个人认为,对前端新人来说,会是一个很好学习和增强代码能力的体验
- 下下版本更新计划:增加分支,新增自定义navgation(更个性)、自定义tabbar的功能(个性化+伪tabbar热更新)
- 待补充…欢迎issue提建议意见
咳咳,因在下时间不足及对mpvue开发团队莫得信心,这个级就先不升了,就是这么任性
建议要做小程序多端开发的同学使用taro,不做多端使用原生小程序
目录结构
├── 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) => {//给所有请求添加自定义headerrequest.headers["X-Tag"] = "flyio";//打印出请求体// console.log(request.body)//终止请求//var err=new Error("xxx")//err.request=request//return Promise.reject(new Error(""))//可以显式返回request, 也可以不返回,没有返回值时拦截器中默认返回requestreturn 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钩子执行要早得多(小程序运行时)
mpvue踩坑及相关教程见:mpvue
源码在我的github上,链接在文章开头
如有帮助,欢迎star,不胜感激~
欢迎加入vue学习交流填坑q群:585472963,群很活跃,氛围很好~
mpvue + vuex搭建小程序详细教程相关推荐
- mpvue+mpvueWeUI搭建小程序
1.初始化mpvue框架 vue init mpvue/mpvue-quickstart 项目名 2.进入项目文件夹,并安装依赖包 cd 项目文件夹 npm install 3.启动项目 npm ru ...
- 微信小程序详细教程(建议收藏)
一.小程序的开发准备 1. 小程序的安装与创建 第一步 打开小程序官网 第二步 找到开发管理,找到开发设置,下面有一个AppID,复制即可,后面开发小程序需要用 新建项目 ,需要先下载微信开发工具下载 ...
- 公众号怎么关联多个不同主体的小程序详细教程
公众号"关联小程序"能力全面开放,公众号可以关联不同主体的小程序了. 主要有这三个变化 一.关联小程序的主体不再受限 以前,小程序和公众号的主体必须一致才可以关联. 现在,关联小程 ...
- 微信小程序开发语言(微信小程序开发教程)详细步骤
微信小程序开发语言 开发微信小程序用什么语言 1.微信小程序开发所需要的语言比较特别,首先介绍一下需要使用到的文件类型大致分为:WXML(WeiXin Mark Language 微信标记语言).WX ...
- 在线特长培训机构搭建小程序报名平台教程!
如何制作一个特长教育机构的在线小程序报名平台?其实很简单,只需选择一个能在线搭建小程序的平台工具,就能借助乔-拓云工具轻松在线搭建一个小程序,只需跟着小编下面的教学步骤操作就能完成特长教育机构的在线报 ...
- nodejs+express搭建小程序后台服务器
本文使用node.js和express来为小程序搭建服务器.node.js简单说是运行在服务端的javascript:而express是node.js的一个Web应用框架,使用express可以非常简 ...
- 基于mpvue的微信小程序全栈保姆式教程一
预览最终效果https://github.com/FFGF/XCDHBook/blob/master/static/XCDHBook.gif顺便推荐一个视频转gif的好工具https://ezgif. ...
- 点击button后改变文字_27. 教你零基础搭建小程序:小程序的常见组件—button
筒子们,这一章接着讲Button 标签. 开放能力的属性 button标签的开放能力是指open-type 属性. 其中,这个属性的合法值包括如下: 这一部分呢,需要分为两个方式来演示. 一是可在模拟 ...
- 基于mpvue开发微信小程序,入门开发步骤
接下来..... 1. 初始化一个 mpvue 项目 现代前端开发框架和环境都是需要 Node.js 的,如果没有的话,请先下载 nodejs 并安装. 然后打开命令行工具: # 1. 先检查下 No ...
最新文章
- .net core快速上手
- 语义分析的一些方法(上篇)
- Linux下使用MySQL——忘记root密码及修改MySQL默认编码
- python基础教程:while循环与运算符和编码
- Cambridge eap essay 1
- PaddlePaddle训练营——公开课——AI核心技术掌握——第1章迈入现代人工智能的大门——Modern AI骨架脉络
- 万物皆可“小程序”——迟到的iOS 14之猜想
- Linux网络编程 之 TCP编程(七)
- android 队列执行动画,Android 重学系列 渲染图层-图元缓冲队列初始化
- Java 多线程--- 创建线程、Thread类、synchronized
- lammps教程:fix setforce命令详解
- 逻辑回归:详细建模流程与例子代码
- 华为机试od社招刷题攻略-目录
- 【懒懒的Python学习笔记六】
- 阿里云 云速美站 --快速搭建个人网站
- 51信用卡通过网银来获得账单的安全问题
- Ubuntu安装配置串口通讯工具minicomcutecom
- 思科配置终端、路由器、交换机和服务器
- SPI、I2C、UART的区别和联系
- 无法往开启kerberos的zookeeper上注册服务_《坦克世界》不删档测试开启公告——测试服玩家福利原来在这里...
热门文章
- 34、HTML制做奖多多采购页面(仅供参考)
- Web代理(HTTP代理)
- python抠图代码_五行 Python 代码实现批量抠图
- 消息队列-简单介绍Java消息队列,什么是消息队列,作用以及常见消息队列
- 33省市出台区块链专项政策,有地方拿户口、百万奖金抢人
- 0基础小白学3D建模需要多久,有没有3dmax快速建模插件来点技巧
- Python简单爬虫(以爬取豆瓣高分图书为例)
- 【ansys】如何隐藏网格?不显示网格?在仿真结果中隐藏网格?
- 某程序员发现 CSDN官方“漏洞”,立省¥10000+,抓紧薅吧
- 海淘 亚马逊 冻结账号 怎么办?