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


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 相关文章推荐
JavaScript 学习笔记(十一)
Jan 19 Javascript
JS记录用户登录次数实现代码
Jan 15 Javascript
浅析Node在构建超媒体API中的作用
Jul 30 Javascript
JavaScript中获取样式的原生方法小结
Oct 08 Javascript
js控制文本框输入的字符类型方法汇总
Jun 19 Javascript
javascript动态添加删除tabs标签的方法
Jul 06 Javascript
JavaScript仿百度图片浏览效果
Nov 23 Javascript
Bootstrap CSS组件之面包屑导航(breadcrumb)
Dec 17 Javascript
JS简单实现表格排序功能示例
Dec 20 Javascript
jQuery实现鼠标经过显示动画边框特效
Mar 24 jQuery
node实现分片下载的示例代码
Oct 17 Javascript
Express 配置HTML页面访问的实现
Nov 01 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 分页分组类
2009/12/10 PHP
php启用zlib压缩文件的配置方法
2013/06/12 PHP
PHP的基本常识小结
2013/07/05 PHP
php预定义变量使用帮助(带实例)
2013/10/30 PHP
Laravel 5框架学习之Eloquent 关系
2015/04/09 PHP
PHP判断文件是否被引入的方法get_included_files用法示例
2016/11/29 PHP
js 异步处理进度条
2010/04/01 Javascript
JavaScript中把数字转换为字符串的程序代码
2013/06/19 Javascript
页面图片浮动左右滑动效果的简单实现案例
2014/02/10 Javascript
采用call方式实现js继承
2014/05/20 Javascript
JavaScript函数详解
2015/02/27 Javascript
深入理解JavaScript系列(25):设计模式之单例模式详解
2015/03/03 Javascript
javascript表格的渲染组件
2015/07/03 Javascript
jQuery实现为控件添加水印文字效果(附源码)
2015/12/02 Javascript
jQuery实现网页顶部固定导航效果代码
2015/12/24 Javascript
JQuery给select添加/删除节点的实现代码
2016/04/26 Javascript
js实现对table的增加行和删除行的操作方法
2016/10/13 Javascript
BootStrap table删除指定行的注意事项(笔记整理)
2017/02/05 Javascript
原生JS实现的简单小钟表功能示例
2018/08/30 Javascript
win7安装python生成随机数代码分享
2013/12/27 Python
Python json转字典字符方法实例解析
2020/04/13 Python
python request 模块详细介绍
2020/11/10 Python
python中threading和queue库实现多线程编程
2021/02/06 Python
使用css3实现的tab选项卡代码分享
2014/12/09 HTML / CSS
JPA的特点
2014/10/25 面试题
销售人员个人求职信
2013/09/26 职场文书
土木工程建筑专业毕业生求职信
2013/10/21 职场文书
党的群众路线教育实践活动批评与自我批评
2014/02/16 职场文书
大学学习个人的自我评价
2014/02/18 职场文书
《长征》教学反思
2014/04/27 职场文书
国际政治学专业推荐信
2014/09/26 职场文书
二审答辩状格式
2015/05/22 职场文书
休假证明书
2015/06/24 职场文书
Java后台生成图片的完整步骤
2021/08/04 Java/Android
CSS实现切角+边框+投影+内容背景色渐变效果
2021/11/01 HTML / CSS
一文了解JavaScript用Element Traversal新属性遍历子元素
2021/11/27 Javascript