H5 embedded in wechat mini program stepped on the pit

On the background

The project was a front-end project involving cross mobile platforms, the technology was vUE, and since the project was not very large, state management was not used.

The main is to use VUE to compile the H5 project into a static page on the server address, and then use

in the small program test, the server address to this label.

About the pits encountered

Value transfer pit

Because of the use of

, from what I understand, this component is similar to HTML

There are two main attributes that can pass values:

1. srcthroughurlAttribute value of.

2. bindmessagethroughh5Page-oriented appletspostMessageBy value.

The first property encountered a pit: as you know, url arguments cannot contain =,? And so on strange symbols, otherwise there will be strange parameters. For example, axxx.com?url=bxx.com? A =123 Not bxx.com? A =123

The solution

EncodeURIComponent () for the SRC parameter to be passed in

, and decodeURIComponent() in the applet, of course, this requires the applet and H5 both synchronization (if applet and H5 are two projects).

The second attribute of the pit, the pit belongs to the unconscious, did not look that lead to this property, so people see note in the table above the position of bold, this property looks like is very convenient, but small program here is not syncing, only back in the small program, component destroyed, sharing and triggered when messages are received

The solution

This property is not useful in the case of real-time synchronous data retrieval.

The layout of the pit

This is also why I feel that

is similar to

Because

fills the page, the bottom navigation can only be written in the H5 page, using fixed.

1, fixed layout in the small program pit

Forget whether it’s ios or APP, when you pull down and swipe up in an applet, the entire page will see the applet container. Here’s a look at the structure of a small program container.

<web-view>
page
backgroud
<web-view>
fixed

Solutions:

Change the positioning mode to Absolute. This can solve the overwriting problem, but the div will follow the page when it is scratched or pulled down. If you use the applet navigation in

, the entire navigation bar will follow the page. Depending on the usage scenario, if you don’t mind this situation, you can use this solution, but if you do, I have no better solution for the time being. If there is a better solution, please let me know.

2, the content height does not reach the full screen can not display the bottom of the fixed layout div

On ios, whether h5 embedded applets or apps, this problem will occur. The underlying div cannot be displayed when the content height is insufficient

Solutions:

Page height setting, using CSS3 VH features

JSSDK pit – focuses on payments

If, like me, you use an H5 plugin, you can skip using JSSDK for payment on the H5 page. I always believe that since H5 can tune the JSSDK interface, it must be able to call the payment interface. Always think, h5 page directly call payment, is always easier and more convenient than H5 interact with small program to achieve payment. But reality tells me it won’t work. The reason is that signature keeps reporting errors. After checking, it seems that there is a parameter that generates signature that is different from that of the applet. I am not very clear about the details, if you know something, please let me know. Since this scheme has not successfully realized the function of wechat payment, we will not introduce the method of use temporarily. Another possible reason is that the H5 page in the Web-view component does not support the payment interface, and only the following JSSDK interfaces are supported in the web-view page:

There is no payment interface available. In the future, if there is no payment interface in Web-view, it will probably be possible to pay directly on the H5 page instead of the applet.

Solutions:

1. Call the server interface through H5 to obtain the parameters required for payment (these parameters are obtained through the server to the docking payment center)

The important thing to note here is that the server needs the OpenID to get data, and the OpenID needs to be passed down, that is, we need to get the OpenID before calling the server interface. The processing here is to pass the OpenID as a parameter in the url of the

2. Jump these parameters to the applet through the URL and upload the parameters to the applet page (a new applet page is required)

Jump using interface is wx. MiniProgram. NavigateTo, because as soon as payment failure need to return the original h5 page, return to use interface is wx navigateBack, because the return is in a small program operation. For example, the page link in the applet is /page/pay/pay, then the jump operation in H5 is

const successUrl =encodeURIComponent('https://abc.com/successPage'); // Payment success page
const path = `/page/pay/pay? timeStamp=${timeStamp}&nonceStr=${nonceStr}&package=${package}&signType=${signType}&paySign=${paySign}&successpage=${successUrl}`;/ /? The following parameters are required for payment
wx.miniProgram.navigateTo({
   url: path
})
Copy the code

3. The applet page accepts parameters and performs payment operations.

Pay in /page/pay/pay page, the page has a

component, used to jump to the page after the successful payment, that is, the parameters of the successpage

<web-view src='${url}' />
Copy the code

onLoad: function (options) {
    console.log(options)
    // Get the value from the page
    this.timeStamp = options.timeStamp
    this.nonceStr = options.nonceStr
    this.package = options.package
    this.signType = options.signType
    this.paySign = options.paySign
    this.successUrl = decodeURIComponent(options.successUrl)
    ...
  },
onReady: function(){
  wx.requestPayment({
    timeStamp: this.timeStamp,
    nonceStr: this.nonceStr,
    package: this.package,
    signType: this.signType,
    paySign: this.paySign,
    success (res) { 
        this.url = this.successUrl; // The login page of H5 will be redirected after the payment is successful}, fail (res) { wx.navigateBack(); }})}Copy the code

For wx.requestPayment, see wx.requestPayment

This implementation has a disadvantage, is when jump to the small program page for payment, the page has been changed, is no longer the original H5 payment page, or solve the solution, is in the small program side to achieve a touch of the same H5 page vision, but there will still be page refresh jump action.

to be continued

The above are all the pits I remember so far. If I encounter other pits later, I can replenish them

About the document

Applets development documentation

JSSDK document