微信扫码登录

其他登录方式

绑定手机号

注册

我同意用户协议

忘记密码

用户协议

绑定手机号

近期有不法分子打着爱盈利的旗号,制作“爱盈利”名称的App,并伪造爱盈利证件,骗取用户信任,以抖音点赞赚钱或其他方式赚钱为名义,过程中以升级会员获得高佣金为名让用户充值。
爱盈利公司郑重声明:我司没有研发或运营过任何名为“爱盈利”的APP,我司做任务赚钱类产品从没有让任何普通用户充值升级会员。我公司产品均在本网站可查询,请将网站拉至底部,点击“关于我们”可查看爱盈利相关产品与服务。
温馨提示:当遇到此类问题请拨打官方电话或添加官方微信,以免财产损失。爱盈利官网地址:www.aiyingli.com。
  • 推广与合作
X

小程序丨微信小程序教程实际案例j详解:页面搭建(附完整代码)

来源:网络 4431


本文通过一个实际例子,来讲解如何进行微信小程序的页面搭建。首先看一下本文要实现的页面效果:
微信小程序教程实际案例j详解:页面搭建(附完整代码)
开发工具下载:
微信官方有开发者工具,集成了开发调试、代码编辑及程序发布等功能。
微信小程序架构:

微信小程序教程实际案例j详解:页面搭建(附完整代码)

这个就是程序的基本架构。最关键也是必不可少的,是 app.js、app.json、app.wxss 这三个。其中,.js后缀的是脚本文件,.json后缀的文件是配置文件,.wxss后缀的是样式表文件。
底部标签底部标签是一个tabBar。实现比较简单,只需要简单配置一下即可。 app.json

{

  "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的四个文件进行整合。

页面标题:

微信小程序教程实际案例j详解:页面搭建(附完整代码)

页面标题这个标题如何实现? 我们翻看一下官方文档。
微信小程序教程实际案例j详解:页面搭建(附完整代码)

看到这里,你应该就知道了,需要在指定页面的json文件中进行页面配置。继续查看官方的文档
微信小程序教程实际案例j详解:页面搭建(附完整代码)


原来如此!我们只需要把所有页面通用的配置放在 page.json,然后在各个page的 .json文件里面配置每个页面特有的属性即可。因为在上面的 app.json 中已经配置了通用页面的 window属性了,我们只需要在function.json中配置页面标题即可:

  1. {

  2.      "navigationBarTitleText": "功能"   

  3.    }


轮播图
接下来实现顶部的轮播图。微信提供了一个swiper组件来实现轮播图。
微信小程序教程实际案例j详解:页面搭建(附完整代码)
代码也就出来了:function.wxml

<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地址,如果我想用本地的图片呢?能不能实现? ”
这个官方文档没有介绍,但是我们经过测试,是可以实现的。代码如下

  1. imgUrls: [

  2.     '../../images/adv_50.png',

  3.     '../../images/adv_60.png',

  4.     '../../images/adv_80.png'

  5. ],


中间功能模块
中间的8个功能模块,类似Android的GridView效果。本文采取循环的方式来实现:function.wxml

<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

}


这里通过width:25% 来实现每行排列四个功能按钮的效果。
完整代码
下面的布局就比较简单了,直接上完整的代码了:function.wxml

<!--function.wxml-->

<scroll-view scroll-y="true" class="container">

  <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>


  <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>


  <view class='divider' />


  <view class='specialities_layout'>

      <view class='view_divider' />

      <text class="specialities_text">特色业务</text>

  </view>

  <image class='bottom-image' src='../../images/app_banner.jpg'/> 

</scroll-view>

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

}

.divider{

    background: #f5f5f5;

    height: 40rpx;

    width:100%;

}

.specialities_layout{

    display:flex;

    flex-wrap: wrap;

    width:100%;

    flex-direction:row;

    margin-left: 16px;

    margin-top:16px;

    margin-bottom: 16px;

}

.view_divider{

    background: #EEA9B8;

    height: 40rpx;

    width:10rpx;

}

.specialities_text {

    margin-left: 8px;

    font-size: 16px;

    height: auto;

    width:auto;

    margin-top: 6rpx;

}

.bottom-image{

    height: 280rpx;

    width:100%;

}

.Absolute-Center {

  margin: auto;

  position: absolute;

  top: 0; left: 0; bottom: 0; right: 0;

}

function.js


//function.js

//获取应用实例

var app = getApp()

Page({

  data: {

    userInfo: {},

    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'

    // ],

    imgUrls: [

      '../../images/adv_50.png',

      '../../images/adv_60.png',

      '../../images/adv_80.png'

    ],

    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'

      }

    ]

  },

  //事件处理函数

  bindViewTap: function () {

    wx.navigateTo({

      url: '../logs/logs'

    })

  },

  onLoad: function () {

    console.log('onLoad')

    var that = this

    //调用应用实例的方法获取全局数据

    app.getUserInfo(function (userInfo) {

      //更新数据

      that.setData({

        userInfo: userInfo

      })

      that.update()

    })

  }

})


以上就是分享给新手的页面搭建的源码内容。希望对大家有帮助




爱盈利(aiyingli.com)移动互联网最具影响力的盈利指导网站。定位于服务移动互联网创业者,移动盈利指导。我们的目标是让盈利目标清晰可见!降低门槛,让缺乏经验、资金有限的个人和团队获得经验和机会,提高热情,激发产品。

【转载说明】   若上述素材出现侵权,请及时联系我们删除及进行处理:8088013@qq.com

评论

相关文章推荐

SELECT dw_posts.ID,dw_posts.post_title,dw_posts.post_content FROM dw_posts INNER JOIN dw_term_relationships ON (dw_posts.ID = dw_term_relationships.object_id) WHERE 1=1 AND(dw_term_relationships.term_taxonomy_id = 5246 ) AND dw_posts.post_type = 'post' AND (dw_posts.post_status = 'publish') GROUP BY dw_posts.ID ORDER BY RAND() LIMIT 0, 6

京ICP备15063977号-2 © 2012-2018 aiyingli.com. All Rights Reserved. 京公网安备 11010102003938号