在微信小程序中嵌入H5页面并进行页面跳转

需求很简单,就是在小程序中嵌入一个H5页面,并且提供一个按钮可以跳转到这个小程序的其他页面.
因为笔者是第一次接触,所以做一下记录:
主要用到微信小程序的 web-view 组件,详细用法>>> web-view 微信官方文档.
在这里插入图片描述
需要注意的是个人小程序不支持!

1.嵌入H5

当我们写好H5后,可以在小程序页面中通过以下代码嵌入页面,页面会自动铺满,需要做好移动端适配:

<!--pages/test/test.wxml-->
<web-view src="http://192.168.xx.xxx:8080/#/"></web-view>

上线后,这里的域名需要加入小程序的合法域名中才可嵌入。本地测试时,在小程序本地设置中勾选不校验域名即可!

2.跳转小程序内页面

需要引入微信SDK,可以直接引入官方提供的CDN:

http://res.wx.qq.com/open/js/jweixin-1.6.0.js

或使用npm:

npm install weixin-js-sdk

在H5页面上中引入:

import wx from 'weixin-js-sdk';

调用微信开放接口进行页面跳转:
tabbar页面:

wx.miniProgram.switchTab({
     url: "/pages/home/home",
   });

非tabbar页面:

wx.miniProgram.navigateTo({
    url: "/pages/smile/smile",
  });
思考:

看了一些资料,发现有跳到其他小程序的需求,目前看到的解决方案就是跳到一个中继页(小程序自身页面),然后通过小程序跳转到其他小程序。
以上!

评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值