微信小程序口红项目制作

首先首页我们要完成的功能有:
左上角图片,点击图片播放指定音乐,图片并跟着一起360旋转
右下角,授权登陆,授权登陆成功后才会挑选下一页面,否则重新授权登陆
在这里插入图片

//index.js
const app = getApp()
const innerAudioContext = wx.createInnerAudioContext()
Page({
  data: {   
    b2 : 'b3',   
    ss : 1 
    },
UserClick:function(event){  
 wx.getSetting({   
   success(res){       
      console.log(res.authSetting['scope.userInfo'])       
          if (res.authSetting['scope.userInfo']==true){                                          
          wx.navigateTo({   
           url:'../camera/camera',       
         })      
            wx.authorize({      
                 scope: 'scope.userinfo', 
                 success:function(){         
                     wx.getUserInfo({        
                            success(res){},       
                            fail:function(err){console.log(err)}              })
     }      
    })     
      }   
        }   
        }) 
         }, 
         clickimg:function(){   
          var ss = this.data.ss;  
            if(ss === 1){  
              innerAudioContext.play()  
              this.setData({ 
                   b2 : 'b2', 
                   ss : 2  
                     })    
                  }else{   
                     innerAudioContext.pause()  
                     this.setData({   
                        b2 : 'b3',  
                        ss : 1   
                         })  
                           }   
                              }, 
      //事件处理函数  
      bindViewTap: function() {     }, 
      onLoad: function () {   
       innerAudioContext.autoplay = false    
       innerAudioContext.src = 'http://antiserver.kuwo.cn/anti.s?useless=/resource/&format=mp3&rid=MUSIC_144541061&response=res&type=convert_url&'    innerAudioContext.onPlay(() => {     
        console.log('开始播放')  
        })  
 innerAudioContext.onError((res) => {  
     console.log(res.errMsg)    
     console.log(res.errCode)   
      })   
 innerAudioContext.onPause( () =>{    
     console.log('停止播放')    
       }  
         )  
           }, 
    getUserInfo: function(e) {      }, 
   // onShow:function(){  //   this.onLoad();  // },})
<!--index.wxml-->
<image  class="b1" src="../images/1.jpg"></image>
<button class="n1" size="mini" open-type="getUserInfo" bindgetuserinfo="UserClick">请授权</button>
<image  class="{{b2}}" bindtap="clickimg" src="../images/2.jpg"></image>
/**index.wxss**/
.b1{  
width: 100%;  
height: 605px;
}
.n1{  
position: absolute;  
right: 10px;  
bottom: 10px;
}
.b2{  
 position: absolute;  
 left: 10px;  
 top: 10px;  
 width: 50px;  
 height: 50px;  
 transform:rotate(-30deg);  
 }
 @-webkit-keyframes animal {
   0%{    
    transform: rotate(0deg);    
    -ms-transform: rotate(0deg);    
    -webkit-transform: rotate(0deg);  
    }  
    100%{  
      transform: rotate(-360deg);    
      -ms-transform: rotate(-360deg);    
      -webkit-transform: rotate(-360deg); 
       }}
.b2 {
  -webkit-animation: animal 1s infinite linear ;  
  -webkit-transform-origin: center center;  
  -ms-transform-origin: center center;  
  transform-origin: center center;
  }
.b3{
  position: absolute;  
  left: 10px;  
  top: 10px;  
  width: 50px;  
  height: 50px;  
  transform:rotate(-30deg);
  }

然后跳转到下一个界面,我们需要做的功能是:
点击上传自拍,可以选择相册选择,还是相机自拍,然后将图片显示在页面中间显示框中
点击开始分析,如果没有选择图片,或者显示框中没有图片,会弹出您没有选择图片,如果选择看图片,跳转到下一个页面在这里插入图片描述

var list;
Page({
  takePhoto:function(e){
      var type=e;    
      if(type==='photo'){
            getApp().chooseType=1      
            wx.getStorage({
                    key: 'photo',        
                    success(res){
                          if(res.data===undefined||res.data==''){   
                                   getApp().isSame=false             
                                   wx.setStorage({   
                                           data: size,               
                                           key: 'camera',             
                                           })      
                                                 }else{     
                                                          var num=res.data;               if(res.data===size){    
                                                getApp.isSame=true              }else{                
                                                getApp().isSame=false      
                                                          wx.setStorage({   
                                                                         data: size,                  key: 'camera',         
                                                                                })     
                                                                                         }                }        }      })    }else{      getApp().chooseType=2    }    wx.showModal({      title: '提示',      content: '请选择',      cancelText:'自拍',      confirmText:'相册选择',      success :(res)=>{        if (res.confirm) {          console.log('相册选择')           wx.chooseImage({                  count:9,                  sizeType:['original', 'compressed'],                  sourceType:['album'],                  success:(res)=>{                    console.log(res.temFilePaths);                    list=res.tempFilePaths;                    this.setData({                      list : list                    })                  }                })        } else if(res.cancel) {          console.log('自拍')         wx.chooseImage({            count:9,            sizeType:['original', 'compressed'],            sourceType:['camera'],            success:(res)=>{              console.log(res.temFilePaths);              list=res.tempFilePaths;              this.setData({                list:list              })            }          })        }      }    })  },  imgClick:function(event){      console.log(event)      wx.previewImage({        urls:list,        current: event.currentTarget.dataset.img      })  },  fenxi:function(){     if(list=list){      wx.navigateTo({        url:'../fenxi/fenxi',      })     }else{       wx.showToast({         title: '您没有选择图片',       })     }  },  /**   * 页面的初始数据   */  data: {    item : ''  },
  /**   * 生命周期函数--监听页面加载   */  onLoad: function (options) {     var type=getApp.chooseType;     if(type===1){        if(getApp().isSame){          wx.getStorage({            key: 'photo_num',            success(res){              var num=res.data;            }          })        }else{          wx.getStorage({            key: 'photo_num',            success(res){              if(res.data===undefined||res.data==''){                var num=Math.floor(Math.random()*(8-1+1));                wx.setStorage({                  data: num,                  key: 'camera',                })               }else{                 var num=res.data;               }            }          })        }     }else{       wx.getStorage({         key: 'camera',         success(res){             if(res.data===undefined||res.data==''){              var num=Math.floor(Math.random()*(8-1+1));              wx.setStorage({                data: num,                key: 'camera',              })             }else{               var num=res.data;             }         }       })       var num=Math.floor(Math.random()*(8-1+1));       wx.setStorage({         data: data,         key: 'camera',       })     }  },
  /**   * 生命周期函数--监听页面初次渲染完成   */  onReady: function () {
  },
  /**   * 生命周期函数--监听页面显示   */  onShow: function () {
  },
  /**   * 生命周期函数--监听页面隐藏   */  onHide: function () {
  },
  /**   * 生命周期函数--监听页面卸载   */  onUnload: function () {
  },
  /**   * 页面相关事件处理函数--监听用户下拉动作   */  onPullDownRefresh: function () {
  },
  /**   * 页面上拉触底事件的处理函数   */  onReachBottom: function () {
  },
  /**   * 用户点击右上角分享   */  onShareAppMessage: function () {
  }})
<!--pages/camera/camera.wxml-->
<image class="l1" src="../images/4.png"></image>
<image class="l2" src="../images/5.png"></image>
<!-- <camera device-position="back" flash="off" resolution="high"binderror="error" style="width: 100%; height: 432px;"></camera> -->
<image mode="widthFix" src="{{src}}" class="l6"></image><image src="{{item}}" class="l6" wx:for="{{list}}" bindtap="imgClick" data-img="{{item}}"></image>
<button class="l3" bindtap="takePhoto">上传自拍</button>
<button class="l4" bindtap="fenxi">开始分析</button>
/* pages/camera/camera.wxss */
.l1{
  width: 100%;  
  height: 605px;
  }
.l2{
  width:280px;  
  height: 320px;  
  position: absolute;  
  left: 50px;  
  top: 120px;  
  border: 3px solid #cccccc;
  }
.l3{
   position: absolute;   
   top:460px;   
   left: 100px;   
   border-radius: 3%;
   }
.l4{
  position: absolute;   
  top:520px;   
  left: 100px;   
  border-radius: 3%;
  }
.l6{
  width:280px;  
  height: 320px;  
  position: absolute;  
  left: 53px;  
  top: 122px;
  }

到下一个页面,
需要做的功能有:
实现动画的效果,用到了隐藏和设置了时间显示
动画播完后接着跳转到最后一个页面在这里插入图片描述

// pages/fenxi/fenxi.js
var list;
var count = 0;
var flag=truePage({
  data: {  
    list: [   
       {      img: "../images/03_m01.png",
               w: true      
               },
       {      img: '../images/03_m02.png',        
              w: true    
               },
       {      img: '../images/03_m03.png', 
              w: true  
               },  
       {      img: '../images/03_m04.png',  
              w: true   
               },  
       {      img: '../images/03_m05.png',    
              w: true   
               },      
       {      img: '../images/03_m06.png',    
              w: true  
                  } 
           ] 
      // list:[true,true,true,true,true,true]  }, 
onLoad: function (options) {  
  var id = setInterval(() => {   
     var list = this.data.list;   
        if(flag)      {    
            for (var i = 0; i <= count; i++) {    
                  list[i].w = false;   
                  }     
                   this.setData({    
                         list: list    
                             })    
                   count++;        
                   if (count === 6) {     
                        flag = false          
                        count=0      
                        }   
                         }else{        
                            for (var i = 0; i <= count; i++) {      
                                list[i].w = true;        
                                }       
                                this.setData({     
                                    list: list   
                                         })        
                                         count++;   
                                        if (count === 6) {    
                                              count=0          
                                              flag=true        }      }          }, 250);    setTimeout(() => {    
                    clearInterval(id)      wx.navigateTo({        url: '/pages/xinxi/xinxi',      })    }, 6000);  },
  /**   * 生命周期函数--监听页面初次渲染完成   */  onReady: function () {
  },
  /**   * 生命周期函数--监听页面显示   */  onShow: function () {
  },
  /**   * 生命周期函数--监听页面隐藏   */  onHide: function () {
  },
  /**   * 生命周期函数--监听页面卸载   */  onUnload: function () {
  },
  /**   * 页面相关事件处理函数--监听用户下拉动作   */  onPullDownRefresh: function () {
  },
  /**   * 页面上拉触底事件的处理函数   */  onReachBottom: function () {
  },
  /**   * 用户点击右上角分享   */  onShareAppMessage: function () {
  }})
<!--pages/fenxi/fenxi.wxml-->
<image src="../images/6.png" class="p1"></image><view class="p2">    
<image class="{{item.w?'p3':'p33'}}" wx:for="{{list}}" src="{{item.img}}"></image>  </view>
/* pages/fenxi/fenxi.wxss */
.p1{ 
 width: 100%;  
 height: 605px;
 }
.p2{ 
 position: absolute;  
 top: 450px;  
 left: 50px;
 }
.p3{ 
 width: 30px;  
 margin-left: 10px;  
 height: 20px;  
 visibility: hidden;
 }
.p33{ 
 width: 30px;  
 height: 20px;  
 margin-left: 10px;  
 visibility: visible;
 }
©️2020 CSDN 皮肤主题: 游动-白 设计师:上身试试 返回首页