Vue calls WeChat JDK instance and vuejdk instance

Vue calls JDK instance and vuejdk instance

This project uses vue + typescript, and then uses the vue-router's history mode. It is really written to the crash. After writing it, the old mother's smile instantly appears. ^_^

To introduce JDK, because ts is used, you must install npm @ type/weixin-js-sdk. However, you have not found any official version. on GitHub, you can find wx-sdk-ts.

1. Authorization

After the user pays attention to the public account, the openid is unique, so the localStorage is saved directly.

(1) When initializing created in app. vue, first determine whether there is a local openid. If not, call the page authorization (I am using no sense of authorization) and directly upload the code

Let param: string = 'appid = Your appid '; param + =' & redirect_uri = '+ encodeURIComponent (location. href); param + = '& response_type = Code'; param + =' & scope = snsapi_base '; param + =' & state = 123 # wechat_redirect '; window. location. href = 'https: // open.weixin.qq.com/connect/oauth2/authorize? '+ Param;

(2) After the call is successful, the parameter code will be included in your callback address, and the front-end will get the obtained code to notify the background, let the background get openid and access_token and then return to the front-end to save localStorage. Now, the frontend authorization is complete.

1. webpage authorization initiated with snsapi_base as scope is used to obtain the openid of the user entering the page, and is silently authorized and automatically redirected to the callback page. Users directly access the callback page (usually the business page)
2. webpage authorization initiated with snsapi_userinfo as scope is used to obtain basic user information. However, such authorization requires the user's manual consent, and the user's basic information can be obtained after authorization without concern.

2. Share

IOS is a pitfall !!!
The history mode used by vue-router. During signature verification, the iOS authentication URL is actually the first incoming URL.

Solution: if the signature is verified for the first entry URL when the route in iOS is changed, the signature will be executed for the first entry, and it will be ignored for other requests. Android verifies each route change.

Async created (): Promise in app. vue
 
  
{Try {if (this. getQueryString ('code ')&&! LocalStorage. openId) {// callback code await this. setOpenId (this. getQueryString ('code');} else {await this. getSession (); if (! LocalStorage. openId) {this. getOpenId ();} this. wxInit ('first'); // call the first init} this. setContact ();} finally {this. $ router. beforeEach (to: {path: string;}, _: {}, next: (path? : Any) => void) => {this. wxInit ('second'); // call init if (! Primary des (this. unloginPath, to. path )&&! This. session) {next ({path: '/register', query: {fromu: this. $ route. fullPath ,},}) ;}else {next ();}});}},
 

Public async wxInit (type: string): Promise
 
  
{Const url: string = window. location. href; const result: any = await this. $ store. dispatch ('topic-box: wxconfig', {url,}); // backend request signature and other parameters this. wxShare (result, type);} public wxShare (result: any, type: string): void {const links: string = ''; // link to the shared link const title1: string = ''; // the title of the shared object, const desc1: string =''; // the details of the shared object, const imgUrls: string = ''; if (type = 'second' & (navigator. userAgent. indexOf ('android')>-1 | navigator. userAgent. indexOf ('linux ')>-1) | type = 'first') {// The logic should be like this. I have no conditions for verifying and judging, I called wx in another component. config ({appId: result. appId, debug: false, jsApiList: ['onmenusharetimeline', 'onmenushareappmessage', 'onmenushareqq', 'onmenushareweibo ', 'onmenushareqzone',], nonceStr: result. nonceStr, signature: result. signature, timestamp: result. timestamp,});} wx. ready (): void => {const consumer confg: any = {desc: desc1, // share description imgUrl: imgUrls, // share icon link: links, // share link title: title1,}; wx. onMenuShareTimeline (confg); wx. onMenuShareAppMessage (jsonconfg); wx. onMenuShareQQ (w.confg); wx. onMenuShareQZone (Consumer confg );});}
 

The text is not good, but it is finished, and then a deep sigh of relief, revealing the old mother-like smile.