微信小程序开发中遇到的坑

1、小程序环境配置的问题

这个坑确实的个大坑，因为这个是开发微信小程序的基础，配置不好就没法使用小程序。

这个问题是首先要解决的，刚开始开发微信小程序，由于设置的不校验域名，所以忽略了这一点，等上线后才发现，里面数据全是空的，因为小程序环境没配置好。小程序环境需要https支持，也就是需要安装ssl证书，然后我就买了证书安装上，参考着百度经验里面的教程，很快就安装好了，一切都设置好后，也能正式访问了。

SSL证书

然后打开微信小程序配置，开启校验域名，结果发现微信小程序里面还是报错，查找报错原因，是因为我配置的SSL证书是TLS1.0，而微信小程序要求是TLS必须大于等于1.2。既然找到了问题，那就去解决它，但是又发现windows2003的系统不支持TLS1.2，无奈只好把服务器系统重装，装成windows2008R2系统，装好后，重新配置环境，重新安装证书，结果装上后，TLS还是1.0。

郁闷了，最后百度查找了很多资料，然后尝试着解决均告失败，正在一筹莫展的时候，突然看到了一篇英文文章，讲的大意就是如何将win2008R2系统ssl证书TLS1.0升级为1.2，赶快按照上面的方法试试，结果还是失败了。怎么回事呢？根据以往的经验感觉应该不是配置的问题，猜测是不是iis配置没生效引起的。为了保险起见，干脆直接重启服务器试试，结果奇迹出现了，升级TLS1.2成功。

2、json格式转换问题

微信小程序接收的数据json数据，所以需要把数据类型转化为json，这个相对比较简单一些，网上有很多转换的代码，直接加上去就可以了。php的json转化代码不多赘述了，值得一提的是asp格式转换为json的时候比较麻烦一些，走了一些弯路，最直接的方法就是拼凑法，将asp的数据拼成json格式就可以了。但是需要注意一些html标签，需要过滤掉，因为微信小程序里面不支持html标签。

3、富文本的问题

微信小程序无法加载html标签，同时数据渲染也无法渲染wxml标签，因为微信小程序本身是不支持富文本的，所以出来的格式很难看，并且给人很呆板生硬的感觉，想像网页一样表现的丰富一些，就需要引入第三方wxParse.js，（至于如何导入，如何使用，网上有很多资料，在此不再多说，很简单，自行百度即可）。因为我开发的用户比较多，有一部分用户已经有电脑站，手机站，微信站了，现在需要在此基础上再开发小程序，那么就需要调用原来的数据库。如果是php+mysql的还好弄点，有些站是asp的，asp在处理富文本这个问题上，比较复杂一点，我的解决方法是，先将asp获取的数据进行过滤，过滤所有不支持的html标签，只保留wxParse支持的一些html标签，然后再引入wxParse.js进行解析，这样就可以了。

4、微信小程序app.json里pages数组中路径顺序问题

这个坑有点深，之前没注意，后来加了底部的tabBar才发现，原来这个顺序和底部的tabBar有很大关系。配置tabBar时，list参数中的pagePath参数至少需要包含app.json里pages数组中的第一个路径，否则会导致tabBar不显示。

5、微信小程序底部菜单tabBar跳转无法带参数问题

开发微信小程序的都会碰到过，就是小程序底部菜单跳转的时候，是不能带参数的，这个问题也很好解决，直接把需要传递参数的页面在跳转前将数据添加到全局数据app.js里。需要接受参数的页面在onShow方法接收之前，添加到app.js的数据就可以了

6、微信小程序使用POST方法请求的问题

这个坑也是不小的坑，微信小程序发起wx.request()方法请求，用get方法请求都没什么问题，但是用post方法请求时，就容易出现这样或那样的问题，原因是wx.request()使用post方法请求时，还需要加上header，header[content-type]值为application/x-www-form-urlencoded，否则请求返回失败。

微信小程序

7、微信小程序中屏幕自适应问题

在设计wxss样式的时候，尽量使用rpx单位，rpx单位是微信小程序中css的尺寸单位，rpx可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。当然微信小程序也支持rem尺寸单位，rem和rpx的换算关系：rem: 规定屏幕宽度为20rem；1rem = (750/20)rpx

8、微信小程序的图片宽度和高度问题

在微信小程序image图片标签中，如果在样式中只设置了图片的宽度，而没设置图片的高度，或者高度设为auto（自动）100%，都会导致图片不显示，必须指定图片的高度才能显示。不过image标签封装了mode属性，可以根据需求自行设置。