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条随机数据了

相关内容

热门资讯

【实验报告】实验一 图像的... 实验目的熟悉Matlab图像运算的基础——矩阵运算;熟悉图像矩阵的显示方法࿰...
MATLAB | 全网最详细网... 一篇超超超长,超超超全面网络图绘制教程,本篇基本能讲清楚所有绘制要点&#...
大模型落地比趋势更重要,NLP... 全球很多人都开始相信,以ChatGPT为代表的大模型,将带来一场NLP领...
Linux学习之端口、网络协议... 端口:设备与外界通讯交流的出口 网络协议:   网络协议是指计算机通信网...
kuernetes 资源对象分... 文章目录1. pod 状态1.1 容器启动错误类型1.2 ImagePullBackOff 错误1....
STM32实战项目-数码管 程序实现功能: 1、上电后,数码管间隔50ms计数; 2、...
TM1638和TM1639差异... TM1638和TM1639差异说明 ✨本文不涉及具体的单片机代码驱动内容,值针对芯...
Qt+MySql开发笔记:Qt... 若该文为原创文章,转载请注明原文出处 本文章博客地址:https://h...
Java内存模型中的happe... 第29讲 | Java内存模型中的happen-before是什么? Java 语言...
《扬帆优配》算力概念股大爆发,... 3月22日,9股封单金额超亿元,工业富联、鸿博股份、鹏鼎控股分别为3.0...
CF1763D Valid B... CF1763D Valid Bitonic Permutations 题目大意 拱形排列࿰...
SQL语法 DDL、DML、D... 文章目录1 SQL通用语法2 SQL分类3 DDL 数据定义语言3.1 数据库操作3.2 表操作3....
文心一言 VS ChatGPT... 3月16号,百度正式发布了『文心一言』,这是国内公司第一次发布类Chat...
CentOS8提高篇5:磁盘分...        首先需要在虚拟机中模拟添加一块新的硬盘设备,然后进行分区、格式化、挂载等...
Linux防火墙——SNAT、... 目录 NAT 一、SNAT策略及作用 1、概述 SNAT应用环境 SNAT原理 SNAT转换前提条...
部署+使用集群的算力跑CPU密... 我先在开头做一个总结,表达我最终要做的事情和最终环境是如何的,然后我会一...
Uploadifive 批量文... Uploadifive 批量文件上传_uploadifive 多个上传按钮_asing1elife的...
C++入门语法基础 文章目录:1. 什么是C++2. 命名空间2.1 域的概念2.2 命名...
2023年全国DAMA-CDG... DAMA认证为数据管理专业人士提供职业目标晋升规划,彰显了职业发展里程碑及发展阶梯定义...
php实现助记词转TRX,ET... TRX助记词转地址网上都是Java,js或其他语言开发的示例,一个简单的...
【分割数据集操作集锦】毕设记录 1. 按要求将CSV文件转成json文件 有时候一些网络模型的源码会有data.json这样的文件里...
Postman接口测试之断言 如果你看文字部分还是不太理解的话,可以看看这个视频,详细介绍postma...
前端学习第三阶段-第4章 jQ... 4-1 jQuery介绍及常用API导读 01-jQuery入门导读 02-JavaScri...
4、linux初级——Linu... 目录 一、用CRT连接开发板 1、安装CRT调试工具 2、连接开发板 3、开机后ctrl+c...
Urban Radiance ... Urban Radiance Fields:城市辐射场 摘要:这项工作的目标是根据扫描...
天干地支(Java) 题目描述 古代中国使用天干地支来记录当前的年份。 天干一共有十个,分别为:...
SpringBoot雪花ID长... Long类型精度丢失 最近项目中使用雪花ID作为主键,雪花ID是19位Long类型数...
对JSP文件的理解 JSP是java程序。(JSP本质还是一个Servlet) JSP是&#...
【03173】2021年4月高... 一、单向填空题1、大量应用软件开发工具,开始于A、20世纪70年代B、20世纪 80年...
LeetCode5.最长回文子... 目录题目链接题目分析解题思路暴力中心向两边拓展搜索 题目链接 链接 题目分析 简单来说࿰...