微信小程序(三十三)promise异步写法

注释很详细,直接上代码

上一篇

新增内容:
1.promise异步与普通异步的写法区别
2.promise异步的优势

源码:

index.wxml

<view class="preview" bind:tap="onChoose">
    <image src="{{avatar}}" mode="aspectFill"/>
view>

index.wxss

.item{
    display: flex;
    /* 水平均分 */
    justify-content:space-evenly;
    height: 60rpx;
}           

/* 页面对比色 */
page{
  background-color: #f2f2f2;  
}

index.js

Page({
    data:{
        //存储学生信息的数组
        students:[],
        avatar:"/images/start.png"
    },
    //promise异步调用方法
    //不用写success的方法,避免不必要的嵌套
    //这里只是个范例,可以应用于任意支持promise异步的方法
    async onChoose(){
        //使用其中关键词进行解构
        const {tempFiles}= await wx.chooseMedia({
            mediaType:['image'],//数组里面是数据类型,可以有多个,默认是图片视频都可以
            count:1,//设置可选择的媒体数量,默认9张,根据版本不同最多为9或20张
        })
        
        //路径赋值
        this.setData({
           avatar:tempFiles[0].tempFilePath
        })
    }
})

效果演示:

微信小程序(三十三)promise异步写法_第1张图片

你可能感兴趣的:(微信小程序,微信小程序,小程序)