微信小程序上线几天了，趁着周末补了一下JS，然后今天参照文档和教程写了个小demo
看文档就看了一点时间，因为以前没接触过JS框架，但是接触过PHP框架= = ，所以理解小程序的框架也不是很难。
微信小程序虽然是用了JS，但是没有了document对象，用起来就感觉有点别扭，没JS那种DOM操作随心所欲的感觉。。可能是因为暂时还不是很熟悉。
照着教程实现了一下，JS部分倒是没什么太大的问题。
主要是CSS部分，因为教程里面的CSS做的感觉不是很好，所以就自己重写了。
有几个不一样的地方：
1.用的单位是rpx，这个文档里面有介绍，可以自己去查看。位置：框架->WXSS
2.屏幕的宽度是固定750rpx，= = 搞的我还傻乎乎的在想怎么获取屏幕的宽度再然后就行换算。。（不过这个rpx用起来还是很爽的，起码不再需要进行各种分辨率调整了）
3.用到了display: flex;
flex-direction: column;
这两个都是之前没有接触过的（原谅我渣渣）现在有必要好好了解下这个东西。
4.JS没有了DOM操作感觉很不爽的样子。获取用户的输入都有点麻烦（详情见文档中的Q&A）
5.如果需要在组件中绑定数据进行传输，可以使用将属性命名为data-XXX的方式，通过获取event.currentTarget即可获取XXX的值
6.未完待续...
有疑问的地方：
1.在swiper组件中，文档中写明了
swiper-item
仅可放置在<swiper/>组件中，宽高自动设置为100%。
但是为什么我已经设置了swiper的组件宽度为750rpx，swiper-item下的image组件依然在右侧会有空白，即使把swiper-item的padding和margin设置为0也不行，只能把image设置为750rpx才解决。
由于小程序暂时不能跳转外链，所以无法进行详情查看。只能实现到这里了。
上代码：
1 <swiper indicator-dots="true" autoplay="true" interval="1500" duration="1000" class="slide-image-box"> 2 <block wx:for="{{news}}"> 3 <swiper-item> 4 <image src="{{item.thumbnail_pic_s02}}" class="slide-image"/> 5 </swiper-item> 6 </block> 7 </swiper> 8 <view class="news-list"> 9 <block wx:for="{{news}}"> 10 <image src="{{item.thumbnail_pic_s}}" class="news-image"/> 11 <view class="news-content" data-news-index="{{index}}" bindtap="viewInfo"> 12 <text class="news-title">{{index+1}}.{{item.title}}</text> 13 <text class="news-text news-author">{{item.author_name}}</text> 14 <text class="news-text news-date">{{item.date}}</text> 15 </view> 16 </block> 17 </view>
1 Page({ 2 data:{ 3 news:[] 4 }, 5 onLoad:function(){ 6 var that=this; 7 wx.request({ 8 url:‘http://v.juhe.cn/toutiao/index‘, 9 data:{ 10 type: ‘topNews‘ , 11 key: ‘482e213ca7520ff1a8ccbb262c90320a‘ 12 }, 13 header:{ 14 ‘Content-Type‘: ‘application/json‘ 15 }, 16 success:function(res){ 17 if(res.data.error_code == 0){ 18 that.setData({ 19 news:res.data.result.data 20 }) 21 }else{ 22 console.log("获取失败"); 23 } 24 } 25 }); 26 }, 27 viewInfo:function(e){ 28 console.log(e.currentTarget.dataset.newsIndex); 29 } 30 })
1 .slide-image-box{ 2 width:750rpx; 3 height: 422rpx; 4 } 5 .slide-image{ 6 width:750rpx; 7 height: 422rpx; 8 } 9 .news-list{ 10 display: flex; 11 flex-direction: column; 12 padding:20px 10px; 13 } 14 .news-image{ 15 display:flex; 16 width:150rpx; 17 height:100rpx; 18 } 19 .news-content{ 20 position:relative; 21 top:-100rpx; 22 left:180rpx; 23 width:530rpx; 24 height:120rpx; 25 margin-bottom:-60rpx; 26 } 27 .news-title{ 28 font-weight:600; 29 font-size:30rpx; 30 } 31 .news-text{ 32 font-size:24rpx; 33 position:absolute; 34 bottom:0rpx; 35 color:#aaa; 36 } 37 .news-author{ 38 left:0rpx; 39 } 40 .news-date{ 41 right:0rpx; 42 }
同一套代码
iphone6下效果：
iphone5：
iphone4：
三星S5：