微信小程序即将上线,对遇到的问题做个总结。

首先要做到的肯定是微信小程序的文档,主要包括设计、配置、组件、API这些,碰到问题或新的需求要先在这里找解决方案,要注意的是有一些甚至是没办法实现的。小程序开发最大的不同是无法操作DOM,页面上所有的展示以及效果只能通过数据变化来体现,也就是视图层通过数据层控制。

对于新闻类型的应用,新闻列表样式种类可以分出那么几类,通过条件判断可以进行展示。但是对于新闻详情页这种图文混合、位置不定的样式,小程序目前的应对方式比较麻烦,这里借助了开源的wxParse。因为小程序的视图展示只能通过数据层来控制,没办法将包含标签的数据直接展示出来,wxParse可以将HTML字符串解析成类似Dom节点信息的对象,再将此对象解析成小程序的展示。这个应该算是小程序的一个缺陷吧。

图集详情页是一个轮播图,包含多张图片,每张图片有不同的介绍,但是标题是不变的。这里如果直接使用swiper组件,会导致标题会跟着滑动。其实这里的介绍用的是一个字段,每次翻页改变该字段的内容,就可以实现图片的轮播,介绍的变动。

新闻列表已读置灰,这个功能在Web中是很常见的,一个:visited就可以搞定。但是在小程序中,CSS选择器支持也被去掉了很大一部分,伪类选择器仅支持::after::before。在部分组件上使用了hover-class属性实现hover的样式,并不存在visited-class属性,毕竟在小程序中连a标签都没有。
视图层可以通过数据层控制,只需要将阅读过的新闻保存在数据中即可。需要做的是,用view标签加tap方法模拟navigator标签,这样在跳转时候,我们便可以对数据层进行操作。有了这些数据,展示也就没太大问题了。

在小程序的图片image组件中提供了binderror属性,该属性在图片加载失败的时候会触发,但是没有办法控制DOM,意味着即使图片加载失败,也不能直接修改src属性。感觉这个方法存在很是鸡肋,但是想要实现加载失败显示默认图片还是要肯定还是要通过这个方法来解决的。
解决方法就是在数据层找到错误的src,替换成默认图片地址,根据数据层结构的不同,应该有不同的方式。比如新闻列表中,我是将图片位于新闻列表的顺序位置保存在image组件中,这样可以拿到在新闻列表数据的index,不用遍历整个列表。

最后需要注意的应该就是小程序在开发过程中可以使用http,但是在上线时就要换成https,并且同时支持https服务器需要同时支持TLS 1.0、1.1、1.2版本,因为部分手机兼容问题。

小程序开发相对来说是很快捷的,但是有部分功能实现起来不是特别直接,比如HTML字符串转义的问题,图片加载错误问题,在实现过程中感觉就像是为老版本浏览器做着各种hack。
微信小程序并没有之前宣传的那么火热,站在用户角度来说影响不大,作为开发者,简历上多了一项技能,并且据说支付宝小程序也即将上线。