說明：這個系列是我開發微信小程式的過程，更新的時間要看我碼代碼的速度
話不多說～ 直接開始：
首先我們要想好使用者的需求，再開始搭建
需求
發現頁面需求圖如下
① json檔案配置
上篇文章在介紹小程式的架構時，每個頁面都會有json檔案，在json檔案中可以配置目前頁面的視窗資訊。下面來介紹下常用的一些配置。(代碼框可左右上下滑動)
{ "enablePullDownRefresh": true, //是否開啟下拉重新整理 對應js檔案中 "navigationBarBackgroundColor": "#7885e8", //導航欄背景顔色 ,16進制 "navigationBarTitleText": "發現", //導航欄标題内容 "navigationBarTextStyle": "white", //導航欄标題字型顔色 "backgroundColor": "#7885e8" //下拉後視窗拓展部分背景色,一般設定導航欄(預設白色) "disableScroll":false //設定為true,則不能上下滾動,隻在頁面的page.json生效 "onReachBottonDistance":100 //觸發上拉加載方法時距離底部距離(不設定為0)}
②swiper控件 - 輪播圖實作
相對于安卓開發來說，小程式中封裝好了易于開發者操作的視圖滑塊容器，因為swiper元件屬性過多，這裡不一一介紹，有興趣可以研究下開發文檔。
(代碼框可左右上下滑動)
<swiper indicator-dots='{{indicatorDots}}' autoplay='{{autoplay}}' indicator-active-color='{{indicatorSelectColor}}' duration='{{duration}}' circular="true" style="height:175px'> lazy-mode='true' mode='aspectFill' style='height:100%' /> swiper-item> block> swiper>
這裡順帶介紹下image元件，有兩個比較重要的屬性
- lazy-mode : 懶加載，對page和scroll-view下的image才有效。使用者滾動頁面自動擷取更多的圖檔，不會一次性全部加載
- mode : 圖檔剪裁縮放模式，有13種，大家可以根據項目的需求自行選擇。
③頁面跳轉(路由跳轉)
這部分使用的是flex布局，将分類平分頁面寬度即可。這裡較為簡單，不貼代碼了。點選分類跳轉到此分類的頁面，下面來介紹下小程式頁面的跳轉。
wx.navigateTo({ //保留目前頁面 跳轉到其他頁面,url來表明頁面的位址 url: 'test?id=1'}) wx.redirectTo({ //關閉目前頁面,跳轉到其他頁面 url: 'test?id=1'}) wx.switchTab({ //跳轉tabbar頁面,關閉其他所有非tabbar頁面 url: '/index'}) wx.navigateBack({ //傳回之前的頁面,參數delta是傳回的頁面數 delta: 2}) wx.reLaunch({ //關閉所有頁面,跳轉到指定頁面 url: 'test?id=1'})
頁面之間互相跳轉避免不了值傳遞，小程式裡頁面間傳值也是很簡單，小程式提供了屬性data-xxx(名字自取)，可以設定對應的值，通過bintap(點選事件綁定)在對應的方法中擷取到傳遞的值通過url 路徑拼接相應的參數。(代碼框可左右上下滑動)
class= class= class=
// 點選标簽tagClick: function (event) { //綁定點選事件産生event事件,在 console.log(event) //控制台輸出event事件對象 var tagId = event.currentTarget.dataset.index; wx.navigateTo({ url: 'taglist/taglist?tagId=' + tagId, //傳值到下個頁面 })},
④template模闆使用(重要)
考慮到子產品化的複用，小程式提供了template，以發現清單熱門打卡清單為例，将介紹模闆的編寫以及使用。
建立template檔案夾以及item-hot.wxml 與 item-hot.wxss檔案。
編寫wxml檔案(wxss樣式檔案這裡就不貼出來)(代碼框可左右上下滑動)
<template name="hotSignTemplate"> <view class="list"> <view class="personal-info"> <image class="avatar" src="{{headPortrait}}">image> <text class="nickname">{{nickName}}text> view> <image class="sign-cover" mode='aspectFill' src="{{pic}}">image> <text class="sign-title">{{activityName}}text> <view class="sign-info"> <text class="numberop">{{joinNum}}text> <text class="sign-hint1">人參加text> <view class="line2">view> <text class="sign-times">{{dakaNum}}text> <text class="sign-hint1">次打卡text> view> <view class="line3">view> view>template>
頁面引入template 模闆(代碼框可左右上下滑動)
<import src="../template/item-hot/item-hot.wxml" /> <view class="home-item"> <block wx:for='{{signDatas}}' wx:for-item='item'> <view bindtap='tapToDetail' data-id='{{item.id}}'> <template is='hotSignTemplate' data='{{...item}}' /> view> block> view>
wxss檔案也要導入template/item-hot/item-hot.wxss，模闆樣式才能生效
@import "../../template/item-hot/item-hot.wxss";
注意：小程式中template 是不需要在app.json 中注冊的，它隻是作為頁面的組成部分，并不是頁面，也沒有自己的生命周期，當然我們在template中是可以建立item-hot.js和item.json檔案的。
⑤底部 TabBar實作
在上一篇文章中介紹了小程式系統tabbar的配置，小程式提供的tabbar雖然友善，但是不能對其定制，根據要求設定對應的寬高，設定的圖檔看起來也很模糊，在開發時候舍棄了系統提供的tabbar，根據UI要求編寫了自己的tabbar，通過模闆的方式建立template/foot_menu/foot_menu，哪些頁面需要使用直接以模闆的形式引入即可。
wxml檔案：
<template name="footMenu"> <view class="{{isIphoneX ? 'footMenuNavWrap-x':'footMenuNavWrap-normal'}}"> <view class="{{isIphoneX ?'img-text-iphonex':'img-text-normal'}}" bindtap="bindTap" data-index='0'> <image class="menuIcon" src="{{isAtDiscovery ? '../imgs/discovery_select.png' : '../imgs/discovery_normal.png'}}" mode="widthFix" /> <view class="text {{isAtDiscovery ? 'activityText' : 'defaultText'}}">發現view> view> <view class="{{isIphoneX ?'img-text-iphonex':'img-text-normal'}}" bindtap="bindTap" data-index='1'> <image class="menuIcon" src="{{isAtManage ? '../imgs/manage_select.png' : '../imgs/manage_normal.png'}}" mode="widthFix" /> <view class="text {{isAtManage? 'activityText' : 'defaultText'}}">管理view> view> <view class="{{isIphoneX ?'img-text-iphonex':'img-text-normal'}}" bindtap="bindTap" data-index='2'> <image class="menuIcon" src="{{isAtMine ? '../imgs/mine_select.png' : '../imgs/mine_normal.png'}}" mode="widthFix" /> <view class="text {{isAtMine ? 'activityText' : 'defaultText'}}">我的view> view> view>template>
//wxss檔案.footMenuNavWrap-x { width: 100%; display: flex; flex-direction: row; align-items: center; height: 140rpx; position: fixed; bottom: 0; left: 0; background-color: #fff; border-top: 1px solid #F7F7F7;} .footMenuNavWrap-normal { width: 100%; display: flex; flex-direction: row; align-items: center; height: 100rpx; position: fixed; bottom: 0; left: 0; background-color: #fff; border-top: 1px solid #F7F7F7;} .footMenuNavWrap-x .img-text-iphonex { flex: 1; display: flex; flex-direction: column; padding-bottom: 20rpx; align-items: center;} .footMenuNavWrap-normal .img-text-normal { flex: 1; display: flex; flex-direction: column; align-items: center;} .footMenuNavWrap-x .menuIcon { margin-top: 5rpx; width: 38rpx; height: 38rpx;} .footMenuNavWrap-x .text { margin-top: 10rpx; font-size: 24rpx;} .footMenuNavWrap-x .defaultText { color: #333;} .footMenuNavWrap-x .activityText { color: #7885e8;} .footMenuNavWrap-normal .menuIcon { margin-top: 5rpx; width: 38rpx; height: 38rpx;} .footMenuNavWrap-normal .text { margin-top: 10rpx; font-size: 24rpx;} .footMenuNavWrap-normal .defaultText { color: #333;} .footMenuNavWrap-normal .activityText { color: #7885e8;}
你竟然還能看到這裡？
結尾
怎麼樣？是不是挺簡單，哈哈。介紹了月曆打卡小程式首頁的幾個功能點的開發點，今天在寫這篇文的時候也是檢視了小程式的開發文檔，image标簽之前在使用時候還是沒有lazy-mode 懶加載模式，現在已經出現在文檔中。今天先寫到這吧，已經寫了2866字了，頭發要掉光了