练习项目笔记：

index1：

<button  wx:if="{{canIUseGetUserProfile}}" bindtap="getUserProfile" class="btn" size="mini">授权登录</button>
<!-- <image bindtap="bindViewTap" src="{{name.avatarUrl}}" mode="cover"></image>
<text>{{name.nickName}}</text> -->

.btn{
    position: absolute;
    bottom: 40rpx;
    right: 40rpx;
}

// js
Page({
    data:{
        name:'',
        canIUseGetUserProfile: true,//显示登录按钮(wx:if 是遇 true 显示，hidden 是遇 false 显示。)
    },
onLoad(){
    wx.getStorage({//异步获取缓存
        key:"name",//本地缓存中指定的 key
        success:(res)=>{ 
          console.log('获取缓存成功',res.data)      
            this.setData({
                name:res.data, //将得到的缓存给key 
                 canIUseGetUserProfile: false,             
            }) 
            wx.navigateTo({
              url: '../index3/index3',
            })
         } ,           
         fail:(err)=>{
                console.log("获取失败",err);
            }       
    })//因为异步操作耗时，后显示这个。与下面的console.log("======")比较   
    try {//同步操作（按顺序显示），先显示这个。与下面的console.log("======")比较 
                var count= wx.getStorageSync('count', '')
                console.log('count',count);
               } catch (e) { }
        console.log('======');    
},

    getUserProfile(e){//获取用户信息绑定的单击事件
        wx.getUserProfile({//获取用户信息
          desc: '用于完善会员资料',// 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
           success:(res)=>{
            console.log("---",res);    
            this.setData({
              name:res.userInfo
            })
            wx.setStorage({
                key:'name',//本地缓存中指定的 key(类型：string)
                data:res.userInfo,//需要存储的内容。只支持原生类型、Date、及能够通过JSON.stringify序列化的对象(类型:any)
                success:(s)=>{
                    console.log('存储缓存成功====',s);
                    this.setData({
                         canIUseGetUserProfile: false  //隐藏登录按钮  
                    })
                },
                fail:(f)=>{
                    console.log('存储缓存失败====',f);                    
                }
            })
            wx.setStorage({//第二个缓存
                key:"count",
                data:"缓存2"
            })
        }
        })
}
})

<button bindtap="next" class="btn" size="mini">下一个</button>

<button bindtap="next" class="btn" size="mini">下一个</button>

next:function(){
    wx.navigateTo({
      url: '../index4/index4',
    })
},

index3

<image mode="aspectFit" src="{{img}}"></image> 
 <camera device-position="front" flash="on" binderror="error" style="width: 100%; height: 300px;" hidden="{{hidden}}"> </camera> 
<button type="front" bindtap="takePhoto" hidden="{{hidden}}">拍照</button>
<button bindtap="photo">上传或拍照</button>
<button bindtap="analyse">开始分析</button>

data: {
    second:"",
    img:"../../img/img05.jpg",
    hidden:true
      },
      photo:function(){      var that=this
        wx.showModal({
          title: '多多',
          content: '请选择',
          cancelText:"摄像头",
          confirmText:"上传图片",
          success (res) {
            if (res.confirm) {
               wx.chooseImage({
                count: 1,
                sizeType: ['original'],
                sourceType: ['camera'],
                success (res) {
                  console.log(res)
                  // tempFilePath可以作为img标签的src属性显示图片
                  var tempFilePaths = res.tempFilePaths[0]
                  console.log(tempFilePaths)
                  that.setData({
                    img:tempFilePaths
                  })
                }
              })
            } else if (res.cancel){
              var  ctx = wx.createCameraContext()
        ctx.takePhoto({
          quality: 'high',
          success: (res) => {
            that.setData({
              hidden:false,
              img: res.tempImagePath
            })
          
          }
        })
              
          }}
        })
     
      },

      takePhoto:function() {
       var  ctx = wx.createCameraContext()
        ctx.takePhoto({
          quality: 'high',
          success: (res) => {
            this.setData({
              img: res.tempImagePath
            })
          }
        })
      },
      error(e) {
        console.log(e.detail)
      },

       analyse: function(){
         
            var pic = this.data.img
            if(pic ==='../../img/img05.jpg'){
              console.log('-------------')
              wx.showModal({
                title: '失败',
                content: '请先上传自拍',
                showCancel: false
              })
            }else{
             wx.navigateTo({
                  url: '../index5/index5'
                })
              console.log(this.data.img)
              var imgdata = this.data.img;
              wx.setStorage({
                data: imgdata,
                key: 'key',
              })
             
            }
          },
onLoad: function (options) {
    wx.authorize({
      scope: 'scope.camera',
    })
    wx.setStorage({
      data: 'data',
      key: 'key',
    })
  },

.boxx{
    width: 100vw;
    height: 40vh;
}
.box{
    position: absolute;
    top: 42vh;
    left: 0;
    width: 100vw;
    height: 60vh;
  }
  .box1{
    flex-direction: column;
  }
  .center{
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .bottom{
    margin-top: 100rpx;
  }
  .middle{
    margin-top: 30rpx;
  }
  .box2{
    background-color: rgb(247, 241, 241);
    width: 300rpx;
    height: 80rpx;
    border-radius: 25rpx;
  }
  .img1{
    width: 500rpx;
    height: 700rpx;
  }

index4

<view class="jiazai">
<image class="loadimg1" wx:if="{{imga}}" src="../../img/03_m01.png"></image>
<image class="loadimg2" wx:if="{{imgb}}" src="../../img/03_m02.png"></image>
<image class="loadimg3" wx:if="{{imgc}}" src="../../img/03_m03.png"></image>
<image class="loadimg4" wx:if="{{imgd}}" src="../../img/03_m04.png"></image>
<image class="loadimg5" wx:if="{{imge}}" src="../../img/03_m05.png"></image>
<image class="loadimg6" wx:if="{{imgf}}" src="../../img/03_m06.png"></image>
</view>

    data: {
    imga: false,
    imgb: false,
    imgc: false,
    imgd: false,
    imge: false,
    imgf: false
    },   
onLoad: function (options) {
            setTimeout(() => {
                  this.setData({
                    imga:true
                  })
                }, 1000);
                setTimeout(() => {
                  this.setData({
                    imgb:true
                  })
                }, 1500);
                setTimeout(() => {
                  this.setData({
                    imgc:true
                  })
                }, 2000);
                setTimeout(() => {
                  this.setData({
                    imgd:true
                  })
                }, 2500);
                setTimeout(() => {
                  this.setData({
                    imge:true
                  })
                }, 3000);
                setTimeout(() => {
                  this.setData({
                    imgf:true
                  })
                }, 3500);
                setTimeout(() => {
                  this.setData({
                    imgf:false
                  })
                }, 4000);
                setTimeout(() => {
                  this.setData({
                    imge:false
                  })
                }, 4500);
                setTimeout(() => {
                  this.setData({
                    imgd:false
                  })
                }, 5000);
                setTimeout(() => {
                  this.setData({
                    imgc:false
                  })
                }, 5500);
                setTimeout(() => {
                  this.setData({
                    imgb:false
                  })
                }, 6000);
                setTimeout(() => {
                  this.setData({
                    imga:false
                  })
                }, 6500);
                setTimeout(() => {
                  this.setData({
                    imga:true
                  })
                }, 7000);
                setTimeout(() => {
                  this.setData({
                    imgb:true
                  })
                }, 7500);
                setTimeout(() => {
                  this.setData({
                    imgc:true
                  })
                }, 8000);
                setTimeout(() => {
                  this.setData({
                    imgd:true
                  })
                }, 8500);
                setTimeout(() => {
                  this.setData({
                    imge:true
                  })
                }, 9000);
                setTimeout(() => {
                  this.setData({
                    imgf:true
                  })
                }, 9500);
                setTimeout(() => {
                  this.setData({
                    imgf:false
                  })
                }, 10000);
                setTimeout(() => {
                  this.setData({
                    imge:false
                  })
                }, 10500);
                setTimeout(() => {
                  this.setData({
                    imgd:false
                  })
                }, 11000);
                setTimeout(() => {
                  this.setData({
                    imgc:false
                  })
        },11500)
         setTimeout(() => {
                  this.setData({
                    imgb:false
                  })
        },12000)
        setTimeout(() => {
                  this.setData({
                    imga:false
                  })
        },12500)
        setTimeout(() => {
               wx.navigateTo({
              url: '../index6/index6',
            })
        },13000)
    },

page{
    background-color: rgb(145, 67, 67);
}
.jiazai {
    background-color: black;
    width: 500rpx;
    margin: 0px auto;
    margin-top: 200px;
    position: relative;
}

.loadimg1 {
    width: 40px;
    height: 20px;
    position: absolute;
    left: 0px;
}

.loadimg2 {
    width: 35px;
    height: 20px;
    position: absolute;
    left: 50px;
}

.loadimg3 {
    width: 30px;
    height: 20px;
    position: absolute;
    left: 100px;
}

.loadimg4 {
    width: 25px;
    height: 20px;
    position: absolute;
    left: 150px;

}

.loadimg5 {
    width: 20px;
    height: 20px;
    position: absolute;
    left: 200px;
}

.loadimg6 {
    width: 20px;
    height: 20px;
    position: absolute;
    left: 250px;
}