WXML

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去修改的话，scrol-top, scroll-left的赋值和上一次的值相同，小程序是不会运用这个修改的，所以表现就是设置没有生效。这时只能先设置一个其他值，再设置回去(这里还可以体现setData方法是同步的)。

scroll-view获取scroll位置，只能通过bindscroll的回调函数获取，所以需要取scroll位置的请自行预存好。scroll-view还是有webview的scroll的臭毛病，在居顶位置如果第一个动作是向下滚动的，会导致之后手怎么滑都滚不动，设置scroll-top 不为0，设个1就好了。

<view class="scroll-line">
    <view class="scrollMove" style="left:{{viewleft}}rpx"></view>
 </view>
 
 //滚动触发函数scrollMove
scrollMove: function(e) {
    //获取滚动距离
    var left = e.detail.scrollLeft;
    //将滚动距离（位移）动态添给滚动条的left
    this.setData({
        viewleft: left
    })
}

1.4 input目前只支持文字居左，其他都是不行的(模拟器可以)。如果你做表单，建议把input等表单元素都放在form中，from触发submit时会返回内部所有表单元素的name-value。不然只能绑定所有表单元素的change 事情来获取，甚是麻烦。

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

 <checkbox-group  class="checkcl"  bindchange="checkHandler" wx:key="tid" wx:for="{{todoList}}" wx:for-item="todo" >
   <checkbox  data-time="{{todayTime}}" class="checki" bindtap="ckindex" checked="{{todo.tcheck}}" data-index="{{index}}"></checkbox>
   <text class="checki" data-time="{{todayTime}}" bindtap="cedit" data-index="{{index}}">{{todo.twork}}</text>
</checkbox-group>

checkHandler(e){ //设置当前checkbox的值
let checked =e.detail.value.length;
console.log(checked);
if(checked==1)
{this.setData({checked:true}); }
else
{this.setData({checked:false}); }
},

1.6 map组件目前直接在app第一个页面加载会出现加载失败。需要在onLoad之后再加在。可以先wx:if="false"然后onLoad的之后改成true就行了。

1.7 map, canvas像是在webview上面盖一个native组件的感觉。它们是没法被overflow以及上面盖元素的，你可以认为z-index写多高都没法在他上面。所以不建议在页面上做弹层和蒙层。canvas无法放在scroll-view中滚动会定位在初始位置，如果你给canvas设置背景颜色的话，你会发现背景色块跟着滚了，图没滚。

掘金日新计划&小程序知识合集六

WXML

烟火向星辰，所愿皆成真！