Environment and construction requirements

Application for public Account

You can apply for an official account on the wechat open platform

Binding domain

If you don’t have a legitimate domain name, you are advised to package your project and put it on Github, then select Github Pages, so that you can access your development page directly through xxxx.github. IO.

  • You need xxxx.github. IO to name your project
  • The entry file index.html is required.
  • Visit the website for XXXX. Making. IO/XXXX. Making. IO/index. HTML

The second is to bind your domain name to the public number. First, log in the wechat public platform, enter the “function setting” of the “public Account Setting”, and fill in the “JS interface security domain name”. (Pay attention to your domain name suffix) make sure that the domain you enter is directly accessible

Vue2 environment

You will need to install JSSDK

The development takes recording as an example

To prepare

  • AppId (you can get it in Settings)
  • Secret (you can get it in Settings)
  • Get tokens through this interface api.weixin.qq.com/cgi-bin/tok…
  • Access the key via this interface (using the previous token) api.weixin.qq.com/cgi-bin/tic…
  • Localstorage.setitem (“access_token”, res.access_token); localStorage.setItem(“jsapi_ticket”, res.ticket);
  • To get the signature after through the interface to get the final signature signature mp.weixin.qq.com/debug/cgi-b…
  • The parameters must be the same as the following

The development of

In the entry file main.js

import wx from 'weixin-js-sdk' wx.config({ debug: True, // If debug mode is enabled, the return value of all API calls will be alert on the client side. If you want to view the parameters passed in, you can open it on the PC side, and the parameter information will be printed in log, and only printed on the PC side. Timestamp:,// Required, generate signature's timestamp nonceStr: ",// Required, generate signature's random string signature: ",// Required, signature jsApiList:" [] // Required, list of JS interfaces to use}); Wx. ready(function () {console.log(" wechat interface call "); }); Wx. checkJsApi({jsApiList: ['startRecord'], // List of JS interfaces to check, see Appendix 2 for the list of JS interfaces, success: Function (res) {console.log([res, '114']) store.mit ('jsApiList', res) function (res) {console.log([res, '114']) store.mit ('jsApiList', res) {"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"} } }) wx.error(function (res) { console.log(res, '///;;; '); }); Vue. Prototype. $wx = wx;Copy the code

Called in another file

This.$wx.startRecord({success: function (e) {console.log(e, "start recording "); }, cancel: function (e) { console.log(e); }});Copy the code
  • If a little bit wrong wechat side will report the error
  • You’ll need to test your github blog on wechat
  • Can be the reference document developers.weixin.qq.com/doc/offiacc…