微信小程序实现“鲜肉APP”首页效果
2017-08-01 10:36
966 查看
摘要: 由于微信小程序目前是当下趋势,正好昨天弄到了破解版微信web开发工具,所以今天正好试试手。由于我是做iOS的,所以对H5和CSS方面不太了解,代码里面写的丑的地方欢迎吐槽。
项目地址 http://git.oschina.net/djcx/WeiXinXiaoChengXu/tree/master 如果您觉得不错,记得给一个star
由于微信小程序目前是当下趋势,正好昨天弄到了破解版微信web开发工具,所以今天正好试试手。由于我是做iOS的,所以对H5和CSS方面不太了解,代码里面写的丑的地方欢迎吐槽。
WXEXE.gif
. js文件
.js文件相当于ios中的一个控制器,所有的业务逻辑操作都放在该文件中完成,xml页面中显示的数据都从该文件中传入。
.wxml文件
.wxml文件用于写HTML5代码,也就是用来页面布局。
.wxss文件
.wxss文件则是用来处理所有的css样式信息
项目地址 http://git.oschina.net/djcx/WeiXinXiaoChengXu/tree/master 如果您觉得不错,记得给一个star
由于微信小程序目前是当下趋势,正好昨天弄到了破解版微信web开发工具,所以今天正好试试手。由于我是做iOS的,所以对H5和CSS方面不太了解,代码里面写的丑的地方欢迎吐槽。
1.效果演示
WXEXE.gif
2.微信小程序介绍
微信小程序的一个页面主要分成三个部分.js文件.wxml文件和.wxss文件. js文件
.js文件相当于ios中的一个控制器,所有的业务逻辑操作都放在该文件中完成,xml页面中显示的数据都从该文件中传入。
.wxml文件
.wxml文件用于写HTML5代码,也就是用来页面布局。
.wxss文件
.wxss文件则是用来处理所有的css样式信息
3.代码介绍
页面布局代码,由于开发工具的所有接口访问有限制,所以数据都写在了本地,但是最新的破解版开发工具已经处理的这个问题,我也会尽快将死数据改成网络请求下来的数据class = "index"> class = "header-container" > class = "header-swiper" autoplay="true" scroll-x="true" interval="3000" duration="1000"> wx:for-items="{{ adimages }}"> class = "header-swiper-img" src="{{ item.img_url }}" mode="aspectFill" > class = "header-search-img" src="../../images/icon_sshome.png"> class = "scroll-container"> wx:for="{{ result }}" wx:for-index='index' wx:for-item='item'> class = "home-view-sep-ver" style = "float:left"> class = "scroll-view" style = "float:left; flex-direction:row; justify-content: space-around;"> class = "header-cover-img" src = "{{ item.cover }}" mode = "aspectFill"/> class = "home-text-nickname" style = "float:left"> {{ item.nickname }} class = "home-text-city" style = "float:left"> {{ item.city_name }} wx:if = "{{ (index + 1) % 2 == 0 && index != 0}}" class = "home-view-sep-hor" style = "display: inline-block;"> class = "home-invite-container"> class = "home-invite-title" > {{ invite.title }} class = "home-invite-cover" src = "{{ invite.img_url }}" mode = "aspectFill" /> class = "home-invite-content" style = "display: inline-block;" > {{ invite.content }} class = "home-invite-subcontent" style = "display: inline-block;"> {{ invite.subcontent }} class = "scroll-container"> wx:for="{{ recommends }}" wx:for-index='index' wx:for-item='item'> class = "home-view-sep-ver" style = "float:left"> class = "scroll-view" style = "float:left; flex-direction:row; justify-content: space-around;"> class = "header-cover-img" src = "{{ item.cover }}" mode = "aspectFill"/> class = "home-text-nickname" style = "float:left"> {{ item.nickname }} class = "home-text-city" style = "float:left"> {{ item.city_name }} wx:if = "{{ (index + 1) % 2 == 0 && index != 0}}" class = "home-view-sep-hor" style = "display: inline-block;">
相关文章推荐
- 微信小程序实现“鲜肉APP”首页效果
- 微信小程序实现“鲜肉APP”首页效果
- 微信小程序实现验证码获取倒计时效果
- 微信小程序实现折叠展开效果
- Android实现微信首页左右滑动切换效果
- 微信小程序实现蒙版弹窗效果
- 微信小程序实现导航栏选项卡效果
- 微信小程序实现鼠标拖动效果示例
- 微信小程序UI------实现携程首页顶部的界面(弹性布局)
- 微信小程序实现弹幕效果
- 微信小程序实现轮播图效果
- 微信小程序 数据 二级,多级列表展示效果实现
- 微信小程序五星评分效果实现代码
- 微信小程序开发之实现个滚动的效果的两种方法
- 如何在微信小程序中实现今日头条App那样的Topbar
- 微信小程序实现滑动删除效果
- 微信小程序----导航栏滑动定位(实现CSS3的position:sticky效果)
- 微信小程序实现tab和swiper切换结合效果viewpage+tab效果
- 微信小程序左滑删除效果的实现代码