Using html5 plus to develop app, how to use JS to realize Wechat app payment

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

Html5 javascript

Dec.03,2021

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&notify_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?

Next: Echarts map of China, how the big circle (bubble) data displays the value of value next to the place instead of coordinates

What is the current level of support for vw,vh layouts in mobile browsers?
what is the current level of support for vw,vh layouts in mobile browsers? ...

Html5 javascript css html

Feb.26,2021
Js touchmove inertial retardation
http: shrek.imdevsh.com demo. ask for help: the principle of inertia retardation effect in demo touchmove ...

Html5 javascript

Feb.26,2021
How to set callback for web direct pass of Tencent Cloud COS?
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...

Java python node.js html5 javascript

Feb.26,2021
Can I rewrite the request path with http-proxy-middleware
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. ...

Node.js html5 javascript

Feb.26,2021
A div content needs to appear at the bottom of the parent element (with overflow-y:scroll set) at all times to ensure that the chat message is up-to-date in the chat box.
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...

Html5 javascript

Feb.26,2021
The problem of this pointing in js
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...

Node.js html5 javascript

Feb.26,2021
Vue requests to change the background-image, because it takes a long time to render, and the background color is white for a period of time.
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? ...

Html5 javascript

Feb.26,2021
Linux failed to install pm2!
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_...

Centos7 linux node.js html5 javascript

Feb.26,2021
How to use the mobile SPA developed by vue2.0 to call the navigation and calling function of the mobile phone?
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? ...

Mobile-web vue.js front-end html5 javascript

Feb.26,2021
Vue.js realizes the specification selection function of commodity details page.
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 " > : ...

Html5 javascript vue-cli vue.js

Feb.27,2021
Ios embedded h5 page input box click on the blank space will not lose focus the soft keyboard will not be put away
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. ...

Ios html html5 javascript

Feb.27,2021
How to listen for events when a browser closes a page
as shown in the figure, how to determine that the user clicked on this X, and execute the corresponding method. ...

Html html5 javascript

Feb.27,2021
A problem of js inheritance
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...

Node.js html5 javascript

Feb.27,2021
What is the difference between the script written by the js file and the script written by the < srcipt > tag?
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 . ...

Html5 javascript

Feb.27,2021
As shown in the red border, select the effect of input.
Icon shows the red part. Choose how to write the effect in css ....

Vue.js html5 javascript css html

Feb.27,2021
How to ensure the unity of login session in js project
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...

Html5 javascript html

Feb.27,2021
How to solve this asynchronous problem? Why is the array out of console.log always o?
o ...

Java html css html5 javascript

Feb.27,2021
WeChat Mini Programs interceptor
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? ...

Php html node.js html5 javascript

Feb.27,2021
When installing vue, initialize the project and this pit appears
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 ...

Html5 javascript

Feb.27,2021
How does the H5 page evoke the mobile phone soft keyboard as soon as it enters the page?
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? ...

Html html5 javascript

Feb.27,2021