uniapp开发app总结

1. 自定义底部导航栏在手机app端显示不出来

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

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

.uni-app--showleftwindow + .uni-tabbar-bottom {
      display: none;
}

2. video在手机端app层级过高，无论底部导航栏怎么设置z-index都会被video盖住

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

3. 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 = null
        if (respond instanceof Function) {
            const { body, type, url } = options
            result = 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条随机数据了