prefacio

Realice la incrustación de una página de vista web en el subprograma WeChat, y después de operar en esta vista web, se puede devolver cierta información al subprograma para su posterior procesamiento.

Uso : desarrollo nativo del applet vue2+.

texto

Este artículo explica en detalle cómo usar el subprograma WeChat para acceder a enlaces externos .
Principalmente bajo el mismo nombre de dominio

subprograma WeChat

Crear una nueva página intermedia incrustada en la vista web

<web-view
    src="url地址"
    bindmessage="onMessage"
></web-view>

js
Page({
    
    
  onMessage(e) {
    
    
    console.log(e.detail.data);
//e.detail.data就是vue里传来的参数，后续进行处理即可
  }
});

ver2

Introduzca SDK en index.html.

<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>

pagina de operaciones

<script>
export default {
    
    
  data() {
    
    
    return {
    
    
      isMini: false,
    };
  },
  mounted() {
    
    
    this.isMiniProgramEnv();
  },
  methods: {
    
    
    //判断环境是否为小程序
    isMiniProgramEnv() {
    
    
      // 通过navigator.userAgent 判断
      let userAgent = navigator.userAgent;
      this.isMini = /miniProgram/i.test(userAgent);
    },

    wxlogin() {
    
    
      setTimeout(() => {
    
    
        wx.miniProgram.navigateBack();
        wx.miniProgram.postMessage({
    
     data: "获取成功" });
      }, 2000);
    },
  },
};
</script>

Aviso:

En postMessage(), los datos deben colocarse en el objeto de datos.
Preste atención al tiempo de activación. Solo cuando regrese, destruya el componente o comparta, se activará el evento de mensaje de la vista web.
- Entonces el applet regresará a la página anterior. Luego recibe el valor pasado.
Para ser ejecutado en setTimeout, para garantizar que se pueda ejecutar.
Si hay un problema con el dispositivo real o con la depuración, puede intentar borrar el caché severamente.Esto se menciona en los dos artículos de WeChat Mini Program Access to External Links y Reference 3 .

referencia

Wechat applet webview y h5 realizan la comunicación en tiempo real a través de postMessage : presenta la forma de utilizar componentes alternativos y destruir para realizar la comunicación, que es más detallada. Pero no lo intenté. Este escenario de demanda puede usarse en el futuro: use el terminal h5 para generar un lienzo e incrustarlo en un programa pequeño (es demasiado problemático dibujar en un programa pequeño) [En realidad, no es en tiempo real, ¿verdad? 】
Uso de WeChat applet webview postMessage : El caso es simple, pero además de la reversión, traté de saltar y destruir de acuerdo con su método de escritura, pero no funcionó. No sé dónde está el problema. Pruébalo la próxima vez.
La vista web del subprograma WeChat interactúa con H5: juzgar si H5 está en el entorno del subprograma : se enumeran tres métodos y yo uso el recomendado.

Reponer

Comunicación bidireccional entre el subprograma WeChat y la página de vista web La forma en que se pasa el subprograma es incluir parámetros en el src, lo cual no es conveniente. Aún no se ha usado.

[Vue2+ subprograma WeChat] Incruste la vista web en el subprograma WeChat y obtenga onMessage