h5项目怎么嵌入到微信小程序中

背景：最近用vue开发了一个h5的项目，然后产品说想把它上到微信小程序里面去，ok，开干！

第一步：web-view

<!--index.wxml-->
<view class="container">
  <web-view src="https://xxx.xxxx.com/" />
</view>

第二步：在小程序中配置域名白名单

      

 

第三步：可以正常开发，调试啦

遇到的问题：

1. 问题：h5项目切换路由，微信小程序顶部的标题没有更换。

      解决：h5项目中，在路由拦截器里，每次切换路由，都设置  document.title = 标题；小程序顶部的标题会随着document的title变化而变化。

2. 问题：h5项目切换路由，微信小程序顶部的没有返回的那个尖尖箭头。

      解决：在index.js里的onShow事件里执行下面事件，因为只有stack的长度大于1才会有返回箭头。

// index.js
// const app = getApp()

Page({
  onShow: function () {
    const stack = getCurrentPages();
    if(stack.length <= 1){
      wx.navigateTo({
        url: `/pages/index/index?url=/#/home`,
      })
    }
  },
});