从多方面了解uniappdemo

发布时间：2023-05-20

一、uniapp的mounted

mounted是Vue生命周期的一个阶段，表示组件挂载到DOM上，可以在此阶段进行一些初始化工作，比如数据请求、DOM操作等。在uniapp中，每个页面都是一个组件，可以使用mounted来进行相关的操作。 针对uniappdemo，我们可以在mounted中进行数据的初始化、事件的绑定、定时器的启动等操作，代码示例如下：

<script>
export default {
  mounted() {
    // 数据初始化
    this.data = this.$store.getters.getData;
    // 事件绑定
    this.$refs.btn.addEventListener('click', this.handleClick);
    // 定时器启动
    setInterval(() => {
      this.time++;
    }, 1000)
  }
}
</script>

二、uniapp的moveview的scale

moveview是uniapp的一个组件，用于使元素跟随手指移动并且支持缩放。在实际开发中，moveview可以用来实现拖拽、缩放等功能，可以增强用户交互体验。 而scale是moveview的一个属性，用于设置缩放比例。 针对uniappdemo，我们可以使用moveview来实现图片的拖拽和缩放功能，代码示例如下：

<template>
  <movable-area>
    <movable-view :scale.sync="scale" :style="{'width': itemWidth + 'rpx', 'height': itemHeight + 'rpx'}">
      <img :src="imageUrl" mode="aspectFit" style="width: 100%;height: 100%;">
    </movable-view>
  </movable-area>
</template>
<script>
export default {
  data() {
    return {
      imageUrl: 'xxx',
      itemWidth: 200,
      itemHeight: 200,
      scale: 1
    }
  }
}
</script>

三、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组件代码 -->
<template>
  <view>
    <uni-icons type="xxx"></uni-icons>
  </view>
</template>
<script>
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;
      }
    }
  }
}
</script>
<style>
@import url({{ cssUrl }});
</style>
推荐文章