【uni-app从入门到实战】get请求、数据缓存、图片上传预览

get请求

​​uni-app发起请求​​

<button @click="get">发送请求</button>

<script>export default {
    data() {
      return {
        ......
      }
    },
    methods: {
      get(){
        uni.request({
          url:"https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata",
          success(res) {
            console.log(res)
          }
        })
      }
    }
  }</script>

这样点击按钮会发送一个 get 请求，打印下结果：

数据缓存

三个异步接口

​​数据缓存官方文档​​

【存储数据】

<button @click="setStorage">存储数据</button>
<script>export default {
    ......
    methods: {
      setStorage(){
        uni.setStorage({
          key: 'storage_key',
          data: 'hello',
          success: function () {
            console.log('success');
          }
        });
      }
    }
  }</script>

如果运行在小程序上，在微信开发者工具里，存储的数据在 storage 中查看

如果运行在浏览器中，可以在应用-本地存储空间中查看

同时都会在控制台输出 success

【获取数据】

<button @click="getStorage">获取数据</button>
<script>export default {
    ......
    methods: {
      getStorage(){
        uni.getStorage({
          key: 'storage_key',
          success: function (res) {
            console.log(res.data);
          }
        });
      }
    }
  }</script>

点击获取数据按钮，调用 ​​uni.getStorage()​​​方法，传入存储的 key，然后在成功回调中使用​​res.data​​就可以拿到存储数据 hello

【移除数据】

<button @click="removeStorage">移除数据</button>
<script>export default {
    ......
    methods: {
      removeStorage(){
        uni.removeStorage({
          key: 'storage_key',
          success: function (res) {
            console.log('success');
          }
        });
      }
    }
  }</script>

以上说的三个接口​​setStorage​​​，​​getStorage​​​，​​removeStorage​​都是异步接口

三个同步接口

【存储数据】

uni.setStorageSync('id',80)

【获取数据】

const res = uni.getStorageSync('id')
console.log(res)

【移除数据】

uni.removeStorageSync('id')

图片上传和预览

​​uni-app 媒体-图片 官方文档​​

【选择图片】

我们增加一个按钮，增加选择图片方法

<button @click="chooseImg">上传图片</button>
<script>export default {
    ......
    methods: {
      chooseImg(){
        uni.chooseImage({
          count: 3,
          success: function (res) {
            console.log(res.tempFilePaths);
          }
        });
      }
    }
  }</script>

其中​​count​​为最多可以选择的图片张数，默认9。这里我们设置 最多选择 3 张，下面是运行在小程序上的表现：我们选择 5 张，上传成功后，成功则返回图片的本地文件路径列表 tempFilePaths，可以看到确实是限制的 3 张

【图片展示】

我们可以把获得的本地图片路径保存起来

<script>export default {
    data() {
      return {
        imgArr: []
      }
    },
    methods: {
      chooseImg(){
        uni.chooseImage({
          count: 3, //默认9
          success:res=> {
            this.imgArr = res.tempFilePaths
          }
        });
      }
    }
  }</script>

运行在小程序中，可以在 AppData 中查看：

得到图片路径后，我们就可以把图片显示在页面上了

<image v-for="item in imgArr" :src="item"></image>

【图片预览】

给图片增加一个点击事件来预览图片

<image v-for="item in imgArr" :src="item" @click="previewImg(item)"></image>

<script>export default {
    data() {
      return {
        imgArr: []
      }
    },
    methods: {
      ......
      previewImg(current){
        uni.previewImage({
          urls:this.imgArr,
          current
        })
      }
    }
  }</script>