- 在项目根目录中创建名为 cloudfunctions 文件用于存放云函数并在cloudfunctions 文件夹下创建功能名称
- 在getPhone文件下创建三个文件
config.json (该文件是用于 配置云调用权限,每个云函数需要声明其会使用到的接口,否则无法调用)
js
{ "permissions": { "openapi": [ "phonenumber.getPhoneNumberk" // 云函数接口名 ] } }
index.js(该文件是用于调用微信云函数接口代码)
js
// 云函数入口文件
const cloud = require('wx-server-sdk')
cloud.init({
env:cloud.DYNAMIC\_CURRENT\_ENV
})
// 云函数入口函数
exports.main = async (event, context) => {
let code = event.code //接受参数
try {
const result = await cloud.openapi.phonenumber.getPhoneNumber({ //调用获取手机号方法
code
})
return result //返回结果
} catch (err) {
throw err
}
}
package.json(依赖文件目录)
js
{
"name": "test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": { "test": "echo "Error: no test specified" && exit 1" },
"author": "",
"license": "ISC",
"dependencies": { "wx-server-sdk": "\~2.6.3" }
}
- 在根目录中创建vue.config.js文件
js
const path = require('path')
const CopyWebpackPlugin = require('copy-webpack-plugin')
module.exports = {
configureWebpack: {
plugins: [
new CopyWebpackPlugin([
{
from: path.join(__dirname, 'cloudfunctions'),
to: path.join(__dirname, 'unpackage/dist', process.env.NODE\_ENV === 'production' ? 'build' : 'dev', process.env.UNI_PLATFORM, 'functions')
}
])
]
}
}
- 在外部项目中打开终端 输入 npm install copy-webpack-plugin@5.0.3 -s,然后打开getPhone的终端输入 npm i 创建依赖文件
- 打开根目录的 manifest.json 找到 mp-weixin
- 项目运行至微信小程序上 在project.config.json文件找到创建的云函数文件
- 上传文件
- 查看环境是否正确,云函数是否部署成功
- html部分 微信规定必须是该类型的button标签来获取code
js
<button type="primary" class="btn" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">使用手机号登录</button>
- js部分
js
wx.cloud.init() //初始化
wx.cloud.callFunction({ //调用云服务
name: "getPhone", //云函数名称
data: {
code: e.detail.code, //云函数需要的参数
},
})
.then(res => {
console.log('成功',res)
console.log('手机号',res.result.phoneInfo.phoneNumber)
})
.catch(err => {
console.log('失败',res)
})