微信小程序webview、渲染富文本

最终选择了WebView,这个效果就不用说了,唯一的缺点就是体验不好了,毕竟会脱离小程序的原生界面去载入一个html链接,不管是加载速度还是体验会有些割裂感,不过一些比较大的厂商的小程序也是这样处理的,比如拼多多的活动页面、腾讯文档的内容页面(也必须用webview去渲染)。下面是一些渲染结果:

微信小程序webview、渲染富文本

二、下面讲一下微信小程序使用WebView的注意事项(只是目前发现的一些)
1.使用前提:管理平台需要配置webview域名,不然真机无法进入页面;webview请求数据接口地址如果没有加入域名访问在小程序里面是看不到错误提示的,这点要注意。
2.小程序打开调试并不能不获WebView 的打印的错误信息,导致出现问题不好调试,只能推消息通知给小程序:

微信小程序webview、渲染富文本
3.没有配置的webview域名在ios真机上面打开调试会出现偶发性的白屏,这个推断应该是网络导致的,但是关闭掉调试之后就会好了。
4.代码兼容性问题,由于微信webview使用的内核特殊导致代码存在兼容性问题,比如:
*{
margin:0; padding:0;
-webkit-touch-callout:none;
/系统默认菜单被禁用/
-webkit-user-select:none; /webkit浏览器/
-khtml-user-select:none; /早期浏览器/
-moz-user-select:none;/火狐/ -ms-user-select:none; /IE10/
user-select:none;
}
以上是禁用浏览器复制文本的css属性,这个在小程序webview上面是没效果的,只能通过js去设置了:document.documentElement.style.webkitTouchCallout = “none”; //禁止弹出菜单
document.documentElement.style.webkitUserSelect = “none”;//禁止选中

5.某些标签点击在ios会出现点击状态我尝试了好多方案还是没有禁用掉,大家如果有好的方式可以留言…
6.webview无法自定义小程序的导航栏7.overflow的属性会导致ios上面活动滚动条不流畅,可以设置-webkit-overflow-scrolling:touch;去解决。
以上就是我使用小程序webview遇到的一些问题。。。

文章知识点与官方知识档案匹配,可进一步学习相关知识小程序技能树首页概览3687 人正在系统学习中

来源:qq_33555718

声明:本站部分文章及图片转载于互联网,内容版权归原作者所有,如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢!

上一篇 2019年8月10日
下一篇 2019年8月10日

相关推荐