微信小程序简单demo
2016-09-25 13:45
696 查看
详细的文档以及介绍可以参考官方文档.开发微信小程序需要一些前端开发基础.
一.wxml文件
二.wxss文件
三.js文件
有什么问题欢迎大家微信与我交流沟通,点击这里下载源码.
wx:656593047
一.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
相关文章推荐
- 微信小程序 简单DEMO布局,逻辑,样式的练习
- 微信小程序之最简单的Demo设计使用
- 微信小程序 简单DEMO布局,逻辑,样式的练习
- 微信小程序picker组件简单用法示例【附demo源码下载】
- 微信小程序之最简单的Demo设计使用
- 微信小程序破解IDE+DEMO
- 微信简单Demo
- Ogre简单的demo程序 入门必备
- ANDROID例子程序(ApiDemo)简单分类整理
- 微信小程序(应用号)简单实例应用及实例详解
- input(type="file")+Handler(一般处理程序)上传文件简单Demo
- Win(Phone)10开发第(3)弹,简单的Demo程序网络请求json解析列表显示
- android例子程序(ApiDemo)简单分类整理
- 微信小程序简单教程
- 微信小程序--简单页面跳转
- Ubuntu下面的一个简单的C++程序——My first C++ demo in Linux
- 简单的在OMAP3530上运行OpenGL ES 的Demo程序
- [每天一个demo]用c#实现简单的上传文件程序
- java.util.concurrent多线程简单demo及计算多线程程序运行时间
- 简单http接口对接微信功能DEMO,仅供参考