一、uniapp的mounted
mounted是Vue生命周期的一个阶段，表示组件挂载到DOM上，可以在此阶段进行一些初始化工作，比如数据请求、DOM操作等。在uniapp中，每个页面都是一个组件，可以使用mounted来进行相关的操作。
针对uniappdemo，我们可以在mounted中进行数据的初始化、事件的绑定、定时器的启动等操作，代码示例如下：
export default {
mounted() {
// 数据初始化
this.data = this.$store.getters.getData;
// 事件绑定
this.$refs.btn.addEventListener('click', this.handleClick);
// 定时器启动
setInterval(() => {
this.time++;
}, 1000)
}
}
二、uniapp的moveview的scale
moveview是uniapp的一个组件，用于使元素跟随手指移动并且支持缩放。在实际开发中，moveview可以用来实现拖拽、缩放等功能，可以增强用户交互体验。
而scale是moveview的一个属性，用于设置缩放比例。
针对uniappdemo，我们可以使用moveview来实现图片的拖拽和缩放功能，代码示例如下：
export default {
data() {
return {
imageUrl: 'xxx',
itemWidth: 200,
itemHeight: 200,
scale: 1
}
}
}
三、uniapp的默认下载路径
在uniapp中，我们可以使用downloadFile API来下载网络资源并保存到本地。但是，如果不指定下载路径，该资源默认会下载到一个临时文件夹中，长时间不使用会被系统自动清理。
为了避免该问题，需要手动指定下载路径，可以使用uni.getStorageSync(‘downloadDirectory’)来获取默认下载路径，示例如下：
uni.downloadFile({
url: 'xxx',
success: res => {
uni.saveFile({
tempFilePath: res.tempFilePath,
filePath: uni.getStorageSync('downloadDirectory') + '/test.png',
success: res => {}
})
}
})
四、uniapp的模板选取
uniapp提供了丰富的模板组件，可以在快速开发中提升效率。针对uniappdemo，我们可以使用uni-icons组件来引入阿里图标库中的图标。
步骤如下：
1、在uniCloud云函数中引入iconfont.css文件，并暴露接口;
2、在uniapp中使用uni-icons组件引入图标。
// uniCloud云函数代码
exports.main = async (event, context) => {
return {
status: 200,
message: 'ok',
data: {
css: 'https://at.alicdn.com/t/font_xxxxxx.css'
}
}
}
// uniapp组件代码
import { getIconfont } from '@/uniCloud/apis';
export default {
data() {
return {
cssUrl: ''
}
},
mounted() {
this.getCssUrl();
},
methods: {
async getCssUrl() {
const res = await getIconfont();
if (res.status === 200) {
this.cssUrl = res.data.css;
}
}
}
}
@import url({{ cssUrl }});
原创文章，作者：CUJZ，如若转载，请注明出处：https://www.506064.com/n/145072.html
微信扫一扫 
支付宝扫一扫 