date: 2018-12-13 15:23:09

It is used to record the pit that is connected to wechat JS-SDK. It will be convenient to query the pit that is connected to wechat payment, sharing, positioning and so on for the first time. I feel confused and afraid. Because, hear pit especially many, later found oneself experience this point.

The pit of pay

1. The current URL is not registered

  • Problem: “The URL of the current page is not registered” will appear when clicking the payment button when the wechat official account H5 is activated for payment.
  • Solution: Since wechat officially transferred information about payment to merchant platform on August 1, 2017: Wechat Pay public account payment authorization directory and Scan code payment callback URL configuration entry have been migrated to merchant platform on August 1 (pay.weixin.qq.com)

So enter the following positions:

Login wechat merchant platform – Product Center – development and configuration, configure the payment authorization path. If pay off the page in the domain name/pay. In HTML, then add authorization in this path, such as my pay off the page in www.weixinPay.com/pay.html, then authorized directory configured for htt://www.weixinPay.com/

Tip: Note: the following/must be added, indicating that the page under this path can be adjusted wechat payment interface.

2. If the current URL is not registered according to the above, wechat Pay is not compatible with the HASH route of SPA project. You need to add a “?” As shown in figure:

watch: {
  $route() {
     this.directRightUrl()
  }
},
methods: {
  directRightUrl() {
    let { href, protocol, host, pathname, search, hash } = window.location
    search = search || '? '
    let newHref = `${protocol}//${host}${pathname}${search}${hash}`
    if(newHref ! == href) { window.location.replace(newHref) } }Copy the code

I’m monitoring the route based on the app. vue file. Then add a question mark to each page, albeit with a slight performance cost. But convenient, specific can be modified according to their own pages.

  • Wechat JS-SDK documentation

The pit of share

According to the JS-SDK documentation, many people pass in the incorrect current URL when initializing the WX configuration. This results in the following:

  • Solution: Ensure that the background can correctly return configuration parameters required for initialization
Before modification: //letCurrentUrl = window.location.href after modificationlet currentUrl = window.location.href.split(The '#') [0]Copy the code

Amazing success happy

A few points to note:

  • JsApList: [] Parameters need to be added. For example, share to ‘onMenuShareTimeline’, ‘onMenuShareAppMessage’. For details about interface parameters, see the documentation
  • Ensure that all interface calls are not invoked until wx.ready() is executed. That’s what the documentation suggests.

Positioning of the pit

At the beginning of positioning, the heart is a little excited. Because I think this feature is very tall, of course, this is just my opinion. Okay, that’s enough.

Similarly, add corresponding parameters to the jsApList initialized by wechat. It then executes in the wx.ready() function, but finds that the authorization popup does not pop up successfully no matter what the first time you enter the page.

It turns out that after the page is complete. Delay one second to obtain the location, you can be 100% successful! I don’t know. The following code

If you encounter these three pits, please write them later. The painful experience needs to stop

Pay attention to the public number ‘front end tree’, more practical dry goods