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


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 相关文章推荐
动态改变div的z-index属性的简单实例
Aug 08 Javascript
javascript代码运行不出来执行错误的可能情况整理
Oct 18 Javascript
实例讲解JS中数组Array的操作方法
May 09 Javascript
js子页面获取父页面数据示例
May 15 Javascript
为什么JS中eval处理JSON数据要加括号
Apr 13 Javascript
jQuery AjaxUpload 上传图片代码
Feb 02 Javascript
详解vue移动端日期选择组件
Feb 22 Javascript
Vue 仿QQ左滑删除组件功能
Mar 12 Javascript
jQuery实现的简单对话框拖动功能示例
Jun 05 jQuery
javaScript把其它类型转换为Number类型
Oct 13 Javascript
vue远程加载sfc组件思路详解
Dec 25 Javascript
在Angular项目使用socket.io实现通信的方法
Jan 05 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采用XML-RPC构造Web Service实例教程
2014/07/16 PHP
PHP7扩展开发教程之Hello World实现方法示例
2017/08/03 PHP
详解PHP中的 input属性(隐藏 只读 限制)
2017/08/14 PHP
nodejs入门详解(多篇文章结合)
2012/03/07 NodeJs
深入理解JSON数据源格式
2014/01/10 Javascript
js对象内部访问this修饰的成员函数示例
2014/04/27 Javascript
深入理解JavaScript系列(22):S.O.L.I.D五大原则之依赖倒置原则DIP详解
2015/03/05 Javascript
jQuery中each()、find()和filter()等节点操作方法详解(推荐)
2016/05/25 Javascript
全面了解JavaScript对象进阶
2016/07/19 Javascript
Nodejs抓取html页面内容(推荐)
2016/08/11 NodeJs
vue数据双向绑定原理解析(get & set)
2017/03/08 Javascript
Jquery EasyUI $.Parser
2017/06/02 jQuery
jquery获取img的src值实例介绍
2019/01/16 jQuery
解决layui富文本编辑器图片上传无法回显的问题
2019/09/18 Javascript
微信小程序pinker组件使用实现自动相减日期
2020/05/07 Javascript
原生js实现随机点名
2020/07/05 Javascript
基于vue 动态菜单 刷新空白问题的解决
2020/08/06 Javascript
[47:03]Ti4第二日主赛事败者组 LGD vs iG 2
2014/07/21 DOTA
[01:34]DOTA2 7.22版本新增神杖效果一览(敏捷英雄篇)
2019/05/28 DOTA
Python实现的简单万年历例子分享
2014/04/25 Python
python进程管理工具supervisor的安装与使用教程
2017/09/05 Python
python 2.7 检测一个网页是否能正常访问的方法
2018/12/26 Python
Python OpenCV读取显示视频的方法示例
2020/02/20 Python
python自动点赞功能的实现思路
2020/02/26 Python
Keras框架中的epoch、bacth、batch size、iteration使用介绍
2020/06/10 Python
15款Python编辑器的优缺点,别再问我“选什么编辑器”啦
2020/10/19 Python
html5实现多文件的上传示例代码
2014/02/13 HTML / CSS
决定成败的关键——创业计划书
2014/01/24 职场文书
社区国庆节活动方案
2014/02/05 职场文书
遗体告别仪式主持词
2014/03/20 职场文书
房地产营销活动策划方案
2014/09/15 职场文书
大学生暑假实习总结
2015/07/13 职场文书
2016元旦晚会主持词开场白和结束语
2015/12/04 职场文书
python opencv通过4坐标剪裁图片
2021/06/05 Python
Python进程间的通信之语法学习
2022/04/11 Python
mysql 索引的数据结构为什么要采用B+树
2022/04/26 MySQL