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`, }) } }, });
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· DeepSeek 开源周回顾「GitHub 热点速览」
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了