uniapp开发app总结
创始人
2025-05-29 01:59:59
  1. 自定义底部导航栏在手机app端显示不出来

原因:原生的uni-tabbar在手机端app没有完全隐藏,导致遮住了自定义的底部导航栏

解决:把uni-tabbar隐藏就行了

.uni-app--showleftwindow + .uni-tabbar-bottom {display: none;
}
  1. video在手机端app层级过高,无论底部导航栏怎么设置z-index都会被video盖住

使用插件video组件会覆盖页面其他非原生组件的设计替代方案示例 - DCloud 插件市场

  1. uniapp配置mock

下载mock

npm install better-mock

在根目录下创建mock目录,并且在mock下创建index.js

index.js 内容

import Mock from 'better-mock/dist/mock.mp.js'
let Random = Mock.Random
//注册全局mock可生成随机数据
Random.extend({//生成0-32的随机数字 number: function () {return Math.floor(Math.random() * 32)},//生成0或1 指代性别gender: function() {return Math.round(Math.random())}
})
const modules = import.meta.glob("../mock/*.js", {eager: true
});
const mockModules = [];
function param2Obj(url) {const search = url.split('?')[1]if (!search) {return {}}return JSON.parse('{"' +decodeURIComponent(search).replace(/"/g, '\\"').replace(/&/g, '","').replace(/=/g, '":"').replace(/\+/g, ' ') +'"}')
}
function XHR2ExpressReqWrap(respond) {return function(options) {let result = nullif (respond instanceof Function) {const { body, type, url } = optionsresult = respond({method: type,body: JSON.parse(body),query: param2Obj(url)})} else {result = respond}return Mock.mock(result)}
}
Object.keys(modules).forEach(key => {if (key === './index.js') return;modules[key].default.forEach(item => {let {url,type,response} = item;// 注册所有的mock服务Mock.mock(import.meta.env.VITE_FRONT_END_BASE+ url, type, XHR2ExpressReqWrap(response));})
});export default Mock

在main.js注册mock

import Vue from 'vue'
import mock from './mock/index.js'const app = new Vue({mock
})

在mock下面创建模拟请求js就行了

比如创建一个获取10条数据的js

import Mock from 'better-mock/dist/mock.mp.js'
let Random = Mock.Random
let api = '/api/interaction'
Random.extend({avatars: function () {var array = ['https://wdz-1258450135.cos.ap-shanghai.myqcloud.com/layuibokemoban/images/theshy.jpg','https://wdz-1258450135.cos.ap-shanghai.myqcloud.com/headphotos/2090b23c9203af81','https://wdz-1258450135.cos.ap-shanghai.myqcloud.com/img/005288b562bb40f4a5335565f6398607.jfif','https://thirdwx.qlogo.cn/mmopen/vi_32/2aJ2mcr4LCfGHLo93Dd4vhWVcW0k9ICkrNYTTNxic44sdDpYxaqEBwD27OrlMEEwayIQJCibcOah6iaQmVf9MAHbA/132']return this.pick(array)}
})
export default [{url: api+'/gets',type: 'get',response: config => {return {"code": 1,"msg": "查询成功","data|10": [{'id|+1': 1,name: '@cname',avatar: '@avatars',title: '@title',level: '@number',target: '@title',target_type: '@number',content: '@cparagraph',createDate: '@datetime',audio: 'https://wdz-1258450135.cos.ap-shanghai.myqcloud.com/video/WeChat_20230311081721.mp4',posterUrl: '@avatars',shares: '@number',comments: '@number',praises: '@number',province: '@province'}]}}
}]

在域名下面访问 /api/interaction/gets就可以获取到10条随机数据了

相关内容

热门资讯

猫咪吃了塑料袋怎么办 猫咪误食... 你知道吗?塑料袋放久了会长猫哦!要说猫咪对塑料袋的喜爱程度完完全全可以媲美纸箱家里只要一有塑料袋的响...
demo什么意思 demo版本... 618快到了,各位的小金库大概也在准备开闸放水了吧。没有小金库的,也该向老婆撒娇卖萌服个软了,一切只...
世界上最漂亮的人 世界上最漂亮... 此前在某网上,选出了全球265万颜值姣好的女性。从这些数量庞大的女性群体中,人们投票选出了心目中最美...
玛雅人的五大预言 玛雅人预言2... 曾经玛雅人预言2012年是世界末日,但当时好像没有发生什么。没想到10年后的2022年,疫情,战争,...
cad打印线条粗细设置 cad... 004-线型(下)打印样式设置和线型文件使用一、线宽设置方法制图规范里边的线宽要求,我们已经定义好,...