溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文介紹了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
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
