WTF小程序之<web-view>
叨叨两句
昨天爬了一下午坑才出来的我向大家问好😶,要说小程序基础库都1.9了,但是坑还是很多。一方面是由于小程序的文档不是太友好,也许某个地方告诉你了,但是不是那么 容易发现。另一方面,微信大佬手握9亿多用户,觉得不好用?那你爱用不用。。。今天就说说昨天爬的这个坑——
web-view的两个属性
web-view 有两个
src,
bindmessage两个属性,
src用来告诉web-view显示的网页地址,
bindmessage用来监听页面发送给小程序的消息。换句话说就是,小程序可以通过src属性借助url向web-view中的页面传递参数,而页面可以通过bindmessage向小程序传递数据,从而实现小程序和网页的通信。举个 bindmessage的例子:
传值的时候有个要注意的地方,比如我们想传一个对象,假设叫obj,给小程序,那在调用postMessage方法时参数应该写成{data: obj},而不能直接传obj,否则小程序拿不到网页上传的数据,参看下面的例子:
/*网页代码*/ //在页面内引入JSSDK1.32 <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script> <script> wx.miniProgram.postMessage({ data: {msg: '我是网页' }})//第一层应该是data,不能写成wx.miniProgram.postMessage({msg: '我是网页' }) </script> /*小程序代码*/ //wxml <web-view src="https://mp.weixin.qq.com/" bindmessage="msgHandler"></web-view> //js Page({ ... msgHandler(e){ console.log(e.detail.data) //我是网页,获取到来自也页面的数据 } })
bindmessge的回调函数也不是实时触发的,根据官方文档,回调函数会在特定的时机执行,特定的时机包括(小程序后退、组件销毁、分享)。。。所以不要以为函数没有触发,可能是时机未到啊
src属性避坑指南
接下来就要好好说说我前面碰到的那个坑了,这个坑跟src属性有关。在实际应用中,web-view难免要动态绑定页面路径,这样可以通过url查询字符串的方式给页面传值。举个例子,假设页面需要从小程序里面获取电话号码,那代码可能像下面这样:
<web-view src="https://localhost?phone={{phone}}"></web-view> //js Page({ data:{ phone: '82901001010' } })
然而这样做,你可能就掉进了坑里,尽管看上去没设么问题,但是安卓手机有很大概率获取不到传过去的电话号码,因为网页加载时src属性可能是这样的
https://localhost?phone=,导致网页中js不能通过解析url得到小程序传过来的电话号码。所以,
正确做法是在js中完成字符串的拼接,然后调用setData方法:
//wxml <web-view src="{{url}}"></web-view> //js Page({ data:{ url: '' } ... onLoad(options){ let phone = options.phone;//获取到小程序其他页面传来的电话号码; let url = `http://localhost?phone=${phone}`; this.setData({url : url}) } })
吞查询字符串
假设你的小程序有一个webview,这个web-view打开什么页面是完全由别的页面指定的:
//web-view页面 <web-view src="{{src}}"> // js onLoad(options){ this.setData({src: options.src}) }
在页面B中有个navigator,需要导航到web-view并打开一个带查询字符串的网页:
<navigator url="/web-view/web-view?src=http://www.baidu.com?wd=1"></navigator>
这里,你希望传递的url是
http://www.baidu.com?wd=1,结果传过去却是
http://www.baidu.com,也就是查询字符串被吞掉了,解决办法是首先
encodeURIComponent,然后在web-view中再
decodeURIComponent
encodeURIComponent('http://www.baidu.com?wd=1') // "http%3A%2F%2Fwww.baidu.com%3Fwd%3D1" 2018-7-7更新
导航相关接口
有时我们在页面内完成一定动作后,需要引导小程序跳转到其他页面,这时就需要在页面内调用这些接口(引入JSSDK1.3.2)。这些接口作为方法被放在在wx.miniProgram下面。下面的这个图给出了微信的JSSDK所创建的wx命名空间下的一些方法名,这些方法的具体用法请参考官方文档,这里就不介绍了。
最后的最后,web-view里面尽量减少和小程序的通信,尽量不要跑单页面(服务器可能会重定向的微信授权页面,这时候单页面就要哭了),不说了,我要去用wxml重写vue的页面了
- 小程序<web-view>加载外部链接
- WebKit discarded an uncaught exception in the webView: <NSUnknownKeyException> valueForUndefinedKey:
- asp.net mvc 2 Could not load type 'System.Web.Mvc.ViewPage<dynamic>'错误解决办法
- 视图必须派生自 WebViewPage 或 WebViewPage<TModel>
- android webview 播放swf 失败<彻底解决黑框>
- MVC区域 视图必须派生自 WebViewPage 或 WebViewPage<TModel>
- Android WEBVIEW中调用<a href>的问题!!!不是js的方法
- Android:让WebView支持<input type=”file”…>元素
- Android:让WebView支持<input type=”file”…>元素
- 基于Flask框架的Python web程序的开发实战 <二> 项目组织结构
- Android WebView 支持H5图片上传<input type="file">
- MVC 5.0 之奇葩错误-<类型“ASP._Page__ViewStart_cshtml”不从“System.Web.WebPages.StartPage”继承>
- Index.cshtml”处的视图必须派生自 WebViewPage 或 WebViewPage<TModel>。
- 【C#】对异步请求处理程序IHttpAsyncHandler的理解和分享一个易用性封装 【手记】走近科学之为什么明明实现了IEnumerable<T>的类型却不能调用LINQ扩展方法 【手记】手机网页弹出层后屏蔽底层的滑动响应 【手记】ASP.NET提示“未能创建类型”处理 【Web】一个非常简单的移动web消息框 【手记】解决EXCEL跑SQL遇“查询无法运行或数据库表无法打开...”
- [Cordova] 改进InAppBrowser插件(WebView),让其<input type="file">支持选择文件
- ASP.NET MVC - The view must derive from WebViewPage, or WebViewPage<TModel>
- Android:让WebView支持<input type=”file”…>元素 - GreatK
- 微信小程序<web-view>出现{"base_resp":{"ret":-1}}
- 基于Flask框架的Python web程序的开发实战 <一> 环境搭建
- 未能加载类型“System.Web.Mvc.ViewPage<String>”