Uniapp知识点及问题汇总

1,044 阅读5分钟

1、全局引入公共方法、公共样式

引入公共方法:

在main.js里引入js文件,将其挂载到全局,在项目中可以this.utils.function()去调用js文件中的方法(function为公共方法js文件中的方法名)

import utils from '@/common/utils.js'
Vue.prototype.utils = utils

引入公共样式:

在app.vue的style里引入公共样式,可以在页面的class里直接使用定义好的公共css样式名

<style>
    @import common/css/common.css;
</style>

2、传递url时数据丢失问题

URL等特殊字符应用编码转码的方式进行传递,因为某些特殊字符会使url在传递时丢失

```js
encodeURIComponent(url) 编码
decodeURIComponent(url) 解码
```

3、上传视频后回显视频某一帧的画面

在相应的视频后面拼接?x-oss-process=video/snapshot,t_1000,f_jpg,ar_auto

https://argus-cdn.ts-it.cn/spo/cbf9b5232de948b995aed3bb95c72439.mp4?x-oss-process=videosnapshot,t_1000,f_jpg,ar_auto
1000为当前显示图片在视频的第几毫秒

4、关闭导航栏的沉浸式

沉浸式导航栏是关闭页面的导航栏后,上拉页面时,页面的顶部会和手机顶部自带的一些显示图标重影。所以有没有导航栏页面时,需要在mainfest.json文件的源码视图里添加

"app-plus" : {
    "statusbar": {  
        "immersed": false  
    }
}

也可以通过在去掉导航栏的页面顶部放置占位符去除重影问题

5、防抖节流

防抖:在一定时间内多次触发方法,在时间结束后只触发一次方法,点击后时间未结束又被点击时,时间重新计时

节流:在一定时间内多次触发方法,在时间结束后只触发一次方法,点击后时间未结束又被点击时,时间不重新计时

uniapp的防抖和节流可以只用uview组件库提供的api工具库实现,引入uview组件库后,可以直接在页面的点击事件中使用

防抖
uni.$u.debounce(this.toNext, 500)

节流
uni.$u.throttle(this.toNext, 500)

toNext为防抖节流触发的事件,后面有延迟时间

6、uniapp在真机上的操作

(1)、拨打电话

uni.makePhoneCall({
    phoneNumber: '114'
});

(2)、指纹解锁

前提是手机上已经录入了相关指纹

//检查是否录入指纹
checkIsSoterEnrolledInDeviceFingerPrint() {
    uni.checkIsSoterEnrolledInDevice({
        checkAuthMode: 'fingerPrint',
        success(res) {
            console.log(res);
        },
        fail(err) {
            console.log(err);
        },
        complete(res) {
            console.log(res);
        }
    })
}

//使用指纹解锁
startSoterAuthenticationFingerPrint() {
    uni.startSoterAuthentication({
        requestAuthModes: ['fingerPrint'],
        challenge: '123456',
        authContent: '请用指纹解锁',
        success(res) {
            console.log(res);
        },
        fail(err) {
            console.log(err);
        },
        complete(res) {
            console.log(res);
        }
    })
}

(3)、扫码(二维码、条码)

// 允许从相机和相册扫码
uni.scanCode({
    success: res => {
        console.log('条码类型:' + res.scanType);
        console.log('条码内容:' + res.result);
    }
});

// 只允许通过相机扫码
uni.scanCode({
    onlyFromCamera: true,
    success: res => {
        console.log('条码类型:' + res.scanType);
        console.log('条码内容:' + res.result);
    }
});

// 调起条码扫描
uni.scanCode({
    scanType: ['barCode'],
    success: res => {
        console.log('条码类型:' + res.scanType);
        console.log('条码内容:' + res.result);
    }
});

(4)、保存图片到手机相册

uni.chooseImage({
    count: 1,
    sourceType: ['camera'],
    success: function(res) {
        uni.saveImageToPhotosAlbum({
            filePath: res.tempFilePaths[0],
            success: function() {
                console.log('save success');
            }
        });
   }
});

(5)、手机震动

注意:iOS上只有长震动,没有短震动。iOS上需要手机设置“打开响铃时震动”或“静音时震动”,否则无法震动。vibrate只适用于钉钉小程序、支付宝小程序

uni.vibrate() //使手机发生振动
uni.vibrateLong() //使手机发生较长时间的振动(400ms)
uni.vibrateShort() //使手机发生较短时间的振动(15ms)

(6)、安装应用

plus.runtime.install( //安装
    downloadResult.tempFilePath, {
        force: this.android_type
    },
    function(res) {
        utils.showToast('更新成功,重启中');
        plus.runtime.restart();
    }
)

(7)、获取应用版本号和应用版本名称

//App端版本升级时用于比对当前版本号是否为最新
plus.runtime.getProperty(plus.runtime.appid, info => {
    console.log(JSON.stringify(info));
    this.version = info.version;
    this.versionCode = info.versionCode;
})

(8)、屏幕旋转

plus.screen.lockOrientation('landscape-primary') //横屏主方向
plus.screen.lockOrientation('portrait-primary') //竖屏主方向

7、生成二维码

<canvas style="width: 400upx;height: 400upx;" @click="canvasClick" canvas-id="couponQrcode"></canvas>
//生成二维码,content为扫描二维码后获取的数据
couponQrCode() {
    new qrCode('couponQrcode', {
        text: this.content,
        width: 200,
        height: 200,
        colorDark: "#333333",
        colorLight: "#FFFFFF",
        correctLevel: qrCode.CorrectLevel.H
    })
}
//点击二维码重新生成
canvasClick() {
    toString(this.content++)
    this.content = this.content + '0'
    this.content.toString()
    setTimeout(() => {
        this.couponQrCode()
    }, 50)
}

8、iOS端,扫码跳转新页面,app卡死问题

扫码成功后,可以使用异步方法 await this.$nextTick(),等页面加载完再跳转,也可以加一个setTimeout,延迟一段时间后,再跳转页面。(最好两种方法都加上)。问题解答出自:

blog.csdn.net/weixin_4274…

9、避免因版本号不匹配问题,在打开软件时弹出提示框

在源码视图的app-plus里添加

"compatible": {
    "ignoreVersion": true
}

10、点击事件,阻止事件冒泡

点击大盒子内部的小盒子,只触发小盒子绑定的事件

<view @tap="handleClick">
    <text>父元素</text>
    <view @tap.stop="handleChildClick">
        <text>子元素</text>
    </view>
</view>
handleClick(){
    console.log('父元素被点击了')
}
handleClickChild(){
    console.log('子元素被点击了')
}

11、页面标题栏修改名称,左右两边放置按钮(字体文件路径配置)

修改当前页面导航栏标题内容

onLoad(){
    uni.setNavigationBarTitle({
        title: '导航栏标题内容'
    })
}

导航栏左右两侧放置按钮,在pages.json里进行配置。页面上点击导航栏按钮,触发onNavigationBarButtonTap方法,onNavigationBarButtonTap方法与onLoad同级

{
    "path": "pages/index/index",
    "style": {
        "navigationBarTitleText": "导航栏标题名称",
        "app-plus": {
            "titleNView": {
                "buttons": [{
                    "text": "\ue712", //按钮文字显示
                    "fontSize": "38rpx", //字体大小
                    "width": "90px", //按钮宽度
                    "color": "#414960", //字体颜色
                    "float": "left", //导航栏左侧(可选右侧right)
                    "fontWeight": "bold", //字体是否加粗
                    "fontSrc": "/static/font/iconfont.ttf" //字体文件路径
                }]
            }
        }
    }
}

页面标题栏左右两侧如何放置字体图标

首先在阿里云上把相应的图标添加到购物车,将文件下载到本地,内含ttf文件

QQ20230601-174536@2x.png

将获取的文件放到目录static文件下,建一个font文件放在里面,在pages.json文件里将fontSrc字体文件的路径写上/static/font/iconfont.tff,text查看字体文件的iconfont.json,将unicode里的参数写入到text,"\u" + unicode,例如unicode为e712,text里写入"\ue712"

12、解决iOS禁止侧滑"popGesture": "none"失效问题

原文出自:

blog.csdn.net/weixin_4466…

{
    "path": "pages/exam/answerTopic",
    "style": {
        "navigationBarTitleText": "在线考试",
        "disableSwipeBack": true //禁止ios端右滑退出
    }
}

13、快速获取苹果手机的UDID

通过蒲公英的链接快速获取:

www.pgyer.com/tools/udid

14、苹果证书和描述文件怎么生成

有一篇文章讲的很详细:

ask.dcloud.net.cn/article/152

15、小程序分包问题

每个小程序分包会略有不同,此处以微信小程序分包为例(详情可查看官网)

uniapp.dcloud.net.cn/collocation…

微信小程序在上线到微信平台时有内存限制,主包超过2M时

16、uniapp多端常见的兼容性问题

(1)、HBuilderX运行代码到微信开发者工具时,data里的参数放置到html上,不能加this

(2)、App端iOS,margin在苹果机中不生效,可以用padding