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)
})
相关推荐
崔庆才丨静觅3 小时前
hCaptcha 验证码图像识别 API 对接教程
前端
passerby60614 小时前
完成前端时间处理的另一块版图
前端·github·web components
掘了4 小时前
「2025 年终总结」在所有失去的人中,我最怀念我自己
前端·后端·年终总结
崔庆才丨静觅4 小时前
实用免费的 Short URL 短链接 API 对接说明
前端
崔庆才丨静觅5 小时前
5分钟快速搭建 AI 平台并用它赚钱!
前端
崔庆才丨静觅5 小时前
比官方便宜一半以上!Midjourney API 申请及使用
前端
Moment5 小时前
富文本编辑器在 AI 时代为什么这么受欢迎
前端·javascript·后端
崔庆才丨静觅5 小时前
刷屏全网的“nano-banana”API接入指南!0.1元/张量产高清创意图,开发者必藏
前端
剪刀石头布啊6 小时前
jwt介绍
前端
爱敲代码的小鱼6 小时前
AJAX(异步交互的技术来实现从服务端中获取数据):
前端·javascript·ajax