search.png
关于我
 menu.png
微信小程序（1）——web-view和小程序间传递参数、发送消息

小程序向web-view发送消息

在<web-view>组件中有一个属性src（src是webview 指向网页的链接。可打开关联的公众号的文章，其它网页需登录小程序管理后台配置业务域名。）

通过设置src中GET参数即可向网页传递参数：
<web-view src="https://mp.weixin.qq.com?name='name'&age=12"></web-view>

web-view怎么获取消息呢？
见代码：

$(function () {
        //添加一个获取参数的函数
        (function ($) {
            $.getUrlParam = function (name) {
                var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)")
                var r = window.location.search.substr(1).match(reg)
                if (r != null) return unescape(r[2])
                return null
            }
        })(jQuery)
        //name 和 age即是微信小程序传递过来的参数
        var name = $.getUrlParam('name')
        var age = $.getUrlParam('age')
})

web-view向小程序发送消息

在html文件中引入微信小程序官方的js 接口：
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
js文件中：

//getEnv获取环境
wx.miniProgram.getEnv(function (res) { 
    if (res.miniprogram) { 
        //如果当前是小程序环境
        wx.miniProgram.postMessage({ 
            data:  { 
                name: 'name',
                age: 12
            }
        })
    } 
})

小程序怎么获取消息呢？
见代码：
1、在<web-view>组件中添加bindmessage（网页向小程序 postMessage 时，会在特定时机（小程序后退、组件销毁、分享）触发并收到消息。e.detail = { data }）
<web-view src="{{url}}" bindmessage="deal_with_msg"></web-view>
2、在js文件中添加事件处理：

Page({ 
    deal_with_msg: function (e) { 
        var data = e.detail.data
        this.setData({ 
            name: data.name,
            age: data.age
        })
    }
})

这篇文章对您有帮助吗，点赞让博主知道...

版权声明

知识共享许可协议 本文章由作者“衡于墨”创作，转载请注明出处，未经允许禁止用于商业用途

本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可。
发布时间：2019年01月22日 17:50:10

评论区#

还没有评论哦，期待您的评论！

备案号： 闽ICP备19015193号-1 
关闭特效