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`,
      })
    }
  },
});
复制代码

 

posted @   蛙仔  阅读(593)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」
点击右上角即可分享
微信分享提示