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>
      <image
        v-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 = this
      uni.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-是否拖动
	    -->
           <map
                    id="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-item
        label="挂车车牌号"
        prop="attachNo"
        class="form-item-box"
        left-icon="star-fill"
        :left-icon-style="{
          color: 'red',
          'font-size': '18rpx',
        }"
      >
        <u-input
          v-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内置音频播放，不收费、支持在线、音频固定
方案三：MT-TTS离线语音合成（uni-app 调用手机内部安装TTS）
最终选择

MT-TTS离线语音合成
链接：https://ext.dcloud.net.cn/plugin?id=3682
'com.xxxxx.cn'--->app包名称
'text'---->播放文字
let TTSSpeech = uni.requireNativePlugin('MT-TTS-Speech')
  TTSSpeech.getInstallTTS((list) => {
    list.forEach((v) => console.log(`引擎名 ${v.label} 包名：${v.name}`))
  })
  TTSSpeech.init((status) => {
    if (status === 0) {
      TTSSpeech.speak({ text: 'text'})
    }
  }, 'com.xxxxx.cn')

13.uni-app二维码上增加字段

    //货源二维码
    creadCode() {
      new QRCode('myQrcode', {
        text: this.id,
        width: 120, //canvas 画布的宽
        height: 120, //canvas 画布的高
        padding: 8, // 生成二维码四周自动留边宽度，不传入默认为0
        correctLevel: QRCode.CorrectLevel.L, // 二维码可辨识度
        callback: (res) => {
          //工具回调数据
          // 接下来就可以直接调用微信小程序的api保存到本地或者将这张二维码直接画在海报上面去，看各自需求
          wx.hideLoading()
          this.addMutilImage(res.path)
        },
      })
    },
    //二维码增加字段
    addMutilImage(src) {
      let that = this
      let ctx = uni.createCanvasContext('myQrcode', this)
      // 画布填充背景色，默认白色
      ctx.setFillStyle('#fff')
      // 设置画布尺寸
      ctx.fillRect(0, 0, 300, 300)
      // 绘制图片
      ctx.drawImage(src, 0, 14, 300, 140)
      // 画笔颜色
      ctx.setFillStyle('#000000')
      // 字体大小
      ctx.setFontSize(14)
      ctx.setTextAlign('left')
      //绘制二维码上方文字
      ctx.fillText('货源单号：' + that.formData.sourceCode, 40, 14)
      // 把以上内容画到 canvas 中
      ctx.draw(true, (ret) => {
        uni.canvasToTempFilePath({
          // 保存canvas为图片
          canvasId: 'myQrcode',
          destWidth: 300,
          destHeight: 300,
          quality: 1,
          complete: function (res) {
            that.popupURL = res.tempFilePath
          },
        })
      })
    },