zoukankan      html  css  js  c++  java
  • 微信小程序与网页h5的参数传递

    官方文档:https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html

    web-view

    属性 类型 默认值 必填 说明

    最低版本

    src string   webview 指向网页的链接。可打开关联的公众号的文章,其它网页需登录小程序管理后台配置业务域名。 1.6.4
    bindmessage eventhandler   网页向小程序 postMessage 时,会在特定时机(小程序后退、组件销毁、分享)触发并收到消息。e.detail = { data },data是多次 postMessage 的参数组成的数组 1.6.4

    一、小程序===》h5传递参数

      1、传递参数

    <!-- wxml -->
    <web-view src="https://xxx.com/test.html?id=123"></web-view>

      2、接收参数

    <!-- h5 网页 a.html-->
    <script>
        let id = getUrlParam('id'); 
    </script>

    二、h5==》小程序传递信息

      1、传参数

    <!-- h5端 HTML和JS  自动传值 -->
    <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
    <script>  
        wx.miniProgram.getEnv(function(res) {
            if (res.miniprogram) {
                wx.miniProgram.postMessage({
                    data: {
                        title: '分享标题',
                        imgUrl: 'share.png',
                        link: 'share.html?shareId=7&active=1'
                    }
                });
            }
        });
    // wx.miniProgram.navigateBack({delta: 1})
    </script>

    2、接收参数:在特定时机触发(如小程序后退、组件销毁、分享时)接收

    // 小程序端 wxml
    <web-view src="{{url}}"  bindmessage="handlePostMessage"></web-view>
    
    //小程序端js
    const app = getApp()
    Page({
        data: {
            url: '',
        },
        onLoad: function(options) {
    
        },
        // 获取h5传递消息  右上角分享/小程序后退/组件销毁时自动触发
        handlePostMessage: function(e) {
            console.log(e.detail.data);
            let data = e.detail.data[e.detail.data.length - 1];
            ...///使用数据
        }
    })
  • 相关阅读:
    开源框架/软件汇总
    如何查看Maven项目的jar包依赖
    我的前端技术栈(2018版)
    解决在Mac上用pyenv安装python3失败的问题
    学习jenv
    学习sbtenv
    解决MAC下修改系统文件没权限的问题
    学习Spring Boot
    学习音标
    C# 对List中的Object进行排序
  • 原文地址:https://www.cnblogs.com/cdj61/p/13024475.html
Copyright © 2011-2022 走看看