有奖捉虫:云通信与企业服务文档专题,速来> HOT
本文主要围绕主页的 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. 学校选择的逻辑。
3.1 picker 中 bindchange="bindSchoolChangePut",通过 bindSchoolChangePut 来触发学校改变的事件,选择对应的学校。
3.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” 来实现。
index.wxml
index.js
<!-- 底部的通知 -->
<view class="bottom_view">
<button bindtap="xuzhi">UU须知</button>
<!-- <text class="heng">|</text> -->
<button bindcontact="contact" open-type="contact">遇到问题?联系客服</button>
</view>

// 点击UU须知
xuzhi: function(){
this.setData({
xuzhiMask: true
})
},
// 联系客服
contact: function(){
console.log()
}