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)
})
相关推荐
zl0_00_021 分钟前
xss-lab
前端·网络·xss
爱上你家菜包28 分钟前
Electron一小时快速上手
前端·javascript·electron
陈琦鹏29 分钟前
Vue3+Vite开发Electron桌面端问题记录
前端·javascript·electron
狼性书生2 小时前
uniapp vue3实现的一款数字动画调节器件,支持长按、单点操作,提供丝滑的增减动画效果
前端·vue.js·微信小程序·小程序·uni-app
Jelena157795857922 小时前
爬虫获取微店商品快递费 item_feeAPI 接口的完整指南
开发语言·前端·爬虫
总是学不会.3 小时前
从“记住我”到 Web 认证:Cookie、JWT 和 Session 的故事
java·前端·后端·开发
xinran_Yi3 小时前
XSS-labs靶场通关
前端·xss
前端代码仔3 小时前
JS继承的几种实现方式
前端·javascript
巅峰赛2000分以下是巅峰3 小时前
buuctf.web 64-96
前端
伶俜Monster3 小时前
Threejs 光照教程,为 3D 场景注入灵魂
前端·3d·webgl·threejs