随着小程序越来越火爆，使一个产品如果只有公众号H5页面和APP显得不怎么完美，总感觉不搭上小程序这趟流量车，就会少了点什么，心里别扭地很。在此驱动下，我所在公司也决定赶紧上车。

但是，如果要按照小程序的套路重新写一份的话，又感觉付出的时间成本太大了，非常的不划算。于是乎，脑子灵光一闪，想起了小程序貌似有个小弟叫webview，webview是啥，按字面意思就是网页视图(来自百度翻译)。官方是这么定义的：

web-view 组件是一个可以用来承载网页的容器，会自动铺满整个小程序页面。个人类型与海外类型的小程序暂不支持使用。

简单的讲就是我们可以在小程序内放置一个组件来链接我们的HTML页面了。也就是说，已经写好的微信公众号H5页面可以直接挪到小程序了。一行代码就完成公众号到小程序的转移，一行代码就让我们多了一个流量入口，一行代码就解决了重新开发一套小程序代码的难题。想到这真的是激动死了。

当我兴致冲冲的把链接放进webview中，就像这样：(真实项目链接地址，用自己的域名代替了^_^)

但是点击跳转页面的时候。唉哟，我去，我当时就真的楞了一下，页面左上角没有！！返回按钮！！导致回不去了，只能不停的往下点，没有回头路，这不是搞笑的吗。。。

当时想了一种方案，就是在每个H5页面都加上一个带返回按钮的导航栏，但是想了一下，这种方案不可取，因为小程序的头部已经有个导航栏了，再加一个的话就显得非常的不协调，可以用一个字来形容——【丑到爆】。果断弃用！

看了下其他的小程序，发现如果是两个小程序页面跳转的话，第二个页面的左上角是会有返回按钮的。那我们可以想到，如果在第二个页面也放个webview组件，用来显示跳转之后的链接，不就完美解决了吗？那么问题来了，怎么把主页点击的链接传到第二个页面呢？

我们可以在H5页面使用jssdk中H5页面跳转到小程序页面的方法wx.miniProgram.navigateTo，然后再携带一个weburl参数：

//H5页面js

navigate(modelName) { //控制页面跳转---小程序、公众号、非微信跳转方式 【modelName---vue路由名字】

this.isMiniProgram((res)=>{//判断是否是小程序页面的回调函数

if (res) {//小程序页面

wx.miniProgram.navigateTo({url: '../webview/webview?weburl=https://www.hxkj.vip/#/' + modelName});

} else {

this.$router.push({name: modelName});//非小程序页面使用vue路由跳转

}

})

},

isMiniProgram(callback) { //是否为小程序环境

//是否在微信环境

if (!isWeixin()) {

callback(false);

} else {

//微信API获取当前运行环境

wx.miniProgram.getEnv((res) => {

if (res.miniprogram) {//小程序环境

callback(true);

} else {

callback(false);

}

})

}

}

接着在小程序第二个页面webview.js中接收weburl参数，注意配置分享的页面链接：

// pages/webview/webview.js

Page({

/**

* 页面的初始数据

*/

data: {

url:''

},

/**

* 生命周期函数--监听页面加载

*/

onLoad: function (options) {

this.setData({

url: options.weburl //获取H5页面传递过来的weburl

});

},

/**

* 用户点击右上角分享***【特别注意这里，配置分享链接一定要给首页链接，要不然别人点进来又是没有返回按钮的哦】***

*/

onShareAppMessage: function () {

return {

path: '/pages/index/index'

}

}

})

并赋值给webview.wxml中的src属性

好了，这样的话，就完美解决了小程序webview跳转页面后没有返回按钮的问题。

喜欢的话，可以关注下我的微信公众号

微信公众号