uni-app 学习笔记

395 阅读2分钟

1.过滤数组对象refs不支持

小程序本身就不支持操作dom,要获取dom信息请用uni.createSelectorQuery()

vue文件中:vue的refs只对自定义组件有效,对uni-app中的标签不生效。

uni-app 中可以使用$refs,但是需要注意的是在小程序和App平台不能引用 view 等内置组件,循环创建的自定义组件的话ref也不能用。

uni.createSelectorQuery().in(this).select("#id")._component.$children

2.小程序打包过程报错问题

Browserslist: caniuse-lite is outdated. Please run next command npm update

运行 npm update 也没有解决

解决方案:

  • 查询了一下npm手册,得知是不能直接运行npm update的,必须带上包名,所以应该这样写命令:
  npm update caniuse-lite
  • 直接删了node_modules/caniuse-lite文件夹,然后重新安装:
  npm i -g caniuse-lite
  • 先删了node_modules/caniuse-lite和node_modules/browserslist两个文件夹,然后运行下面的命令
  npm i --save-dev caniuse-lite browserslist

3.自定义进度条,及微信无法暂停播放设置进度问题

在小程序开发的时候,其他小程序能够正常暂停、播放、切换进度,但是在微信小程序发现没有生效,原因是平台差异

// uni-app官网案例是这样获取 videoContext 的
this.videoContext = uni.createVideoContext('myVideo')
// 但是如果需要处理微信小程序的差异,则需要将 this 传入
this.videoContext = uni.createVideoContext('myVideo', this)

4.页面跳转传参

实现思路:通过url拼接,将infoForm这个参数对象,在url里面写成item传递,这里借助了encodeURIComponent这个函数

//对参数进行转换特殊字符。(注意:encodeURIComponent时,需要把对象数据转string格式)
uni.navigateTo({ url: '/pages/broadband/broadband?item=' + encodeURIComponent(JSON.stringify(infoForm))})

//在跳转后的页面,再使用decodeURIComponent,转回正常数据,再使用JSON.parse即可获取完整数据
let dData = decodeURIComponent(option.item);
let newData = JSON.parse(dData);

但是,页面间一般不传object,信息过多会造成截断,encodeurlcomponent也会让信息更长。一般会单独让后台提供个getdetail接口,如果实在要传并且可能会很长的,用localstorage,vuex存跨端有点问题,最好也别用,因此使用uni.getStorageSync

let obj = {};
//set,注意要转换为JSON.stringify()格式
uni.setStorageSync('obj',JSON.stringify(obj));
//get
let res = JSON.parse(uni.getStorageSync('obj'));

5.返回上一页

uni.navigateBack({
    delta:1,//返回层数,2则上上页
})

6.判断scroll-view停止滚动

scroll(e){
    if(this.timer){
        clearTimeout(this.timer);
    }
    this.timer = setTimeout(()=>{
        console.log("stop");
    },100);
}

7.cover-image在真机中不显示

图片地址不要使用require引入,原生组件中不能使用字体图标,路径中不能有中文

icon: require('../../static/images/helper/helper_hc_1.png'), // 不推荐
icon: '../../static/images/helper/helper_hc_1.png'

8.部分手机播放会出现卡顿、画面不动、绿屏等问题

  • 将 m3u8 换为 mp4 文件
  • 在 video 组件上新增属性 custom-cache="{{true}}"

9.微信小程序文件下载

下载文件的方法微信有API,但是返回的是文件的临时路径,只在小程序本次启动期间可以正常使用,如需持久保存,需在主动调用 wx.saveFile,才能在小程序下次启动时访问得到。