As applets become more and more popular , Make a product official account only. H5 Page and APP
It's not perfect , I always feel that I don't catch the flow car of small program , There will be something missing , I feel very uncomfortable . Driven by this , My company decided to get on the bus .

however , If you want to write a new one in the same way as a small program , I feel that the time cost is too high , It's not very cost-effective . so , There was a flash of intelligence , Think of the small program, seems to have a little brother called webview,
webview What is it , It literally means web view ( From Baidu translator ). That's the official definition :

web-view Component is a container that can be used to host web pages , The entire applet page will be automatically paved . Personal type and overseas type applet are not supported for use at present .

In short, we can put one in the applet <web-view> Component to link our HTML Page . in other words , The official account of WeChat has been written. H5 page
You can move it directly to the applet . One line of code completes the official account to the small program. , One line of code gives us an additional traffic entry , One line of code solves the problem of redeveloping a set of small program code . It's really exciting to think of it .

When I put the link into the webview in , Like this :( Real project link address , Instead of using your own domain name ^_^)
<!-- Wechat applet index.wxml--> <web-view src="https://www.hxkj.vip/"></web-view>
But when you click the jump page . ah , what the hell , I was really shocked , Not in the top left corner of the page !! Back button !! It's not going back , Just keep going down , There is no turning back , Isn't that funny ...

There was a plan , It's in every H5 page
Add a navigation bar with a return button , But think about it , Such a scheme is not desirable , Because the header of the applet already has a navigation bar , If you add another one, it's very incongruous , It can be described in one word ——【 Ugly to explode 】. Decisively abandon !

Look at the other little programs , Found that if it is two small program page Jump , There will be a return button in the upper left corner of the second page . Then we can think of it , If you put one on the second page webview
assembly , Used to display the link after the jump , Isn't it a perfect solution ? So here comes the question... , How to transfer a link from the home page to the second page ?

We can H5 Page usage jssdk in H5 How to jump to applet page wx.miniProgram.navigateTo, Then bring one more weburl parameter :
//H5 page js navigate(modelName) { // Control page Jump --- Applets , official account , Non wechat jump mode
【modelName---vue Route name 】 this.isMiniProgram((res)=>{// To determine whether it is a callback function of the applet page if (res)
{// Applet page wx.miniProgram.navigateTo({url:
'../webview/webview?weburl=https://www.hxkj.vip/#/' + modelName}); } else {
this.$router.push({name: modelName});// Use of non applet pages vue Route jump } }) },
isMiniProgram(callback) { // Is it an applet environment // Is it in wechat environment if (!isWeixin()) {
callback(false); } else { // WeChat API Get current running environment wx.miniProgram.getEnv((res) => { if
(res.miniprogram) {// Applet environment callback(true); } else { callback(false); } }) } }
Then on the second page of the applet webview.js Receive in weburl parameter , Pay attention to the page links for configuration sharing :
// pages/webview/webview.js Page({ /** * Initial data of the page */ data: { url:'' }, /** *
Life cycle function -- Listening page loading */ onLoad: function (options) { this.setData({ url:
options.weburl // obtain H5 From the page weburl }); }, /** *
Users click on the upper right corner to share ***【 Pay special attention here , Configuration sharing link must be to the home page link , Otherwise, there is no return button when others click in 】*** */ onShareAppMessage:
function () { return { path: '/pages/index/index' } } })
And assign a value to webview.wxml Medium src attribute
<!--pages/webview/webview.wxml--> <web-view src="{{ url }}"></web-view>
okay , In this case , It's a perfect solution to the small program webview There is no return button after jump page .

Please indicate the source of reprint :https://www.jianshu.com/p/a7bb1a826548
<https://www.jianshu.com/p/a7bb1a826548>
author :TSY

If you like , You can pay attention to my WeChat official account.