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

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

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

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

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

一。文件创建

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

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

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

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

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

微信文档介绍

 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  等依赖  文件建

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

"cloudfunctionRoot": "./functions/",

 三。上传 

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

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

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

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

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

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

具体看个人

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

调用

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

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)
					})
			},

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

根据自己需要来选择吧