微信小程序口红项目新手练习Day2

1.功能页面进行上传自拍和分析的实现

我们这次的主要需求是：
①当进入了页面的时候要求获得相机的权限。
②页面中间有个照片的相框，当添加照片或照相时显示照片。
③点击分析时候携带文本进行跳转，并且根据是否同一张照片携文本跳转。

如下图：展示效果。

1.首先将需要的文本写入app.js中

文本如下：

//app.js
App({
  onLaunch: function () {
    // 展示本地存储能力
  
  },
  globalData: {
    userInfo: null,
    data:[
      {
        title:'#01完美',
        mes:'属于第一型的你，相信常常这感觉，对吧？你们常有愤怒、不满的感觉都是源自你们超高的生活要求。当遇到什么不顺意时，就很容易感到愤怒、不满，觉得事情不应该这样发生……这种情绪不单是对自己，还有对周围的环境和人，都是一样，因为你对他们一样带有超高的要求。但要注意，作为你的朋友，要承受你的愤怒情绪，的确不是容易，也会造成压力，所以要多加注意啊！'
      },
      {
        title:'#02助人',
        mes:'助人型(Helper)顾名思义，你很喜欢帮人，而且主动，慷慨大方！虽然你对别人的需要很敏锐，但却很多时忽略了自己的需要。在你来说，满足别人的需要比满足自己的需要更重要，所以你很少向人提出请求。这样说来，你的自我并不强，很多时候要靠帮助别人去肯定自己。'
      },
      {
        title:'#03成就',
        mes:'自我型(Individualist)曾否有人跟你说，你有艺术家的脾气？这个自我型就正正是艺术家的性格-多愁善感及想象力丰富，会常沉醉于自己的想像世界里。另一方面，由于你是感情主导的人，有些工作你"LIKE"就可能会做架啦，不会考虑责任的问题。'
      },
      {
        title:'#04智慧',
        mes:'理智型(Thinker)你是个很冷静的人，总想跟身边的人和事保持一段距离，也不会让情绪。很多时，你都会先做旁观者，后才可投入参与。另外，你也需要充分的私人空间和高度的私隐，否则你会觉得很焦虑，不安定！你也很有机会成为专家，例如电脑啦，漫画啦，时装啦，因为你对知识是非常热爱的！'
      },
      {
        title:'#05忠诚',
        mes:'忠诚型的你们表现得忠诚，是因为你们害怕，对很多事情皆忧虑，很多时都向坏处打算，所以做人很谨慎。同一原因，由于害怕做错决定，所以当面对决择的时候，你们大都显得很犹疑，心大心细。适当的忧虑能保护我们，但若过份忧虑则会阻碍我们前行！留意留意！'
      },
      {
        title:'#06活跃',
        mes:'活跃型(Adventurer)活跃型的你，就是如此这般：乐观、精力充沛、迷人、好动、贪新鲜、五时花六时变……「最紧要玩得开心」就是你的生活哲学！你们很需要生活有新鲜感，所以很不喜欢被束缚、被控制。你的活力是玩的活力，又跟第三型的成就型又有所不同，相信你们是活动搅手，玩极唔厌！'
      },
      {
        title:'#07领袖',
        mes:'领袖型(Leader)很多领袖都有以下特质：豪爽、不拘小节、自视甚高、遇强越强、关心正义、公平。你们清楚自己的目标，并努力前进。由于不愿被人控制，且具有一定的支配力，所以你们很有潜质做领袖带领大家。由于你们都较好胜，有时候会对人有点攻击性，让人感到压力。'
      },
      {
        title:'#08和平',
        mes:'和平型的你与世无争，渴望人人能和平共处，很怕引起冲突，是不显眼的一个。由于从不试图突出自己，你们会比较怕羞、怕事，也很容易有躲懒的意欲，因为你喜爱和平，不喜爱辛劳，所以你也不会PUSH自己！若你心想干一番大事，则要好好鞭策自己啦！'
      },
      {
        title:'#09艺术',
        mes:'自我型的你们其实都有点「艺术家脾气」，对吧！自怜、觉得自己与其他人不一样、喜欢沉醉于自己的想象世界……很多时，第四型的表现会比较抽离，都是因为跟身边人比较，觉得自己不同，其他人不会明白，又觉得其他人都拥有很多你们没有的东西，所以在现实的社交圈子里很难得到满足'
      },
    ]
  },
})

2.app.json

{
  "pages":[
    "pages/index/index"
  ],
  "subpackages": [
    {
      "root": "packageA",
      "pages": [
        "index1/index1"
      ]
    },
    {
      "root": "packageB",
      "pages": [
        "index1/index1",
        "index2/index2"
      ]
    }
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle":"black"
    
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json",
  "requiredBackgroundModes": ["audio"]
}

2.接下来在pages外写入一个新的文件夹

根据自己的个人喜好新建文件夹创建如下目录（个人喜好）

在index1.json中写入
“disableScroll”: true

1.index1.wxml

<!--packageA/index1/index1.wxml-->
<image src="../img/02_base.png"></image>
<view class="box center">
  <view class="box1 center">
      <image class="img1 bottom" mode="aspectFit" src="{{imgData}}"></image>
    <view class="box2 middle center" bindtap="takePhoto">上传自拍</view>
    <view class="box2 middle center" bindtap="analysisPhoto">开始分析</view>
  </view>
</view>

2.index1.js
为按钮设置点击事件，当点击了按钮时，会显示是从相册还是相机获取图片
根据微信开发文档：

wx.chooseImage(Object object)
从本地相册选择图片或使用相机拍照。

object.sourceType 的合法值：
album 从相册选图
camera 使用相机

// packageA/index1/index1.js

Page({

  /**
   * 页面的初始数据
   */
  data: {
    imgData : '../img/02_face.png'
  },
  takePhoto: function(){
    var that = this
    wx.chooseImage({
      count: 1,
      sourceType: ['album', 'camera'],
      
      success(res) {
        console.log('res',res)
        var pic = res.tempFilePaths["0"]
        console.log('pic',pic)
        that.setData({
          imgData : pic
        })
      }
    })
  },
  analysisPhoto: function(){
    var pic = this.data.imgData
    if(pic ==='../img/02_face.png'){
      console.log('-------------')
      wx.showModal({
        title: '失败',
        content: '请先上传自拍',
        showCancel: false
      })
    }else{
      console.log(this.data.imgData)
      var imgdata = this.data.imgData;
      wx.setStorage({
        data: imgdata,
        key: 'key',
      })
      wx.navigateTo({
        url: '../../packageB/index1/index1'
      })
    }
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    wx.authorize({
      scope: 'scope.camera',
    })
    wx.setStorage({
      data: 'data',
      key: 'key',
    })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

3.index1.wxss
页面的修饰（个人设置喜好）
无需多言直接上代码。

/* packageA/index1/index1.wxss */
.box{
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
}
.box1{
  flex-direction: column;
}
.center{
  display: flex;
  justify-content: center;
  align-items: center;
}
.bottom{
  margin-top: 100rpx;
}
.middle{
  margin-top: 30rpx;
}
.box2{
  background-color: rgb(247, 241, 241);
  width: 300rpx;
  height: 80rpx;
  border-radius: 25rpx;
}
.img1{
  width: 500rpx;
  height: 700rpx;
}

如果未上传图片

当上传了图片点击分析跳转到正在分析的界面。