微信小程序 —— 口红项目设计思路
一、首页
-
页面分布
（1）全局使用定位进行设计。
（2）总宽度铺满全屏。
（3）利用定位将背景图片置于底层。
（4）利用定位设置左上角的音乐图标和右下角的下一页按钮。
（5）根据 data 中的 rotate 逻辑值判断音乐的暂停 or 播放和图标的暂停 or 旋转
（6）动画代码：
/* 暂停 */ .rotate_paused { animation:turn 2s linear infinite; animation-play-state: paused; } /* 旋转 */ .rotate_running { animation:turn 2s linear infinite; animation-play-state: running; } /* 定义动画 */ @keyframes turn { 0%{ -webkit-transform:rotate(0deg);} 50%{ -webkit-transform:rotate(180deg);} 100%{ -webkit-transform:rotate(360deg);} } -
逻辑层
（1）创建 InnerAudioContext 实例，将实例赋给全局变量。
let music = wx.createInnerAudioContext();（2）data 数据：
data: { rotate: false, imageUrl: { backImage: "https://7365-seven-one-ldldc-1303203132.tcb.qcloud.la/imageData/01_base.png?sign=67e0e0a5beaf7de6bb399b627e5e5f74&t=1600329035", musicIcon: "https://7365-seven-one-ldldc-1303203132.tcb.qcloud.la/icon/music.png?sign=cf8c0c6df08ccff03be0730f124a9d88&t=1600329117" } },（3）下一页按钮：
① 首先获取用户所开启的权限。 ② 判断已开启权限中是否存在相机权限。 ③ 若没有相机权限，则弹出提示框，让用户开启权限。 ④ 若已开启相机权限，直接跳转到下一页面。（4）音乐图标单击事件：
① 获取 data 中的 rotate ② 将其取反后赋给 data ③ 根据 rotate 控制音乐的暂停和播放。 if (rotate) { music.pause(); // 暂停 } else { music.play(); //播放 }（5）页面初次加载事件：
onReady: function () { music.src = "https://sharefs.yun.kugou.com/202009172010/c377aa9de47190bc7c1c90818f74cc6f/G168/M00/11/09/SIcBAF0UvIWAJtU5AHjuirfn_XU221.mp3"; music.loop = true; music.play(); },（6）页面隐藏关掉音乐
onHide: function () { music.pause(); },
二、上传图片页
-
页面
（1）定位背景图。
（2）添加按钮，绑定单击事件。
-
逻辑
（1）上传按钮单击事件：
① 利用 wx.showActionSheet API 从底部弹出滚动选择框，选择拍照或上传。 ② 根据 wx.showActionSheet 的返回值判断用户点击的选择或上传。 ③ 点击拍照，利用 wx.chooseImage API 上传图片。上传成功后修改 data 中的数据。 that.setData({ imageUrl:{ backImage:"https://7365-seven-one-ldldc-1303203132.tcb.qcloud.la/imageData/02_base.png?sign=648f6891fce6540aea2f25f784d28ebf&t=1600329352", adminImage:res.tempFilePaths[0] }, // type 值用来标识用户点击了拍照 type:0, // imageSize 用来表示上传图片的大小。 imageSize : res.tempFiles[0].size }) ④ 点击从相册上传 case 1: wx.chooseImage({ count:1, sizeType: ['original', 'compressed'], sourceType: ['album'], success:(res) => { that.setData({ imageUrl:{ backImage:"https://7365-seven-one-ldldc-1303203132.tcb.qcloud.la/imageData/02_base.png?sign=648f6891fce6540aea2f25f784d28ebf&t=1600329352", adminImage:res.tempFilePaths[0] }, type:1, imageSize : res.tempFiles[0].size }) } }) break;（2）开始分析按钮
① 获取 data 中的 type 和 imageSize ② 通过 url 将 data 中的 type 和 imageSize analysis:function() { var type = this.data.type; var imageSize = this.data.imageSize; // 通过 url 将 data 中的 type 和 imageSize wx.navigateTo({ url: '../load/load?type='+type+"&imageSize="+imageSize, }) }
三、加载页
**var count = 0;
var yun = [];
var countType = 0;
Page({
data: {
imageUrl:{
backImage:"https://7365-seven-one-ldldc-1303203132.tcb.qcloud.la/imageData/03_base.png?sign=7766fbd99b75cc1cbd1306717b5b763c&t=1600331701"
},
yun:[]
},
// 封装一个随机函数
rand:function()
{
var rand = Math.floor(Math.random() * 9);
return rand;
},
onLoad: function (options) {
// 获取 upLoad 页面传过来的数据
var type = options.type;
var imageSize = options.imageSize;
// 利用 count 和 type 的值判断用户第一次点击拍照
if (countType == 0 && type == 0)
{
countType++;
// 调用随机函数
var rand = this.rand();
// 调用 app.js 中的文案数据。
var appType = getApp().type;
// 根据随机函数返回值在 app.js 中取出一条数据。
var typeData = appType[rand].text;
// 将取出的数据存入缓存中。
wx.setStorage({
key:"type1",
data:typeData
})
// 存入缓存后在 data 页面中将数据渲染出来。
}
// 当 type 值为1时表示用户单击了上传图片
if (type == 1)
{
// 生成随机数
var rand = this.rand();
// 调用 app.js 中的文案数据。
var appType = getApp().type;
// 根据随机函数返回值在 app.js 中取出一条数据。
var typeData = appType[rand].text;
// 将图片大小和随机文案放入一个对象中
var dataObject = {
imageSize:imageSize,
word:typeData
}
// 提取缓存中的 rand 数组。
wx.getStorage({
key:"rand",
success:(res) => {
// 取值成功后，将 res 中的 data 值存入变量 data 中。
var data = res.data;
// 判断 data 的长度，若长度为0表示数组中无数据
if (data.length == 0)
{
// 将 dataObject 添加到数组中，并同步缓存数据。
data.push(dataObject);
wx.setStorage({
key:"rand",
data:data
})
}
else
{
// 声明两个变量，dataLong 用于存放 data 的长度；dataCount 累加器
var dataLong = data.length;
var dataCount = 0;
// 遍历数组 data
for(var i=0;i<dataLong;i++)
{
if (data[i].imageSize == imageSize)
{
// 如果 data 中第 i 个元素的图片大小与刚上传的图片大小一致则不做任何处理。
// 此处使用 continue 退出本次循环，执行下一次循环。使用 break 也可以。
continue;
}
else
{
// 如果 data 中第 i 个元素的图片大小与刚上传的图片大小不一致，累加器自增。
dataCount++;
}
// 最后判断累加器的值与 data 长度大小关系。如果相等，说明第二次上传的图片在
// data 中不存在，直接将 data 同步到缓存中。
if(dataLong == dataCount)
{
data.push(dataObject);
wx.setStorage({
key:"rand",
data:data
})
}
}
}
}
})
}
// 处理加载动画
var that = this;
var id = setInterval(()=>{
count++;
switch(count % 7)
{
case 0:
yun = [];
that.setData({
yun:yun
})
break;
case 1:
yun = [
{
url:"https://7365-seven-one-ldldc-1303203132.tcb.qcloud.la/imageData/03_m01.png?sign=fe20190c069810385a43a1295eedc564&t=1600332009",
style:"width: 100rpx;height: 60rpx;"
}
];
that.setData({
yun:yun
})
break;
case 2:
yun = [
{
url:"https://7365-seven-one-ldldc-1303203132.tcb.qcloud.la/imageData/03_m01.png?sign=fe20190c069810385a43a1295eedc564&t=1600332009",
style:"width: 100rpx;height: 60rpx;"
},
{
url:"https://7365-seven-one-ldldc-1303203132.tcb.qcloud.la/imageData/03_m02.png?sign=784eaef789625fb46b18d7f0961deeae&t=1600332026",
style:"width: 90rpx;height: 60rpx;"
}
];
that.setData({
yun:yun
})
break;
case 3:
yun = [
{
url:"https://7365-seven-one-ldldc-1303203132.tcb.qcloud.la/imageData/03_m01.png?sign=fe20190c069810385a43a1295eedc564&t=1600332009",
style:"width: 100rpx;height: 60rpx;"
},
{
url:"https://7365-seven-one-ldldc-1303203132.tcb.qcloud.la/imageData/03_m02.png?sign=784eaef789625fb46b18d7f0961deeae&t=1600332026",
style:"width: 90rpx;height: 60rpx;"
},
{
url:"https://7365-seven-one-ldldc-1303203132.tcb.qcloud.la/imageData/03_m03.png?sign=166c802ea83f7afd780b66f7ff7f6c6e&t=1600332041",
style:"width: 80rpx;height: 60rpx;"
}
];
that.setData({
yun:yun
})
break;
case 4:
yun = [
{
url:"https://7365-seven-one-ldldc-1303203132.tcb.qcloud.la/imageData/03_m01.png?sign=fe20190c069810385a43a1295eedc564&t=1600332009",
style:"width: 100rpx;height: 60rpx;"
},
{
url:"https://7365-seven-one-ldldc-1303203132.tcb.qcloud.la/imageData/03_m02.png?sign=784eaef789625fb46b18d7f0961deeae&t=1600332026",
style:"width: 90rpx;height: 60rpx;"
},
{
url:"https://7365-seven-one-ldldc-1303203132.tcb.qcloud.la/imageData/03_m03.png?sign=166c802ea83f7afd780b66f7ff7f6c6e&t=1600332041",
style:"width: 80rpx;height: 60rpx;"
},
{
url:"https://7365-seven-one-ldldc-1303203132.tcb.qcloud.la/imageData/03_m04.png?sign=bb661357ba371d9507dbe41320a786f7&t=1600332059",
style:"width: 70rpx;height: 60rpx;"
}
];
that.setData({
yun:yun
})
break;
case 5:
yun = [
{
url:"https://7365-seven-one-ldldc-1303203132.tcb.qcloud.la/imageData/03_m01.png?sign=fe20190c069810385a43a1295eedc564&t=1600332009",
style:"width: 100rpx;height: 60rpx;"
},
{
url:"https://7365-seven-one-ldldc-1303203132.tcb.qcloud.la/imageData/03_m02.png?sign=784eaef789625fb46b18d7f0961deeae&t=1600332026",
style:"width: 90rpx;height: 60rpx;"
},
{
url:"https://7365-seven-one-ldldc-1303203132.tcb.qcloud.la/imageData/03_m03.png?sign=166c802ea83f7afd780b66f7ff7f6c6e&t=1600332041",
style:"width: 80rpx;height: 60rpx;"
},
{
url:"https://7365-seven-one-ldldc-1303203132.tcb.qcloud.la/imageData/03_m04.png?sign=bb661357ba371d9507dbe41320a786f7&t=1600332059",
style:"width: 70rpx;height: 60rpx;"
},
{
url:"https://7365-seven-one-ldldc-1303203132.tcb.qcloud.la/imageData/03_m05.png?sign=8f04ce8939c1707e09348b79dfee09f5&t=1600332078",
style:"width: 60rpx;height: 60rpx;"
}
];
that.setData({
yun:yun
})
break;
case 6:
yun = [
{
url:"https://7365-seven-one-ldldc-1303203132.tcb.qcloud.la/imageData/03_m01.png?sign=fe20190c069810385a43a1295eedc564&t=1600332009",
style:"width: 100rpx;height: 60rpx;"
},
{
url:"https://7365-seven-one-ldldc-1303203132.tcb.qcloud.la/imageData/03_m02.png?sign=784eaef789625fb46b18d7f0961deeae&t=1600332026",
style:"width: 90rpx;height: 60rpx;"
},
{
url:"https://7365-seven-one-ldldc-1303203132.tcb.qcloud.la/imageData/03_m03.png?sign=166c802ea83f7afd780b66f7ff7f6c6e&t=1600332041",
style:"width: 80rpx;height: 60rpx;"
},
{
url:"https://7365-seven-one-ldldc-1303203132.tcb.qcloud.la/imageData/03_m04.png?sign=bb661357ba371d9507dbe41320a786f7&t=1600332059",
style:"width: 70rpx;height: 60rpx;"
},
{
url:"https://7365-seven-one-ldldc-1303203132.tcb.qcloud.la/imageData/03_m05.png?sign=8f04ce8939c1707e09348b79dfee09f5&t=1600332078",
style:"width: 60rpx;height: 60rpx;"
},
{
url:"https://7365-seven-one-ldldc-1303203132.tcb.qcloud.la/imageData/03_m06.png?sign=d7c5439f9961022ec9485cf49f55a577&t=1600332088",
style:"width: 50rpx;height: 60rpx;"
}
];
that.setData({
yun:yun
})
break;
}
if (count % 13 == 0)
{
clearInterval(id);
wx.redirectTo({
// 此处向 ../data/data 页面传递参数，type(拍照/上传的标识)；imageSize(图片大小)
url: '../data/data?type='+type+"&imageSize="+imageSize,
})
}
},100)
count = 0;
},
})**
四、展示层
Page({
/**
* 页面的初始数据
*/
data: {
imageUrl:"https://7365-seven-one-ldldc-1303203132.tcb.qcloud.la/imageData/05_base.png?sign=c6c4f8490e228fd7eccb3cbe60b3f0e9&t=1600335349"
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
// 接收 load 页面传过来的参数
var typeNumber = options.type;
var imageSize = options.imageSize;
// 判断 typeNumber 的值。
if(typeNumber == 0)
{
// 如果 typeNumber == 0 说明用户点击了拍照，从缓存中取出 type1 的值，并同步到页面初始数据 data 中。
wx.getStorage({
key:"type1",
success:(res) => {
this.setData({
adminText:res.data
})
}
})
}
else
{
// 否则 typeNumber == 1 说明用户点击了上传，从缓存中取出 rand 中 data 的值。
wx.getStorage({
key:"rand",
success:(res) => {
// 取出的 data 值存入变量 data 中。
var data = res.data;
// 利用 for in 遍历数组 data
for (var prop in data)
{
// 匹配与上传图片大小相同的数组元素。匹配成功后将图片对应的文案存入页面初始数据 data 中。
if (data[prop].imageSize == imageSize)
{
this.setData({
adminText:data[prop].word
})
}
}
}
})
}
},
rand:function()
{
var rand = Math.ceil(Math.random() * 10);
if (rand == 0)
{
return 1;
}
else if(rand == 10)
{
return 9;
}
else
{
return rand;
}
},
})