abstract

Because the project needs to use WeChat voice-related interface function, we need to introduce WeChat's jssdk, but the test of this thing is not so simple as running locally, it needs to be done with the help of WeChat web development tools. This article records the process that I completed the test today. The focus of this article is not the development tutorial, nor the specific use of wx.jssdk, but just the record, todayDay of some processes and problems encountered.

key point

1. WeChat Public Number
2.natapp Free Domain Name - to map service addresses using wxjs for local front end
3. WeChat Public JS Interface Secure Domain Name Settings (This will kill me)
4. Background services get the parameters required by wxjs.config (node demo on and off my network)
5. Front End Call wxjs (Company Project)
6. WeChat web Developer Tools

start

1. Establish WeChat Public Number

Simple, easy to achieve by oneself

2. Front and Back End Codes

Since this article does not focus on documenting specific code implementations, only some key code is posted here.

1.app.js file
//Cross-domain(Newly added)
var cors = require('koa-cors');
app.use(cors());

2.router.js file
var funny = require("./controllers/funnyindex");
//WeChat authentication
router.get('/funny',funny.funny);

3.funnyindex.js
var Jsapi = require("./wechat");
var appid = "Your WeChat Public Number appid";
var appsecret = "Your WeChat Public Number appsecret ";

exports.funny = async (ctx, next) => {
    var callUrl = ctx.request.query.callbackurl;
    const jsapi = new Jsapi(appid, appsecret);
    // //1,Obtain access_token, Return promise Object, resolve Callback Return string
    // jsapi.getAccessToken().then(
    //     re => res.end(re)
    // ).catch(err => console.error(err));

    // //2,Obtain jsapi_ticket, Return promise Object, resolve Callback Return string
    // jsapi.getJsApiTicket().then(
    //     re => res.end(re)
    // ).catch(err => console.error(err));

    //3,Obtain JS-SDK Signature for privilege verification, Return promise Object, resolve Callback Return json
    var data = await jsapi.getSignPackage(callUrl).catch(err => console.error(err));
    ctx.body = data;
}

4.wechat.js file
//The encapsulated methods of getting WeChat signatures are many on the Internet and are not recorded here.

//request
 console.log("Get WeChat Signature Background");
 $.get("http://127.0.0.1:3009/funny?callbackurl=" + encodeURIComponent(window.location.href),
            {}, setWxConfig);

//Set wx.config (this method is asynchronous)
function setWxConfig(signPackage) {
    wx.config({
        debug: false,
        appId: signPackage.appId,  //Required, unique identification of public number
        timestamp: signPackage.timestamp,             //Required, time stamp for signature generation
        nonceStr: signPackage.nonceStr,             //Required, generate a random string of signatures
        signature: signPackage.signature,             //Required, Signature, see http://t.cn/RL24Fgw
        jsApiList: [
            "getNetworkType",
            "getLocation",
            "onMenuShareTimeline",
            "onMenuShareAppMessage",
            'startRecord',//Start Recording Interface
            'stopRecord',//Stop recording interface
            'playVoice',//Play Voice Interface
            'pauseVoice',//Pause Playback Interface
            'stopVoice',//Stop Playing Interface
            'uploadVoice',//Upload Voice Interface
            'downloadVoice',//Download Voice Interface
            'onVoicePlayEnd',
            'translateVoice',//speech recognition
        ]
    });
    //The above method is asynchronous. If you are loading a call to wxjssdk, you need to use wx.ready, which is not specified here.
}

Above, even if the code class-related preparations have been processed, there are some other configurations to start with

3. JS Interface Secure Domain Name

wxjssdk can only be invoked if the domain name is set up, so for local services, I map the domain name through natapp.Create a tunnel for free through natapp, set up ip,port to serve your front end, then download natapp.exe, according to One minute quick graphics tutorial Configure to start the exe.

So, I was http://127.0.0.1:5944/index.html The front end can be generated from natapp.exe http://pgu5g4.natappfree.cc To visit.Just set this domain name as the js interface security domain name.

Note that when setting up a secure domain name, you need to download the MP_verify_gzbQUDassWHFnugA.txt file and put it in http://pgu5g4.natappfree.cc Under the root directory.

4. WeChat web Developer Tools

Download the tool, start the front-end and back-end services, and enter them on the developer tools page http://pgu5g4.natappfree.cc That's it, and then the tool can see your list of js-sdk requests and permissions.

Call.

After a day, I had no idea what to do before and tried to give up. At that time, I was stuck in the page and kept prompting

config:invalid url donmain

All kinds of Baidu, when they say that the js interface security domain name is wrong, I also do not understand it. The domain name that has been written there at the back end is completely drunk and has eaten a meal. Suddenly, I think this piece is wrong. It should be written at the front end domain name.

So I'm tired of writing, 88.