小程序跳转h5

微信小程序作为一个越来越受欢迎的营销工具，使得商家可以快速地将业务推广到更广泛的用户群体。但是，在小程序中打开H5页面有时会变得棘手。让我们一起看看如何解决从小程序内嵌的H5跳转到其他H5链接的问题。

1、设置H5页面路由规则

首先，你需要在小程序后台的“设置”选项卡下找到“开发设置”，然后开启“关联小程序”。此外，你还需在小程序根目录下的app.json文件中设置「H5页面路径配置」:

{
  "pages": [
    "pages/home/index",
    "pages/about/index",
     // H5页面
    "pages/webview/index"
  ],
  "subPackages": [ ],
  "window": {
  	...
  },
  "networkTimeout": {
    "request": 30000,
    "downloadFile": 10000
  },
  // H5页面路由设置
  "navigateToMiniProgramAppIdList": [ ],
  "usingComponents": { }
}

以上面的JSON代码为例, 我们在"pages"数组里定义了三个页面: 主页、关于我和一个webview页面用于打开H5页面。注意,新增的webview必须是现有小程序页面之一：即前面的 “pages”数组里已经存在的一页。

2、编写跳转代码

定义好H5页面路径配置后，你还需要在小程序JS文件里编写相应的跳转代码：

wx.navigateTo({
   url: '/pages/webview/index?weburl=https://www.example.com',
 })

代码中，“/pages/webview/index”是预定义的H5页面路径，“？weburl=”后面是要跳转的H5页面的URL地址。

3、处理返回键

为了让你的H5网页有很好的用户体验，你需要对小程序内嵌的H5页面进行返回键处理。只需在webview页面的js代码中使用wx.navigateBack方法返回。如下所示：

// “返回上一页”按钮事件处理
onNavigateBack: function() {
 	 wx.navigateBack({
    		delta: 1
  	});
}

4、多次跳转问题

如果你的小程序需要多次在内部跳转至不同的H5 URL，则需要通过JSBridge实现该功能。下面是一个简单的伪代码示例：

//HTML代码片段
Link 1
Link 2
//JS代码片段
function myFunction(url) {
   var message = {
      type: 'redirect',
      data: url
   };
   // 发送消息给微信客户端
   WeixinJSBridge.send(message);
}

以上代码将伪造发送一个重定向请求到指定的H5网址。