微信小程序 —— 口红项目设计思路

一、首页

  1. 页面分布

    (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);}
    }
    
  2. 逻辑层

    (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. 页面

    (1)定位背景图。

    (2)添加按钮,绑定单击事件。

  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;
		}
	},
})

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