En el desarrollo, es muy común utilizar componentes de vista web para incrustar páginas H5, pero muchas personas no saben cómo interactúa H5 integrado en vista web con los subprogramas nativos. A continuación se presenta el método para implementar la interacción entre el subprograma WeChat y webview H5.
descripción de la función de vista web
Contenedor para alojamiento de páginas web. Automáticamente llenará toda la página del miniprograma y los miniprogramas personales no son compatibles por el momento.
A partir de la versión 6.7.2 del cliente, el estilo de navegación: personalizado no es válido para los componentes de vista web.
Web-view incorpora H5 para pasar parámetros al subprograma nativo
Método 1. Utilice postMessage
Hay un atributo "bindmessage" en el componente de vista web, que se presenta oficialmente de la siguiente manera:
Cuando la página web publique un mensaje en el mini programa, se activará y recibirá el mensaje en un momento específico (retirada del mini programa, destrucción de componentes, intercambio). e.detail = {data}, los datos son una matriz compuesta por múltiples parámetros postMessage
Vincular el evento "mensaje" en el componente de vista web
Active el evento de mensaje en H5 para recibir los datos pasados por H5 en el mini programa.
ejemplo:
Mini programa/páginas/test/test.wxml:
<web-view src="" bindmessage="receiveMessage"></web-view>
Mini programa/páginas/test/test.js:
receiveMessage(e){
console.log(e.detail)//接收H5传过来的数据
}
H5:
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
<script>
wx.miniProgram.postMessage({
data: {
foo: 'bar'} })
</script>
El uso de postMessage puede realizar la comunicación entre el subprograma y H5, pero solo se activa cuando se realiza una copia de seguridad del subprograma, el componente se destruye y se comparte, por lo que es posible que no cumpla con los requisitos de desarrollo en algunos casos.
Método 2: utilizar el salto de página con parámetros
Haga referencia a jweixin JSSDK y llame a WeChat wx.miniProgram API.
| Nombre de la interfaz | ilustrar | Versión mínima |
|---|---|---|
| wx.miniProgram.navigateTo | Los parámetros son consistentes con la interfaz del mini programa. | 1.6.4 |
| wx.miniProgram.navigateVolver | Los parámetros son consistentes con la interfaz del mini programa. | 1.6.4 |
| wx.miniProgram.switchTab | Los parámetros son consistentes con la interfaz del mini programa. | 1.6.5 |
| wx.miniPrograma.reLaunch | Los parámetros son consistentes con la interfaz del mini programa. | 1.6.5 |
| wx.miniProgram.redirectTo | Los parámetros son consistentes con la interfaz del mini programa. | 1.6.5 |
| wx.miniProgram.postMessage | Enviar un mensaje al miniprograma activará el evento de mensaje del componente en un momento específico (retirada del miniprograma, destrucción de componentes, intercambio) | 1.7.1 |
| wx.miniProgram.getEnv | Obtener el entorno actual | 1.7.1 |
Por ejemplo, ahora existe un escenario: H5 es una página de lista y cuando hace clic en un elemento de la lista, salta a la página de detalles del subprograma nativo.
H5:
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
<script>
function handleClick(e){
let id = e.target.dataset.id
let url = `/pages/detail/detail?id=${
id}`;
wx.miniProgram.navigateTo({
url,
});
}
</script>
Mini programa/páginas/detalle/detail.js:
onLoad: function (options) {
console.log(options.id)//接收H5传过来的数据
}
El subprograma nativo incorpora parámetros H5 en la vista web
Es muy sencillo para el subprograma nativo incrustar parámetros H5 en la vista web. El subprograma nativo puede modificar directamente el atributo src de la vista web.
'xxx.com?arg=123'
La página h5 obtiene los parámetros en la URL. Este método hará que la página se vuelva a cargar. Si no desea que la página se cargue, puede modificar el hash.
'xxx.com#123'
La página H5 monitorea los cambios del valor hash:
window.onhashchange=function(){
alert('hash值改变')
console.log(window.location.hash)//获取当前hash值
}