uni-app 配置以及使用微信云函数-Toy模板网

这篇具有很好参考价值的文章主要介绍了uni-app 配置以及使用微信云函数。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

aiwendnagphonenumber.getPhoneNumber | 微信开放文档获取手机号方法

云调用 | 微信开放文档云调用教程文档

该博客只提供配置流程不解释细节其实我也不太明白

如果要使用云函数必须满足一下条件

uni-app 配置以及使用微信云函数

一。文件创建

1. 在项目根目录中创建一个文件用于存放云函数文件（我这里创建了一个 functions 文件夹）

uni-app 配置以及使用微信云函数

2.在 functions 文件夹下创建你要实现功能的名称作为文件夹名称（功能名称随你定）我这里是要获取用户手机号就叫 getPhone

3.然后在getPhone 文件下创建三个文件（`config.json`、`index.js`和`package.json`）

config.json 文件（该文件是用于 配置云调用权限，每个云函数需要声明其会使用到的接口，否则无法调用）

{
  "permissions": {
    "openapi": [
      "phonenumber.getPhoneNumberk" // 使用到的 云函数接口名
    ]
  }
}

微信文档介绍

uni-app 配置以及使用微信云函数

index.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 （依赖文件目录） wx-server-sdk 已经添加到依赖文件中

{
  "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"
  }
}

3.在根目录中创建vue.config.js文件

文件内容

我在 1.操作中的文件名称为 functions 所以下列代码路径文件请按照自己的情况更改

const path = require('path')
const CopyWebpackPlugin = require('copy-webpack-plugin')

module.exports = {
  configureWebpack: {
    plugins: [
      new CopyWebpackPlugin([
        {
          from: path.join(__dirname, 'functions'),
          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

2.在我们创建的 functions文件下找到我们创建的 getPhone文件右键点击外部命令窗口

在窗口中输入 npm install 创建 node_modules 等依赖文件建

uni-app 配置以及使用微信云函数

3.打开根目录的 manifest.json 文件点击源码视图找到 mp-weixin

"cloudfunctionRoot": "./functions/",

uni-app 配置以及使用微信云函数

三。上传

将项目运行到微信小程序开发工具上

打开后找到 project.config.json文件就证明没有什么问题了

uni-app 配置以及使用微信云函数

上传文件找到我们要是用的云函数 getPhone 右键点击选择上传方式

我个人对这个上传的理解是

上传所有文件调用时云服务器就不需要再去加载依赖

不上传所有文件云服务器可能就需要去再引入依赖

具体看个人

uni-app 配置以及使用微信云函数

上传完成后查看环境是否正确

uni-app 配置以及使用微信云函数

调用

调用前先查看云函数是否部署成功

uni-app 配置以及使用微信云函数

html部分微信规定必须使用该类型的 button 标签来获取code

		<button  
			type="primary" 
			class='btn' 
			open-type="getPhoneNumber"
			@getphonenumber="getPhoneNumber"
		>使用手机号登录</button>

js部分

	methods:{
		async getPhoneNumber (e) {
			
			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)
					})
			},

最后就是这个云服务是要收费的不可能便宜你的但是有免费使用额度

根据自己需要来选择吧

uni-app 配置以及使用微信云函数