Uso del subprograma WeChat-web-View y comunicación con el subprograma

1. ¿Qué es la vista web?

En pocas palabras, es una página H5 anidada de un pequeño programa.

dirección del sitio web oficial de vista web

2. Cómo utilizar la vista web

1. Cree una página en el subprograma dedicada a mostrar H5

不需要在这个页面做修饰,H5页面会自动铺满
bindmessage属性用来绑定从H5传值过的函数;
注意:传给H5的数据只能拼接在url后面

El código es el siguiente (ejemplo):

<web-view src="H5页面地址?token=XXXX" bindmessage="handlePostMessage" ></web-view>

接收 h5 页面传递过来的参数

 onLoad: function (options) {
    
    },
  handlePostMessage: function (e) {
    
    
    console.log(e.detail.data)
    let resObj = e.detail.data[e.detail.data.length - 1];
//多次传递会是数组的形式,传递一次会push进数组,所以我们需要拿到最新的数据,也就是数组的最后一个子集
    console.log(resObj.message)
  },

2. página H5

(1) Introducir JSSDK

El código es el siguiente (ejemplo):

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

(2) Determinar si está en el entorno del mini programa.

wx.miniProgram.getEnv(function (res) {
    
    
	if (res.miniprogram) {
    
      
    //小程序环境 ,在此进行相关逻辑处理
    } else {
    
    
    //非小程序环境下逻辑
     console.log('不在小程序中')
    }
})

(3) Obtener parámetros de ruta de página

function getQueryString(e) {
    
    
  var t = new RegExp("(^|&)" + e + "=([^&]*)(&|$)", "i"), 
  i = window.location.search.substr(1).match(t); 
  return null != i ? decodeURIComponent(i[2]) : null
}
//调用函数

 let token = getQueryString("token");

(4) Pasar valor al subprograma

向小程序发送消息,会在特定时机(小程序后退、组件销毁、分享)触发组件的 message 事件;

  wx.miniProgram.postMessage({
    
    
     //这里一定要将数据放在dada中
     data: {
    
    
         message: uploadinput.files[0]
     }
   });
  //跳转到小程序页面,触发向小程序发送消息
  wx.miniProgram.redirectTo({
    
    
     url: '/pages/studentWork/scoreInfo/scoreInfo' 
  })

Supongo que te gusta

Origin blog.csdn.net/qq_35971976/article/details/128327473
Recomendado
Clasificación