赞
踩
使用Hbuilderx工具创建项目,
使用Hbuilderx工具创建项目,选择uni-ui项目模版,VUE3
uniapp官网: 全局文件--pages.json页面路由 -- tabBar
项目文件:pages.json--文件底部添加,list配置2-5
- "tabBar": {
- "color": "#7A7E83",
- "selectedColor": "#3cc51f",
- "borderStyle": "black",
- "backgroundColor": "#ffffff",
- "list": [{
- "pagePath": "pages/index/index",
- "iconPath": "static/c1.png",
- "selectedIconPath": "static/c2.png",
- "text": "首页"
- }, {
- "pagePath": "pages/index2/index",
- "iconPath": "static/c3.png",
- "selectedIconPath": "static/c4.png",
- "text": "页面"
- }]
- }

注:配置tabBar时所加页面一定要在pages中注册,否则会报错
报错:app.json: "tabBar"["pagePath"]: "pages/index2/index" need in ["pages"]
app.json文件 -- pages页面配置项
uniapp官网: 全局文件--pages.json页面路由 -- globalStyle
app.json文件 -- globalStyle
store-->index.js
- // 页面路径:store/index.js
- import { createStore } from 'vuex'
-
- // import moduleA from '@/store/modules/moduleA'
-
- const store = createStore({
- state:{},
- getters: {},
- mutations: {},
- actions: {},
- modules: {
- // moduleA
- }
- })
-
- export default store

main.js 文件挂载全局
Vue2/Vue3配置根据文档来修改
uni-scss文件
api -- reuest.js
- const http = {
- // baseUrl 地址
- baseUrl: 'http://192.168.0.1:28002',
-
- // 请求方法
- request(config) {
- // config:请求配置对象,具体参照uniapp文档
-
- config = beforeRequest(config)
-
- // 请求地址拼接
- config.url = this.baseUrl + config.url
-
- // 异步请求
- return new Promise((resolve, reject) => {
- uni.request(config).then(res => { // 成功
- let [error, resp] = res
- // 响应拦截
- const response = beforeResponse(resp)
- resolve(response)
- }).catch(err => { // 失败
- errorHandle(err)
- reject(err)
- })
- })
-
- },
- get(url, data, auth) {
- /*
- url:接口地址
- data:查询参数
- auth:请求是否携带token进行认证(true/false)
- method:请求方式
- */
- return this.request({
- url: url,
- data: data,
- auth: auth,
- timeout:10000,
- method: 'GET'
- })
- },
- post(url, data, auth) {
- /*
- url:接口地址
- data:请求体参数
- auth:请求是否携带token进行认证(true/false)
- method:请求方式
- */
- return this.request({
- url: url,
- data: data,
- auth: auth,
- timeout:10000,
- method: 'POST'
- })
- },
- put(url, data, auth) {
- /*
- url:接口地址
- data:请求体参数
- auth:请求是否携带token进行认证(true/false)
- method:请求方式
- */
- return this.request({
- url: url,
- data: data,
- auth: auth,
- timeout:10000,
- method: 'PUT'
- })
- },
- delete(url, data, auth) {
- /*
- url:接口地址
- auth:请求是否携带token进行认证(true/false)
- method:请求方式
- */
- return this.request({
- url: url,
- auth: auth,
- timeout:10000,
- method: 'DELETE'
- })
- }
- }
-
- // 请求拦截器
- const beforeRequest = (config) => {
- // 请求之前拦截操作
- console.log('请求拦截器', config)
- return config
- }
-
- // 响应拦截器
- const beforeResponse = (response) => {
- // 请求之后操作
- console.log('响应拦截器', response)
- return response
- }
-
- // 请求异常处理器
- const errorHandle = ((err) => {
- console.log('请求异常', err)
- })
-
- export default http

api -- index.js
- // 封装具体接口调用
- import http from 'request.js'
-
- export default{
- // 登陆接口
- login(params){
- return http.post('/api/users/login',params)
- }
- // 注册接口
-
- // 刷新token
-
- // 获取用户信息
-
- // 获取信息
- }

挂载全局$api方法
- // 导入封装的请求对象
- import api from '@/api/index.js'
- // 将请求对象设置为全局属性
- Vue.prototype.$api = api
使用
- async fn(){
- const response = await this.$api.login()
- }
使用模块,写法用法变化
- api -- index.js
-
- // 封装具体接口调用
- import http from 'request.js'
-
- import user from './modules/user.js'
- import goods from './modules/goods.js'
-
- export default{
- user,
- goods
- }
使用
- async fn(){
- const response = await this.$api.user.login()
- }
uni.login 微信登录
saveLoginInfo(){} 存储登陆信息 存储token和refresh,userInfo isAuth 是否登录
- // 数据持久化,存储到缓存中
- uni.setStorage({
- key: 'token',
- data: userInfo.token
- });
- uni.setStorage({
- key: 'isAuth',
- data: isAuth
- });
- uni.setStorage({
- key: 'refresh',
- data: userInfo.refresh
- });
-
- // 异步
- uni.setStorageSync('token', userInfo.token);

- // 请求拦截器
- const beforeRequest = (config) => {
- // 请求之前拦截操作
- console.log('请求拦截器', config)
- config.header = {}
- if (config.auth) {
- // 请求头中添加token
- if (uni.getStorageSync('token')) {
- // Authorization Bearer 根据情况修改
- config.header['Authorization'] = 'Bearer' + uni.getStorageSync('token')
- } else {
- // 为登陆则跳转登陆 重定向
- uni.navigateTo({
- url: '/pages/index/index'
- })
- }
-
- }
- return config
- }

- // 响应拦截器
- const beforeResponse = (response) => {
- // 请求之后操作
- console.log('响应拦截器', response)
- // 判断请求返回的状态码
- if(response.status !== 200 && response.status !== 201 && response.status !== 204){
- // 给出对应的提示
- if(response.data.error){
- uni.showToast({
- title:response.data.error.toString(),
- icon:'none',
- duration:2000
- })
- }
- }
- return response
- }

App.vue ,根据需求更改
- <script>
- import {mapMutations} from 'vuex'
- export default {
- onLaunch: function() {
- console.warn('当前组件仅支持 uni_modules 目录结构 ,请升级 HBuilderX 到 3.1.0 版本以上!')
- console.log('App Launch')
- },
- onShow: function() {
- console.log('App Show')
-
- // 读取本地缓存,存储到VUEX中
- uni.getStorageSync('userInfo')
-
- // 调用保存登陆信息 操作
- // 存储相应的token,isAuth,userInfo等数据
- },
- onHide: function() {
- console.log('App Hide')
- },
- methods:{
- ...mapMutations(['保存登陆信息'])
- }
- }
- </script>

将登录时存储的数据清空,跳转相应的登陆页面或者首页
调用相应的修改接口,拿到成功状态后更新VUEX用户信息及本地Storage存储的用户信息
- // 这里是vue2的写法,需要vue3请自行更换
- // 获取用户信息
- getWXCode() {
- return new Promise((ress, rej) => {
- // wx.login()
- uni.login({
- success: (res) => {
- res.code && ress(res.code)
- },
- fail: (error) => {}
- })
- })
- },
-
- //等三方微信登录 信息补充
- // 兑换code
- // 初始化 获取code 凭证
- wxLogin() {
- if (!this.checked) {
- // 是否勾选
- this.$utils.toast(0, '请先阅读并同意服务协议和隐私政策!')
- return
- }
-
- this.$utils.toast(1, "加载中")
- let that = this
- //#ifdef H5
- // #endif
- //#ifdef MP-WEIXIN
- this.getWXCode().then(res => {
- console.log("getWXCode", res)
- //成功后可根据实际情况自行处理
- // 判断用户是否注册,存储用户数据...
- })
- // #endif
- },

- // 此块代码放在vuex中(store.js)
- // 支付接口
- pay({
- commit
- }, param) {
- // console.log("param", param)
- return new Promise((resolve, reject) => {
- $utils.toast(1, "支付中")
-
- //#ifdef MP-WEIXIN
- const payParam = {
- appId: param.appId,
- nonceStr: param.nonceStr,
- package: param.packageVal,
- timeStamp: param.timeStamp,
- signType: param.signType,
- paySign: param.paySign,
- }
- //#endif
- //#ifdef MP-WEIXIN
- // console.log('MP-WEIXIN')
- uni.requestPayment({
- provider: 'wxpay',
- ...payParam,
- success: function(res) {
- console.log("支付成功---", res)
- // $utils.toast(1, "支付成功")
- setTimeout(() => {
- // $utils.toast(2)
- resolve(res)
- }, 1000)
- },
- fail: function(res) {
- console.log("支付失败---", res)
- // $utils.toast(0, "支付失败")
- resolve(res)
- },
- complete: function(res) {
- console.log("支付过程结束", res)
- // resolve(res)
- }
- });
- //#endif
- //#ifndef MP-WEIXIN
- WeixinJSBridge.invoke('getBrandWCPayRequest', {
- "appId": param.appId, //公众号名称,由商户传入
- "timeStamp": param.timeStamp, //时间戳
- "nonceStr": param.nonceStr, //随机串
- "package": param.package, //扩展包
- "signType": param.signType, //微信签名方式:MD5
- "paySign": param.paySign //微信签名
- }, function(respay) {
- // console.log('res', respay)
- if (respay.err_msg === "get_brand_wcpay_request:ok") {
- // 支付完成
- uni.showToast({
- title: "支付成功",
- icon: "none",
- duration: 2000
- })
- callback()
- } else if (respay.err_msg === "get_brand_wcpay_request:cancel") {
- $utils.toast(0, "取消支付")
- } else if (respay.err_msg === "get_brand_wcpay_request:fail") {
- $utils.toast(0, "支付失败")
- }
- }, function(err) {
- $utils.toast(0, err)
- })
- //#endif
- })
- }

注:不全!需要其他的请自行搜索!
注:根据后台需要提示接口错误还是前端自行提示!
- // 接口返回提示
- requestCodeTips(code, msg) {
- let errorrMessage = ''
- switch (Number(code)) {
- case 400:
- errorrMessage = '错误请求'
- break;
- case 401:
- errorrMessage = '未授权,请重新登录'
- break;
- case 403:
- errorrMessage = '拒绝访问'
- break;
- case 404:
- errorrMessage = '请求错误,未找到该资源'
- break;
- case 405:
- errorrMessage = '请求方法未允许'
- break;
- case 408:
- errorrMessage = '请求超时'
- break;
- case 500:
- errorrMessage = '服务器端出错啦'
- break;
- case 501:
- errorrMessage = '网络未实现'
- break;
- case 502:
- errorrMessage = '网络错误'
- break;
- case 503:
- errorrMessage = '服务不可用'
- break;
- case 504:
- errorrMessage = '网络超时'
- break;
- case 505:
- errorrMessage = 'http版本不支持该请求'
- break;
- default:
- errorrMessage = '连接错误'
- }
-
- this.toast(0, `${code}-${errorrMessage}-${msg?msg:''}`)
- },

- data: {
- msg: null, // 消息提示
- time: 300, // 时间
- hideLoadTimes: null, // 清除加载中的定时器
- showToastTimes: null, // 提示框的定时器
- },
-
- /**
- * * 提示信息
- * state: 类型 (0 提示框 1 showLoading 2 hideLoading )
- * title: 标题
- * duration: 时间
- * icon: 图标
- */
- async toast(state = 0, title = '', duration = 3000, icon = "none") {
- let errMsg = this.data.msg ? this.data.msg.errMsg : null
-
- if (state == 0) { //
- // 隐藏加载中的定时器还在
- if (this.data.hideLoadTimes || errMsg == 'showLoading:ok') {
- // 延后显示
- clearTimeout(this.data.showToastTimes)
- this.data.showToastTimes = setTimeout(async () => {
- this.data.msg = await uni.showToast({
- icon,
- title,
- duration,
- });
- this.data.showToastTimes = null
- }, this.data.time + 200)
- } else { // 隐藏加载中的定时器不能存在
- this.data.msg = await uni.showToast({
- icon,
- title,
- duration,
- });
- }
- } else if (state == 1) {
- this.data.time = this.data.time >= 900 ? 900 : this.data.time + 300
- this.data.msg = await uni.showLoading({
- title,
- mask: true
- });
- } else if (state == 2) {
- clearTimeout(this.data.hideLoadTimes)
- this.data.hideLoadTimes = setTimeout(async () => {
- this.data.msg = await uni.hideLoading();
- this.data.time = 300
- this.data.msg = null //
- this.data.hideLoadTimes = null
- }, this.data.time)
- }
- },

注:内容不全,缺少的话需要客官自行查询!谨慎食用哦!!!
相关文章:
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。