用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索
  • TA的每日心情
    无聊
    2017-8-15 16:38
  • 签到天数: 42 天

    [LV.5]常住居民I

    898

    主题

    2087

    帖子

    3万

    金钱

    管理员

    论坛管理员

    Rank: 9Rank: 9Rank: 9

    积分
    0

    突出贡献优秀版主荣誉管理论坛元老

    QQ
    2017-1-11 16:39:43 zhichi_admin 管理员 楼主 216264
    本文通过一个实际例子,来讲解如何进行微信小程序的页面搭建。首先看一下本文要实现的页面效果:

    开发工具下载微信官方有开发者工具,集成了开发调试、代码编辑及程序发布等功能。
    微信小程序架构

    这个就是程序的基本架构。最关键也是必不可少的,是 app.js、app.json、app.wxss 这三个。其中,.js后缀的是脚本文件,.json后缀的文件是配置文件,.wxss后缀的是样式表文件。
    底部标签底部标签是一个tabBar。实现比较简单,只需要简单配置一下即可。 app.json
    [AppleScript] 纯文本查看 复制代码
    {
      "pages":[
        "pages/function/function",
        "pages/pay/pay",
        "pages/account/account",
        "pages/index/index",
        "pages/logs/logs"
      ],
      "tabBar":{
        "color": "#464a56",
        "selectedColor": "#6595e9",
        "backgroundColor": "#FFFFFF",
        "borderStyle": "white",
        "list": [{
            "pagePath": "pages/function/function",
            "text": "功能",
            "iconPath": "images/tab_function_default.png",
            "selectedIconPath": "images/tab_function_sel.png"
        },{
            "pagePath": "pages/pay/pay",
            "text": "收款",
            "iconPath": "images/tab_consume_default.png",
            "selectedIconPath": "images/tab_consume_sel.png"
        },{
            "pagePath": "pages/account/account",
            "text": "账户",
            "iconPath": "images/tab_account_default.png",
            "selectedIconPath": "images/tab_account_sel.png"
        }]
      },
      "window":{
        "navigationBarBackgroundColor": "#6595e9",
        "navigationBarTextStyle":"white",
        "navigationBarTitleText": "V50",
        "backgroundColor": "#eeeeee",
        "backgroundTextStyle":"light"
      }
    }

    值得注意的地方,就是 pages 接受一个数组,每一项都是字符串,来指定小程序由哪些页面组成。每一项代表对应页面的【路径+文件名】信息,数组的第一项代表小程序的初始页面。
    小程序中新增/减少页面,都需要对 pages 数组进行修改。
    文件名不需要写文件后缀,因为框架会自动去寻找路径.json, .js , .wxml, .wxss的四个文件进行整合。
    页面标题这个标题如何实现?

    我们翻看一下官方文档。


    看到这里,你应该就知道了,需要在指定页面的json文件中进行页面配置。继续查看官方的文档



    原来如此!我们只需要把所有页面通用的配置放在 page.json,然后在各个page的 .json文件里面配置每个页面特有的属性即可。因为在上面的 app.json 中已经配置了通用页面的 window属性了,我们只需要在function.json中配置页面标题即可:
    [AppleScript] 纯文本查看 复制代码
     {
         "navigationBarTitleText": "功能"   
       }


    轮播图
    接下来实现顶部的轮播图。微信提供了一个swiper组件来实现轮播图。
    代码也就出来了:function.wxml
    [AppleScript] 纯文本查看 复制代码
    <swiper indicator-dots="{{indicatorDots}}"
        autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
        <block wx:for="{{imgUrls}}">
          <swiper-item>
            <image src="{{item}}" class="slide-image" />
          </swiper-item>
        </block>
    </swiper>
    function.js
    
    //function.js
    Page({
      data: {
        indicatorDots: true,
        autoplay: true,
        interval: 5000,
        duration: 1000,
        imgUrls: [
           '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'
         ],  
      },
    })
    没错,微信小程序的轮播图就是这么简单!在这里可能有的同学要问了:“轮播图的图片用的是url地址,如果我想用本地的图片呢?能不能实现? ”
    这个官方文档没有介绍,兔子哥经过测试,是可以实现的。代码如下
    [AppleScript] 纯文本查看 复制代码
    imgUrls: [
        '../../images/adv_50.png',
        '../../images/adv_60.png',
        '../../images/adv_80.png' 
    ],

    中间功能模块
    中间的8个功能模块,类似Android的GridView效果。本文采取循环的方式来实现:function.wxml
    游客,如果您要查看本帖隐藏内容请回复

    这里通过width:25% 来实现每行排列四个功能按钮的效果。
    完整代码
    下面的布局就比较简单了,直接上完整的代码了:function.wxml
    [AppleScript] 纯文本查看 复制代码
    <view class='function_container'>
        <view class='function_item' wx:for="{{functions}}" wx:for-index="idx" wx:for-item="function">
            <image class='function_img' src='{{function.pic_url}}'/> 
            <view class='function_name'>{{function.name}}</view>
        </view>
      </view>
    function.js
    
    functions: [
          {
            "name": "刷卡消费",
            "pic_url": '../../images/icon_consume.png'
          },
          {
            "name": "提现",
            "pic_url": '../../images/icon_withdrawals.png'
          },
          {
            "name": "交易记录",
            "pic_url": '../../images/icon_records.png'
          },
          {
            "name": "实名认证",
            "pic_url": '../../images/icon_auth.png'
          },
          {
            "name": "飞机票",
            "pic_url": '../../images/icon_airplane.png'
          },
          {
            "name": "火车票",
            "pic_url": '../../images/icon_train.png'
          },
          {
            "name": "手机充值",
            "pic_url": '../../images/icon_phone_recharge.png'
          },
          {
            "name": "水电煤",
            "pic_url": '../../images/icon_water.png'
          }
        ]
    function.wxss
    
    /**function.wxss**/
    .container {
        height: 650px;
    }
    .slide-image{
        display: block;
        height: 280rpx;
        width:100%
    }
    .function_container{
        display:flex;
        flex-wrap: wrap;
        width:100%;
    }
    .function_item{
        width:25%;
        display:flex;
        flex-direction:column;
        justify-content:center;
        align-items:center;
        font-size:12px;
        box-sizing:border-box;
        padding-bottom:10px;
        padding-top:10px
    }
    .function_img{
        width:60px;
        height:60px;
    }
    .function_name{
        padding-top:10px
    }
    作者:Dreawer
    来源:知乎
    著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。



    本帖子中包含更多资源

    您需要 登录 才可以下载或查看,没有帐号?立即注册

    x
    使用道具 举报 回复
    楼主好人,感谢分享
    楼主好人,感谢分享。
    谢谢,好好学习
    啥也不说了,感谢楼主分享哇!
    啥也不说了,感谢楼主分享哇!
    支持楼主,正好学习学习!!
    啥也不说了,感谢楼主分享哇!
    使用、转载或引用本文时必须同时征得该帖子作者和微信小程序开发论坛-咫尺论坛-微信小程序论坛-bbs.zhichiwangluo.com的同意
    4、帖子作者须承担一切因本文发表而直接或间接导致的民事或刑事法律责任
    5、本帖部分内容转载自其它媒体,但并不代表本站赞同其观点和对其真实性负责
    6、如本帖侵犯到任何版权问题,请立即告知本站,本站将及时予与删除并致以最深的歉意
    7、微信小程序开发论坛-咫尺论坛-微信小程序论坛-bbs.zhichiwangluo.com管理员和版主
    - 本文出自微信小程序开发论坛-咫尺论坛-微信小程序论坛-bbs.zhichiwangluo.com,原文地址:http://bbs.zhichiwangluo.com/for ... hread&tid=11881
    学习下学习下学习下学习下
    123下一页
    发新帖
    您需要登录后才可以回帖 登录 | 立即注册
    咫尺论坛|小程序开发社区
    X

    扫码添加专属客服即可随时咨询

    还可领取小程序推广攻略