1.页面
在miniprogram下新建getPhoneNumber文件夹
getPhoneNumber.wxml
<view class="container">
<view class='header'>
<image class="img" mode="widthFix" src='/images/wx_login.png'></image>
</view>
<view class='content'>
<view class="tx">申请获取你的手机号</view>
</view>
<button class="bt" open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">授权登录</button>
</view>
getPhoneNumber.wxss
.container {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 200rpx 0;
box-sizing: border-box;
}
.tx{
font-weight: bold;
}
.bt{
margin-top: 10px;
border: 1px solid #3b3d3b;
background-color: #4ac44a;
}
.header{
display:flex;
justify-content: center;
align-items:center;
}
.img{
width: 100px;
}
getPhoneNumber.js
const db = wx.cloud.database()
Page({
getPhoneNumber(e)
{
console.log("点击后获得",e)
wx.cloud.callFunction({
name:'getPhone',
data:{
cloudID:e.detail.cloudID
}
}).then(res=>{
console.log("获取成功",res)
this.setData({
phone:"获得的手机号:"+res.result.list[0].data.phoneNumber
})
db.collection('user').add({
data:{
telephone:res.result.list[0].data.phoneNumber
},
success: res => {
wx.showToast({
title: '新增记录成功',
})
console.log('[数据库] [新增记录] 成功,记录 _id: ', res._id)
},
fail: err => {
wx.showToast({
icon: 'none',
title: '新增记录失败'
})
console.error('[数据库] [新增记录] 失败:', err)
}
})
wx.redirectTo({
url: '../homepage/homepage'//写入数据库后跳转到首页
})
}).catch(err=>{
console.log("获取失败",err)
})
},
})
2.云函数
(1)首先确认你是否安装了Node和npm
进入cmd终端,查看node和npm版本,显示版本则已安装,若未安装请先安装
(2)右击项目的此文件夹,选择新建Node.js云函数
设置云函数名为getPhone
(3)编写云函数(getPhone/index.js)
// 云函数入口文件
const cloud = require('wx-server-sdk')
cloud.init({
env:'XXXXX'//此处为你的环境名
})
// 云函数入口函数
exports.main = async (event, context) => {
const res=await cloud.getOpenData({
list:[event.cloudID]
})
return res
}
(4)上传云函数
以管理员身份运行cmd命令行,进入云函数文件夹路径,执行
npm install --save wx-server-sdk@latest
如图,wx-server-sdk安装完毕
右击此文件夹,选择”上传并部署:所有文件“
至此,云函数上传完毕。
注意:每次修改云函数后都要上传一次,否则修改无效!(这个坑之前踩了很久才发现原因)
(5)运行
数据库增加了一条登录手机号信息