从多方面了解uniappdemo

一、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 }});