微信小程序 web - view 打开网页与网页 H5 跳转微信小程序说明

一、微信小程序 web - view 打开网页

（一）使用 web - view 组件的原因

在微信小程序开发中，有时需要在小程序内展示网页内容，比如加载公司官网页面、新闻资讯页面等。而 web - view 组件是微信小程序提供的专门用于承载网页的容器，它能够自动铺满整个小程序页面，方便实现小程序与网页内容的融合，为用户提供更丰富的信息展示形式。

（二）具体操作步骤

配置业务域名

登录微信公众平台，选择左侧开发管理，再进入开发设置。

找到业务域名选项，添加要加载的网页的域名。在此过程中，需要下载校验文件，并将其放置在域名根目录下。这一步的目的是确保小程序有权限加载该域名下的网页，相当于获得了网页所属方的授权。例如，如果要在小程序中打开百度网页，就需要百度将校验文件放置在其域名根目录下，完成授权流程。

在小程序页面中使用 web - view 组件

在小程序的页面文件（如.wxml 文件）中添加 web - view 组件，并通过 src 属性指定要加载的网页 URL。例如：

这样，小程序在渲染该页面时，就会自动加载 src 指定的网页内容。

（三）注意事项

域名限制：web - view 组件只能加载在小程序管理后台配置的业务域名下的网页，未配置的域名将无法加载。这是微信出于安全考虑设置的限制，防止小程序加载恶意或未经授权的网页。

页面层级问题：web - view 组件会覆盖整个页面，因此不能与其他组件同时使用。每个小程序页面只能有一个 web - view 组件，它会自动铺满整个页面区域，其他组件如果在此页面中定义，将不会显示。

通信限制：web - view 组件内的网页无法直接调用小程序的 API。如果需要实现两者之间的通信，需要通过 postMessage 进行。例如，网页内的某些操作需要触发小程序的特定功能，就可以通过 postMessage 传递消息给小程序，小程序再根据接收到的消息执行相应操作。

兼容性：微信 web - view 组件要求基础库版本在 1.6.4 以上，所以在开发时需要做好兼容处理。对于基础库版本较低的用户，可能无法正常使用 web - view 组件的功能，此时可以考虑采用其他替代方案，如将网页内容解析成小程序可展示的格式（如使用 wxParse 解析 html 等方法）。

二、网页 H5 跳转微信小程序

（一）跳转需求背景

在实际业务中，经常会遇到用户在 H5 页面操作时，需要跳转到微信小程序进行进一步功能操作的情况。比如在微信内浏览器打开的活动页面，用户可能需要跳转到小程序完成绑定、授权等功能；或者在微信外浏览器打开的 H5 页面，也希望能够便捷地跳转到对应的小程序。

（二）不同场景下的跳转方式及实现步骤

微信内（公众号）跳转小程序

使用微信开放标签：微信内的网页如需打开小程序可使用微信开放标签 - 小程序跳转按钮。对于已认证的服务号，其绑定 “JS 接口安全域名” 下的网页可使用此标签跳转任意合法合规的小程序；已认证的非个人主体的小程序，使用小程序云开发的静态网站托管绑定的域名下的网页，也可以使用此标签跳转任意合法合规的小程序。

配置步骤：

首先，通过 config 接口注入权限验证配置并申请所需开放标签。这一步与使用 JS - SDK 配置方式相同，所有需要使用开放标签的页面必须先注入配置信息，并通过 openTagList 字段申请所需要的开放标签，否则将无法使用（同一个 url 仅需调用一次）。例如：

wx.config({debug: true, // 开启调试模式，调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印appId: '', // 必填，公众号的唯一标识timestamp:, // 必填，生成签名的时间戳nonceStr: '', // 必填，生成签名的随机串signature: '',// 必填，签名openTagList: ['wx - open - launch - weapp'] // 可选，需要使用的开放标签列表，例如['wx - open - launch - app']});

在页面中使用 wx - open - launch - weapp 标签来实现跳转。例如：

跳转小程序

其中，username 属性为目标小程序的原始 ID，path 属性为要跳转到的小程序页面路径。

微信外 H5 跳转小程序

基于 URL Scheme 跳转：通过服务端调用微信接口获取 URL Scheme，实现从微信外部（如短信、邮件、外部浏览器等）跳转到小程序。iOS 系统支持识别 URL Scheme，可在短信等应用场景中直接通过 Scheme 跳转小程序。而 Android 系统不支持直接识别 URL Scheme，用户无法通过 Scheme 正常打开小程序，开发者需要使用 H5 页面中转，再跳转到 Scheme 实现打开小程序。

获取 URL Scheme 的步骤：

接口应在服务器端调用，通过 https 调用 POST https://api.weixin.qq.com/wxa/generatescheme?access_token={access_token}接口。

在请求参数中设置小程序的相关信息，如 path（要跳转到的小程序页面路径）、query（传递的参数）等。

调用成功后，会返回生成的 URL Scheme 链接，将该链接提供给用户在微信外点击，即可实现跳转。

H5 页面中转示例代码（针对 Android 系统）：

使用微信短链（URL Link）：适用于不需要额外开发 H5 页面（比如短信链接）的场景，直接生成链接，用户通过打开链接即可跳转指定的小程序页面。每个独立的 URL Link 被用户访问后，仅此用户可以再次访问并打开对应小程序，其他用户无法再次通过相同 URL Link 打开该小程序。通过服务端接口可以获取打开小程序任意页面的 URL Link，适用于从短信、邮件、网页、微信内等场景打开小程序。

获取 URL Link 的步骤：

调用微信提供的服务端接口，如https://api.weixin.qq.com/wxa/generate_urllink?access_token={access_token}。

在请求参数中设置小程序的相关信息，如 path（要跳转到的小程序页面路径）、query（传递的参数）等。

接口调用成功后，会返回生成的 URL Link，将该链接发送给用户，用户点击即可跳转小程序。

利用第三方外链平台 / 工具：如果小程序运营者不具备独自开发的能力，可以直接借助第三方外链平台 / 工具来实现跳转功能。具体做法是，提供小程序的原始 ID、秘钥、外链名称、要展示的小程序页面路径（比如首页、活动页）等信息给第三方，通过工具生成一个小程序外链，再将外链配置在 H5 页面中。当用户点击该链接时，就能直接跳转小程序。例如小多粉平台，配置好相关信息后可以一键生成链接。

（三）注意事项

权限问题：无论是微信内还是微信外的跳转方式，都需要注意权限的获取和配置。例如，使用微信开放标签跳转小程序时，要确保公众号或小程序满足相应的认证和配置条件；使用 URL Scheme 或 URL Link 时，要正确调用微信接口并保证参数设置正确。

参数传递：在跳转过程中，如果需要传递参数，要注意参数的格式和安全性。不同的跳转方式对于参数传递的支持和要求可能不同，例如在使用微信开放标签时，可以在 path 属性中通过 query 字符串的形式传递参数，小程序在 onLoad 的 options 中接收；在使用 URL Scheme 或 URL Link 时，同样可以在链接中添加参数，小程序根据链接解析参数。

用户体验：在设计跳转流程时，要充分考虑用户体验。尽量减少跳转过程中的等待时间和操作步骤，避免给用户造成困扰。例如，在 H5 页面中转跳小程序时，如果需要用户进行多次确认或操作，可能会导致用户流失。

兼容性测试：不同的手机系统、微信版本对于跳转功能的支持可能存在差异，因此在开发完成后，要进行充分的兼容性测试。确保在各种常见的环境下，用户都能够顺利地从 H5 页面跳转到微信小程序。