Web-view is a web browser component in the applet that can be used to host web pages in a container that automatically fills the entire page. So, if you already have H5 and want to develop a small program quickly, you can use this method. (Uni-APP framework is adopted for the development of small programs; Take wechat applets as an example)

The steps and matters needing attention in developing applets to embed H5 are listed below (the steps of applets application and adding developers are omitted) :

Note:

  1. The H5 of Web-view can support wechat login
  2. Web-view payment does not support web payment; Payment can only be made using applets; Wechat Mini Program Survey (key points of this section)
  3. If you add a Web-view component to the front page of the applet (/pages/index/index), the applet will not have a back button in the upper left corner; Therefore, the home page can only do a transit, need a web-view component of the page.
  4. If you use step 3, left-swipe or click Back on the Web-view page to bring you back to the home page. I can’t swipe left or click Back to exit the applet. My solution is to make a popover on the home page (as shown below), which will be displayed when returning from web-view. Click ok and use button component open-type=”exit” to exit the applet. Swipe back to exit the applet.
  5. The applets share the title. If you want to share the H5 page title or H5 Settings in the web-view, you can use uni.postMessage.

Complete the following steps

Configure the service domain name (Web-view) in the applet background

Applets embed H5 payments

The H5 end

  1. JSSDK to introduce UNI-App; Introduce wechat JSSDK; If other small programs introduce the corresponding JSSDK;
< script type = "text/javascript SRC =" https://res.wx.qq.com/open/js/jweixin-1.4.0.js "< script type =" text/javascript" SRC = "https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js" > < / script >Copy the code
  1. After creating the order, jump to the payment page
Uni. NavigateTo ({url: decodeURIComponent (' H5 url)})Copy the code
  1. After successful payment; Set the URL for the global event web-view to refresh, then return to the Web-view
Uni.$emit('updateWeb', {url: decodeURIComponent(' decodeURIComponent ')}) uni.Copy the code
  1. Environmental judgment:
const UA = navigator.userAgent function isMiniWechat (UA) { return /miniProgram/i.test(UA) && /micromessenger/i.test(UA)  } function isMiniTouTiao (UA) { return /toutiaomicroapp/i.test(UA) } function isMiniBaidu (UA) { return /swan/i.test(UA) }Copy the code
  1. Small program sharing; Sharing can be set in H5 via uni.postMessage;
Uni.postmessage ({data: {title: sharedata.title, desc: sharedata.desc, link: shareData. link, imgUrl: shareData.imgUrl } })Copy the code

The small program end

  1. To enter the small program, jump to the Web-view page from the home page. The home page sets the field to control when to display the exit popover; Determine this field in onShow to display the popover;
  2. Set global listen to the event after successful payment;
OnLoad (data) {this. Url = data & & data. Url | | 'uni. $on (' updateWeb, processing method)}, OnUnload () {// Remove listener event uni.$off('updateWeb')},Copy the code
  1. Share monitor; Web-viwe binding event @message=” bindMessage”
bindmessage(e) { console.log('bindmessage', e) const data = e.detail.data || [] if (data.length && data[data.length - 1].title) { // data[data.length - 1] This. shareTitle = data[data.length-1]. Title this.shareUrl = data[data.length-1].link}}Copy the code