uniapp+uview
一、项目准备
1、创建uniapp项目
打开hbuilderx->文件->新建->项目->选择uni-app->输入项目名->选择项目目录->默认模板->创建
2、引入uview插件
* 点击【https://ext.dcloud.net.cn/plugin?id=1593】进入
* 点击【使用HBuilderX导入插件】
import uView from '@/uni_modules/uview-ui'
Vue.use(uView)
@import '@/uni_modules/uview-ui/theme.scss';
<style lang="scss">
/* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
@import "@/uni_modules/uview-ui/index.scss";
</style>
3、封装网络请求
// 此vm参数为页面的实例，可以通过它引用vuex中的变量
module.exports = (vm) => {
// 初始化请求配置
uni.$u.http.setConfig((config) => {
/* config 为默认全局配置*/
config.baseURL = 'https://api.shop.eduwork.cn'; /* 根域名 */
config.timeout = 60000;
return config
})
// 请求拦截
uni.$u.http.interceptors.request.use((config) => { // 可使用async await 做异步操作
// 初始化请求拦截器时，会执行此方法，此时data为undefined，赋予默认{}
config.data = config.data || {}
// 根据custom参数中配置的是否需要token，添加对应的请求头
// 可以在此通过vm引用vuex中的变量，具体值在vm.$store.state中
// config.header.Authorization = "Bearer " + vm.$store.state.userInfo.token
return config
}, config => { // 可使用async await 做异步操作
return Promise.reject(config)
})
// 响应拦截
uni.$u.http.interceptors.response.use((response) => {
// 自定义参数
const custom = response.config?.custom
if (response.statusCode !== 200) {
// 如果没有显式定义custom的toast参数为false的话，默认对报错进行toast弹出提示
if (custom.toast !== false) {
uni.$u.toast(data.message)
}
// 如果需要catch返回，则进行reject
if (custom?.catch) {
return Promise.reject(data)
} else {
// 否则返回一个pending中的promise，请求不会进入catch中
return new Promise(() => {})
}
}
return response.data === undefined ? {} : response.data
}, (response) => {
// 对响应错误做点什么 （statusCode !== 200）
return Promise.reject(response)
})
}
// 引入请求封装，将app参数传递到配置中
require('./config/request.js')(app)
const http = uni.$u.http
// post请求，获取菜单
export const postMenu = (params, config = {}) => http.post('/ebapi/public_api/index', params, config)
// get请求，获取菜单，注意：get请求的配置等，都在第二个参数中，详见前面解释
export const getMenu = (params, config = {}) => http.get('/ebapi/public_api/index', { params, ...config })
export const eduwork = () => http.get('/api/index')
4、vuex使用
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
let lifeData = {};
try {
// 尝试获取本地是否存在lifeData变量，第一次启动APP时是不存在的
lifeData = uni.getStorageSync('lifeData');
} catch (e) {
}
// 需要永久存储，且下次APP启动需要取出的，在state中的变量名
let saveStateKeys = ['vuex_user', 'vuex_token'];
// 保存变量到本地存储中
const saveLifeData = function(key, value) {
// 判断变量名是否在需要存储的数组中
if (saveStateKeys.indexOf(key) != -1) {
// 获取本地存储的lifeData对象，将变量添加到对象中
let tmp = uni.getStorageSync('lifeData');
// 第一次打开APP，不存在lifeData变量，故放一个{}空对象
tmp = tmp ? tmp : {};
tmp[key] = value;
// 执行这一步后，所有需要存储的变量，都挂载在本地的lifeData对象中
uni.setStorageSync('lifeData', tmp);
}
}
const store = new Vuex.Store({
// 下面这些值仅为示例，使用过程中请删除
state: {
// 如果上面从本地获取的lifeData对象下有对应的属性，就赋值给state中对应的变量
// 加上vuex_前缀，是防止变量名冲突，也让人一目了然
vuex_user: lifeData.vuex_user ? lifeData.vuex_user : { name: '明月' },
vuex_token: lifeData.vuex_token ? lifeData.vuex_token : '',
// 如果vuex_version无需保存到本地永久存储，无需lifeData.vuex_version方式
vuex_version: '1.0.1',
},
mutations: {
$uStore(state, payload) {
// 判断是否多层级调用，state中为对象存在的情况，诸如user.info.score = 1
let nameArr = payload.name.split('.');
let saveKey = '';
let len = nameArr.length;
if (nameArr.length >= 2) {
let obj = state[nameArr[0]];
for (let i = 1; i < len - 1; i++) {
obj = obj[nameArr[i]];
}
obj[nameArr[len - 1]] = payload.value;
saveKey = nameArr[0];
} else {
// 单层级变量，在state就是一个普通变量的情况
state[payload.name] = payload.value;
saveKey = payload.name;
}
// 保存变量到本地，见顶部函数定义
saveLifeData(saveKey, state[saveKey])
}
}
})
export default store
import { mapState } from 'vuex'
import store from "@/store"
// 尝试将用户在根目录中的store/index.js的vuex的state变量，全部加载到全局变量中
let $uStoreKey = [];
try {
$uStoreKey = store.state ? Object.keys(store.state) : [];
} catch (e) {
}
module.exports = {
created() {
// 将vuex方法挂在到$u中
// 使用方法为：如果要修改vuex的state中的user.name变量为"史诗" => this.$u.vuex('user.name', '史诗')
// 如果要修改vuex的state的version变量为1.0.1 => this.$u.vuex('version', '1.0.1')
this.$u.vuex = (name, value) => {
this.$store.commit('$uStore', {
name,
value
})
}
},
computed: {
// 将vuex的state中的所有变量，解构到全局混入的mixin中
...mapState($uStoreKey)
}
}
let vuexStore = require("@/store/$u.mixin.js");
Vue.mixin(vuexStore);
import store from '@/store';
const app = new Vue({
store,
...App
})
<template>
<view>
<view>
版本号为：{{vuex_version}}
</view>
<view>
<<琵琶行>>的作者为{{vuex_user.name}}
</view>
<u-button @click="modifyVuex">修改变量</u-button>
</view>
</template>
<script>
export default {
methods: {
modifyVuex() {
this.$u.vuex('vuex_version', '1.0.1');
// 修改对象的形式，中间用"."分隔
this.$u.vuex('vuex_user.name', '诗圣');
}
}
}
</script>
5、请求和路由拦截
const install = (Vue, vm) => {
vm.$u.permission = () => {
if (!vm.vuex_token) {
// 获取当前页面栈的实例
const page = getCurrentPages().pop()
vm.$u.route({
type: "redirectTo",
url: 'pages/login/login',
params: {
redirect: page.route + vm.$u.queryParams(page.options)
}
})
return true
}
return false
}
}
export default { install }
// 未登录请求和路由拦截
import permission from '@/config/permission.js'
Vue.use(permission, app)
// 页面加载生命周期
onLoad() {
if (uni.$u.permission()) return
}
module.exports = (vm) => {
// 响应拦截
uni.$u.http.interceptors.response.use((response) => {
return response.data || {}
}, (response) => {
// 对响应错误做点什么 （statusCode !== 200）
if (response.statusCode == 401) {
vm.$u.permission()
}
return Promise.reject(response)
})
}
function analyzeUrl(url = "") {
const search = url.split('?')
const options = {}
search[1]?.split('&').forEach(li => {
const ele = li.split('=')
options[ele[0]] = ele[1]
})
return {
route: search[0],
options
}
}
const page = getCurrentPages().pop()
const analyzed = analyzeUrl(page.options.redirect)
uni.$u.route({
type: "reLaunch",
url: analyzed.route || "/",
params: analyzed.options
})
