关于“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>