开发指南

API 文档

步骤2:主页逻辑处理

最近更新时间:2022-01-26 13:02:12

本文主要围绕主页的 index.js 进行讲解,更多详情请参见 主页逻辑代码

操作步骤

  1. 进入 index.js 页面,在 onload 的生命周期里,调用 login_yun 云函数实现登录的操作。
    wx.cloud.callFunction({
    name: 'login_yun'
    }).then(res => {
    console.log(res)
    if(res.result.status === 200){
    app.globalData.openId = res.result.user_data.data[0].openId
    }else{
    app.globalData.openId = res.result.openId
    }
    })
  2. 在 index.js 页面,添加 data 存放所需要的数据。
    data: {
    // 遮罩层标志
    putBodyMask: false,
    putGirlMask: false,
    xuzhiMask: true,
    // 抽出的遮罩层
    outBodyMask: false,
    outGirlMask: false,
    // 交友宣言
    textareaBody: '',
    textareaGirl: '',
    // qq微信号
    numberBody: '',
    numberGirl: '',
    // 上传图片预览的src
    srcListBody: [],
    srcListGirl: [],

    // 放入的学校
    arrayBody4: ["河南理工大学", "焦作大学", "焦作师范"],
    indexBody4: 0,
    // 纸条的生命
    arrayBody2: ["被抽中一次销毁", "被抽中两次销毁", "被抽中三次销毁"],
    indexBody2: 0,
    arrayBody3: ["河南理工大学", "焦作大学", "焦作师范"],
    indexBody3: 0,

    // 放入的学校
    arrayGirl4: ["河南理工大学", "焦作大学", "焦作师范"],
    indexGirl4: 0
    // 纸条的生命
    arrayGirl2: ["被抽中一次销毁", "被抽中两次销毁", "被抽中三次销毁"],
    indexGirl2: 0,
    arrayGirl3: ["河南理工大学", "焦作大学", "焦作师范"],
    indexGirl3: 0,
    // 添加图片的加号
    addMask: true
    },
  3. 学校选择的逻辑。
    1. picker 中 bindchange="bindSchoolChangePut",通过 bindSchoolChangePut 来触发学校改变的事件,选择对应的学校。
    2. e.detail.value 来获取在 data 中绑定的学校的列表索引。
      // 放入时,学校的选择
      bindSchoolChangePut: function(e){
      this.setData({
      indexBody4: parseInt(e.detail.value)
      })
      }
  4. 在点击确认放入,触发对应的surePutBodyBtns事件,再进行判断,进而实现限制交友宣言长度。
    if(that.data.textareaBody.length < 20){
    return wx.showToast({
    title: '交友宣言太短',
    icon: 'error',
    duration: 2000
    })
    }
  5. 上传微信号的正则匹配。
    if(!(/^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(17[0-9]{1}))+\d{8})$/).test(that.data.numberBody) && !(/^[a-zA-Z]([-_a-zA-Z0-9]{6,20})$/).test(that.data.numberBody)){
    return wx.showToast({
    title: '微信号格式错误',
    icon: 'error',
    duration: 2000
    })
    }
    微信官方定义的微信号规则:
    • 可使用6-20个字母、数字、下划线和减号。
    • 必须以字母开头(字母不区分大小写)。
    • 不支持设置中文。
  6. 实现本地图片的选择,一次上传限制一张,并且进行图片大小的限制,cloudPath 随机配置存储在云存储里的路径。
    // 选择本地图片
    chooseImgGirl: function(){
    const that = this
    wx.chooseImage({
    count: 5,
    sizeType: ['original', 'compressed'],
    sourceType: ['album', 'camera'],
    success (res) {
    // tempFilePath可以作为img标签的src属性显示图片
    if(res.tempFiles[0].size > 1200000){
    return wx.showToast({
    title: '图片过大',
    icon: 'error',
    duration: 2000
    })
    }

    const filePath = res.tempFilePaths[0]
    let timeStamp = Date.parse(new Date());
    const cloudPath = "image/" + timeStamp + filePath.match(/\.[^.]+?$/)[0]
    that.pageData.filePath = filePath
    that.pageData.cloudPath = cloudPath
    that.setData({
    srcListGirl: res.tempFilePaths
    })
    }
    })
  7. 单击纸条的生命,相应值的选择对应数据库 life 字段。
  8. 点击确认放入之后,相应逻辑是先上传图片,再上传 location,weChatId 等信息到 body_girl_yun 表,上传成功要跳转到 history 页面。
    // 上传图片的api,先上传图片到云存储
    wx.cloud.uploadFile({
    cloudPath,
    filePath,
    success: function(res){
    wx.hideLoading()
    wx.showLoading({
    title: '信息上传中',
    mask: true
    })
    // 上传图片完成后上传数据
    db.collection("body_girl_yun").add({
    data: {
    location: that.data.indexGirl4,
    weChatId: that.data.numberGirl,
    picture: res.fileID,
    life: parseInt(that.data.indexGirl2) + 1,
    des: that.data.textareaGirl,
    sex: 2,
    openId: app.globalData.openId,
    time: new Date().getTime()
    }
    }).then(result => {
    wx.hideLoading()

    that.pageData = {
    filePath: '',
    cloudPath: ''
    }
    that.setData({
    putGirlMask: false,
    srcListGirl: [],
    textareaGirl: '',
    numberGirl: ''
    })
    // 上传完成后跳转到history页
    wx.switchTab({
    url: '/pages/history/history',
    success: res=>{
    wx.showToast({
    title: '放入纸条成功',
    icon: 'success'
    })
    },
    fail: err => {
    wx.showToast({
    title: err,
    icon: 'error'
    })
    }
    })
    }
    })
  9. 页面底部两个点击事件:联系客服与uu须知。联系客服主要是在 index.wxml 里通过小程序的 open-type=“concat” 来实现。
    <!-- 底部的通知 -->
    <view class="bottom_view">
    <button bindtap="xuzhi">UU须知</button>
    <!-- <text class="heng">|</text> -->
    <button bindcontact="contact" open-type="contact">遇到问题?联系客服</button>
    </view>