思路:两个页面在第一个页面中写照片,第二个页面中写云朵
照片:
wxml:
<image src="{{img}}" mode="scaleToFill" />
<button bindtap="cameraClick">上传自拍</button>
<button bindtap="analyse">开始分析</button>
wxss:没有
js:
// pages/index2/index2.js
var ifor;//判断是相机还是上传
Page({
/**
* 页面的初始数据
*/
data: {
img: 'https://676c-glm-jcg6b-1303186945.tcb.qcloud.la/lip/02_face.png?sign=632b450223b7a533f8bb3f6bde61463b&t=1600329170',
},
cameraClick: function () {
wx.showActionSheet({
itemList: ['相机拍摄', '上传图片'],
success: (res) => {
if (res.tapIndex == 0) {
// 相机
wx.chooseImage({
count: 9,
sizeType: ['original'],
sourceType: ['camera'],
success:(res)=> {
console.log('res',res)
var pic = res.tempFilePaths["0"]
console.log('pic',pic)
this.setData({
img : pic
})
}
})
} else if (res.tapIndex == 1) {
// 上传
wx.chooseImage({
count: 1,
sizeType: ['original'],
sourceType: ['album'],
success:(res)=> {
console.log('res',res)
var pic = res.tempFilePaths["0"]
console.log('pic',pic)
this.setData({
img : pic
})
}
})
}
}
})
},
// 开始分析,必须要上传图片
analyse: function(){
wx.navigateTo({
url: '../index1/index1'
})
var pic = this.data.img
if(pic ==='https://676c-glm-jcg6b-1303186945.tcb.qcloud.la/lip/02_face.png?sign=632b450223b7a533f8bb3f6bde61463b&t=1600329170'){
console.log('-------------')
wx.showModal({
title: '失败',
content: '请先上传自拍',
showCancel: false
})
}else{
console.log(this.data.img)
var imgdata = this.data.img;
wx.setStorage({
data: imgdata,
key: 'key',
})
}
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
云朵:
wxml:
<view class="content">
<image class="clound1"wx:if="{{imga}}" src="../../img/03_m01.png"></image>
<image class="clound2"wx:if="{{imgb}}" src="../../img/03_m02.png"></image>
<image class="clound3"wx:if="{{imgc}}" src="../../img/03_m03.png"></image>
<image class="clound4"wx:if="{{imgd}}" src="../../img/03_m04.png"></image>
<image class="clound5"wx:if="{{imge}}" src="../../img/03_m05.png"></image>
<image class="clound6"wx:if="{{imgf}}" src="../../img/03_m06.png"></image>
</view>
wxss:
/* pages/index5/index5.wxss */
page {
background-color: rgb(145, 67, 67);
}
.content {
width: 500rpx;
margin: 0px auto;
margin-top: 200px;
position: relative;
}
.clound1 {
width: 40px;
height: 20px;
position: absolute;
left: 0px;
}
.clound2 {
width: 35px;
height: 20px;
position: absolute;
left: 50px;
}
.clound3 {
width: 30px;
height: 20px;
position: absolute;
left: 100px;
}
.clound4 {
width: 25px;
height: 20px;
position: absolute;
left: 150px;
}
.clound5 {
width: 20px;
height: 20px;
position: absolute;
left: 200px;
}
.clound6 {
width: 20px;
height: 20px;
position: absolute;
left: 250px;
}
js:
// pages/index1/index1.js
Page({
/**
* 页面的初始数据
*/
data: {
imga: false,
imgb: false,
imgc: false,
imgd: false,
imge: false,
imgf: false
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
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: '../index2/index2',
})
},13000)
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})