案例-制作小程式首頁（一）
上一篇分享了小程式案例，用第三方平台制作小程式頁面操作簡單，拖拽添加元件右鍵編輯即可。
換成“開發者工具”編寫代碼，對比一下差別有多大。
step1：建立項目并梳理項目結構
1.下載下傳軟體，掃碼登入。
2.建立項目
- 輸入項目名稱
- 選擇目錄
- 選擇AppID
- 開發模式預設小程式
- 後端服務勾選不使用雲服務
3.右鍵删除不需要的頁面
step2：配置導航欄效果
點選app.json，修改window内的參數：
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#2b3b5b",
"navigationBarTitleText": "健康生活",
"navigationBarTextStyle":"white"
},
完成了導航欄背景顔色，小程式頭部标題的修改。
step3：配置tabBar效果
"tabBar": {
"list": [{
"pagePath": "pages/home/home",
"text": "首頁",
"iconPath": "pages/image/tab/c1.jpg",
"selectedIconPath": "pages/image/tab/c3.jpg"
},{
"pagePath": "pages/message/message",
"text": "消息",
"iconPath": "pages/image/tab/c2.jpg",
"selectedIconPath": "pages/image/tab/c4.jpg"
},{
"pagePath": "pages/contact/contact",
"text": "我的",
"iconPath": "pages/image/tab/c3.jpg",
"selectedIconPath": "pages/image/tab/c6.jpg"
}]
},
這裡僅僅設定了小程式頭部和底部導航欄，就已經寫了多行代碼，還有輪播圖，九宮格和圖檔布局，留待下期分享。
#輕棧##小程式##開發#
