Shulou(Shulou.com)06/03 Report--

This article is about how Wechat JS-SDK implements the development of Wechat sharing interface. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

Recently, the web page in the project cannot display information such as sharing pictures through Wechat, but it is found that the upgrade of Wechat version is the cause. Js-sdk is used to complete the sharing interface. In order to quickly achieve the effect of this function, I intend to use the foreground js to see the sharing effect.

By viewing the Wechat public platform documentation, find the documentation you need, and define the development steps. The screenshots of the documentation are as follows:

Development steps:

1. Follow the instructions to complete step 1.1.1

2. Import js file

Add a js file to the shared page

Wechat shared development

3. Configure wxShare.js

Var $wx_account = wxdata.wx_account, / / Custom data, see wxShare_data.js $wx_share = wxdata.wx_share / / Custom data See wxShare_data.js / / configuration Wechat information wx.config ({debug: false, / / true: debug window appId: $wx_account [0], / / Wechat appid timestamp: $wx_account [1], / / timestamp nonceStr: $wx_account [2], / / random string signature: $wx_account [3]) / / sign jsApiList: [/ / all API to be called should be added to this list: 'onMenuShareTimeline', / / share to moments API' onMenuShareAppMessage', / / share to friend interface 'onMenuShareQQ', / / share to QQ interface' onMenuShareWeibo' / / share to Weibo interface]}) Wx.ready (function () {/ Wechat shared data var shareData = {"imgUrl": $wx_share [0], / sharing displayed thumbnail address "link": $wx_share [1], / / sharing address "desc": $wx_share [2], / / sharing description "title": $wx_share [3] / / sharing title success: function () {/ / data processing can be done for sharing success / / alert ("sharing success") }; wx.onMenuShareTimeline (shareData); wx.onMenuShareAppMessage (shareData); wx.onMenuShareQQ (shareData); wx.onMenuShareWeibo (shareData);}) Wx.error (function (res) {/ / config information verification failure executes the error function. For example, if the signature expires and the verification fails, / / the specific error information can be viewed in the debug mode of config or in the returned res parameter. / / for SPA, you can update the signature here. Alert ("seems to have made a mistake!") ;})

4. WxShare_data.js of configuration information for assembling Wechat

Var wxdata = {wx_account: new Array (4), wx_share: new Array (4), wx_myuser: new Array ("appid", "appsecret"), access_token: ", / / credential token_expires_in:", / / credential expiration time unit: s jsapi_ticket: "" / / credential ticket_expires_in: ", / / credential expiration time unit: s url:" https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=" + wxdata.wx_myuser [0] + "& secret=" + wxdata.wx_myuser [1], / / obtain access_token / / * Note * after actual development and testing Wechat sharing does not support cross-domain requests, so the request to obtain access_token must be initiated from the server. Otherwise, you cannot get access_token get_access_token: function () {$.ajax ({type: "GET", url: wxdata.url dataType: "jsonp", / / solve cross-domain problems Jsonp does not support synchronous operation cache: false, / / jsonp: 'callback', success: function (msg) {/ / get normal {"access_token": "ACCESS_TOKEN", "expires_in": 7200} / / acquisition failed {"errcode": 40013 "errmsg": "invalid appid"} wxdata.access_token = msg.access_token / / the obtained interactive credentials need to be cached. The survival time token_expires_in defaults to 7200s wxdata.token_expires_in = msg.expires_in. / / expiration time unit: s if (access_token! = "" | | access_token! = null) {console.log ("get access_token success:" + wxdata.access_token) } else {console.log ("get access_token fail" + wxdata.access_token) }, error: function (msg) {alert ("get access_token errorships!:");}}) }, / / get jsapi_ticket / / * Note * after actual development and testing, Wechat sharing does not support cross-domain requests, so the request to obtain jsapi_ticket must be initiated from the server Otherwise, you cannot get jsapi_ticket get_jsapi_ticket: function () {$.ajax ({type: "GET", url: "https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=" + wxdata.access_token +" & type=jsapi ", dataType:" jsonp " Cache: false, async: false, jsonp: 'callback', success: function (msg) {/ * {"errcode": 0 "errmsg": "ok", "ticket": "e5u5sUoXNKd8-41ZO3MhKoyN5OfkWITDGgnr2fwJ0m9E8NYzWKVZvdVtaUgWvsdshFKA" "expires_in": 7200} * / if (msg.errcode = = 0) {wxdata.jsapi_ticket = msg.ticket / / A cache is required. The survival time ticket_expires_in defaults to 7200s wxdata.ticket_expires_in = msg.expires_in; / / expiration time unit: s console.log ("get jsapi_ticket success") } else {console.log ("get jsapi_ticket fail") }, error: function (msg) {alert ("get jsapi_ticket errorproof!");}}) }, / / data signature create_signature: function (nocestr,ticket,timestamp,url) {var signature = ""; / / the parameters here are sorted in ascending order by key value ASCII code var s = "jsapi_ticket=" + ticket + "& noncestr=" + nocestr + "× tamp=" + timestamp + "& url=" + url Return hex_sha1 (s);}, / / the number of custom created random strings is 0

Description:

4.1 sharing process:

Users create three variables: timestamp, random string, and url of the page to be shared, then use their appid and APPsecret as request parameters to obtain access_token, then obtain jsapi_ticket according to access_token, and then sign the acquired jsapi_ticket and the three variables created by themselves. Note that the signature process is sorted according to the ascending order of key value, ASCII code, and specific participation in the program

4.2 the responder after the request cannot handle the problem

The get_access_token () function initiates a request to obtain access_token for Wechat. The cross-domain problem cannot be solved by setting dataType: "jsonp". It is found that the corresponding data of Wechat is not packaged through the browser. It is guessed that Wechat does not support the cross-domain of this request, because the ajax program cannot get the value of access_token normally through the program, but it can get the value of access_token in the browser. This value is 7200s. Enough to get jsapi_ticket, the request process to get jsapi_ticket has the same problem, so the access_token and jsapi_token must be obtained from the server back-end code.

The main purpose of this article is to use js requests to complete the sharing effect, so there is no development of server-side request code (do not spray). For server code, see the following application section.

So how to make the program run normally and share the page normally?

In the wxShare_data.js code, first initiate wxdata.get_access_token (); comment on the ②③④⑤ code, and manually place the access_token obtained by the browser in the ② variable

After manually completing the assignment of access_token, comment ①, open ②③, and start wxdata.get_jsapi_ticket (); comment the code at ④⑤

The same operation obtains the jsapi_ tick value from the browser, assigns it to the variable at ④, comments ①③, opens the code at ②④⑤, and the final code is shown in wxShare_data.js.

5 、 wxShare_sha1.js

Sign the data and download sha1.js

6. At this time, the page can run normally and Wechat sharing is completed.

Successful page display

Share Wechat with friends

At this point, you can complete the desired verification effect, and then you can develop the code on the server! Looking forward to sharing the full version of Wechat

Thank you for reading! This is the end of the article on "Wechat JS-SDK how to achieve Wechat sharing interface development". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.