uniapp开发问题总结_uniapp开发微信小程序问题

1. 微信小程序代码上传后，在体验版或线上无法调用接口

解决：
（1）登录微信小程序后台https://mp.weixin.qq.com/
（2）点击 开发管理 – 开发管理 – 修改服务器域名
（3）将使用到的域名改为你的接口域名

2. 微信开发者工具刷新后，AppID改变

解决：在manifest.json里修改微信的appid

3. uniapp开发微信小程序不能使用v-show

使用v-if或者用css： display: none;

4. 微信小程序原生标签无法使用ref获取元素，只有自定义组件可以使用ref

5.小程序底部导航栏tabBar

（1）uni.setTabBarItem(OBJECT)在h5，小程序中无法切换页面路径、是否显示

（2）导航栏tabBar最少2个、最多5个 tab

• 多余5个或者根据权限切换tab，使用uView的tabbar组件 u-tabbar

6. 使用uni.navigateBack(OBJECT)返回时刷新上一个页面数据

• 请求没有参数时将请求放在onShow里
• 有参数时使用uni.$emit()和uni.$on()

uni.navigateBack()
uni.$emit('update',{id: this.id})
1
2

onShow() {
	uni.$on('update', (data) => {
		this.getDataList({
			id: data.id,
		})
	})
},
1
2
3
4
5
6
7

7. 小程序在css中不能使用本地图片当背景图片background

解决：
（1）使用网络图片，将图片上传到服务器
（2）将图片转为base64 （搜索）
（3）使用<image/>标签，定位成背景图片

8. 小程序无法定位

解决：在"mp-weixin"里加上

"mp-weixin" : {
        "permission" : {
            "scope.userLocation" : {
                "desc" : "打开定位授权，选取用户当前位置"
            }
        },
        "requiredPrivateInfos" : [ "chooseLocation", "getLocation" ]
    },
1
2
3
4
5
6
7
8

更多信息

requiredPrivateInfos
自 2022 年 7 月 14 日后发布的小程序，使用以下8个地理位置相关接口时，需要声明该字段，否则将无法正常使用。2022 年 7 月 14 日前发布的小程序不受影响。

申明需要使用的地理位置相关接口，类型为数组。目前支持以下项目：

getFuzzyLocation: 获取模糊地理位置
getLocation: 获取精确地理位置
onLocationChange: 监听实时地理位置变化事件
startLocationUpdate: 接收位置消息（前台）
startLocationUpdateBackground: 接收位置消息（前后台）
chooseLocation: 打开地图选择位置
choosePoi: 打开POI列表选择位置
chooseAddress: 获取用户地址信息
1
2
3
4
5
6
7
8
9
10
11
12
13

9. 小程序，h5中rich-text组件里的<a href=""></a>标签不能跳转href属性无效

解决： 使用uView的组件u-parse

10. 小程序中标签名、属性名选择器、id选择器都不能用。

11. eval函数不可用

12. 数据为null也会显示在页面上

为null就替换为空字符串''

13.uni-app文字一行显示，不会自动换行

使用css样式：word-break: break-word; 可以避免文字超出限制（break-word不会切断单词，break-all会无视单词完整性切断单词）

14. input输入框设置disabled后点击事件失效

使用css样式pointer-event：none

15.uniapp打包，上线部署后页面有缓存

（1）在根目录中添加vue.config.js

// vue.config.js
if (process.env.UNI_PLATFORM === 'h5') {
    //微信小程序无法正常使用
    let filePath = './static/js/'
    let Timestamp = new Date().getTime()
    let version = '-V1.0.0-'
    module.exports = {
        // webpack 相关配置
        filenameHashing: false,
        configureWebpack: { // webpack 配置 解决js缓存的问题，目前只适配H5端打包
            output: { // 输出重构  打包编译后的 文件目录 文件名称 【模块名称.时间戳】
                filename: `${filePath}[name]${version}${Timestamp}.js`,
                chunkFilename: `${filePath}[name]${version}${Timestamp}.js`
            },
        }
    }
}else{
    // webpack 相关配置
    module.exports = {
        filenameHashing: false
    }
}




1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

（2）在nignx的配置文件，配置如下内容禁用缓存

location / {
    add_header Cache-Control "no-cache, no-store, must-revalidate";
    add_header Pragma "no-cache";
    add_header Expires 0;
}
1
2
3
4
5