2018-6-15 更新

本文中的方法属于黑科技。原理是使用小程序api返回上一页，然后返回没有历史记录，然后退出程序；

但是最近小程序应该更新了api中的bug。无法使用此方法。如果返回时没有历史记录，会返回到首页，不会退出程序，如官方文档中描述的那样，但是为什么之前退出，我认为这是一个bug。有问题

组件是微信小程序1.6.第4版支持的功能。用于托管网页的容器会自动覆盖整个小程序页面。但目前不支持个人和海外小程序。

为了在小程序上打开频道，我的项目创建了一个新的小程序。这个小程序只有一个页面，页面中的代码很简单。它是一个组件，它的src设置为原来的h5站点；

小程序可以正常运行，可以使用h5原有的功能，但是遇到了一个尴尬的点——在ios系统中，小程序页面左上角没有返回按钮；

你可能会疑惑，我们的项目也用到了组件，我们为什么要有呢？

事实上，要做到这一点，必须满足以下条件：

如果小程序只有一页，左上角没有返回按钮（ios系统下）。退出小程序只能从右上角的“圆圈”键退出，系统也可以通过手机的返回键退出。

如果小程序中有多个页面，并且相互之间有跳转，那么左上角（ios系统下）有返回按钮，而你的项目有返回按钮，因为发生了跳转，页面托管组件必须不是小程序主页。

解决策略

分析原因，其实并没有历史跳转，只有一个页面，解决方法很简单，就是添加一个空页面作为首页，进入首页后立即跳转到该页面；

但是代码中需要做一些处理，不能一直跳转。当用户返回时，应退出小程序；

//app.js代码 App({ onHide() { this.data.webShowed = false; }, data: { webShowed: false //标记web-view页面是否已经显示过了 } });

无

//首页js代码 var app = getApp(); Page({ onShow() { //如果已经显示过web-view页了，则执行后退操作，否则就跳到web-view页 if (!app.data.webShowed) { wx.navigateTo({ url: '/pages/web-view/web-view' }) } else { wx.navigateBack({ delta: 1 }); } } })

//web-view 页面js代码 Page({ onShow() { var app = getApp(); app.data.webShowed = true;//标记已经显示过web-view页了 } })

以上代码可以解决小程序左上角没有返回按钮的问题；

仍有疑问

但是问题只解决了一半，可以尝试一个操作：

这个问题与小程序的转发有关，因为我们的小程序只有两个页面：首页和网页浏览页面。用户只在浏览页面触发转发（因为首页会跳转或返回，浏览页面无法显示。在用户面前），转发出去时，当前页面地址会用作开通地址，所以点击微信转发消息将进入网页查看页面微信小程序开发页面按钮没反应，而不是首页；

不进入首页，直接进入web-view页面，相当于web-view页面是首页，问题又回到了最上面的情况。所以解决的办法是配置转发设置，让转发的页面地址为首页即可；

//web-view页 js代码 Page({ data: { src: '' }, onShow() { wx.showShareMenu({ withShareTicket: true }) app.data.webShowed = true; }, onShareAppMessage() { return { title: '分享标题', path: '/pages/index/index' // 分享出去后打开的页面地址 } } })