2020-09-28

---

口红小程序

爱玩的恐龙

---

// An highlighted block
<view class="SevenOne">
	<image src="{{imageUrl.backImage}}" class="back_image"></image>
	<view bindtap="jumpPage" class="jump"><image class="p1" src="../../img/sq.png"></image></view>
	<view class="music" bindtap="music">
		<image src="{{imageUrl.musicIcon}}" class="{{rotate?'rotate_paused':'rotate_running'}}"></image>
	</view>
</view>

//页面一js.
var music = wx.createInnerAudioContext();
Page({
  data: {
    rotate:false,
    imageUrl:{
      backImage:"https://7365-seven-one-ldldc-1303203132.tcb.qcloud.la/imageData/01_base.png?sign=67e0e0a5beaf7de6bb399b627e5e5f74&t=1600329035",
      musicIcon:"https://6162-abc-9gee2ujjfd2d50b0-1303226646.tcb.qcloud.la/picture/yy.png?sign=39bc5f13b8ef689eaa689fd126a1b5f8&t=1600747341"
    }
  },

  // 下一页单击事件
  jumpPage:function()
  {
    // 获取用户当前设置的权限
    wx.getSetting({
      success:(res) => {
        // 判断用户的相机权限是否开启，未开启值为 undefined,开启后值为 true
        if (res.authSetting['scope.camera'] == undefined)
        {
          // 如果未开启相机权限，适用 wx.authorize API 弹出访问框
          wx.authorize({
            scope: 'scope.camera',
            success:() => {
              // 用户点击确定后执行此处代码。跳转页面
              wx.navigateTo({
                url: '../upLoad/upLoad',
              })
            }
          })
        }
        // 若用户已开启相机权限，直接跳转页面。
        else
        {
          wx.navigateTo({
            url: '../upLoad/upLoad',
          })
        }
      }
    })
  },

  // 左上角音乐图标的单击事件
  music:function()
  {
    var rotate = this.data.rotate;
    rotate = !rotate;
    this.setData({
      rotate:rotate
    })
    if (rotate)
    {
      music.pause();
    }
    else
    {
      music.play();
    }
  },
  onShow: function () {
    music.play();
  },
  onHide: function () {
    music.pause();
	},
  onReady: function () {
    music.src = "https://sharefs.yun.kugou.com/202009172010/c377aa9de47190bc7c1c90818f74cc6f/G168/M00/11/09/SIcBAF0UvIWAJtU5AHjuirfn_XU221.mp3";
    music.loop = true;
    music.play();
	},
})
//页面一  xml
.SevenOne
{
	width: 100vw;
	height: 100vh;
	position: relative;
}
.back_image
{
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: 0;
}
.jump
{
	width: 200rpx;
	height: 100rpx;
	position: absolute;
	right: 5rpx;
	bottom: 10rpx;

}
.p1{
	width: 100rpx;
	height: 80rpx;
	position: absolute;
	margin-left: 60rpx;

}
.music
{
	width: 100rpx;
	height: 100rpx;
	position: absolute;
	top: 20rpx;
	left: 20rpx;
	z-index: 2;
}
.music image
{
	width: 100%;
	height: 100%;
}
.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);}
}
//页面二  js
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)
					{
						// 将 rand 添加到数组中，并同步缓存数据。
						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;
	},
})
//页面二 wxml
<view class="SevenOne">
	<image src="{{imageUrl.backImage}}" class="back_image"></image>
	<view class="content">
		<view class="load">
			<image wx:for="{{yun}}" style="{{item.style}}" src="{{item.url}}"></image>
		</view>
		<view class="text">秘密分析中……</view>
	</view>
</view>
## 页面二 css
.SevenOne
{
	width: 100vw;
	height: 100vh;
	position: relative;
}
.back_image
{
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: 0;
}
.content
{
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: 1;
}
.load
{
	width: 600rpx;
	height: 60rpx;
	margin: auto;
	margin-top: 900rpx;
	display: flex;
	position: relative;
}
.load image
{
	margin: 0rpx 5rpx;
}
.text
{
	color: white;
	font-size: 14px;
	margin-left: 420rpx;
}
//页面三 js
Page({
	data: {
		imageUrl:{
			backImage:"https://7365-seven-one-ldldc-1303203132.tcb.qcloud.la/imageData/02_base.png?sign=648f6891fce6540aea2f25f784d28ebf&t=1600329352",
			adminImage:"https://7365-seven-one-ldldc-1303203132.tcb.qcloud.la/imageData/02_face.png?sign=149bb112ed8635368fb349726c809072&t=1600329278"
		}
	},
	upload:function()
	{
		var that = this;
		wx.showActionSheet({
			itemList: ['拍照', '从相册中选择'],
			success (res) {
				// 通过 res.tapIndex 判断用户选择的拍照或从相册中选择。
				switch(res.tapIndex)
				{
					// 用户点击了拍照
					case 0:
						// 使用 wx.chooseImage API
						wx.chooseImage({
							count:1,
							sizeType: ['original', 'compressed'],
							sourceType: ['camera'],
							success:(res) => {
								// 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
								})
							}
						})
						break;
					// 用户点击了从相册上传
					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;
				}
			}
		})
	},
	
	// 跳转到加载页面（开始分析按钮的单击事件）
	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,
		})
	}
})
//页面三 wxml
<view class="SevenOne">
	<image src="{{imageUrl.backImage}}" class="back_image"></image>
	<view class="content">
		<view class="photo">
			<image src="{{imageUrl.adminImage}}"></image>
		</view>
		<view class="btn">
			<view bindtap="upload">上传自拍</view>
			<view bindtap="analysis">开始分析</view>
		</view>
	</view>
</view>
//页面三 css
.SevenOne
{
	width: 100vw;
	height: 100vh;
	position: relative;
}
.back_image
{
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: 0;
}
.content
{
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: 1;
}
.photo
{
	width: 480rpx;
	height: 580rpx;
	margin: auto;
	margin-top: 260rpx;
	border: 8rpx solid white;
}
.photo image
{
	width: 100%;
	height: 100%;
}
.btn
{
	width: 200rpx;
	height: 80rpx;
	margin: auto;
	margin-top: 60rpx;
}
.btn view
{
	padding: 10rpx 36rpx;
	margin: 20rpx 0rpx;
	font-size: 32rpx;
	border-radius: 10rpx;
	background-color: white;
}
//app.josn
//app.js
App({
	type:[
		{
			id:1,
			text:"属于第一型的你，相信常常这感觉，对吧？你们常有愤怒、不满的感觉都是源自你们超高的生活要求。当遇到什么不顺意时，就很容易感到愤怒、不满，觉得事情不应该这样发生……这种情绪不单是对自己，还有对周围的环境和人，都是一样，因为你对他们一样带有超高的要求。但要注意，作为你的朋友，要承受你的愤怒情绪，的确不是容易，也会造成压力，所以要多加注意啊!"
		},
		{
			id:2,
			text:"助人型(Helper)顾名思义，你很喜欢帮人，而且主动，慷慨大方！虽然你对别人的需要很敏锐，但却很多时忽略了自己的需要。在你来说，满足别人的需要比满足自己的需要更重要，所以你很少向人提出请求。这样说来，你的自我并不强，很多时候要靠帮助别人去肯定自己。"
		},
		{
			id:3,
			text:"自我型(Individualist)曾否有人跟你说，你有艺术家的脾气？这个自我型就正正是艺术家的性格-多愁善感及想象力丰富，会常沉醉于自己的想像世界里。另一方面，由于你是感情主导的人，有些工作你\"LIKE\"就可能会做架啦，不会考虑责任的问题。"
		},
		{
			id:4,
			text:"理智型(Thinker)你是个很冷静的人，总想跟身边的人和事保持一段距离，也不会让情绪。很多时，你都会先做旁观者，后才可投入参与。另外，你也需要充分的私人空间和高度的私隐，否则你会觉得很焦虑，不安定！你也很有机会成为专家，例如电脑啦，漫画啦，时装啦，因为你对知识是非常热爱的！"
		},
		{
			id:5,
			text:"忠诚型的你们表现得忠诚，是因为你们害怕，对很多事情皆忧虑，很多时都向坏处打算，所以做人很谨慎。同一原因，由于害怕做错决定，所以当面对决择的时候，你们大都显得很犹疑，心大心细。适当的忧虑能保护我们，但若过份忧虑则会阻碍我们前行！留意留意！"
		},
		{
			id:6,
			text:"活跃型(Adventurer)活跃型的你，就是如此这般：乐观、精力充沛、迷人、好动、贪新鲜、五时花六时变……「最紧要玩得开心」就是你的生活哲学！你们很需要生活有新鲜感，所以很不喜欢被束缚、被控制。你的活力是玩的活力，又跟第三型的成就型又有所不同，相信你们是活动搅手，玩极唔厌！"
		},
		{
			id:7,
			text:"领袖型(Leader)很多领袖都有以下特质：豪爽、不拘小节、自视甚高、遇强越强、关心正义、公平。你们清楚自己的目标，并努力前进。由于不愿被人控制，且具有一定的支配力，所以你们很有潜质做领袖带领大家。由于你们都较好胜，有时候会对人有点攻击性，让人感到压力。"
		},
		{
			id:8,
			text:"和平型的你与世无争，渴望人人能和平共处，很怕引起冲突，是不显眼的一个。由于从不试图突出自己，你们会比较怕羞、怕事，也很容易有躲懒的意欲，因为你喜爱和平，不喜爱辛劳，所以你也不会PUSH自己！若你心想干一番大事，则要好好鞭策自己啦！"
		},
		{
			id:9,
			text:"自我型的你们其实都有点「艺术家脾气」，对吧！自怜、觉得自己与其他人不一样、喜欢沉醉于自己的想象世界……很多时，第四型的表现会比较抽离，都是因为跟身边人比较，觉得自己不同，其他人不会明白，又觉得其他人都拥有很多你们没有的东西，所以在现实的社交圈子里很难得到满足"
		}
	],
	onLaunch:function()
	{
		wx.setStorage({
			key:"rand",
			data:[]
		})
		wx.removeStorage({
			key:"type1"
		})
		wx.removeStorage({
			key:"type2"
		})
		wx.removeStorage({
			key:"imageUrl"
		})
	}
})