关于“web-view和小程序通信api的用法”的总结

1.用法:跳转的webview网页中需要引入jweixin-1.3.2.js,然后就可以调用微信小程序提供的接口了;

2.接口能力

1)基本的跳转都支持(wx.miniProgram.navigateTo、...navigateBack、.switchTab、.getEnv等)

2)从webview往小程序发送数据(wx.miniProgram.postMessage)

这个方法比较坑了...

21)有些说法,需要在小程序的webview组件上绑定bindmessage事件,但是如果仅仅这样做,你永远都收不到消息,亲测;

22)官网也说了“会在特定时机(小程序后退、组件销毁、分享)触发并收到消息。e.detail = { data }”,因此,我测试,在onShareAppMessage事件中接收传递的参数,我就无语了,这时间获得的数据,或许已经没用了……

希望微信官网,能尽早支持在web-view中操作小程序的更多的api;

3.我的demo

#小程序端

1)wxml(代码片段)

2)js(代码片段)

onShareAppMessage:function(options) {

console.log("[onLoad]-->options"+ util.jsonToString(options));

},

bindGetMsg:function(e) {

console.log(e)

},

#网页端(html + js)—完整代码(注意那两个button)

html>

htmllang="en">

head>

metacharset="UTF-8">

metaname="viewport"content="width=device-width, initial-scale=1.0">

metahttp-equiv="X-UA-Compatible"content="ie=edge">

title>test>

head>

body>

divclass="app">

h3>小程序>

p>微信小程序是一种全新的连接用户与服务的方式,它可以在微信内被便捷地获取和传播,同时具有出色的使用体验。同时提供一系列工具帮助开发者快速接入并完成小程序开发。关于如何注册配置就不多言了,本文主要还是体验了下web-view的功能。>

h3>web-view详解>

p>

有了这个组件之后,小程序可以很好的嵌入一些页面,可以环境小程序size告急的问题,同样也使开发更加便捷,毕竟小程序开发者基本都对前端开发较为了解。

p>

buttontype="button"id="btn">返回小程序>

buttontype="button"id="btn2">给小程序发送数据>

div>

scriptsrc="http://cdn.bootcss.com/jquery/3.2.1/jquery.min.js">>

scriptsrc="https://res.wx.qq.com/open/js/jweixin-1.3.2.js">>

script>

/* eslint-disable */

$(function(){

//在网页内可通过window.__wxjs_environment变量判断是否在小程序环境

console.log(window.__wxjs_environment ==='miniprogram');

wx.miniProgram.getEnv(function(res) {

console.log("res.miniprogram:"+res.miniprogram)

})

$('#btn').on('click',function(s) {

//wx.miniProgram.navigateBack();// OK

// wx.miniProgram.switchTab({// OK

// url:'/pages/index/index', // url后不能带参数

// success: function(){

// console.log('success')

// },

// fail: function(){

// console.log('fail');

// },

// complete:function(){

// console.log('complete');

// }

// })

wx.miniProgram.navigateTo({// OK

url:'/pages/auth/auth?test=testtest',// url不能是tarBar

success:function(){

console.log('success')

},

fail:function(){

console.log('fail');

},

complete:function(){

console.log('complete');

}

});

});

varclickCount=1;

$('#btn2').on('click',function(s) {

varvalue='bar-'+clickCount

console.log('value='+value)

clickCount++

wx.miniProgram.postMessage({data: {username:'hll','pwd':'qaz123',foo:value} })

//wx.miniProgram.postMessage({ data: })

// wx.miniProgram.postMessage({ data: })

//wx.miniProgram.postMessage({ data: 'foo' })

//不得不说这是个很蛋疼的功能:https://developers.weixin.qq.com/blogdetail?action=get_post_info&docid=000664db58c990de8796936ae5c000&highline=wx.miniProgram.postMessage

});

});

script>

body>

html>

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180627G1BE3A00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券