從多方面了解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 }});