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)
})
相关推荐
用户83134859306985 小时前
Vue3 事件:常用用法与开发高频坑点
前端·javascript·vue.js
weixin_446260855 小时前
ReAct‑Evolve:基于轨迹反馈的ReAct智能体自主提示演化系统
前端·react.js·前端框架
其实防守也摸鱼5 小时前
存储管理:页面置换算法学习任务(测验题要求给出置换页面顺序,缺页次数,缺页率)
android·前端·数据库·学习·oracle·自动化
怒放的生命19915 小时前
前端项目 Docker 打包实操指南
前端·docker·容器
tedcloud1235 小时前
Docker Compose 部署 Immich:手机照片自动备份与常见故障排查
运维·前端·docker·容器·智能手机·开源·流程图
时间的情敌5 小时前
《WebGIS 前端的成长路线,三维可视化工程师需要掌握什么》
前端·状态模式
漫步人生走在路上5 小时前
用小语种SEO突破外贸B2B天花板:法语、德语市场的实测数据
开发语言·前端·javascript·人工智能·搜索引擎·ecmascript
变与不变8065 小时前
jQuery 核心语法与 jQuery AJAX
前端·ajax·jquery
文章永久免费只为良心5 小时前
Ctfshow_Web应用安全与防护_第二章_无字母数字命令执行
前端·python·安全·网络安全·渗透测试·ctf·红队渗透测试