微信小程序云开发 生成带参小程序码流程


Posted in Javascript onMay 18, 2019

本文实例为大家分享了小程序生成带参小程序码的具体步骤,供大家参考,具体内容如下

生成带参小程序码流程

1、小程序端上传生成二维码所需的参数到云函数
2、云函数使用appidappsecret请求access_token
3、云函数使用access_token + 小程序端上传的参数生成二维码
4、云函数将生成的二维码返回到小程序端(或者存到数据库返回fileID,小程序端用fileID进行获取,后续生成先在数据库查找,数据库没有再执行生成操作,防止重复生成小程序码文件)

小程序端上传小程序码所需的参数

wx.cloud.callFunction({
 name: 'getImage', // 云函数名称
 data: { // 小程序码所需的参数
 page: "pages/xxxx/xxxx",
 id: id,
 },
 complete: res => {
 console.log('callFunction test result: ', res)
 this.setData({ // 获取返回的小程序码
 xcxCodeImageData: res.result,
 })
 }
})

云函数用appidappsecret请求access_token

创建云函数getImage,并在对应云函数目录中导入request 、request-promise、axios框架(用于数据请求),

npm install --save request // request框架
npm install --save request-promise // request框架promise风格
npm install --save axios // 数据请求框架,可将返回的数据类型设置为流`stream`
# 备注:install 可以简写为 i ;save 作用是将这个库添加到package.json里面

云函数文件中导入框架

const cloud = require('wx-server-sdk')
const axios = require('axios')
var rp = require('request-promise');
const fs = require('fs');
var stream = require('stream');
# 不需要全部导入,根据实际下面实际使用情况酌情导入

请求获取 access_token

// request框架promise风格
rp('https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=secret=appSecret'
 .then(function(resultValue) {
 console.log("请求 success:")
 console.log(JSON.parse(resultValue))
 })
 .catch(function(err) {});
 });

// Nodejs原生写法
const http = require("https") 
const url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=secret=appSecret" 
http.get(url,(res)=>{
 var resultValue = ""
 res.on("data",(data)=>{
 resultValue+=data
 })
 res.on("end",()=>{
 console.log(resultValue)
 })
 }).on("error",(e)=>{
 console.log(`获取数据失败: ${e.message}`)
})

获取小程序码

var options = {
 method: 'POST',
 url: 'https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=' + access_token',
 body: {
 page: "pages/xxx/xxx
 scene: "id=xxx"
 },
 json: true
 };
 rp(options)
 .then(function(parsedBody) {
 console.log(parsedBody) //小程序码图片数据
 })
 .catch(function(err) {});

服务端完整代码一

var rp = require('request-promise');
const fs = require('fs');
var stream = require('stream');

// 请求微信access_token
 rp('https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=appid&secret=secret')
.then(function(resultValue) {
console.log("请求 success:" + resultValue)
console.log(JSON.parse(resultValue).access_token)

// 请求小程序码
var http = require("http"),
data = {
 // 小程序码参数
 "page": "pages/CardDetail/CardDetail",
 "width": 300,
 "scene": "id=W6MIjlJhFW5Pec-Y",
};
data = JSON.stringify(data);
var options = {
 method: "POST",
 host: "api.weixin.qq.com",
 path: "/wxa/getwxacodeunlimit?access_token=" + JSON.parse(resultValue).access_token,
 headers: {
  "Content-Type": "application/json",
  "Content-Length": data.length
 }
 };
 var req = http.request(options, function (res) {
 res.setEncoding("binary");
 var imgData = '';
 res.on('data', function (chunk) {
 imgData += chunk;
 });
 res.on("end", function () {
 
 // 将返回的图片数据转化成uploadFile方法fileContent参数所需的文件流形式,且本地输出数据正常,可以试着用此方法执行uploadFile进行获取小程序码,作者采用了方法二
 var bufferStream = new stream.PassThrough();
 bufferStream.end(new Buffer(imgData));
 console.log('uploadFile方法fileContent参数所需的文件流----')
 console.log(bufferStream)
 
 // Sublime Text可以运行输出到本地,且可以打开二维码
 // 本地存放路径
 var path = 'public/'+ Date.now() +'.png';
 fs.writeFile(path, imgData, "binary", function (err) {
  if (err) {
  console.log("down fail");
 }
 console.log("down success");
 });
 });
 });
 req.write(data);
 req.end();
 })
.catch(function(err) {});

服务端完整代码二(可直接粘贴使用)

const cloud = require('wx-server-sdk')
const axios = require('axios')
var rp = require('request-promise');
cloud.init()

// 云函数入口函数
exports.main = async (event, context) => {
 console.log(event)
 try {
const resultValue = await rp('https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=appid&secret=secret')
const token = JSON.parse(resultValue).access_token;
console.log('------ TOKEN:', token);

const response = await axios({
 method: 'post',
 url: 'https://api.weixin.qq.com/wxa/getwxacodeunlimit',
 responseType: 'stream',
 params: {
 access_token: token,
 },
 data: {
 page: event.page,
 width: 300,
 scene: "id=" + event.id,
 },
});

return await cloud.uploadFile({
 cloudPath: 'xcxcodeimages/' + Date.now() + '.png',
 fileContent: response.data,
});
 } catch (err) {
console.log('>>>>>> ERROR:', err)
 }
}

点击查看:request框架相关文档

点击查看:request框架promise风格相关文档

点击查看:axios框架相关文档

点击查看:小程序云开发文档

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js window.onload 加载多个函数的方法
Nov 02 Javascript
javascript循环变量注册dom事件 之强大的闭包
Sep 08 Javascript
详解JavaScript中的表单验证
Jun 16 Javascript
js实现根据身份证号自动生成出生日期
Dec 15 Javascript
JavaScript获取服务器时间的方法详解
Dec 11 Javascript
详解JS中的立即执行函数
Feb 24 Javascript
vue-router单页面路由
Jun 17 Javascript
Mongoose实现虚拟字段查询的方法详解
Aug 15 Javascript
node中modules.exports与exports导出的区别
Jun 08 Javascript
vue css 引入asstes中的图片无法显示的四种解决方法
Mar 16 Javascript
Vue 打包体积优化方案小结
May 20 Javascript
Vue自定义组件双向绑定实现原理及方法详解
Sep 03 Javascript
详解小程序开发经验:多页面数据同步
May 18 #Javascript
JavaScript实现星级评价效果
May 17 #Javascript
JavaScript实现美化滑块效果
May 17 #Javascript
vue中使用mxgraph的方法实例代码详解
May 17 #Javascript
vue中引入mxGraph的步骤详解
May 17 #Javascript
微信小程序云开发 搭建一个管理小程序
May 17 #Javascript
微信小程序云开发实现增删改查功能
May 17 #Javascript
You might like
PHP define函数的使用说明
2008/08/27 PHP
PHP foreach循环使用详解与实例代码
2010/05/08 PHP
PHP计划任务、定时执行任务的实现代码
2011/04/23 PHP
php中url传递中文字符,特殊危险字符的解决方法
2013/08/17 PHP
PHP中使用循环实现的金字塔图形
2014/11/08 PHP
php中数据库连接方式pdo和mysqli对比分析
2015/02/25 PHP
PHP预定义超全局数组变量小结
2018/08/20 PHP
PHP实现八皇后算法
2019/05/06 PHP
JavaScript 输入框内容格式验证代码
2010/02/11 Javascript
解析js原生方法创建表格效率测试
2013/07/08 Javascript
javascript读取xml实现javascript分页
2013/12/13 Javascript
分享JavaScript监听全部Ajax请求事件的方法
2016/08/28 Javascript
canvas实现环形进度条效果
2017/03/23 Javascript
bootstrap table实现单击单元格可编辑功能
2017/03/28 Javascript
js模拟支付宝密码输入框
2017/04/11 Javascript
Node.js使用cookie保持登录的方法
2018/05/11 Javascript
利用d3.js力导布局绘制资源拓扑图实例教程
2019/01/08 Javascript
微信小程序学习笔记之表单提交与PHP后台数据交互处理图文详解
2019/03/28 Javascript
在antd Table中插入可编辑的单元格实例
2020/10/28 Javascript
[03:01]完美盛典趣味短片 DOTA2年度最佳&拉胯英雄
2019/12/07 DOTA
提升Python程序运行效率的6个方法
2015/03/31 Python
解决Python出现_warn_unsafe_extraction问题的方法
2016/03/24 Python
利用python生成一个导出数据库的bat脚本文件的方法
2016/12/30 Python
python 数据的清理行为实例详解
2017/07/12 Python
快速了解Python相对导入
2018/01/12 Python
Python 查找list中的某个元素的所有的下标方法
2018/06/27 Python
10招!看骨灰级Pythoner玩转Python的方法
2019/04/15 Python
CSS3实例分享--超炫checkbox复选框和radio单选框
2014/09/01 HTML / CSS
大学生的网上创业计划书
2013/12/31 职场文书
职业培训师职业生涯规划
2014/02/18 职场文书
主办会计岗位职责
2014/03/13 职场文书
幼儿园新年寄语
2014/04/03 职场文书
2014年党员创先争优承诺书
2014/05/29 职场文书
2015年度党员个人总结
2015/02/14 职场文书
详解MySQL 联合查询优化机制
2021/05/10 MySQL
基于Redis延迟队列的实现代码
2021/05/13 Redis