微信小程序-屎一样的开发体验
2017-05-08 22:28

微信小程序-屎一样的开发体验

微信小程序是微信想要打造一个app体验的web平台,可是其开发过程对于it程序员来说,那真是屎一样的体验。

下面我们列举几点屎一样的体验

事件绑定

<block wx:for="lists">
  <view bindtap='beselect'> {{name}}: </view>
</block>
Page({
     data:{
         lists:[
             {name:"CSS",url:"..."},
             {name:"html",url:"..."},
             {name:"js",url:"..."}
         ]
     },
     beselect:function(){
         
     }
  }
})

上面这是微信小程序中根据lists数组渲染了一个列表,并且列表上面绑定了tap事件,而在tap事件里面我们要想执行对应的点击效果,我们通常需要知道点击的是谁,这时候微信提供了一个event对象。

beselect:function(event){
    var tg=event.target;
    //或者
    var tg=evetn.currentTarget;
}

这样我们获得了触发事件的组件,然而并没有鸟用,在微信小程序里面,我们不能通过类似jquery的形式来修改组件的样式,要通过angular和vue等的形式来修改数据,然后有框架本身根据数据来驱动界面的刷新渲染。而在angular中,我们可以在事件中通过,“this.x”或者“this”来获得对应的数据,直接对数据进行操作即可。

然而微信小程序获得了组件,并没有获得数据,我们仍然要通过组件来获得数据,

<block wx:for="lists">
  <view data-id='{{id}}' bindtap='beselect' class='{{checked?"ischeck":""}}'> {{name}}: </view>
</block>
Page({
     data:{
         lists:[
             {id:1,name:"CSS",checked:true},
             {id:2,name:"html",checked:false},
             {id:3,name:"js",checke:false}
         ]
     },
     beselect:function(event){
         
     }
  }
})

我们需要给组件添加一个data-的属性,这个属性指向数据中的唯一id,然后通过这个id再获得数据

beselect:function(event){
    var tg=event.target;
    var id=tg.dataset.id;
    var lists=this.data.lists;
    for(var i=0;i<lists.length;i++){
        if(list[i].id==id){
            list[i].checked=true;
        }else{
            list[i].checked=false;
        }
        
    }
    this.setData({
        lists:lists
    });
}

简简单单一个改变选中状态的功能,在微信小程序里面要写这么多东西,先要通过event获得事件组件,再在事件组件中获得data-id,然后遍历数据,得到对应的数据设置为true。这还不算完,最后还需要再来个setData的api来设置数据。对于用过angular,vue等框架的前端来说,这微信小程序的就是屎一样。它获得组件,但又不能像jquery一样操作组件,还得通过组件获得数据,数据操作又不能自动更新,要调用api来触发更新。

对于微信小程序的事件绑定的使用感受-屎一样的开发体验。

scroll-view

微信小程序还提供了scroll-view的可滚动组件,这个组件可以横向滚动,也可以纵向滚动。在移动端的页面中,div是不具有overflow:scroll这种功能的,需要借助iscroll的插件来实现滚动,一定意义上来说,微信小程序提供了一个方便的组件。其实呢,它是不提供这个不行,因为在微信小程序里面,我们无法通过js来操作DOM,它甚至没有window,document的对象,而这种局部滚动肯定又是一种常见的需求,所以必须得提供。然而,就这么一个本着方便开发体验的组件,竟然也有屎一样的体验。

<view class='wflex'>
    <view>我的文件</view>
    <view class='wflex-content'>
    <scroll-view class='content-wrapper' scroll-y="true">
        <view wx:for='arrs'>
            ...
        </view>
    </scroll-view>
    </view>
</view>
.wflex{
    display:flex;
    flex-direction:column;
    height:100%:
}
page{
    height:100%;
}
.wflex-content{
    flex:1;
    overflow:hidden;
}
.content-wrapper{
    height:100%;
}

我们使用flex的上下布局对页面进行布局时,下半部分用scroll-view来充当滚动容器,在微信小程序的开发工具中,这个是可以正常运行的。然而在iphone手机上,它竟然是不能滚动的。我本着在之前调试过老版本firfox中的box-flex的竟然,对scroll-view设置absolute定位,它才能有滚动的功能。

.wflex-content{
    flex:1;
    overflow:hidden;
    position:relative;
}
.content-wrapper{
    height:100%;
    position:absolute;
    top:0;
    left:0;
}

设置了absolute的时候,scroll-view才能达到预期效果,这让我严重怀疑微信小程序是不是捡了一些低版本火狐的flex代码。

微信小程序的画布

最后再来看看微信小程序中的canvas画布,微信小程序的canvas画布只能通过style来设置px或者rpx级别的宽高,而canvas操作的api中只能操作px,那么我们对于canvas只能设置像素了。但是canvas没有width,height这样H5中的属性来设置其场景宽高,所以canvas画布的宽度只能设置成320px,因为iphone5是320px宽度的。虽然微信小程序规定屏幕的宽度是750rpx,然后我们给画布设置了750rpx宽后,在js中由于不能操作DOM,不知道画布对于px的宽度,所以为了兼容iphone5,我们能使用的画布宽度还是320px,不能达到屏幕利用率的百分比。虽然他有一个scroll-view,但是他不能在其中添加canvas组件,还是不能好好使用画布。对于微信小程序的canvas的开发体验是-屎一样的开发体验。


对于微信小程序中其他屎一样的开发体验还正在探索中....

原创文章,转载请注明来自:妹纸前端-www.webfront-js.com.
阅读(2841)
辛苦了,打赏喝个咖啡
微信
支付宝
妹纸前端
妹纸前端工作室 | 文章不断更新中
京ICP备16005385号-1