微信小程序口红项目

微信小程序口红项目

index页wxml代码：

按钮

index页wxss代码：

.bj{

width: 100vw;

height: 100vh;

}

button{

z-index: 1;

position: absolute;

bottom: 50rpx;

right: 50rpx;

}

.music{

animation: rotate 2s infinite linear;

}

@keyframes rotate{

from{

transform: rotate(0deg);

}

to{

transform: rotate(360deg);

}

}

index页js代码：

//index.js

//获取应用实例

const innerAudioContext = wx.createInnerAudioContext()

const app = getApp()

var bol = true

Page({

data: {

// bol: bol

},

//事件处理函数

bindViewTap: function () {

wx.navigateTo({

  url: '../logs/logs'

})

},

click: function () {

bol = !this.data.bol

console.log(bol)

this.setData({

  bol: bol

})

if (bol) {

  innerAudioContext.play()

} else {

  innerAudioContext.stop();

  innerAudioContext.onStop(() => {

    console.log('停止播放');

  })

}

},

UserInfo: function(e) {

if (e.detail.userInfo){

  //用户按了允许授权按钮

  wx.navigateTo({

    url: '/pages/camera1/camera1',

  })

} else {

  //用户按了拒绝按钮

}

},

error(e) {

console.log(e.detail)

},

onShow: function () {

innerAudioContext.autoplay = true;

innerAudioContext.src = "https://webfs.yun.kugou.com/202009150910/ce1271d533231d49137b9631fdc3f712/G223/M0B/16/13/f4cBAF9ZpuyAcEQUAEwv2JjQUgM652.mp3";

innerAudioContext.onPlay(() => {

  console.log('开始播放')

})

innerAudioContext.onError((res) => {

  console.log(res.errMsg)

  console.log(res.errCode)

})

},

onLoad: function () {

wx.getSetting({

  success(res) {

    if (res.authSetting['scope.userInfo']) {

      // 已经授权，可以直接调用 getUserInfo 获取头像昵称

      wx.getUserInfo({

        success(res) {

          console.log(res.userInfo)

        }

      })



    }

  }



})

if (app.globalData.userInfo) {

  this.setData({

    userInfo: app.globalData.userInfo,

    hasUserInfo: true

  })

} else if (this.data.canIUse) {

  // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回

  // 所以此处加入 callback 以防止这种情况

  app.userInfoReadyCallback = res => {

    this.setData({

      userInfo: res.userInfo,

      hasUserInfo: true

    })

  }

} else {

  // 在没有 open-type=getUserInfo 版本的兼容处理

  wx.getUserInfo({

    success: res => {

      app.globalData.userInfo = res.userInfo

      this.setData({

        userInfo: res.userInfo,

        hasUserInfo: true

      })

    }

  })

}

},

getUserInfo: function (e) {

console.log(e)

app.globalData.userInfo = e.detail.userInfo

this.setData({

  userInfo: e.detail.userInfo,

  hasUserInfo: true

})

}

})

camera1页wxml代码：

<image src="{{img}}" mode="scaleToFill" />

<button bindtap="cameraClick">上传自拍</button>

<button bindtap="analyse">开始分析</button>

camera1页wxss代码：

/* pages/camera1/camera1.wxss */

.box {

width: 100vw;

height: 100vh;

display: flex;

justify-content: center;

}

.background {

width: 100vw;

height: 100vh;

position: absolute;

z-index: -1;

}

.photobox{

width: 65vw;

height: 50vh;

border: 4rpx solid white;

position: absolute;

top: 220rpx;

}

.photobox image{

width: 100%;

height: 100%;

}

.buttonbox{

position: absolute;

bottom: 100rpx;

}

.buttonbox button{

margin-top: 35rpx;

border-radius: 25rpx;

color: #6F0A12;

}

camera1页js代码：

// pages/camera1/camera1.js

var ifor;//判断是相机还是上传

Page({

// 上传自拍

cameraClick: function () {

wx.showActionSheet({

  itemList: ['相机拍摄', '上传图片'],

  success: (res) => {

    if (res.tapIndex == 0) {

      // 相机

      wx.chooseImage({

        count: 9,

        sizeType: ['original'],

        sourceType: ['camera'],

        success: (res) => {

          // tempFilePath可以作为img标签的src属性显示图片

          getApp().golbaoData.flag=true

          ifor=1

          this.setData({

            img: res.tempFilePaths

          })

        }

      })

    } else if (res.tapIndex == 1) {

      // 上传

      wx.chooseImage({

        count: 9,

        sizeType: ['original'],

        sourceType: ['album'],

        success: (res) => {

          var imgsize=res.tempFiles["0"].size

          wx.setStorageSync('imgsize', imgsize)

          getApp().golbaoData.flag=true

          ifor=2

          this.setData({

            img: res.tempFilePaths

          })

        }

      })

    }

  }

})

},

// 开始分析，必须要上传图片

analyse:function(){

if(getApp().golbaoData.flag)

{

  wx.navigateTo({

    url: '/pages/analyse/analyse'

  })

  wx.setStorageSync('ifor', ifor)

}else

{

  wx.showModal({

    title: '提示',

    content: '请先上传图片',

    showCancel:false,

    confirmText:'我知道了'

  })

}

},

/**

• 页面的初始数据

*/

data: {

img: 'https://676c-glm-jcg6b-1303186945.tcb.qcloud.la/lip/02_face.png?sign=632b450223b7a533f8bb3f6bde61463b&t=1600329170'

},

/**

• 生命周期函数–监听页面加载

*/

onLoad: function (options) {

},

/**

• 生命周期函数–监听页面初次渲染完成

*/

onReady: function () {

},

/**

• 生命周期函数–监听页面显示

*/

onShow: function () {

},

/**

• 生命周期函数–监听页面隐藏

*/

onHide: function () {

},

/**

• 生命周期函数–监听页面卸载

*/

onUnload: function () {

},

/**

• 页面相关事件处理函数–监听用户下拉动作

*/

onPullDownRefresh: function () {

},

/**

• 页面上拉触底事件的处理函数

*/

onReachBottom: function () {

},

/**

• 用户点击右上角分享

*/

onShareAppMessage: function () {

}

})

analyse页wxml代码：

<image class=“background”

src="https://676c-glm-jcg6b-1303186945.tcb.qcloud.la/lip/03_base.png?sign=f421091a88a3dbd8952d70301c9f4cda&t=1600331520"

mode="scaleToFill"></image>

<view class="imgbox">

  <image mode="scaleToFill" style="visibility:{{item.hd}}" src="{{item.url}}" wx:for="{{imgUrls}}"/>

</view>

<text>秘密分析中......</text>

analyse页wxss代码：

/* pages/analyse/analyse.wxss */

.box {

display: flex;

justify-content: center;

}

.background {

width: 100vw;

height: 100vh;

position: absolute;

z-index: -1;

}

.loadbox {

width: 400rpx;

position: absolute;

bottom: 260rpx;

color: white;

}

.loadbox text {

display: block;

float: right;

}

.loadbox image {

margin-right: 10rpx;

width: 50rpx;

height: 30rpx;

}

analyse页js代码：

// pages/analyse/analyse.js

var ifor;

var count = 0;

// 0-8随机数

var random;

var data;

var mflag = true;

Page({

/**

• 页面的初始数据

*/

data: {

imgUrls: [

  {

    hd: 'visible',

    url: 'https://676c-glm-jcg6b-1303186945.tcb.qcloud.la/lip/03_m01.png?sign=d9c5bd1a2e4b6c5443aae2e532305d3e&t=1600339411',

  },

  {

    hd: 'hidden',

    url: 'https://676c-glm-jcg6b-1303186945.tcb.qcloud.la/lip/03_m02.png?sign=4af9af53b9f10ee0d5dc1e0a16f9ba93&t=1600331969',

  },

  {

    hd: 'hidden',

    url: 'https://676c-glm-jcg6b-1303186945.tcb.qcloud.la/lip/03_m03.png?sign=e3d0950af6b709ce361f02fc1a8715a2&t=1600331997',

  },

  {

    hd: 'hidden',

    url: 'https://676c-glm-jcg6b-1303186945.tcb.qcloud.la/lip/03_m04.png?sign=0e63fb2e895134c3fce51f4811f0f8ec&t=1600332016',

  },

  {

    hd: 'hidden',

    url: 'https://676c-glm-jcg6b-1303186945.tcb.qcloud.la/lip/03_m05.png?sign=b900180e9e918888bac372b6d3e58727&t=1600332034',

  },

  {

    hd: 'hidden',

    url: 'https://676c-glm-jcg6b-1303186945.tcb.qcloud.la/lip/03_m06.png?sign=9e0f04d371444bc55ca3614e34843ebb&t=1600332048'

  }

]

},

analyse:function(){

// 生产随机结果

random = Math.floor(Math.random() * 9);

data = getApp().resultData[random]

ifor = wx.getStorageSync('ifor')

if (ifor === 1 && mflag) {

  // 相机拍摄

  // 只保存第一次的内容

  wx.setStorageSync('camera', data)

  mflag = false

}

},

startmove:function(){

// 动画开始------------------------------

var data = this.data.imgUrls

// 控制动画周期

var first = true;

// 控制播放次数

var flag = 0;

// 定时器开启动画

var timer = setInterval(() => {

  if (first) {

    var item = data[count]

    item.hd = 'visible';

    data.splice(count, 1, item)

    count++

    if (count === 6) {

      first = false

      count = 0

    }

  } else {

    // count--

    var item = data[count]

    item.hd = 'hidden';

    data.splice(count, 1, item)

    count++

    if (count === 6) {

      first = true

      flag++

      count = 0

    }

  }

  this.setData({

    imgUrls: data

  })

  // 动画执行完成，跳转

  if (flag === 2) {

    clearInterval(timer)

    wx.redirectTo({

      url: '/pages/result/result',

    })

  }

}, 180);

},

/**

• 生命周期函数–监听页面加载

*/

onLoad: function (options) {

this.analyse()

this.startmove()

},

/**

• 生命周期函数–监听页面初次渲染完成

*/

onReady: function () {

},

/**

• 生命周期函数–监听页面显示

*/

onShow: function () {

},

/**

• 生命周期函数–监听页面隐藏

*/

onHide: function () {

},

/**

• 生命周期函数–监听页面卸载

*/

onUnload: function () {

},

/**

• 页面相关事件处理函数–监听用户下拉动作

*/

onPullDownRefresh: function () {

},

/**

• 页面上拉触底事件的处理函数

*/

onReachBottom: function () {

},

/**

• 用户点击右上角分享

*/

onShareAppMessage: function () {

}

})

result页wxml代码：

{{data.title}}

{{data.content}}

秘密分享

result页wxss代码：

/* pages/result/result.wxss */

page{

background: url(https://676c-glm-jcg6b-1303186945.tcb.qcloud.la/lip/05_base.png?sign=5abf2b881bc6ea13249566910edcd435&t=1600420969);

background-size: 100vw 100vh;

display: flex;

justify-content: center;

}

.box{

width: 90vw;

height: 60vh;

position: fixed;

bottom: 8rpx;

}

.title{

color: #8A0B12;

font-size: 45rpx;

font-weight: bold;

margin: 120rpx 0 0 35rpx;

}

.content{

width: 100%;

box-sizing: border-box;

padding: 45rpx 70rpx;

font-size: 28rpx;

}

.box button{

background-image: linear-gradient(#370400, #BF1E26);

color: white;

border-radius: 16rpx;

}

result页js代码：

// pages/result/result.js

Page({

before: function () {

// 0-8随机数

var random = Math.floor(Math.random() * 9);

// 随机取数组里一条数据

var data = getApp().resultData[random]

// 获取图片的大小值，用来判断

var imgsize = wx.getStorageSync('imgsize')

// 获取缓存中的所有值，准备进行循环判断

const res = wx.getStorageInfoSync()

var cacheData = res.keys

// 循环缓存是否存在相同的图片

for (var i = 0; i < cacheData.length; i++) {

  // 如果找到了相同的图片渲染曾经的值，并跳出函数

  if (imgsize == cacheData[i]) {

    var sizesame = wx.getStorageSync(cacheData[i])

    this.setData({

      data: sizesame

    })

    return

  }

}

// 缓存中没有相同的图片

this.setData({

  data: data

})

wx.setStorageSync(imgsize + "", data)

},

/**

• 页面的初始数据

*/

data: {

},

/**

• 生命周期函数–监听页面加载

*/

onLoad: function (options) {

var ifor = wx.getStorageSync('ifor')

// var lately= wx.getStorageSync('lately')

if (ifor === 1) {

  var cdata = wx.getStorageSync('camera')

  this.setData({

    data: cdata

  })

  // wx.setStorageSync('lately', true)

} else {

  // 上传图片，调用before逻辑

  this.before()

}

},

/**

• 生命周期函数–监听页面初次渲染完成

*/

onReady: function () {

},

/**

• 生命周期函数–监听页面显示

*/

onShow: function () {

},

/**

• 生命周期函数–监听页面隐藏

*/

onHide: function () {

},

/**

• 生命周期函数–监听页面卸载

*/

onUnload: function () {

},

/**

• 页面相关事件处理函数–监听用户下拉动作

*/

onPullDownRefresh: function () {

},

/**

• 页面上拉触底事件的处理函数

*/

onReachBottom: function () {

},

/**

• 用户点击右上角分享

*/

onShareAppMessage: function () {

}

})

app.js代码：

//app.js

App({

resultData:[

{

  title:'完美型',

  content:'属于第一型的你，相信常常这感觉，对吧？你们常有愤怒、不满的感觉都是源自你们超高的生活要求。当遇到什么不顺意时，就很容易感到愤怒、不满，觉得事情不应该这样发生……这种情绪不单是对自己，还有对周围的环境和人，都是一样，因为你对他们一样带有超高的要求。但要注意，作为你的朋友，要承受你的愤怒情绪，的确不是容易，也会造成压力，所以要多加注意啊！'

},

{

  title:'助人型',

  content:'助人型(Helper)顾名思义，你很喜欢帮人，而且主动，慷慨大方！虽然你对别人的需要很敏锐，但却很多时忽略了自己的需要。在你来说，满足别人的需要比满足自己的需要更重要，所以你很少向人提出请求。这样说来，你的自我并不强，很多时候要靠帮助别人去肯定自己。'

},

{

  title:'成就型',

  content:'自我型(Individualist)曾否有人跟你说，你有艺术家的脾气？这个自我型就正正是艺术家的性格-多愁善感及想象力丰富，会常沉醉于自己的想像世界里。另一方面，由于你是感情主导的人，有些工作你"LIKE"就可能会做架啦，不会考虑责任的问题。'

},

{

  title:'智慧思想',

  content:'理智型(Thinker)你是个很冷静的人，总想跟身边的人和事保持一段距离，也不会让情绪。很多时，你都会先做旁观者，后才可投入参与。另外，你也需要充分的私人空间和高度的私隐，否则你会觉得很焦虑，不安定！你也很有机会成为专家，例如电脑啦，漫画啦，时装啦，因为你对知识是非常热爱的！'

},

{

  title:'忠诚型',

  content:'忠诚型的你们表现得忠诚，是因为你们害怕，对很多事情皆忧虑，很多时都向坏处打算，所以做人很谨慎。同一原因，由于害怕做错决定，所以当面对决择的时候，你们大都显得很犹疑，心大心细。适当的忧虑能保护我们，但若过份忧虑则会阻碍我们前行！留意留意！'

},

{

  title:'活跃开朗',

  content:'活跃型(Adventurer)活跃型的你，就是如此这般：乐观、精力充沛、迷人、好动、贪新鲜、五时花六时变……「最紧要玩得开心」就是你的生活哲学！你们很需要生活有新鲜感，所以很不喜欢被束缚、被控制。你的活力是玩的活力，又跟第三型的成就型又有所不同，相信你们是活动搅手，玩极唔厌！'

},

{

  title:'领袖能力',

  content:'领袖型(Leader)很多领袖都有以下特质：豪爽、不拘小节、自视甚高、遇强越强、关心正义、公平。你们清楚自己的目标，并努力前进。由于不愿被人控制，且具有一定的支配力，所以你们很有潜质做领袖带领大家。由于你们都较好胜，有时候会对人有点攻击性，让人感到压力。'

},

{

  title:'和平和谐',

  content:'和平型的你与世无争，渴望人人能和平共处，很怕引起冲突，是不显眼的一个。由于从不试图突出自己，你们会比较怕羞、怕事，也很容易有躲懒的意欲，因为你喜爱和平，不喜爱辛劳，所以你也不会PUSH自己！若你心想干一番大事，则要好好鞭策自己啦！'

},

{

  title:'艺术型',

  content:'自我型的你们其实都有点「艺术家脾气」，对吧！自怜、觉得自己与其他人不一样、喜欢沉醉于自己的想象世界……很多时，第四型的表现会比较抽离，都是因为跟身边人比较，觉得自己不同，其他人不会明白，又觉得其他人都拥有很多你们没有的东西，所以在现实的社交圈子里很难得到满足'

},

],

golbaoData:{

flag:false

}

})

app.json代码：

{

“pages”: [

"pages/index/index",

"pages/camera1/camera1",

"pages/analyse/analyse",

"pages/result/result"

],

“window”: {

"backgroundTextStyle": "light",

"navigationBarBackgroundColor": "#fff",

"navigationBarTitleText": "小红唇的小秘密",

"navigationBarTextStyle": "black"

},

“style”: “v2”,

“sitemapLocation”: “sitemap.json”

}