Public account: wechat search front end tool person; Take more dry goods

Wechat official account

Apps running on wechat terminals (for developers, it’s cool to only consider compatible with wechat browser, because it runs in the wechat built-in browser environment)

The development of wechat public account is divided into two parts:

First, the advantages of traditional development (front and back end separation) when the recommended page volume is large, especially prominent

1. Wechat home page

  • That is, home page menu, jump link, scan TWO-DIMENSIONAL code, message push reply and other functions; Don’t panic. 90% of this is done in the background;
  • They can just call the interface provided by wechat public platform. Why background configuration because the interaction isWeb user --> background server/public number server --> wechat server;

2. H5Part of the

Is through the menu to jump to other pages are H5 (to put it bluntly, the development of wechat public number front-end is mainly responsible for the H5 part (is exactly the same as the usual development of mobile terminal))

Second,node.js/H5orphp/h5if

Well, I’m sorry I did it all myself

To the chase

Here is the introduction of the first development mode: the so-called wechat public number development front is responsible for the mobile terminal is nothing different

  • Personally, I think it is most important to choose the technology stack (framework, UI framework, adaptation, CSS precompilation, etc.) for the development of new projects, which can save a lot of development time.

  • Tip: for mobile adaptation, PX2REM is the most cool adaptation, no one; For traditional adaptation how to convert all say nothing, plug-ins will help you convert

In the pit of

The pits encountered are as follows: (Mainly related to wechat, common pits on mobile terminals are not mentioned here; If encountered in the development can leave a message)

1. vue hashInvalid callback link parameters after page authorization with parameters in mode

# I don’t know where it went. Parameters are incorrectly obtained. There is no problem at the beginning, I do not know when wechat will have this problem after the revision, a face meng force; At this time I am manual processing parameters, restore the normal jump URL

mounted () {

  let httpUrl = decodeURI(window.location.href)

  let url = httpUrl.replace('#/loginJudgement'.' ')

  if (httpUrl.includes('com/? code') {// the url includes com/? The code is proved to be jumped back from wechat

    let index = url.indexOf('com/'+ 4 // Get the end of the domain name

    letUrlLeft = url.subString (0, index) // Left of url

    letUrlRight = url.subString (index + 1, url.length) Part of the

    let result = urlLeft + '#/loginJudgement? ' + urlRight.replace('? '.'&')

    console.log(result)

    window.location.href = result

  } else {

    this.getUrlParams(decodeURI(window.location.href))

  }

}



Copy the code

2. Obtain user information (Openid, UnionID, nickname, profile picture, gender, city, language, time of following, etc.)

Except for UnionID, others can be obtained mainly through web page authorization (specific operation of web page authorization will be explained by the pit below).

  • Get user information while you’re developing everything but oneUnionIDHow can you try and not get it
  • The reason is that the wechat public number must be bound to the wechat public development platform to open to accessUnionID; This pit because I didn’t think of this direction so the pit for quite a long time

3. Obtain it through webpage authorizationcodethroughcodeGet the userOpenid, UnionID

The two information can only be obtained through code on the web page, but it is different in the background

  • To obtaincodeWill be throughwebThe page is authorized;
  • The specific process is inwebThe page initiates authorization by calling the interface provided by wechat; WeChat in turncodeThe form of the callback link is returned to you, at which point you parseurlYou can get the parametercodeAnd then pass it to the background

Part of the code is as follows:

3.1. The case without parameters

mounted () {

Scope =snsapi_base non-silent scope=snsapi_userinfo Query operation HTTP is the callback link provided by the official

// AppId is the ID of the wechat public id. HttpUrl Webpage authorization callback configured for wechat Webpage authorization callback domain name is the project configuration after the publisher/Access permission at the bottom of the procedure > Webpage authorization obtain user information > Click Modify Go to the bottom of the page to see the setting of the authorized domain name

 let http = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${window.AppID}&redirect_uri=${httpUrl}&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect`

 window.location.href = http

},

Copy the code

3.2, with parameters that jump from other places to carry parameters in the page display (the main idea is to parse out the parameters to be sent to wechat when the web page authorization, wechat andcodeBack to you)

mounted () {

Scope =snsapi_base Query operation scope=snsapi_userinfo

  this.getUrlParams(decodeURI(window.location.href))

},

methods: {

// Cut processing parameters and jump to page authorization

  getUrlParams (url) {

    let webpageUrl = window.webpageUrl

    let http = url || 'https://www.baidu.com/#/sourceJudgement?source=3&businessId=$businessId&timestamp=$timestamp'

    let params = {}

    http.replace(/([^?&=]+)=([^&]+)/g, (_, k, v) => params[k] = v) // eslint-disable-line

// No parameters are carried

    if (JSON.stringify(params) === '{}') {

      let httpUrl = encodeURIComponent(webpageUrl)

      let http = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${window.AppID}&redirect_uri=${httpUrl}&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect`

      window.location.href = http

    } else{// Links carry parameters

      if (params && params.source) {

        webpageUrl += '? '

        Object.keys(params).forEach(function (key) {

          webpageUrl += `${key}= ` + `${params[key]}& `

        })

        webpageUrl = webpageUrl.substring(0, webpageUrl.length - 1)

      }

// Jump link with parameters, need to be assembled together and sent to wechat background authorization, wechat background back together back; Transient is not an option, because jumping to it is equivalent to re-entering the project and clearing all state, unless cached by the local browser

      let httpUrl = encodeURIComponent(webpageUrl)

      let http = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${window.AppID}&redirect_uri=${httpUrl}&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect`

      window.location.href = http

    }

}

Copy the code

Through the above callback wechat end will eventually callback abovehttpUrlpagecodeA parameter form is passed and you just have to parse it outcodeJust keep it

mounted() {// Cut the URL wrapper argument

    let http = 'https://www.baidu.com/#/sourceJudgement?source=3&businessId=$businessId&timestamp=$timestamp'

    let params = {}

    http.replace(/([^?&=]+)=([^&]+)/g, (_, k, v) => params[k] = v) // eslint-disable-line

Console. log(params) // Params. code is the user's code that is passed to the background to get other information about the user

}

Copy the code

4. Silent authorization returnscodeTo get the userUnionIDIf no, change to non-silent authorization. That is, you can obtain all user information by asking the user whether to log in

5. Return to the homepage of the public account if you have opened iteslintMay be an errorWeixinJSBridgeReady undefindBecause this method is only available in wechat browser; Then addeslint-disable-lineAvoid syntax checking and the project works fine in the wechat browser

methods: {

// Return to home page

  goBack () {

    if (typeof WeixinJSBridge === 'undefined') {

      if (document.addEventListener) {

        document.addEventListener('WeixinJSBridgeReady', this.onBridgeReady, false)

      } else if (document.attachEvent) {

        document.attachEvent('WeixinJSBridgeReady', this.onBridgeReady)

        document.attachEvent('onWeixinJSBridgeReady', this.onBridgeReady)

      }

    } else {

      WeixinJSBridge.call('closeWindow') // eslint-disable-line

    }

  },

  onBridgeReady () {

    WeixinJSBridge.call('hideOptionMenu') // eslint-disable-line

  }

}

Copy the code

At the end

Article source: your blog post: https://www.cnblogs.com/ljx20180807/p/10132760.html

Business code has been deleted, please leave a message if you have any questions