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


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 相关文章推荐
Prototype中dom对象方法汇总
Sep 17 Javascript
javascript基础之查找元素的详细介绍(访问节点)
Jul 05 Javascript
javascript控制在光标位置插入文字适合表情的插入
Jun 09 Javascript
JS+CSS实现Div弹出窗口同时背景变暗的方法
Mar 04 Javascript
javascript+HTML5的canvas实现七夕情人节3D玫瑰花效果代码
Aug 04 Javascript
详解vue嵌套路由-query传递参数
May 23 Javascript
微信小程序实现下载进度条的方法
Dec 08 Javascript
微信小程序自定义prompt组件步骤详解
Jun 12 Javascript
Vue CLI3.0中使用jQuery和Bootstrap的方法
Feb 28 jQuery
JavaScript遍历数组的方法代码实例
Jan 14 Javascript
vue 根据选择的月份动态展示日期对应的星期几
Feb 06 Vue.js
vue中h5端打开app(判断是安卓还是苹果)
Feb 26 Vue.js
详解小程序开发经验:多页面数据同步
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 如何向 MySQL 发送数据
2006/10/09 PHP
基于PHP异步执行的常用方式详解
2013/06/03 PHP
使用swoole扩展php websocket示例
2014/02/13 PHP
php防止伪造数据从地址栏URL提交的方法
2014/08/24 PHP
微信第三方登录(原生)demo【必看篇】
2017/05/26 PHP
基于jQuery制作迷你背词汇工具
2010/07/27 Javascript
jQuery 选择器、DOM操作、事件、动画
2010/11/25 Javascript
javascript获取flash版本号的方法
2014/11/20 Javascript
jQuery使用之标记元素属性用法实例
2015/01/19 Javascript
使用JavaScript刷新网页的方法
2015/06/04 Javascript
纯js代码制作的网页时钟特效【附实例】
2016/03/30 Javascript
读Javascript高性能编程重点笔记
2016/12/21 Javascript
详解让sublime text3支持Vue语法高亮显示的示例
2017/09/29 Javascript
angularJS开发注意事项
2018/05/26 Javascript
js中的reduce()函数讲解
2019/01/18 Javascript
[54:47]Liquid vs VP Supermajor决赛 BO 第五场 6.10
2018/07/05 DOTA
python排序方法实例分析
2015/04/30 Python
python超简单解决约瑟夫环问题
2015/05/12 Python
Python发送form-data请求及拼接form-data内容的方法
2016/03/05 Python
nohup后台启动Python脚本,log不刷新的解决方法
2019/01/14 Python
Python json读写方式和字典相互转化
2020/04/18 Python
详解Python爬虫爬取博客园问题列表所有的问题
2021/01/18 Python
python链表类中获取元素实例方法
2021/02/23 Python
移动端Html5页面生成图片解决方案
2018/08/07 HTML / CSS
编程实现当输入某产品代码则打印出该产品记录的功能
2014/05/03 面试题
大学生自我鉴定
2013/12/08 职场文书
新闻编辑求职信
2014/04/09 职场文书
节能环保家庭事迹材料
2014/08/27 职场文书
2014年政务公开工作总结
2014/12/09 职场文书
2015年党支部公开承诺书
2015/01/22 职场文书
2015年超市工作总结
2015/04/09 职场文书
个人工作决心书
2015/09/22 职场文书
优秀团员主要事迹材料
2015/11/05 职场文书
《水上飞机》教学反思
2016/02/20 职场文书
matplotlib之pyplot模块实现添加子图subplot的使用
2021/04/25 Python
Python中npy和mat文件的保存与读取
2022/04/24 Python