项目地址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”首页效果的更多相关文章

  1. 微信小程序电商实战-首页(上)

    嗨,大家好!经过近两周的精心准备终于开始微信小程序电商实战之路喽.那么最终会做成什么样呢?当然可以肯定不会只做一个静态demo哦,先把我们小程序电商实战的整体架构发出来晒一下,请看下图:   架构图. ...

  2. 微信小程序里实现跑马灯效果

    在微信小程序 里实现跑马灯效果,类似滚动字幕或者滚动广告之类的,使用简单的CSS样式控制,没用到JS wxml: <!-- 复制的跑马灯效果 --> <view class=&quo ...

  3. 微信小程序与传统APP十大优劣对比

    随着微信公众平台的开放,微信端小程序涌现市场,带来很很多便利和简单的原生操作,询:微信端小程序是否会替代传统的APP应用?两者的优劣如何?我们一起来看看传统APP与微信端小程序十大优劣对比       ...

  4. 微信小程序实现标签页滑块效果

    微信小程序实现标签页滑块效果 小程序完整代码: wxml: <view class="swiper-tab"> <view class="swiper- ...

  5. 微信小程序中的app.js-清除缓存

    微信小程序中的app.js 关于小程序app.js生命周期的介绍 App(Object) App() 函数用来注册一个小程序.接受一个 Object 参数,其指定小程序的生命周期回调等. App() ...

  6. 微信小程序与手机APP区别

    微信小程序与手机APP区别 ------------------<><><><>------------------ 微信小程序自去年年初,张小龙放话要 ...

  7. 微信小程序、安卓APP、苹果APP对比分析

    今天的话题主要是关于微信小程序.安卓APP.苹果APP对比分析.既然是对比分析肯定是将它们一个一个说明. 本篇不涉及技术话题,只讲解微信小程序.安卓APP.苹果APP它们各自的优缺点及其应用场景. 一 ...

  8. 微信小程序唤起其他微信小程序 / 移动应用App唤起小程序

    微信小程序唤起其他微信小程序 / 移动应用App唤起小程序 1. 微信小程序唤起微信小程序 小程序唤起其他小程序很简单 先上链接 小程序跳转小程序 Navigator组件 推荐使用 小程序跳转小程序 ...

  9. 微信小程序制作日常生活首页

    1.手机上效果预览 不知道为啥上传后是如此的高糊画质(手机画质很好) 微信小程序日常生活首页手机效果演示 2.开发者工具效果图 3.真机调试 4.项目的目录结构 5.核心代码 5.1 app.json ...

随机推荐

  1. java中的vo、dto 、dao

    VO是跟数据库里表的映射,一个表对应一个VO  DAO是用VO来访问真实的表,对数据库的操作都在DAO中完成  BO是业务层,做逻辑处理的 VO , PO , BO , QO, DAO ,POJO  ...

  2. 你不知道的 flex 技巧

    一.使用 Auto Margins 对齐 不需要给图片使用任何的 flex,也不需要给父容器设置 space-between,只需要给 ' BUY-BUY-BUY' 按钮设置 margin-left: ...

  3. [leetcode-554-Brick Wall]

    There is a brick wall in front of you. The wall is rectangular and has several rows of bricks.The br ...

  4. 【LeetCode】217. Contains Duplicate

    题目: Given an array of integers, find if the array contains any duplicates. Your function should retu ...

  5. 【Android Developers Training】 40. 序言:通过NFC共享文件

    注:本文翻译自Google官方的Android Developers Training文档,译者技术一般,由于喜爱安卓而产生了翻译的念头,纯属个人兴趣爱好. 原文链接:http://developer ...

  6. 【Android Developers Training】 28. 将用户带领到另一个应用

    注:本文翻译自Google官方的Android Developers Training文档,译者技术一般,由于喜爱安卓而产生了翻译的念头,纯属个人兴趣爱好. 原文链接:http://developer ...

  7. Delegate(委托)

    在前面lambda章节中稍微提了一下委托,今天这章就让我们来深究一下委托. 委托的本质是一种类,他是继承MulticastDelegate类的. 而声明委托的关键字的delegate,如:public ...

  8. javascript精度问题与调整

    一个经典的问题: 0.1+0.2==0.3 答案是:false 因为:0.1+0.2=0.30000000000000004 第一次看到这个结果就是无比惊讶,下巴碰到地上,得深入了解下问题出在哪里,该 ...

  9. 原生ajax封装,数据初始化,

    var ajaxTool = { setting : { method : 'get', url : location.href, data : '', callback : function(){a ...

  10. webpack认识

    1 webpack是什么? CommonJS和AMD是用于JavaScript模块管理的两大规范,前者定义的是模块的同步加载,主要用于NodeJS:而后者则是异步加载,通过requirejs等工具适用 ...