微信小程序案例介绍(微信小程序点赞投票软件)

　　本文通过一个实际例子，来讲解如何进行微信小程序的页面搭建。首先看一下本文要实现的页面效果：

　　开发工具下载

　　微信官方有开发者工具，集成了开发调试、代码编辑及程序发布等功能。 下载地址（https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=20161107）

　　01-

　　微信小程序架构

　　这个就是程序的基本架构。最关键也是必不可少的，是 app.js、app.json、app.wxss 这三个。其中，.js后缀的是脚本文件，.json后缀的文件是配置文件，.wxss后缀的是样式表文件。

　　02-

　　底部标签

　　底部标签是一个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的四个文件进行整合。

　　03-

　　页面标题

　　这个标题如何实现？ 我们翻看一下官方文档。

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

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

　　{

　　"navigationBarTitleText": "功能"

　　}

　　04-

　　轮播图

　　接下来实现顶部的轮播图。微信提供了一个swiper组件来实现轮播图。

　　代码也就出来了：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: [

　　'',

　　'',

　　''

　　],

　　},

　　})

　　没错，微信小程序的轮播图就是这么简单！在这里可能有的同学要问了：“轮播图的图片用的是url地址，如果我想用本地的图片呢？能不能实现？ ”

　　这个官方文档没有介绍，兔子哥经过测试，是可以实现的。代码如下：

　　imgUrls: [

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

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

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

　　],

　　05-

　　中间功能模块

　　中间的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% 来实现每行排列四个功能按钮的效果。

　　06-

　　完整代码

　　下面的布局就比较简单了，直接上完整的代码了：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: [

　　// '',

　　// '',

　　// ''

　　// ],

　　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'

　　})

　　},

　　: function () {

　　console.log('')

　　var that = this

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

　　app.getUserInfo(function (userInfo) {

　　//更新数据

　　that.setData({

　　userInfo: userInfo

　　})

　　that.update()

　　})

　　}

　　})

? ? ? ? ? ? ? ?

　　作者：极乐君 原文：

　　https://zhuanlan.zhihu.com/p/23595493

　　点击“阅读原文”，看更多

　　精选文章

↓↓↓