We use vue + webpack multi-page scaffolding, together with html5 plus and then use hbuilder packaging to develop app, business, we need to use Wechat app to pay, but the demo given by official documents are all developed in native language, and sdk, does not know how to use JS to open Wechat and adjust WeChat Pay in our app. Do you have similar experience and how to implement
for those with js version, introduce Wechat's jssdk jssdk
ps: demo code
you need to first introduce the dependency js < script src= "http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>, which can only be opened in Wechat. The computer can download Wechat developer tools to debug
/*
* :
* 1. JS"" "" "JS"
* 2. Android Android 6.0.2.58
* 3. JS-SDK :http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html
*
* :
* :weixin-open@qq.com
* :JS-SDK
* :
*/
wx.ready(function () {
// 1 JS
document.querySelector('-sharpcheckJsApi').onclick = function () {
wx.checkJsApi({
jsApiList: [
'getNetworkType',
'previewImage'
],
success: function (res) {
alert(JSON.stringify(res));
}
});
};
// 2.
// 2.1 ""
document.querySelector('-sharponMenuShareAppMessage').onclick = function () {
wx.onMenuShareAppMessage({
title: '',
desc: '',
link: 'http://movie.douban.com/subject/25785114/',
imgUrl: 'https://img.codeshelper.com/upload/img/2021/12/03/bji0t1jimtz1446.jpg',
trigger: function (res) {
// triggerajaxajax
alert('');
},
success: function (res) {
alert('');
},
cancel: function (res) {
alert('');
},
fail: function (res) {
alert(JSON.stringify(res));
}
});
alert('"" ');
};
// 2.2 ""
document.querySelector('-sharponMenuShareTimeline').onclick = function () {
wx.onMenuShareTimeline({
title: '',
link: 'http://movie.douban.com/subject/25785114/',
imgUrl: 'https://img.codeshelper.com/upload/img/2021/12/03/bji0t1jimtz1446.jpg',
trigger: function (res) {
// triggerajaxajax
alert('');
},
success: function (res) {
alert('');
},
cancel: function (res) {
alert('');
},
fail: function (res) {
alert(JSON.stringify(res));
}
});
alert('"" ');
};
// 2.3 "QQ"
document.querySelector('-sharponMenuShareQQ').onclick = function () {
wx.onMenuShareQQ({
title: '',
desc: '',
link: 'http://movie.douban.com/subject/25785114/',
imgUrl: 'https://img.codeshelper.com/upload/img/2021/12/03/fn40esa4s4r1447.jpg',
trigger: function (res) {
alert('QQ');
},
complete: function (res) {
alert(JSON.stringify(res));
},
success: function (res) {
alert('');
},
cancel: function (res) {
alert('');
},
fail: function (res) {
alert(JSON.stringify(res));
}
});
alert('" QQ" ');
};
// 2.4 ""
document.querySelector('-sharponMenuShareWeibo').onclick = function () {
wx.onMenuShareWeibo({
title: '',
desc: '',
link: 'http://movie.douban.com/subject/25785114/',
imgUrl: 'https://img.codeshelper.com/upload/img/2021/12/03/fn40esa4s4r1447.jpg',
trigger: function (res) {
alert('');
},
complete: function (res) {
alert(JSON.stringify(res));
},
success: function (res) {
alert('');
},
cancel: function (res) {
alert('');
},
fail: function (res) {
alert(JSON.stringify(res));
}
});
alert('"" ');
};
// 2.5 "QZone"
document.querySelector('-sharponMenuShareQZone').onclick = function () {
wx.onMenuShareQZone({
title: '',
desc: '',
link: 'http://movie.douban.com/subject/25785114/',
imgUrl: 'https://img.codeshelper.com/upload/img/2021/12/03/fn40esa4s4r1447.jpg',
trigger: function (res) {
alert('QZone');
},
complete: function (res) {
alert(JSON.stringify(res));
},
success: function (res) {
alert('');
},
cancel: function (res) {
alert('');
},
fail: function (res) {
alert(JSON.stringify(res));
}
});
alert('"QZone" ');
};
// 3
var voice = {
localId: '',
serverId: ''
};
// 3.1
document.querySelector('-sharptranslateVoice').onclick = function () {
if (voice.localId == '') {
alert(' startRecord ');
return;
}
wx.translateVoice({
localId: voice.localId,
complete: function (res) {
if (res.hasOwnProperty('translateResult')) {
alert(':' + res.translateResult);
} else {
alert('');
}
}
});
};
// 4
// 4.2
document.querySelector('-sharpstartRecord').onclick = function () {
wx.startRecord({
cancel: function () {
alert('');
}
});
};
// 4.3
document.querySelector('-sharpstopRecord').onclick = function () {
wx.stopRecord({
success: function (res) {
voice.localId = res.localId;
},
fail: function (res) {
alert(JSON.stringify(res));
}
});
};
// 4.4
wx.onVoiceRecordEnd({
complete: function (res) {
voice.localId = res.localId;
alert('');
}
});
// 4.5
document.querySelector('-sharpplayVoice').onclick = function () {
if (voice.localId == '') {
alert(' startRecord ');
return;
}
wx.playVoice({
localId: voice.localId
});
};
// 4.6
document.querySelector('-sharppauseVoice').onclick = function () {
wx.pauseVoice({
localId: voice.localId
});
};
// 4.7
document.querySelector('-sharpstopVoice').onclick = function () {
wx.stopVoice({
localId: voice.localId
});
};
// 4.8
wx.onVoicePlayEnd({
complete: function (res) {
alert('' + res.localId + '');
}
});
// 4.8
document.querySelector('-sharpuploadVoice').onclick = function () {
if (voice.localId == '') {
alert(' startRecord ');
return;
}
wx.uploadVoice({
localId: voice.localId,
success: function (res) {
alert('serverId ' + res.serverId);
voice.serverId = res.serverId;
}
});
};
// 4.9
document.querySelector('-sharpdownloadVoice').onclick = function () {
if (voice.serverId == '') {
alert(' uploadVoice ');
return;
}
wx.downloadVoice({
serverId: voice.serverId,
success: function (res) {
alert('localId ' + res.localId);
voice.localId = res.localId;
}
});
};
// 5
// 5.1
var images = {
localId: [],
serverId: []
};
document.querySelector('-sharpchooseImage').onclick = function () {
wx.chooseImage({
success: function (res) {
images.localId = res.localIds;
alert(' ' + res.localIds.length + ' ');
}
});
};
// 5.2
document.querySelector('-sharppreviewImage').onclick = function () {
wx.previewImage({
current: 'https://img.codeshelper.com/upload/img/2021/12/03/o3s4vhspjwy1448.jpg',
urls: [
'https://img.codeshelper.com/upload/img/2021/12/03/gw3zomcmvx41449.jpg',
'https://img.codeshelper.com/upload/img/2021/12/03/o3s4vhspjwy1448.jpg',
'https://img.codeshelper.com/upload/img/2021/12/03/0qluufhbt4p1450.jpg'
]
});
};
// 5.3
document.querySelector('-sharpuploadImage').onclick = function () {
if (images.localId.length == 0) {
alert(' chooseImage ');
return;
}
var i = 0, length = images.localId.length;
images.serverId = [];
function upload() {
wx.uploadImage({
localId: images.localId[i],
isShowProgressTips: 1,
success: function (res) {
iPP;
//alert(':' + i + '/' + length);
images.serverId.push(res.serverId);
if (i < length) {
upload();
}
},
fail: function (res) {
alert(JSON.stringify(res));
}
});
}
upload();
};
// 5.4
document.querySelector('-sharpdownloadImage').onclick = function () {
if (images.serverId.length === 0) {
alert(' uploadImage ');
return;
}
var i = 0, length = images.serverId.length;
images.localId = [];
function download() {
wx.downloadImage({
serverId: images.serverId[i],
success: function (res) {
iPP;
alert(':' + i + '/' + length);
images.localId.push(res.localId);
if (i < length) {
download();
}
}
});
}
download();
};
// 6
// 6.1
document.querySelector('-sharpgetNetworkType').onclick = function () {
wx.getNetworkType({
success: function (res) {
alert(res.networkType);
},
fail: function (res) {
alert(JSON.stringify(res));
}
});
};
// 7
// 7.1
document.querySelector('-sharpopenLocation').onclick = function () {
wx.openLocation({
latitude: 23.099994,
longitude: 113.324520,
name: 'TIT ',
address: ' 397 ',
scale: 14,
infoUrl: 'http://weixin.qq.com'
});
};
// 7.2
document.querySelector('-sharpgetLocation').onclick = function () {
wx.getLocation({
success: function (res) {
alert(JSON.stringify(res));
},
cancel: function (res) {
alert('');
}
});
};
// 8
// 8.1
document.querySelector('-sharphideOptionMenu').onclick = function () {
wx.hideOptionMenu();
};
// 8.2
document.querySelector('-sharpshowOptionMenu').onclick = function () {
wx.showOptionMenu();
};
// 8.3
document.querySelector('-sharphideMenuItems').onclick = function () {
wx.hideMenuItems({
menuList: [
'menuItem:readMode', //
'menuItem:share:timeline', //
'menuItem:copyUrl' //
],
success: function (res) {
alert('"" "" "" ');
},
fail: function (res) {
alert(JSON.stringify(res));
}
});
};
// 8.4
document.querySelector('-sharpshowMenuItems').onclick = function () {
wx.showMenuItems({
menuList: [
'menuItem:readMode', //
'menuItem:share:timeline', //
'menuItem:copyUrl' //
],
success: function (res) {
alert('"" "" "" ');
},
fail: function (res) {
alert(JSON.stringify(res));
}
});
};
// 8.5
document.querySelector('-sharphideAllNonBaseMenuItem').onclick = function () {
wx.hideAllNonBaseMenuItem({
success: function () {
alert('');
}
});
};
// 8.6
document.querySelector('-sharpshowAllNonBaseMenuItem').onclick = function () {
wx.showAllNonBaseMenuItem({
success: function () {
alert('');
}
});
};
// 8.7
document.querySelector('-sharpcloseWindow').onclick = function () {
wx.closeWindow();
};
// 9
// 9.1.1
document.querySelector('-sharpscanQRCode0').onclick = function () {
wx.scanQRCode();
};
// 9.1.2
document.querySelector('-sharpscanQRCode1').onclick = function () {
wx.scanQRCode({
needResult: 1,
desc: 'scanQRCode desc',
success: function (res) {
alert(JSON.stringify(res));
}
});
};
// 10
// 10.1
document.querySelector('-sharpchooseWXPay').onclick = function () {
// : Demo 2.7
wx.chooseWXPay({
timestamp: 1414723227,
nonceStr: 'noncestr',
package: 'addition=action_id%3dgaby1234%26limit_pay%3d&bank_type=WX&body=innertest&fee_type=1&input_charset=GBK¬ify_url=http%3A%2F%2F120.204.206.246%2Fcgi-bin%2Fmmsupport-bin%2Fnotifypay&out_trade_no=1414723227818375338&partner=1900000109&spbill_create_ip=127.0.0.1&total_fee=1&sign=432B647FE95C7BF73BCD177CEECBEF8D',
signType: 'SHA1', // : MD5
paySign: 'bd5b1933cda6e9548862944836a9b52e8c9a2b69'
});
};
// 11.3
document.querySelector('-sharpopenProductSpecificView').onclick = function () {
wx.openProductSpecificView({
productId: 'pDF3iY_m2M7EQ5EKKKWd95kAxfNw',
extInfo: '123'
});
};
// 12
// 12.1
document.querySelector('-sharpaddCard').onclick = function () {
wx.addCard({
cardList: [
{
cardId: 'pDF3iY9tv9zCGCj4jTXFOo1DxHdo',
cardExt: '{"code": "", "openid": "", "timestamp": "1418301401", "signature":"f6628bf94d8e56d56bfa6598e798d5bad54892e5"}'
},
{
cardId: 'pDF3iY9tv9zCGCj4jTXFOo1DxHdo',
cardExt: '{"code": "", "openid": "", "timestamp": "1418301401", "signature":"f6628bf94d8e56d56bfa6598e798d5bad54892e5"}'
}
],
success: function (res) {
alert(':' + JSON.stringify(res.cardList));
},
cancel: function (res) {
alert(JSON.stringify(res))
}
});
};
var codes = [];
// 12.2
document.querySelector('-sharpchooseCard').onclick = function () {
wx.chooseCard({
cardSign: '1fdb2640c60e41f8823e9f762e70c531d161ae76',
timestamp: 1437997723,
nonceStr: 'k0hGdSXKZEj3Min5',
success: function (res) {
res.cardList = JSON.parse(res.cardList);
encrypt_code = res.cardList[0]['encrypt_code'];
alert(':' + JSON.stringify(res.cardList));
decryptCode(encrypt_code, function (code) {
codes.push(code);
});
},
cancel: function (res) {
alert(JSON.stringify(res))
}
});
};
// 12.3
document.querySelector('-sharpopenCard').onclick = function () {
if (codes.length < 1) {
alert(' chooseCard ');
return false;
}
var cardList = [];
for (var i = 0; i < codes.length; iPP) {
cardList.push({
cardId: 'pDF3iY9tv9zCGCj4jTXFOo1DxHdo',
code: codes[i]
});
}
wx.openCard({
cardList: cardList,
cancel: function (res) {
alert(JSON.stringify(res))
}
});
};
var shareData = {
title: 'JS-SDK Demo',
desc: 'JS-SDK,web',
link: 'http://demo.open.weixin.qq.com/jssdk/',
imgUrl: 'http://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRt8Qia4lv7k3M9J1SKqKCImxJCt7j9rHYicKDI45jRPBxdzdyREWnk0ia0N5TMnMfth7SdxtzMvVgXg/0'
};
wx.onMenuShareAppMessage(shareData);
wx.onMenuShareTimeline(shareData);
function decryptCode(code, callback) {
$.getJSON('/jssdk/decrypt_code.php?code=' + encodeURI(code), function (res) {
if (res.errcode == 0) {
codes.push(res.code);
}
});
}
});
wx.error(function (res) {
alert(res.errMsg);
});
after requesting the backend server to obtain payment parameters, you can use the h5 + plus.payment.request () method to call up WeChat Pay
Previous: How does input number prohibit the entry of mathematical symbols such as e and decimal points?
what is the current level of support for vw,vh layouts in mobile browsers? ...
http: shrek.imdevsh.com demo. ask for help: the principle of inertia retardation effect in demo touchmove ...
I ve been looking for it for a long time, but I can t find it. 1. After the direct upload of web is completed, the server cannot know whether the file was uploaded successfully, who uploaded it, and the information of the file 2. Using web to dire...
for example, I request localhost:8080 a b c.cd proxy to http: www.aaaa.com api can you change a b c.cd to a b c , before proxy? means that the agent rewrites the original path before. ...
question 1. The project is a chat application, which needs to display the latest news in the chat window in real time. Using the scrollIntoView method id div for bottom, I want to put it at the bottom. As long as it can be displayed, other chat message...
var myNumber = { value: 1, add: function(i){ var helper = function(i){ console.log(this); this.value += i; } helper(i); } } myNumber.add(1); Why does this this point to window?? The add method called by the myNumber o...
Click the button to show that (Bing s daily wallpaper) is successful, and then when the background of the page changes, it takes time to render, and there will be a white background color. How to solve this? ...
1. Execute npm install-g pm2 2.pm2 pm2 start app.js pm2 3.ln -s root myapp pm2 usr local bin still failed to solve the problem messed up for a long time because no soft connection was created. ln -s root node-v8.9.0-linux-x64 lib node_...
want to use vue2.0 to develop a small web application for the company, running on the mobile side. How can the above functions be achieved? ...
vue.js implements specification selection on product details page Click to select version option and click to select color option. Highlight has been selected. How to display the selected version and color html Code < div class= "chose-ck " > : ...
ios embedded h5 page input box will not lose focus if you click on the blank space. The soft keyboard will not fold. what should I do? try to bind the click event to document. If the input box loses focus when you click, it is still invalid. ...
as shown in the figure, how to determine that the user clicked on this X, and execute the corresponding method. ...
var a = {0:"A",1:"B",2:"C",length:3}; var newa = Array.prototype.slice.call(a); console.log(newa); my understanding of this example is that the an object inherits and executes Array s slice method, but the slice method...
what s the difference between writing JavaScript code in a js file and writing code in < srcipt > < srcipt >? Why can I introduce other js files as require in the js file and do report an error in the < srcipt > tag . ...
Icon shows the red part. Choose how to write the effect in css ....
We are Mini Program s project. To get the code logged in by Wechat, request the backend api to get the sessionkey. But if it is a concurrent request, if it happens to expire at this time, and several requests go to get the sessionkey at the same time, t...
o ...
brief: because Mini Program s project uses wepy s framework, but you don t quite understand that the role of this interceptor is to integrate all the interfaces? Or? ...
win7 system, scaffolding vue-cli has been installed, there is a version, but the initialization project appears this hole, cannot verify this certificate? Please help ...
Mobile input focus cannot directly evoke the mobile phone keyboard, what is the related auxiliary operation? Simple H5 page, do not use any framework, how to automatically evoke the soft keyboard? ...