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 小时前
什么是 RESTful API?凭什么能流行 20 多年?
前端·后端·程序员
www_stdio3 小时前
让大语言模型拥有“记忆”:多轮对话与 LangChain 实践指南
前端·langchain·llm
inferno3 小时前
JavaScript 基础
开发语言·前端·javascript
cindershade3 小时前
Intersection Observer 的实战方案
前端
青莲8433 小时前
Kotlin Flow 深度探索与实践指南——中部:实战与应用篇
android·前端
cindershade3 小时前
事件委托(Event Delegation)的原理
前端
开发者小天3 小时前
React中useMemo的使用
前端·javascript·react.js
1024肥宅3 小时前
JS复杂去重一定要先排序吗?深度解析与性能对比
前端·javascript·面试
im_AMBER3 小时前
weather-app开发手记 04 AntDesign组件库使用解析 | 项目设计困惑
开发语言·前端·javascript·笔记·学习·react.js
用泥种荷花3 小时前
VueCropper加载OBS图片跨域问题
前端