Integrated micro-channel vue js-sdk, and to achieve the function to receive the card roll

Recently took over the project of micro-channel, micro letter is not very understanding, a lot of information online are out of date. Posted under his own recording deal with their own.
First , the letter cited in the project micro-js vue project because it is no way a direct reference to the method according to the official website, so he thought npm..
Then , in the git search the next, https: //github.com/yanxi-me/ weixin-js-sdk, look readme

here is very clear, direct npm, and then referenced in the desired page.
Next , the page is achieved.
The first step , the introduction of js-sdk

var wx = require('weixin-js-sdk')

The second step , initialization at load time js-sdk. Encrypted back-end code is not posted online a lot.

uni.request({
				url: loacalUrl + "/wx/jsapi_ticket",
				method:"POST",
				success: (res) => {
					console.log(res.data.data)
					var signature = res.data.data
					
					wx.config({
						beta: true,
						debug: true,
						appId: "",
						timestamp: signature.timestamp,
						nonceStr: signature.nonce_str,
						signature: signature.signature,
						jsApiList: ['addCard','openCard','chooseCard']
					})
				}
			})

The third step , click on the button to jump to collect micro-channel receive coupons page. addCard parameter assignment cardExt first with json format, then converted into a string.

getCoupon(){
					uni.request({
						url:loacalUrl+"/wx/signature",
						method:"POST",
						success: (res) => {
							console.log(res)
							let signature = res.data.data
							let cardExt ={
								code:signature.code,
								timestamp:signature.timestamp,
								nonce_str:signature.nonce_str,
								outer_str:"01",
								signature:signature.signature
							}
							wx.addCard({
							  cardList: [{
								cardId: 'pyHLVv9tWcKHrPWWSVWA-mA1ArTA',
								cardExt: JSON.stringify(cardExt)
							  }], // 需要添加的卡券列表
							  success: function (res) {
								var cardList = res.cardList; // 添加的卡券列表信息
							  }
							});
						}
					})
				
			}

Since the end.