微信小程序之首页搭建
小程序開發與實戰
學習視頻：
https://www.bilibili.com/video/BV1Gv411g7j6?p=9&spm_id_from=pageDriver
實現導航欄和tabBar
實現導航欄和tabBar。tabBar看下圖：
參考文檔：
https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html
所有的屬性對應的信息都可以在參考文檔里面查看。
導航欄
app.json文件，內容是一個json對象，即是以key-value形式存在。所有的key必須要用雙引號包括起來，值可以是各種類型，不如字符串、數組、對象等。
在app.jason中
配置屬性entryPagePath
這個可以配置啟動首頁。如果不配置，就默認page的第一個路徑為啟動首頁。
刪除自帶的logs頁面
1、 刪除app.json文件里面的pages下的logs路徑配置；
2、 刪除logs目錄
首先刪除pages下面的路徑，不然直接去刪除logs文件的話，一刷新，程序就自動給你配置回來了。
刪除logs文件：右鍵–>刪除–>移動到回收站
配置pages屬性
默認情況下，自帶了兩個頁面；只要在pages里定義了頁面路徑，就會生成對應的頁面。
格式：“pages/頁面文件夾名稱/頁面文件名稱”，而這兩個名稱要一致
所有的路徑必須以pages開頭
根據上邊的圖，創建咨詢（consult）路徑、課程（course）路徑、我的（mine）路徑
配置window屬性
用于設置小程序的狀態欄、導航條、標題、窗口背景色。
navigationBarBackgroundColor：設置導航欄背景顏色，默認值是#000000黑色。16進制的。
比如設置其他顏色，可以用取色器去獲取然后設置。
navigationBarTextStyle：設置導航標題顏色，默認是白色。但是僅支持黑色和白色。
navigationBarTitleText：設置導航欄標題文字內容。
backgroundColor：設置窗口的背景顏色，默認是16進制的白色。正常是看不到窗口的背景色的，因為被頁面擋住了，當我們下拉頁面的是時候才能看到。（微信朋友圈下拉看朋友圈）
backgroundTextStyle：下拉loading的樣式，默認是白色，僅支持黑色（dark）和白色（light）。這個也是看不到的，和上面那個屬性一樣。
下拉刷新和上提加載
enablePullDownRefresh：是否開啟全局的下拉刷新，默認是false不開啟。是boolean類型的。
onReachBottomDistance：頁面上拉觸底時間出發時距頁面底部距離，默認是50，單位為px。（微信朋友圈往上拉）
tabBar
tabBar：底部tab欄的表現。如果小程序是一個多tab應用（可以切換頁面），可以通過tabBar配置項指定tab欄的表現，以及tab切換時顯示的對應頁面。
list屬性：tab的列表，詳見list屬性說明，最少2個最多5個tab
pagePath：頁面路徑，在list里面寫，必須在pages中先定義。
iconPath：圖片路徑，大小限制為40kb，建議尺寸但不一定為81px×81px，不支持網絡圖片。而且當position為top時不顯示icon。在list里面寫。
selectdIconPath：選中的圖片路徑，icon大小限制為40kb，不支持網絡圖片。而且當position為top時不顯示icon。在list里面寫。
color：tab上的文字默認顏色，僅支持16進制的顏色。
selectedColor：tab上的文字選中顏色，僅支持16進制顏色。
backgroundColor：tab的背景色，僅支持16進制顏色。
BorderStyle：tabBar上邊框的顏色，僅支持黑色和白色。
custom：自動義tabBar。默認為false
position：設置tabBar的位置，在且僅支持頂部或者底部。
圖片資源
在根目錄下創建images文件夾，然后把需要的圖片素材粘貼進去。注意：不支持Ctrl+C和Ctrl+V這種模式的復制粘貼。
然后在images上右鍵–?在資源管理器中打開，將剛剛復制的圖片復制進去
然后修改
效果：這個還可以點擊切換
但是顏色跟圖片有差異，所以還要改字體顏色。用取色器取色
效果：
首頁---->頂部搜索框
搜索框由兩個容器組成。一個外部容器包裹著一個內部容器。
在微信小程序中，定義容器使用的是view。可以在view里面定義內容。
微信小程序一個頁面對應四個文件，js文件、json文件、wxml文件和wxss文件
js文件：js文件； json文件：配置文件（app.json/index/course……）； wxml文件：HTML文件 ； wxss文件：css文件
注意：.json是配置文件，其內容必須符合json格式內部不允許有注釋。
JSON有兩種數據結構：
名稱/值對的集合：key : value樣式；
值的有序列表：就是Array；
而在JSON的文檔中說明只要是不符合上面兩種結構的都不被支持，并提示錯誤
所有的注釋都是Ctrl + / 作為快捷鍵
1、 刪除index.wxml自帶的demo代碼
2、 在index.wxml文件中定義兩個嵌套view，布局容器的特點：整個容器占據100%視口。
3、 引入view圖片和文字。在微信小程序中定義圖片使用的是image組件；定義部分文字用條text標簽。View屬性特點：獨占一行
a) 首先引入圖片
b）寫代碼。在pages–>index–>index.wxml
4、實現樣式。微信小程序中的樣式都是寫在對應的wxss文件中。
設置圖片大小，首先刪除index.wxss里自帶的demo樣式代碼
設置搜索文字大小和樣式
在pages–>index–>index.wxss中
首頁---->輪播
微信小程序中提供了輪播圖組件：
https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html
swiper屬性：滑塊視圖容器。其中只可放置swiper-item組件，否則會導致未定義的行為。
從官方文檔中復制swiper，WXML放在index.wxml中再修改
JAVASCRIPT放在index.js中再修改。但是得把index.js中的data數據先刪除再復制進去
輪播圖需要用的這三張圖片，將這三種圖片復制放到images文件夾中
設置自動輪播。通過swiper相關屬性設置
pages–>index–>index.wxml中。在view結束標簽下面另起輪播代碼，別放錯位置。
pages–>index–>index.js中。找到data數據，別亂放位置
// 輪播jsdata: {imgURLs: ['/Images/img1.png', '/Images/img2.png', '/Images/img3.png'],indicatorDots: true,vertical: false, //滑動方向是否為縱向autoplay: true, //是否自動切換interval: 3500, //自動切換時間間隔duration: 500, //滑動動畫時長activeColor:"#ffffff", //當前選中的指示點顏色circular:true // 是否采用銜接滑動},pages–>index–>index.wxss中
/* 輪播 */ swiper image {width: 750rpx;height: 400rpx; }效果：
首頁---->導航菜單
需要用到的圖
pages–>index–>index.wxml中
pages–>index–>index.wxss中
/* 導航菜單 */ #navView{display: flex; /* 應用flex布局 ，所有的子元素排在一行*/flex-wrap: wrap; /* 換行*/height: 464rpx;align-content: space-around; /* 多行垂直排列*/ font-size: 26rpx;font-weight: 600; } .navItemView{width: 150rpx;text-align: center;margin: 0 50rpx; } .navItemView > image{width: 150rpx;height: 150rpx; }效果：
首頁---->在線客服
需要用到的圖片
pages–>index–>index.wxml中
<!-- 在線客服 --> <view id="onlineView"><image src="/Images/@2x_zixunpeixun.png"></image><text> 咨詢助理在線客服</text><!-- 右箭頭實現 --><view class="arrow"></view> </view>1、pages–>index–>index.wxss中，在這幾處加上背景顏色的樣式
/* 整體樣式 */ page{background: #F1EEF5; } /* 在線客服 */ #onlineView{height: 88rpx;background: #FFFFFF;margin: 24rpx 0;padding: 0 30rpx;line-height: 88rpx;position: relative; /* 相對定位，讓父元素具有定位屬性 */ } #onlineView > image{width: 60rpx;height: 60rpx;vertical-align: middle; } #onlineView > text{font-size: 26rpx;font-weight: 600;vertical-align: middle; } /* 右箭頭 */ .arrow{width: 16rpx;height: 16rpx;border-top: 4rpx solid #B1B1B1;border-right: 4rpx solid #B1B1B1;transform: rotate(45deg); /* 旋轉45度 */position: absolute; /* 絕對定位，相對于父元素進行定位，前提父元素必須具有定位屬性 */right: 30rpx;top: 38rpx; }2、還有加上給兩個地方加上背景顏色
效果：
首頁---->精選文章
首先還是需要用到的圖片
pages–>index–>index.wxml中
pages–>index–>index.wxss中
/* 精選文章 */ #hotArticleView{padding: 0 30rpx;background: #FFFFFF;margin-bottom: 24rpx; } #hotArticleTitleView{height: 88rpx;font-size: 30rpx;font-weight: bold;border-bottom: 1rpx solid #F1EEF5;line-height: 88rpx; } .articleView{display: flex;padding: 30rpx 0;border-bottom: 1rpx solid #F1EEF5; } .articleView image{width: 120rpx;height: 120rpx;margin-right: 20rpx; } .articleTitle{font-size: 28rpx;font-weight: bold;line-height: 50rpx; } .articleDesc{font-size: 26rpx;color: #B7B7B7;line-height: 35rpx; } /* 精選文章---查看更多 */ #moreView{height: 88rpx;line-height: 88rpx;font-size: 28rpx;color: #a39f9f;position: relative; }效果：
首頁---->請求回答
用到的圖片
pages–>index–>index.wxml中
pages–>index–>index.wxss中
/* 請求回答 */ #askView {position: fixed;bottom: 100rpx;right: 10rpx; } #askView > image{width: 100rpx;height: 100rpx; }整體效果圖
總結
以上是生活随笔為你收集整理的微信小程序之首页搭建的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 数据库之逻辑设计阶段（候选码、主码、外码
- 下一篇： ssti练习之[CSCCTF 2019