1.環境準備

微信開發者工具：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
前端常用網站集合：http://www.wwp666.cn/
微信小程序開發文檔：https://developers.weixin.qq.com/miniprogram/dev/framework/quickstart/
對app.json的相關配置，參考：https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html

2.創建Coffee項目

2.1 新建JS-基礎模板

如果只是學習，使用測試號即可

文件目錄結構如下

2.2 更改導航欄標題

app.json

"window": {"navigationBarTextStyle": "black","navigationBarTitleText": "Coffee","navigationBarBackgroundColor": "#07c160"}

2.3 新建Page頁面的兩種方式

2.3.1 在app.json配置文件直接寫入

"pages": ["pages/index/index","pages/logs/logs","pages/menu/menu","pages/shopbag/shopbag","pages/my/my","pages/test/test"]

Tips：這種方式有一個Bug，即直接刪除文件夾，第二次使用這種方法生成頁面的話，會有兩個頁面缺失。（不推薦）

2.3.2 手動創建Page頁面

2.4 創建存放圖片資源目錄 images（根目錄）

3.實現底部tab欄

app.json

"tabBar": {"list": [{"pagePath": "pages/index/index", //頁面路徑"text": "首頁", //tab 上按鈕文字"iconPath": "images/icons/home.png", //圖片路徑"selectedIconPath": "images/icons/home_active.png" //選中圖片路徑},{"pagePath": "pages/menu/menu","text": "菜單","iconPath": "images/icons/menu.png","selectedIconPath": "images/icons/menu_active.png"},{"pagePath": "pages/shopbag/shopbag","text": "購物袋","iconPath": "images/icons/shopbag.png","selectedIconPath": "images/icons/shopbag_active.png"},{"pagePath": "pages/my/my","text": "我的","iconPath": "images/icons/my.png","selectedIconPath": "images/icons/my_active.png"}],"selectedColor": "#0c34ba" //選中文字顏色}

擴展：輪播圖組件的使用方式

<!-- swiper 里面只能添加 swiper-item 標簽 -->
<!-- 需要輪播的圖片或者文字只能放在 swiper-item 里面 -->
<!-- 一個 swiper-item 就是一張輪播圖 -->
<!-- 在微信小程序中 {{}} 表示一個變量 -->
<!-- 屬性值不填默認為True -->
<!-- indicator-dots 是否顯示面板指示點-->
<!-- indicator-active-color 當前選中的指示點顏色-->
<!-- autoplay 是否自動切換-->
<!-- circular 是否采用銜接滑動-->
<!-- interval 自動切換時間間隔-->
<!-- duration 滑動動畫時長-->
<!-- vertical 滑動方向是否為縱向-->
<swiper indicator-dots indicator-active-color="#07c160" autoplay circular interval="1000" duration="1000" vertical><swiper-item><image src="https://img2.baidu.com/it/u=3248444863,3972533161&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=1115" mode=""/></swiper-item><swiper-item><image src="/images/icons/home.png" mode=""/></swiper-item><swiper-item><image src="https://img2.baidu.com/it/u=3248444863,3972533161&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=1115" mode=""/></swiper-item>
</swiper>