uniapp+vue3+vite+ts开发微信小程序

94 阅读1分钟
1.tabbar的字体大小和图标大小不会生效

(主要是因为uni开发微信小程序,icon大小可以让ui控制内边距来调整)

2.不能使用标签选择器(会有警告)
3.backgroundImage不能使用本地图片

要么用image绝对定位,要么使用远程图片

4.ref和document方式都获取不到元素

this.$refs.box (只适合vue2)

let box = ref(null) (只能在浏览器端获取)

  • 以下的方法可以获取到
uni.createSelectorQuery().select('#box').node().exec(res => {

//res[0].node未获取到的指定的dom元素对象

console.log("res",res[0].node)
}) 
5.rich-text (富文本,相当于vue中的v-html)
//不能不能使用view、text
<rich-text :nodes="node"></rich-text>
//只能使用的时候要要h5标签,
const node  =ref<any>(`<span style="color:red">123456789</span>`)
6.button有时候不会自己居中,需要手写样式,且有时候莫名加了外边距也需要自己去除
///移动端按钮出现点击的时候自己有多余四个角: 
-webkit-tap-highlight-color: transparent;
//移动端聚焦时有多余边框:
outline: none;  &:force{outline: none;}
7.修改uni-ui的默认样式
::v-deep .uni-card
/deep/ .uni-card
:deep(.uni-card)
8.移动端禁止浏览器自带的左滑返回上一页
9.text里面不能在放标签
10.请求使用sm-crypto的sm4方法加密
  • 问题:在微信开发工具中会一直报jsbn的错误

  • 原因:是因为依赖包终端sm2和sm3里面包含了相关写法

  • 解决方式:在依赖包中删除index.js中的sm2、sm3和相关代码

11.图片验证码(verify)
  • 问题:版本不匹配、uniapp+vue3在微信小程序中ref失效

  • 解决方式:使用uni版本相关组件,this.$refs.verify.show()方法,改写成在父组件写一个changeShow字段传给子组件,监听这个字段 验证码展示成功之后的回调函数里面,changeShow状态改为false

12.腾讯云直播webrtc

不能直接使用video标签+tcplayer.js,uni和微信有自带live-player来播放直播,且需要到后台配置相对应的类目

13.mqtt

需要使用wx://

14.文件上传
  • 问题:使用uni-file-picker上传文件,@success,@progress方法不生效,需要微信公众平台授权隐私权限

  • 解决方式:使用wx.chooseMessageFile+uni.uploadFile能正常使用

15.文件下载

使用wx.downloadFile+wx.openDocument可以实现文件下载并打开

16.input微信开发工具看,字体正常,真机调试,自己默认加粗

设置font-weight: 500;无效

可以在APP.vue全局设置

input {
	font-weight: normal !important;
}
17.录播

直接用video和src播放(但是只能通过真机调试的时候才能播放,微信开发工具上面看不到)