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,延迟一段时间后,再跳转页面。(最好两种方法都加上)。问题解答出自:
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文件
将获取的文件放到目录static文件下,建一个font文件放在里面,在pages.json文件里将fontSrc字体文件的路径写上/static/font/iconfont.tff,text查看字体文件的iconfont.json,将unicode里的参数写入到text,"\u" + unicode,例如unicode为e712,text里写入"\ue712"
12、解决iOS禁止侧滑"popGesture": "none"失效问题
原文出自:
{
"path": "pages/exam/answerTopic",
"style": {
"navigationBarTitleText": "在线考试",
"disableSwipeBack": true //禁止ios端右滑退出
}
}
13、快速获取苹果手机的UDID
通过蒲公英的链接快速获取:
14、苹果证书和描述文件怎么生成
有一篇文章讲的很详细:
15、小程序分包问题
每个小程序分包会略有不同,此处以微信小程序分包为例(详情可查看官网)
微信小程序在上线到微信平台时有内存限制,主包超过2M时
16、uniapp多端常见的兼容性问题
(1)、HBuilderX运行代码到微信开发者工具时,data里的参数放置到html上,不能加this
(2)、App端iOS,margin在苹果机中不生效,可以用padding