文章目录
前言
一、自测版本
二、线上版本
三、测试
总结


前言
需求：用户通过扫描小程序码，直接跳转到小程序的登陆页，并自动填充推荐码

一、自测版本
用于前端自己测试如何生成小程序码
<!-- 以图片的形式展示 -->
<image :src="maskData"></image>

onLoad(options) {
    console.log('需要推荐码',options)//打印出来是 {scene: "code%3D2QQ"}
	const scene = options.scene ? decodeURIComponent(options.scene) : ''
	console.log('编译出来的scene',scene) //打印出来是 code=3D2QQ
	this.code = scene.split('=')[1]//打印出来是 3D2QQ
	console.log('编译出来的推荐码',this.code)
},

getData(e) {
	//获取accessToken
	let that = this;
	const APP_ID = 'xxx'; // 小程序appid
	const APP_SECRET = 'xxxxx'; // 小程序app_secret
	let access_token = '';
	uni.request({
		url: "https://api.weixin.qq.com/cgi-bin/token", //固定链接，不用改
		data: {
			grant_type: 'client_credential',
			appid: APP_ID,
			secret: APP_SECRET
		},
		success: function(res) {
			console.log('获取accessToken', res)
			access_token = res.data.access_token;
			// 接口B：适用于需要的码数量极多的业务场景 生成的是小程序码
			that.getQrCode(access_token);
		}
	})
},
//获取二维码
getQrCode(access_token) {
	var that = this;
	uni.request({
		url: "https://api.weixin.qq.com/wxa/getwxacode?access_token=" + access_token,//固定链接，不用改
		method: 'POST',
		responseType: 'arraybuffer', //设置响应类型
		data: {
			path: 'pages/public/login?code=' + that.code, // 必须是已经发布的小程序存在的页面（否则报错）
			width: 298,
			auto_color: false, // 自动配置线条颜色，如果颜色依然是黑色，则说明不建议配置主色调
			line_color: {
				"r": "0",
				"g": "0",
				"b": "0"
			} // auto_color 为 false 时生效，使用 rgb 设置颜色
		},
		success: function(res) {
			console.log('获取二维码', res)
			that.maskData = "data:image/PNG;BASE64," + uni.arrayBufferToBase64(res.data);//以图片的形式展示
		}
	})
}


二、线上版本
原来以为很难的，压力都在前端，等做完了，测试体验版的时候，发现api.weixin.qq.com域名没加进去，结果官方跟我说，不能加这个域名，原因是前端不能直接用上面的方法自己去生成小程序码，必须要通过后台服务器转一下


// 给了个token，后端自己去实现自测版本中的操作-生成小程序码，返回图片地址，前端直接展示图片就好了，666
getData(e) {
	this.$api
		.qrcode({
			token: this.token
		})
		.then(res => {
			console.log('我的推荐码', res)
			this.maskData = res
		})
		.catch(err => {
			this.$api.msg(err)
		});


三、测试
截取生成小程序码的图片，用微信开发者工具的“通过二维码编译”扫码测试能不能拿到参数，并填充



总结
事情其实很简单，没必要想的太复杂

微信小程序开发交流qq群   173683895

   承接微信小程序开发。扫码加微信。

正文：

小程序需要先上线才能生成二维码

一： 获取access_token

 

接口调用请求说明

https请求方式: GET
https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET


参数说明

参数
			
是否必须
			
说明
		
grant_type
			
是
			
获取access_token填写client_credential
		
appid
			
是
			
第三方用户唯一凭证
		
secret
			
是
			
第三方用户唯一凭证密钥，即appsecret
		
返回说明

正常情况下，微信会返回下述JSON数据包给公众号：

{"access_token":"ACCESS_TOKEN","expires_in":7200}


参数说明

参数
			
说明
		
access_token
			
获取到的凭证
		
expires_in
			
凭证有效时间，单位：秒
		
二 ： 获取小程序码

 

我们推荐生成并使用小程序码，它具有更好的辨识度。目前有两个接口可以生成小程序码，开发者可以根据自己的需要选择合适的接口。

 

接口A: 适用于需要的码数量较少的业务场景 接口地址：

https://api.weixin.qq.com/wxa/getwxacode?access_token=ACCESS_TOKEN


获取 access_token 详见文档

POST 参数说明

参数
			
类型
			
默认值
			
说明
		
path
			
String
			
 
			
不能为空，最大长度 128 字节
		
width
			
Int
			
430
			
二维码的宽度
		
auto_color
			
Bool
			
false
			
自动配置线条颜色，如果颜色依然是黑色，则说明不建议配置主色调
		
line_color
			
Object
			
{"r":"0","g":"0","b":"0"}
			
auth_color 为 false 时生效，使用 rgb 设置颜色 例如 {"r":"xxx","g":"xxx","b":"xxx"},十进制表示
		
注意：通过该接口生成的小程序码，永久有效，数量限制见文末说明，请谨慎使用。用户扫描该码进入小程序后，将直接进入 path 对应的页面。

接口B：适用于需要的码数量极多的业务场景

接口地址：

https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=ACCESS_TOKEN


获取 access_token 详见文档

POST 参数说明

参数
			
类型
			
默认值
			
说明
		
scene
			
String
			
 
			
最大32个可见字符，只支持数字，大小写英文以及部分特殊字符：!#$&'()*+,/:;=?@-._~，其它字符请自行编码为合法字符（因不支持%，中文无法使用 urlencode 处理，请使用其他编码方式）
		
page
			
String
			
 
			
必须是已经发布的小程序存在的页面（否则报错），例如 "pages/index/index" ,根路径前不要填加'/',不能携带参数（参数请放在scene字段里），如果不填写这个字段，默认跳主页面
		
width
			
Int
			
430
			
二维码的宽度
		
auto_color
			
Bool
			
false
			
自动配置线条颜色，如果颜色依然是黑色，则说明不建议配置主色调
		
line_color
			
Object
			
{"r":"0","g":"0","b":"0"}
			
auto_color 为 false 时生效，使用 rgb 设置颜色 例如 {"r":"xxx","g":"xxx","b":"xxx"} 十进制表示
		
注意：通过该接口生成的小程序码，永久有效，数量暂无限制。用户扫描该码进入小程序后，开发者需在对应页面获取的码中 scene 字段的值，再做处理逻辑。使用如下代码可以获取到二维码中的 scene 字段的值。调试阶段可以使用开发工具的条件编译自定义参数 scene=xxxx 进行模拟，开发工具模拟时的 scene 的参数值需要进行 urlencode

// 这是首页的 js
Page({
  onLoad: function(options) {
    // options 中的 scene 需要使用 decodeURIComponent 才能获取到生成二维码时传入的 scene
    var scene = decodeURIComponent(options.scene)
  }
})


获取小程序二维码

接口C：适用于需要的码数量较少的业务场景

接口地址：

https://api.weixin.qq.com/cgi-bin/wxaapp/createwxaqrcode?access_token=ACCESS_TOKEN


获取 access_token 详见文档

POST 参数说明

参数
			
类型
			
默认值
			
说明
		
path
			
String
			
 
			
不能为空，最大长度 128 字节
		
width
			
Int
			
430
			
二维码的宽度
		
注意：通过该接口生成的小程序二维码，永久有效，数量限制见文末说明，请谨慎使用。用户扫描该码进入小程序后，将直接进入 path 对应的页面。

Bug & Tip

tip：通过该接口，仅能生成已发布的小程序的二维码。
	
tip：可以在开发者工具预览时生成开发版的带参二维码。
	
tip：接口A加上接口C，总共生成的码数量限制为100,000，请谨慎调用。
	
tip: POST 参数需要转成 json 字符串，不支持 form 表单提交。
	
tip: auto_color line_color 参数仅对小程序码生效。
错误码

45009：B接口调用分钟频率受限(目前5000次/分钟，会调整)，如需大量小程序码，建议预生成。 45029：A接口和C接口生成码个数总和到达最大个数限制。 41030：B接口所传page页面不存在，或者小程序没有发布，请注意B接口没有path参数，传path参数虽然可以生成小程序码，但是只能跳主页面。

 

 

时候会有业务需求生成某页面的小程序二维码，进入指定页面

效果图：



首先要获取access_token；

下面是链接

https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=秘钥

红色字体需要用户自己根据信息填充。

请求成功返回的结果是下面这种形式的


//注意：以下参数值不可以直接复制粘贴使用，需要自己根据上面的链接+参数获取使用
{
  "access_token": "12_fbGiPb3QuOW9M6n-Abg0ik4My2NocTJZZiAIAEUU",  
  "expires_in": 7200
}

expires_in：是一个有效期；

获取完access_token，下面开始正式我们的请求：

 

index.js:

//index.js
//获取应用实例
const app = getApp()

Page({
  data: {
  },
  onLoad: function (options) {
    var that = this;
    var scene = decodeURIComponent(options.scene)

    // 生成页面的二维码
    wx.request({
//注意：下面的access_token值可以不可以直接复制使用，需要自己请求获取
      url: 'https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=AbgEb2z0il9eIsqn6pWJTmSkvTcJhtb1As3_e049Qv_iFnVw8TXKEa2N8nn3GBKJbQaJ9G2ae5At4Cirphd8HFaduGvMU14UpuWjJz6X0i74I8-',
      data: {
        scene: '000',
        page: "pages/index/index"  //这里按照需求设置值和参数   
      },
      method: "POST",
      responseType: 'arraybuffer',  //设置响应类型
      success(res) {
        console.log(res)
        var src2 = wx.arrayBufferToBase64(res.data);  //对数据进行转换操作
        that.setData({
          src2
        })
      },
      fail(e) {
        console.log(e)
      }
    })


  },

})


index.wxml

<view>
   <view class='img'>
    <image src='data:image/png;base64,{{src2}}'></image>
   </view>
</view>

注意：对于没有发布的小程序page参数要设置为空，不然会导致二维码生成失败，在发布前按需改回来就好

 

一、 微信小程序码是什么

小程序码是微信自己推出的二维码，

可以通过扫描小程序码，

直接进入到对应的小程序页面。

普通的二维码是正方形的，

而小程序码是圆形，

更加容易让用户识别出来。

二、 在线生成微信小程序码

1） 进入在线生成小程序码页面
https://www.qinziheng.com/weapp/qrcode.html

2） 填写生成小程序码相关信息

包括：

2.1） 你的小程序 APPID

猛击查看《如何获取小程序APPID》

2.2） 你的小程序 APP SECRET

猛击查看《如何获取小程序APP SECRET》

2.3） 小程序码路径

扫描小程序二维码后，跳转的页面路径；

路径可以带参数，

路径的最前面不需要添加 /

3） 点击‘生成二维码’按钮

系统会自动帮你生成小程序码

4） 下载小程序码

在二维码上点击右键，

选择‘图片另存为’就行


在线生成小程序码


三、 在线生成小程序码要注意的地方

1） 我们不会保存你小程序的APPID, APP SECRET

请放心使用

2） 为了安全，每过一段时间我们会清理生成的小程序码，

请你即时下载保存

狂击这里了解，《怎么自己开发生成小程序码》

https://211.qinziheng.com/lesson/543/