uniapp创建微信小程序云函数

  1. 在项目根目录中创建名为 cloudfunctions 文件用于存放云函数并在cloudfunctions 文件夹下创建功能名称
  1. 在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" } 
}
  1. 在根目录中创建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') 
                } 
            ]) 
        ] 
    } 
}
  1. 在外部项目中打开终端 输入 npm install copy-webpack-plugin@5.0.3 -s,然后打开getPhone的终端输入 npm i 创建依赖文件
  2. 打开根目录的 manifest.json 找到 mp-weixin
  1. 项目运行至微信小程序上 在project.config.json文件找到创建的云函数文件
  1. 上传文件
  1. 查看环境是否正确,云函数是否部署成功
  1. html部分 微信规定必须是该类型的button标签来获取code
js 复制代码
<button type="primary" class="btn" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">使用手机号登录</button>
  1. 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)
})
相关推荐
归于尽1 分钟前
V8 引擎是如何给 JS"打扫房间"的 ?
前端·javascript
小old弟1 分钟前
让对象保持定义的顺序来排列
前端
漫天星梦2 分钟前
前端列表页大数据内存优化的思考
前端·面试
爱学习的茄子3 分钟前
从0到1:揭秘前端网络请求的进化之路
前端·javascript·面试
欢乐时光c7 分钟前
常见请求头响应头的含义
前端·面试
wzyoung7 分钟前
element-ui让el-form绑定的深层对象也能通过内置的resetFields方法重置
前端·javascript·vue.js
用户73087011793087 分钟前
使用 CSS background-blend-mode 创造惊艳的视觉效果
前端
高端章鱼哥8 分钟前
Python 项目快速部署到 Linux 服务器基础教程
前端
李剑一9 分钟前
前端使用Web Cryptography API进行内容加密,几乎无法破解
前端
搬砖码9 分钟前
优雅实现!自定义滚动刻度选择器,精准选择无压力
前端