先说点题外话，本来是写在简书上面的文章，现在简书不支持发布了，只能在csdn上上传了....
WebView对于前端开发的小伙伴来讲肯定不陌生，功能是很轻大的，就是一个而普通的html界面。今天主要讲一下小程序使用webview的场景。
一、先说下需求背景，我们最近需要在微信小程序开发一个富文本的功能出来，如果是在传统的浏览器开发是很简单的，因为html提供了强大的渲染能力。我对小程序渲染富文本的方案也做了尝试，分别使用了rich-text、wxparse、mpvue-parse、html2wxml，后三个都是第三方的渲染库。
1.rich-text是微信提供的解析方案，渲染流畅但是效果很差劲，别说数学公式就是某些常用的html布局都渲染不出来，更糟糕的是渲染节点是text格式，导致我们不可以使用csstree对dom进行二次渲染和样式优化。
2.mpvue-parse是基于wxparse做的mpvue的扩展，官方说是很强大，扩展了图片预览之类的功能，并且支持图片尺寸设置，实际用下来还可以，渲染之后的效果也是dom结构，样式控制也比较简单。缺点：可能是需要本地动态解析**html导致复杂的dom结构会出现小程序界面卡死**，所以放弃了
3.html2wxml是一种服务器解析富文本的方案，这个是可以解决界面卡死的问题，他本质就是把html解析为wxml，这个框架针对**数学题目有些是渲染不完整的**，不过它是支持自己搭建渲染库的，不过还需要后台人员配合维护所以也放弃了。这个是项目介绍html2wxml 微信小程序富文本渲染组件 HTML / Markdown 富文本解析-小程序-QwqOffice软件工作室。可以加下作者联系方式，因为一些使用场景没有详细说到，比如最新的解析地址，还有老的地址解析text格式文本会导致小程序view不更新的情况。
4.wxparse是对公式的渲染效果是这几个里面最好的 ，不会丢失内容，不过使用过程中发现解析效果并不会完全转换为dom结构，有些是直接转化为微信的rich-text，所以样式的控制就比较麻烦了。下面就是解析的一些rich-text的结构：
![在这里插入图片描述](https://img-blog.csdnimg.cn/201909121213266.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNTU1NzE4,size_16,color_FFFFFF,t_70)

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

二、下面讲一下微信小程序使用WebView的注意事项（只是目前发现的一些）

1.使用前提：管理平台需要配置webview域名，不然真机无法进入页面；webview请求数据接口地址如果没有加入域名访问在小程序里面是看不到错误提示的，这点要注意。

2.小程序打开调试并不能不获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去设置了：..style. = “none”; //禁止弹出菜单

..style. = “none”;//禁止选中

5.某些标签点击在ios会出现点击状态我尝试了好多方案还是没有禁用掉，大家如果有好的方式可以留言…

6.webview无法自定义小程序的导航栏7.的属性会导致ios上面活动滚动条不流畅，可以设置-webkit--:touch;去解决。

解决局域网共享问题，提示：无法访问，你可能没有权限使用网络资源

一、启用guest来宾帐户；二、控制面板→管理工具→本地安全策略→本地策略→用户权利指派里，“从网络访问此计算机”中加入guest帐户，而“拒绝从网络访问这台计算机”中删除guest帐户；三、我的电脑→工具→文件夹选项→查看→去掉“使用简单文件共享（推荐）”前的勾；四、设置共享文件夹；五、控制面板→管理工具→本地安全策略→本地策略→安全选项里，把“网络访问：本地帐户的共享和安全模式”设为“仅来宾-本地用户以来宾的身份验证”（可选，此项设置可去除访问时要求输入密码的对话框，也可视情况设为“经典-本地用户以自己的身份验证”）；六、右击“我的电脑”→“属性”→“计算机名”，该选项卡中有没有出现你的局域网工作组名称，如“work”等。然后单击“网络 ID”按钮，开始“网络标识向导”：单击“下一步”，选择“本机是商业网络的一部分，用它连接到其他工作着的计算机”；单击“下一步”，选择“公司使用没有域的网络”；单击“下一步”按钮，然后输入你的局域网的工作组名，如“work”，再次单击“下一步”按钮，最后单击“完成”按钮完成设置。访问网上邻居时显示:" windows xp系统访问局域网时显示 "无法访问．您可能没有权限使用网络资源．请与这台服务器的管理员联系以查明您是否有访问权限．此工作组的服务器的列表当前无法使用."我用的是xp系统我也遇到过这样的情况，当时也是着急得不轻，后来看到了以下的内容，照着一步步的做了做，真的好了。

内容不少，但是仍然希望你能耐住性子，仔细的看看自己属于那种情况，应该会有所收获。局域网互访 - [ 网络 ]我也是类似问题。以前一个局域网10多台机子互访问。安了蕃茄花园v2.3，感觉主题漂亮，桌面壁纸自动换，很爽。访问局域网计算机没问题。可网内其它机子在工作组内能看到我的机子，但打不开。说什么“没有权限”。所有设置都作了如下改动（网上找的），依然无效，何故？但求高手指点。“网上邻居”无法互访问题解决方法大全“网上邻居”无法互访的问题实在是太常见了，无论在学校，网吧还是家里多台电脑联机，都有可能遇到网上邻居无法互访的故展。“网上邻居”无法访问的故障多种多样，总结起来基本上有下面的几个：1，没有共享资源/共享服务未启用。症状：电脑与电脑间可以Ping通，但无法访问共享资源，在“计算机管理”中查看“本地共享”后会弹出“没有启动服务器服务”的错误对话框。解决：在控制面板－管理工具－服务中启动Server服务。并设置“启动类型”为“自动”。2，IP设置有误。症状：双机之间无法互Ping，连接用的双绞线经过测试没有问题，没有安装防火墙。解决：检查两台电脑的IP是否处在同一网段，还有子掩码是否相同。

3，WINXP默认设置不正确。症状：从WIN98/2000/2003上无法访问另一台WINXP的机器。解决：在“控制面板”中的“用户帐户”启用Guest帐号。然后在运行中输入secpol.msc启动“本地安全策略”。本地策略 -> 用户权利指派，打开“从网络访问此计算机”，添加Guest帐户本地策略 -> 安全选项，禁止"帐户：使用空白密码的本地帐户只允许进行控制台登陆"。另外有时还会遇到另外一种情况：访问XP的时候，登录对话框中的用户名是灰的,始终是Guest用户，不能输入别的用户帐号。解决：本地策略 -> 安全选项 -> "网络访问：本地帐户的共享和安全模式"，修改为"经典-本地用户以自己的身份验证"4，系统漏洞修补软件修改了安全策略。症状：在“网上邻居”中可以看到对方的计算机，但是访问共享时却提示“没有权限访问网络”解决：在开始菜单运行中输入secpol.msc启动“本地安全策略”，本地策略 -> 用户权利分配，打开“拒绝从网络访问这台计算机”，删除guest用户。5，防火墙规则。症状：安装了防火墙（包括WINXP系统自带的防火墙），出现无法Ping通，或者是访问共享资源的时候提示"XXX无法访问"、"您可能没有权限使用网络资源"、"请与这台服务器的管理员联系以查明您是否有访问权限"、"找不到网络路径"等类似的提示。

解决：停止防火墙或者添加局域网的访问规则。WINXP自带的防火墙：打开控制面板 -> 网络和连接 -> Windows防火墙 -> 例外，勾选“文件和打印机共享”。6，Win2000/XP与Win98互访症状：Ping命令可以通过，但无法在“网上邻居”中实现互访。解决：在WIN2000/XP系统中：控制面板 -> 管理工具 -> 计算机管理 -> 本地用户和组 -> 用户，在Guest帐户上点击鼠标右键，选择属性，在常规项里取消