微信小程序官方文档里看不到的小Tips

1. WXML(HTML)

1.1 小程序的WXML没HTML的宽容度?那么低，单标签所需就是 /> 结尾的。不然可以收起。

1.2 官方所推荐采用的基础标签就是块标签，给了做为文本标签，但是采用其他标签比如说div也就是可以采用的，并且都就是inline标签。并且wxml的parser可以把标签上的无此白名单上的属性都换成，class, id, data 这些必须都在白名单内，但是href什么的就是不能有的，所以如果你用传统的html的标签构筑页面理论上也就是可取的，不过这些都就是inline标签，须要自行预设display。

1.3 scroll-view 的scroll-top, scroll-left 就是可以修正scroll-view的翻转边线的。但是用户自己翻转了之后小程序并不能回去发生改变 scroll-top, scroll-left 的赋值（并不是双向同步的）。如果这时采用setData回去修正的话，scroll-top, scroll-left 的赋值和上时一次的值相同，小程序就是不能运用这个修正的，所以整体表现就是设置没生效。这时就可以先设置一个其他值，再设置回来（这里还可以彰显setData方法就是同步的）。scroll-view 以获取scroll边线，就可以通过bindscroll的反弹函数以获取，所以须要挑scroll边线的恳请自行开卡不好。scroll-view 还是存有webview的 scroll 的臭毛病，在居顶边线如果第一个动作就是向上翻转的，可以引致之后手怎么滚都滑一动，设置scroll-top 不为0，设立个1就不好了。

1.4 input 目前只积极支持文字位居左，其他都就是没用的（模拟器可以）。如果你搞表单，建议把input等表单元素都放到form中，from引爆submit时会回到内部所有表单元素的name-value。不然就可以存取所有表单元素的 change 事情去以获取，甚就是麻烦。

1.5 只有 checkbox-group 存有 change 事件，单个的checkbox就是没的，如果你只有一个checkbox， 真的外面套一个checkbox-group麻烦又不美观的话，可以用 switch type="checkbox" 替代。

1.6 map 成立目前轻易在app第一个页面读取可以发生读取失利。须要在onLoad之后再加在。可以先wx:if="false" 然后onLoad的之后换成 true 就行了。

1.7 map, canvas 像在webview上面砌一个native组件的感觉。它们就是不了被overflow 以及 上面砌元素的，你可以指出z-index写下多低都不了在他上面。所以不建议在页面上搞弹层和蒙层。canvas 无法放到scroll-view中翻转可以定位在起始边线，如果你给canvas设置背景颜色的话，你可以辨认出背景色块跟著滑了，图没滑。

2. WXSS(CSS)

2.1 WXSS 和 CSS很像是，基本所有的CSS都积极支持，小程序还提供更多了 rpx 这个单位。一屏幕阔就是750rpx。所推荐采用这个去做为布局。不过存有一些细小的差别我下面可以列举

2.2 WXSS不积极支持 大括号嵌套（{{}} ）。所以key-frames，CSS animation 就不容用了，不过transition 就是需用的。

2.3 目前测试导入字体也就是不容用的，前面WXML中提及的内容看看SVG也就是不了采用的。所以icon目前就可以用图的方式搞了。

2.4 WXSS中就是无法导入本地资源的, 就可以采用线上资源（模拟器就是可以，但是别信），可以采用base64。

2.5 WXSS的 rule 就是不积极支持集联的。所以无法 body .main {background:#000;} 这么写下。所以写下出来还是比较吃力的。每个class都得很长，不然害怕下文。不过积极支持 li.current {color: red;} 这样的读法，积极支持after， before伪类，但是不积极支持 first-child last-child nth-child 这类伪类。

2.6 app.wxss 和每个 page 的wxss 的全面覆盖关系就是: 如果存有同名 rule 的话，page 可以全面覆盖 app 的，不是merge就是全面覆盖。

3. JS

3.1 JS 的运转环境和view的运转环境就是隔绝的。JS就可以通过事件以获取时机和setData方法修正数据去发生改变view。

3.2 JS 目前有个非常大的问题就是无法以获取至页面px级的宽度高度, 所有事件反弹的单位都就是px级的而不是rpx的，但是又不晓得当前rpx，px的切换关系。比如说过你用canvas画图。你都不晓得边界在哪里，这个很蛋疼。

3.3 上面存有说道过 setData方法如果上一个值和之下一个值相同时，就是不能引爆view修正的（见到1.3）

3.4 采用 navigate 重定向的时候可以采用queryString的方式跟在相对地址上，onLoad事件可以左哨参中传至（可以转化成object），但是 navigate back的时候没一个官方得出的数据通讯机制。可以采用getApp() 以获取至全局对象，给上面加点东西，自行同时实现。navigate 最多5个什么的就不说道了。

3.5 canvas getActions被调用之后，actions就是可以被清空的。即为已连续调用两次getActions，第二次就是空数组。

3.6 开发者工具就是nw写下的，我就看看了看看裙底的源码，开发者工具中WXML的确就是存有parser再组装的过程的。但是并无法表明大工具就是native的，从css的积极支持力度至webview的一些bug相近度来看，我还是真的像是webview，但是组件比如说map，canvas什么的用的就是原生view，然后砌在webview上的感觉。但是不管怎么说道 auto-focus 能够自动呼出来键盘就已经就是个非常大的赞誉了。