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


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 相关文章推荐
connect中间件session、cookie的使用方法分享
Jun 17 Javascript
js 通过cookie实现刷新不变化树形菜单
Oct 30 Javascript
jQuery中width()方法用法实例
Dec 24 Javascript
jquery手风琴特效插件
Feb 04 Javascript
Jquery Ajax Error 调试错误的技巧
Nov 20 Javascript
在AngularJS中如何使用谷歌地图把当前位置显示出来
Jan 25 Javascript
限制只能输入数字的实现代码
May 16 Javascript
使用js获取地址栏参数的方法推荐(超级简单)
Jun 14 Javascript
javascript实现的图片预览功能
Mar 25 Javascript
Vue.js实现价格计算器功能
Mar 30 Javascript
Vue自定义指令上报Google Analytics事件统计的方法
Feb 25 Javascript
javascript canvas时钟模拟器
Jul 13 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
浅谈discuz密码加密的方式
2014/05/22 PHP
使用PHP如何实现高效安全的ftp服务器(二)
2015/12/30 PHP
PHP Callable强制指定回调类型的方法
2016/08/30 PHP
PHP pthreads v3下worker和pool的使用方法示例
2020/02/21 PHP
关于JavaScript中var声明变量作用域的推断
2010/12/16 Javascript
Script的加载方法小结
2011/01/12 Javascript
jquery获取复选框被选中的值
2014/03/22 Javascript
基于JavaScript实现高德地图和百度地图提取行政区边界经纬度坐标
2016/01/22 Javascript
实例讲解JavaScript的Backbone.js框架中的View视图
2016/05/05 Javascript
js对象浅拷贝和深拷贝详解
2016/09/05 Javascript
jQuery加载及解析XML文件的方法实例分析
2017/01/22 Javascript
JavaScript制作简易计算器(不用eval)
2017/02/05 Javascript
基于node.js的fs核心模块读写文件操作(实例讲解)
2017/09/10 Javascript
详解如何优雅地在React项目中使用Redux
2017/12/28 Javascript
详解React项目的服务端渲染改造(koa2+webpack3.11)
2018/03/19 Javascript
vue2.0 实现导航守卫(路由守卫)
2018/05/21 Javascript
开发中常用的25个JavaScript单行代码(小结)
2019/06/28 Javascript
原生js实现放大镜组件
2021/01/22 Javascript
Django学习笔记之Class-Based-View
2017/02/15 Python
python实现ID3决策树算法
2017/12/20 Python
JavaScript中的模拟事件和自定义事件实例分析
2018/07/27 Python
Python OpenCV调用摄像头检测人脸并截图
2020/08/20 Python
使用python写的opencv实时监测和解析二维码和条形码
2019/08/14 Python
python用Tkinter做自己的中文代码编辑器
2020/09/07 Python
Python爬虫开发与项目实战
2020/12/16 Python
领先的钻石和订婚戒指零售商:Diamonds-USA
2016/12/11 全球购物
UGG澳洲官网:UGG Australia
2018/04/26 全球购物
华为智利官方商店:Huawei Chile
2020/05/09 全球购物
最新创业融资计划书
2014/01/19 职场文书
超市开学活动方案
2014/03/01 职场文书
学校四风问题对照检查材料思想汇报
2014/09/26 职场文书
2014年检验员工作总结
2014/11/19 职场文书
食品安全责任书范本
2015/05/09 职场文书
电影圆明园观后感
2015/06/03 职场文书
django 认证类配置实现
2021/11/11 Python
PyTorch中的torch.cat简单介绍
2022/03/17 Python