微信小程序微信公众号中文乱码的坑

微信小程序可以通过webview嵌入H5页面可以说是给开发者很大的福音，手头的项目中有几个页面是使用H5开发的嵌入到了webview中，在小程序开发者工具的模拟器中测试完全没问题，放到Android真机上测也没问题，但是在iOS上打开后中文显示全部乱码，无论是在小程序还是直接通过微信点开链接都是乱码。但是奇怪的是在iOS的Safari浏览器中却是正常。

经过再三确定过文件编码就是UTF8没错。而且在html的head中也加入了 <meta charset="utf-8">。最后无奈一点一点对比之前的项目的区别，发现之前的项目中的meta是通过http-equiv设置的浏览器编码。

设置后发现显示正常，看来微信-iOS版本中的浏览器内核不是最新的，存在兼容问题，遇到坑的朋友们要注意了。

本地小程序开发工具测试请求接口都很正常，使用预览和真机调试功能在手机上运行请求接口总是失败。

小程序上线后，部分手机请求接口正常，部分手机请求接口失败，将请求接口复制到谷歌浏览器中查询总是成功的。

restful 接口定义为： https://ip:port/bus/:router_name ，其中 router_name 是个变量。实际请求接口为： https://ip:port/bus/993路 ，可以看到：请求地址中的变量 router_name 被 993路 给替换了。问题就出在这里， 请求地址中含有中文 。

在 小程序开发工具 、 谷歌浏览器 和 部分请求成功的手机 上最终发出的请求都会对请求地址中的中文汉字进行编码，如下：

在 开发工具中预览功能 、 开发工具中真机调试功能 和 部分请求不成功的手机 上最终发出的请求并不会对中文进行编码，如下：

上面分析了请求接口失败是因为部分手机没有对请求地址中的中文进行编码，解决方法为利用 js 自带的 api encodeURIComponent() 处理。

有一点需要注意：不能对整个请求地址进行编码，那么的话会对所有除字母、数字以外的符号进行编码，会变成下面这样，实际请求中仍然会报错。

在处理 restful 接口过程中，有一步用具体指（如： 991路 ）替换请求地址中的变量（如： https://ip:port/bus/:router_name 中的 :router_name ），此时先对 991路 进行编码再替换变量值即可。

微信小程序里黑色的编码是 #000000。这是一种十六进制颜色编码，表示红、绿、蓝三原色中红色、绿色、蓝色的色值都为 0，即不含彩色成分，呈现出纯黑色。在微信小程序开发中，可以使用这个编码设置文本、背景、边框等元素的颜色。

---