uni-app踩坑集合(小程序)

1.指定页面不显示返回或首页按钮

onShow(){uni.h
}

2.uni-app 开发微信小程序长按识别公众号
![在这里插入图片描述](https://img-blog.csdnimg.cn/c50573de78f54402955ece64fa1b9864.png#pic_center

/*
*思路：
*1.使用公众号的文章分享二维码图片（若无需在公众号发布文章，然后使用该篇文章的分享二维码）
*2.使用image标签的show-menu-by-longpress属性
*show-menu-by-longpress开启长按识别功能
*/
<template><imagev-if="popupURL"show-menu-by-longpress:src="popupURL"alt=""class="popupURL-box"/></template>

3.uni-app 开发微信小程序推荐并携带推荐人信息小程序码

/*
*思路：
*1.获取小程序的token（APPID--微信公众平台-》开发管理-》开发设置获取，APPSECRET--微信公众平台-》开发管理-》开发设置获取）
*2.?id=或者scene 为携带的参数
*3.QRCode 生成小程序码
*4.getToken接口调用和getQrCode接口建议使用后台接口完成
*/
/*推荐页面
*/
<script>
import QRCode from './../../../common/weapp-qrcode.js'methods: {getToken() {uni.showLoading({title: '加载中',mask: true,})let APPID = '******'let APPSECRET = '******'uni.request({url: `https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=${APPID}&secret=${APPSECRET}`,method: 'GET',}).then((res) => {if (res[1].data.expires_in != 7200) {uni.showToast({title: '分享失败，请重新尝试。',icon: 'none',duration: 2000,})uni.hideLoading()return}this.getQrCode(res[1].data.access_token)uni.hideLoading()}).catch((err) => {console.log(err)uni.hideLoading()})},getQrCode(access_token) {let scene ='id=' + uni.getStorageSync('userInfo').additionalInformation.userId//获取小程序码带参数const that = thisuni.request({url:'https://api.weixin.qq.com/wxa/getwxacode?access_token=' +access_token, //固定链接，不用改method: 'POST',responseType: 'arraybuffer', //设置响应类型data: {scene: scene,path:'pages/login/login?id=' +uni.getStorageSync('userInfo').additionalInformation.userId, // 必须是已经发布的小程序存在的页面（否则报错） （）width: 200,auto_color: true, // 自动配置线条颜色，如果颜色依然是黑色，则说明不建议配置主色调line_color: {r: '0',g: '0',b: '0',}, // auto_color 为 false 时生效，使用 rgb 设置颜色},success: function (res) {console.log('获取二维码', res) //返回的是ArrayBuffer 对象setTimeout(() => {that.popupURL ='data:image/PNG;BASE64,' + uni.arrayBufferToBase64(res.data) //以图片的形式展示}, 50)},})},}
</script>
/*获取
*/
<script>onLoad(options) {uni.setStorageSync('accountId', options.id)},</script>

3.uni-app 开发微信小程序调用手机导航不展示地图

<template><view><!-- 地图挂载 --><map id="map1" ref="map1" style="display: none"></map><view  @click="mapBtn"></view></view>
</template>
<script>
export default {name: 'sourcegoodsdetail',data() {return {mapContext: null,}},onShow() {this.mapContext = uni.createMapContext('map1', this)},methods: {//地点导航mapBtn() {this.mapContext.openMapApp({longitude: 119.32,//经度-数字latitude: 32.48，//纬度-数字destination: '钟楼',//地点名})},}
</script>

4.uni-app 开发微信小程序调用手机导航展示地图

template><view><!-- 地图挂载 --scale-默认缩放大小--longitude-默认中心点经度--latitude-默认中心点纬度--markers-标记点--enable-zoom-是否缩放--enable-scroll-是否拖动--><mapid="map1"class="img-box"ref="map1":longitude="longitude":latitude="latitude":markers="markers":scale="13":enable-zoom="false":enable-scroll="false"></map><view  @click="mapBtn"></view></view>
</template>
<script>
export default {name: 'sourcegoodsdetail',data() {return {mapContext: null,markers: [{id: 0,longitude: 119.32,latitude: 32.48,width: 36, //宽height: 50, //高},],   longitude: 119.32,latitude: 32.48,}},onShow() {this.mapContext = uni.createMapContext('map1', this)},methods: {//地点导航mapBtn() {this.mapContext.openMapApp({longitude: 119.32,//经度-数字latitude: 32.48，//纬度-数字destination: '钟楼',//地点名})},}
</script>

5.uni-app 开发微信小程序页面传参

//a页面传数据到b页面(数据较多例如：数组、对象)
//a页面methods: {fun(){uni.$emit('organizationSelection', { data, list })}}
//b页面created() {//采购组织选择uni.$on('organizationSelection', (data) => {})},onUnload() {// 清除监听let keyList = ['organizationSelection',]keyList.forEach((item) => {uni.$off(item)})},

6.uni-app 开发微信小程序view包裹文字不换行(相关政策)

解决方案：<text>{{ item.value }}</text>css:text {width: 100%;display: inline-block;white-space: pre-wrap;word-wrap: break-word;height: auto;}

7.uni-app 开发微信小程序使用扫一扫

// 允许从相机和相册扫码
uni.scanCode({success: function (res) {console.log('条码类型：' + res.scanType)console.log('条码内容：' + res.result)},
})
// 只允许通过相机扫码
uni.scanCode({onlyFromCamera: true,success: function (res) {console.log('条码类型：' + res.scanType);console.log('条码内容：' + res.result);}
});
// 调起条码扫描
uni.scanCode({scanType: ['barCode'],success: function (res) {console.log('条码类型：' + res.scanType);console.log('条码内容：' + res.result);}

8.uni-app 开发微信小程序开启微信开发工具报错

解决方案
1.

2.

9.uni-app 开发微信小程序开启微信开发工具属性报错

这警告的意思是“wxss组件中不允许使用某些选择器，包括标记名选择器、ID选择器和属性选择器。”解决方案是通过定义class名称做样式修改
9.开发h5 uni-app（子应用）+Android（平台）做移动端返回退出子应用如何解决
思路：
1.Android做跳转子应用加标识
2.Android暴露退出子应用方法
3.子应用内部根据标识（路径参数）区分是否为平台跳转，如果是那么子应用返回调用思路2的方法即可
步骤：
1.查询资料，发现uni内部onBackPress可以阻止返回事件

 onBackPress(e) {if (e.from == 'backbutton') {console.log('-this.$route.query-', this.$route.query)window.injectedObject.exitX5WebView()return true //阻止默认返回行为}},

2.实测路径带参数，结果onBackPress方法不可阻止且路径参数也获取不到
3.查询资料，发现uni内部onUnload可以阻止返回事件且路径参数也获取不到

  onUnload() {if (this.$route.query.index == 'start') {console.log('-this.$route.query-', this.$route.query)window.injectedObject.exitX5WebView()return true}},

10.uni-app+uview(1.7.3)版本表单中一个参数选择校验另一个参数
普通的检验如下图：

<template><view class="content"><u-form :model="form" ref="uForm" :label-width="240"><u-form-itemlabel="挂车车牌号"prop="attachNo"class="form-item-box"left-icon="star-fill":left-icon-style="{color: 'red','font-size': '18rpx',}"><u-inputv-model="form.attachNo"maxlength="8"placeholder="请输入挂车车牌号"@on-blur="upperCase"/></u-form-item></u-form><u-button type="primary" @click="submit" class="vehiclemanagement-index-btn">提交</u-button></view>
</template>
<script>
export default {data() {// 牌号验证const carNoRuls = async (rule, value, callback) => {let reg =/^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}(([A-Z0-9]{4}[A-Z0-9挂学警港澳]{1}$)|([0-9]{5}[DF]$)|([DF][A-HJ-NP-Z0-9][0-9]{4}$))/// let reg = /^[\u4e00-\u9fa5]{1}[A-Z]{1}[A-Z_0-9]{5}$/if (!value) {return callback(new Error('请输入车牌号'))} else if (!reg.test(value)) {return callback(new Error('请检查车牌号格式是否正确'))} else {callback()}}return {rules: {form: {carNo：underfind},carNo: [{required: true,validator: carNoRuls,trigger: ['change', 'blur'],},],}}},onReady() {this.$refs.uForm.setRules(this.rules)},methods: {//提交submit() {this.$refs.uForm.validate((valid) => {if (valid) {this.$api.msg('提交成功')} else {this.$api.msg('请填写相关信息')}})},}
</script>

有个问题就是：input输入框的校验是在input的失焦事件触发的，一旦是其他的值改变的会带出的input的值，input的之前的校验提示不会立即消失，当再次点击提交校验才会消失

解决方案：

1.template中需要验证的u-form-item绑定ref（如上增加ref='carNo'）
2.js的方法中增加//触发校验triggerSingleFieldValidate(refName) {this.$refs[refName].onFieldChange()},
3.在带出触发方法中使用即可
this.triggerSingleFieldValidate('carNo')

11.uni-app做小程序版本强制更新

    updateManager.onCheckForUpdate(function (res) {// 请求完新版本信息的回调if (res.hasUpdate) {// 如果有新版本提醒并进行强制升级uni.showModal({content: '新版本已经准备好，是否重启应用？',showCancel: false,confirmText: '确定',success: (res) => {if (res.confirm) {updateManager.onUpdateReady((res) => {// 新版本下载完成的回调updateManager.applyUpdate() // 强制当前小程序应用上新版本并重启})updateManager.onUpdateFailed((res) => {// 新版本下载失败的回调// 新版本下载失败，提示用户删除后通过冷启动重新打开uni.showModal({content: '下载失败，请删除当前小程序后重新打开',showCancel: false,confirmText: '知道了',})})}},})}})

12.uni-app语音播报功能
方案一：使用讯飞语音播报插件（参考：https://ext.dcloud.net.cn/plugin?id=8287），收费、支持在线、音频动态
方案二：录制固定音频（存储本地或者服务器），使用uni-app内置音频播放，不收费、支持在线、音频固定
最终选择

<template><view class="content"><image class="logo" src="/static/logo.png"></image><view class="text-area"><text class="title">{{ title }}</text></view><view @click="playMUSIC">播放语音</view></view>
</template>
<script setup>
import { ref } from 'vue'
const title = ref('Hello')
//url音频位置
function ScanAudio(url) {let music = nullmusic = uni.createInnerAudioContext() //创建播放器对象music.src = urlmusic.play() //执行播放music.onEnded(() => {//播放结束music = null})
}
function playMUSIC() {ScanAudio('/static/audio/9527.mp3')
}
</script>

uni-app踩坑集合(小程序)相关推荐

HbuilderX:uni app踩坑之uView-ui
HbuilderX:uni app踩坑之uView-ui 最近在自学uniapp,想找一个ui框架提高一下学习和开发的效率,于是就网上冲浪,浪来浪去,最后选择了uView-ui这款.其实有些框架我是有 ...
踩坑微信小程序开发mpvue使用iconfont，顺便解决偶现图标显示不正确
刚刚接触iconfont, 发现它真是个好东西. 使用字体图标的好处: 改颜色,改大小都可以随时所欲,写个多态按钮分分钟搞定,爽的不要太过分! 阿里的字体图库 https://www.iconfon ...
踩坑，小程序audio组件播放不显示播放按钮
研究了大半天也没整明白为什么会影响到播放按钮的加载-- 原因:设置播放src时同步执行了播放解决:先执行完setdata{src},延时100ms再执行播放 this.audioCtx.setSrc ...
微信小程序uni.getImageInfo踩坑大计划
B站https://www.bilibili.com/read/cv6317437 如果你在使用getImageInfo的时候真机调试没问题,上传生成体验版的时候或者是线上版本没反应,主要原因是网络图 ...
tabbar角标小程序_【沃行课堂】恭喜你遇到“坑”，小程序踩坑指南
上周我们的开发小哥哥带领我们一起领略了开发中遇到的各种问题,以及基于SaaS模式的平台技术架构及实现.本周我们换个方向,由高级开发工程师秋哥带领大家共同探讨下小程序开发中踩过的坑.秋哥会从公司的几个小 ...
[填坑手册]小程序目录结构和组件化使用心得
小程序目录结构关于小程序的目录结构,可以说一开始大家都有各自的开发习惯和命名规则,但一旦项目变得复杂庞大的时候,你就发现管理起来和后期维护变得很麻烦,如果是协同开发的话,更容易出现 " ...
uniapp App跳转微信小程序并互相传递参数、接收微信小程序传递的参数
本文是uniapp打包成安卓App. 一.注意事项 1.用到了分享功能,在打包App时,需要配置manifest.json:App 模块配置->Share.按照提示填写微信分享的信息,appid ...
uni-app app 跳转微信小程序（安卓/ios）
uni-app app 跳转微信小程序(安卓/ios) 近日接到需求,需要实现在 app 中直接跳转到微信小程序中,其实非常简单,uni-app 都已经集成好了. 安卓和ios 有点区别,这个需要注 ...
【微信小程序】使用uni-app——开发首页搜索框导航栏（可同时兼容APP、H5、小程序）
目录前言 App.H5效果小程序效果一.兼容APP.H5的方式二.兼容小程序三.实现同时兼容前言首页都会提供一个搜索框给到客户,让客户自己去搜索自己想要的内容,这里就需要导航栏,来实现搜 ...

uni-app踩坑集合(小程序)

uni-app踩坑集合(小程序)相关推荐

最新文章

热门文章