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

最新推荐文章于 2021-08-04 18:14:44 发布
最新推荐文章于 2021-08-04 18:14:44 发布
阅读量893 收藏 1
点赞数
分类专栏： 微信小程序开发 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Mr_peng13/article/details/109318709
版权

一、首页

  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;
		}
	},
})
iGma_e
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
weapplipstick微信小程序之口红试色
08-10
weapp_lipstick 微信小程序之口红试色
微信小程序抖抖赢口红源代码
01-28
微信小程序抖抖赢口红源代码，希望对大家有所帮助~微信小程序抖抖赢口红源代码，希望对大家有所帮助~
微信小程序口红项目新手练习Day2
xiaobaibaiyo的博客
09-28 415
1.功能页面进行上传自拍和分析的实现 我们这次的主要需求是： ①当进入了页面的时候要求获得相机的权限。 ②页面中间有个照片的相框，当添加照片或照相时显示照片。 ③点击分析时候携带文本进行跳转，并且根据是否同一张照片携文本跳转。 如下图：展示效果。 1.首先将需要的文本写入app.js中 文本如下： //app.js App({ onLaunch: function () { // 展示本地存储能力 }, globalData: { userInfo: null,
微信小程序入门
weixin_30617737的博客
11-18 76
微信小程序（下面简称小程序）近些月来刷爆了我们这些程序猿们的圈子，可以说无数的程序猿磨刀霍霍，准备在这快蛋糕上杀出一片天地。那么作为前端开发人员，小程序开发和我们平常的开发有什么不同的地方呢？让我们一起来走进门里看看。 我们从下面几个方向来了解一下小程序的开发：1.开发工具2.布局差异3.JS差异4.其它 序 先看一张小程序初始化的目录： ...
微信小程序：设计思路
热门推荐
liujia216的博客
11-21 1万+
1、重点内容不要局限于工具思维，而是基于服务做拓展外延很多文章都在聊小程序目前最好做的是工具。话虽然没错，但不要局限于工具思维，最核心的仍然是服务。从目前你所在的业务大类出发，用户究竟需要什么样的服务？用户在进入APP前和离开APP后，场景上需要有什么补充？可能分析下来和你的APP主营业务并不完全一致，没有关系，只要能达到你对微信小程序的预期就可以了。举例来说，如果一家阅读类APP只是单纯将内容聚类
微信小程序口红项目新手练习Day1
xiaobaibaiyo的博客
09-28 355
项目day1 主页的授权与音乐播放功能 如图： 1.我们需要完成的功能有: ①首先是页面的背景图片 ②在左上角设置一个带有音频的播放图片当点击它时，有旋转的效果。 ③主要核心功能在右下角的授权功能，只有点击并授权了之后才可以进入页面使用功能。反之重新授权！ 项目的实现思路 ①主页背景 首先在pages下创建如下图的目录。 放好我们需要设置的背景图片 如需要图标可以去→阿里巴巴矢量图网站←去找（免费） 1.index.wxml <view > <image src="../img/01
微信小程序——电影推荐（截图+源码）.zip
04-17
微信小程序——电影推荐（截图+源码）.zip 微信小程序——电影推荐（截图+源码）.zip 微信小程序——电影推荐（截图+源码）.zip 微信小程序——电影推荐（截图+源码）.zip 微信小程序——电影推荐（截图+源码）.zip ...
微信小程序——豆瓣图书（截图+源码）.zip
04-17
微信小程序——豆瓣图书（截图+源码）.zip 微信小程序——豆瓣图书（截图+源码）.zip 微信小程序——豆瓣图书（截图+源码）.zip 微信小程序——豆瓣图书（截图+源码）.zip 微信小程序——豆瓣图书（截图+源码）.zip ...
微信小程序——图书管理系统（截图+源码）.zip
04-18
微信小程序——图书管理系统（截图+源码）.zip 微信小程序——图书管理系统（截图+源码）.zip 微信小程序——图书管理系统（截图+源码）.zip 微信小程序——图书管理系统（截图+源码）.zip 微信小程序——图书管理...
微信小程序——小程序页面生成器（截图+源码）.zip
04-25
微信小程序——小程序页面生成器（截图+源码）.zip、 微信小程序——小程序页面生成器（截图+源码）.zip 微信小程序——小程序页面生成器（截图+源码）.zip 微信小程序——小程序页面生成器（截图+源码）.zip 微信小...
微信小程序项目实例——今日美食
05-24
微信小程序项目实例——今日美食 今日美食是为用户提供各种美食的制作方法，详细介绍了配料和制作流程
《口红》web期末大作业.zip
01-18
web期末大作业，网页设计及网页制作
小程序开发者服务器设计,微信小程序的设计思路和理念
weixin_39807691的博客
08-04 699
【课前科普百科】企业的很多技术都是保密的，尤其是实战项目和新兴技术。朋友圈看到不少人刷屏---微信小程序。她究竟是什么？它在互联网这个大染缸的“相爱相杀”的格局中，是如何未出先火，公测即流行的？本课将带您抽丝剥茧，基础与实战项目的研发，不用安装，即开即用，用完就溜，相较于传统APP，小程序UI和操作流程会更统一，推广更容易更简单，更省成本。【课程目标】1.让门外汉能上手实战项目。2.本课程是实战项...
微信小程序的开发思路（纯思路 不完整版 看代码者慎入）
xyj_1_2的博客
03-20 898
后面我会经常更新 写完整，欢迎大家有想法的一起来讨论。要代码的私聊我1318686185（qq）
微信小程序开发总结
zramals的博客
11-16 1962
一、产品定位 微信小程序是一种全新的连接用户与服务的方式，它可以在微信内被便捷地获取和传播，同时具有出色的使用体验。 二、小程序注册流程 1.在微信公众平台官网首页（mp.weixin.qq.com）点击右上角的“立即注册”按钮。 2.选择“小程序”。 3.填写未注册过公众平台、开放平台、企业号、未绑定个人号的邮箱。 4.登录邮箱，查收激活邮件，点击激活链接。 5.点击激活链
口红的html前端显示,初学者怎么涂口红自然
weixin_36313588的博客
06-25 185
该楼层疑似违规已被系统折叠隐藏此楼查看此楼初学者涂口红自然的方法是首先化妆之前先把死皮去除;再用遮瑕膏把唇部的的颜色遮住，选用比较滋润，颜色又不会很白的遮瑕膏涂抹在嘴唇边缘即可;给唇部打底，增加嘴唇的滋润度，让唇妆更完美和饱满。口红颜色怎么选1、肤色比较黄：应该挑选偏暖色调的橙色或者茶色，但避免用冷色调的粉红色，如果各位辣妈都很young，暖暖的橙色可是让肌肤看起来更白皙的法宝哦!2、肤色比较红...
PHP微信化妆品小程序商城 系统设计与实现大学生毕业设计效果图
杭州.黄老师
10-27 436
微信小程序口红项目制作
xrs151的博客
10-27 1139
首先首页我们要完成的功能有： 左上角图片，点击图片播放指定音乐，图片并跟着一起360旋转 右下角，授权登陆，授权登陆成功后才会挑选下一页面，否则重新授权登陆 //index.js const app = getApp() const innerAudioContext = wx.createInnerAudioContext() Page({ data: { b2 : 'b3', ss : 1 }, UserClick:function(event){ wx
微信小程序开发思路
PHP学习与交流
09-30 4676
小程序还没有完全开放，不能真实体验，但通过文档和开发工具，可以了解到他的开发思路
基于springboot的理发店预约系统微信小程序源码数据库论文.docx
最新发布
06-30
基于Spring Boot框架的理发店预约系统采用了前后端分离的设计思路，前端使用微信小程序开发，后端使用Java语言搭建。系统通过接口实现前后端的数据交互，保证了系统的稳定性和灵活性。 在系统设计部分，论文讨论了...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

iGma_e

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值