您的位置:首页 > 移动开发 > 微信开发

微信小程序简单demo

2016-09-25 13:45 696 查看
详细的文档以及介绍可以参考官方文档.开发微信小程序需要一些前端开发基础.

一.wxml文件

<scroll-view scroll-y="true" style="height: 100%;" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll">

<modal title="提示" confirm-text="确定" cancel-text="取消" hidden="{{modalHidden}}" mask bindconfirm="modalChange" bindcancel="modalChange">
{{modalText}}
</modal>
<!--banner-->
<view>
<swiper indicator-dots="{{indicatorDots}}" vertical="{{vertical}}"
autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
<block wx:for-items="{{image_one}}">
<swiper-item>
<image src="{{item}}" class="swiper-item" width="100%" height="200px"/>
</swiper-item>
</block>
</swiper>
</view>

<!--body-->
<view class = "body-view" >
<block wx:for-items="{{datas}}" wx:for-item="item">
<view id="{{index}}" bindtap="click_to_Video">
<image style = "width: 100%; height: 200px; background-color: #eeeeee;"  src = "{{item.coverForDetail}}" ></image>
<text style = "font-size: 14px"> {{item.title}} </text>
</view>
</block>
</view>

</scroll-view>


二.wxss文件

.swiper-item{
display: block;
height: 200px;
width: 100%;
background-color: red;

}

.body-view {
margin-top: 10px;
padding-left: 5px;
padding-right: 5px;
}


三.js文件

Page({

data:{

//swiper datas
image_one: [
'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
],
//swiper settings
indicatorDots: true,
vertical: false,
autoplay: true,
interval: 3000,
duration: 1200,

//body
datas: [],
//modal
modalHidden: true,

//data end
},

//view load
onLoad :function() {

var self = this;
console.log("begin load");
//network request
wx.request( {
url: 'http://baobab.wandoujia.com/api/v1/videos?start=0&num=10&categoryName=旅行&strategy=shareCount',
header: {
"Content-Type": "application/json"
},
method: "GET",
data: {
// start: '0',
// num: '10',
// categoryName: '旅行',
// strategy: 'shareCount'
},
success: function( res ) {
//get data
var newData = res.data;
console.log( newData.videoList );
self.setData( {
datas: newData.videoList
})
self.update()
}
});
},

// scrollView EventHandler
upper: function(e) {
console.log(e)
},
lower: function(e) {
console.log(e)
},
scroll: function(e) {
console.log(e)
},

//click_to_Video
click_to_Video :function(prama) {
console.log("跳转");
var menuItem = this.data.datas[parseInt(prama.currentTarget.id)]
console.log(prama);

wx.navigateTo({
url: '../myVideo/myVideo' ,
success: function () {
console.log("点击了第" + prama.currentTarget.id + "个" + menuItem.title + "播放地址:" + menuItem.playUrl);
}});

},

//modal changed
modalChange: function(e) {
this.setData({
modalHidden: true
})}

})


有什么问题欢迎大家微信与我交流沟通,点击这里下载源码.

wx:656593047
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: