一、項目配置 開發層級結構：  左側是基礎開發，右側是uniapp開發。經過對比，我們只需要掌握了vue框架就可以直接開發，通過uniapp運行到微信開發者工具即可自動編譯成微信小程序基礎開發層級。 其中manifest.json是對uniapp項目進行配置的文件，在微信小程序項目中我們要配置兩點： 1.基礎配置獲取uniapp標識。 通過HBuilder賬號登陸即可點擊按鈕隨機獲取，強制要求。  2.微信小程序配置AppID。 微信小程序AppID，通過微信公眾平臺登錄你注冊的小程序賬號，從開發設置中找到。  設置之后項目才可上傳到微信小程序平臺：  以上都配置完成后，就可以進行頁面制作了。在HBuilder每保存一次，都會進行自動編譯。  同時就可以在微信開發者工具實時查看頁面變化：  二、編輯頁面 直接使用vue單頁面組件進行頁面開發，如果大家沒有接觸過Vue，可以到我往期文章參考一下： 技能學習：學習使用php（tp6框架） + vue.js，開發前端全棧網站-1.工具和本地環境https://blog.csdn.net/m0_51592186/article/details/119379014 —— 技能學習：學習使用golang（gin框架） + vue.js，開發前端全棧網站-1.工具和本地環境https://blog.csdn.net/m0_51592186/article/details/118928189 —— 技能學習：學習使用Node.js + Vue.js，開發前端全棧網站-1.工具和本地環境https://blog.csdn.net/m0_51592186/article/details/116045013 與以往記錄過程不同，之前都是直接完成一個頁面的前后端所有操作，這次先完成所有前端靜態頁面的搭建，后期引入后端接口。 1.新建頁面 所有頁面都在pages中，以往在微信小程序基礎開發過程中，我們多數新建頁面的方法是直接在app.json中添加新頁面路徑，然后自動生成新頁面的文件。 但在HBuilderX中，我們直接在pages頁面中新建頁面即可完成json和文件的新建：  創建一個活動頁面，我喜歡用scss進行樣式設置，不說變量的使用，單單從選擇器層級這一方面就夠我用的了。完成模板選擇后點擊創建：  如果大家對sass框架（css框架）感興趣，可以看我往期文章： 技能學習：學習使用Node.js + Vue.js，開發前端全棧網站-13-1.使用sass工具搭建前臺web端頁面https://blog.csdn.net/m0_51592186/article/details/117250811 —— 此文章中包含了sass的安裝等內容，在HBuilderX新建的uniapp項目中，已經自動安裝了sass工具，直接看下sass使用方法即可。 sass只是一個工具，可有可無。 創建完頁面后，活動頁面已經創建完成。同時page.json中也自動生成了該頁面的路徑，比較方便：  以同樣的方法創建“商城”和“我的”頁面，為大多數小程序的底部導航tabbar做準備。  2.設置底部導航tabbar 在static文件夾新建一個文件夾，準備放tabbar的圖標，我起名為tabbar-icon：  右鍵這個文件夾-在外部資源管理器中打開，去阿里圖標找一些對應四個頁面的圖標：  在page.json中設置tabbar： ``` "tabBar": { "color": "#7A7E83", // 字體選中前顏色 "selectedColor": "#e7a924", // 字體選中顏色 "borderStyle": "black", // 導航欄邊框顏色 "backgroundColor": "#ffffff", // 導航欄背景顏色 "list": [{ "pagePath": "pages/index/index", // 頁面路徑 "iconPath": "static/tabbar-icon/index.png", // 選中前icon "selectedIconPath": "static/tabbar-icon/index_select.png", // 選中后icon "text": "首頁" }, { "pagePath": "pages/activity/activity", "iconPath": "static/tabbar-icon/activity.png", "selectedIconPath": "static/tabbar-icon/activity_select.png", "text": "活動" }, { "pagePath": "pages/store/store", "iconPath": "static/tabbar-icon/store.png", "selectedIconPath": "static/tabbar-icon/store_select.png", "text": "商城" }, { "pagePath": "pages/user/user", "iconPath": "static/tabbar-icon/user.png", "selectedIconPath": "static/tabbar-icon/user_select.png", "text": "我的" }] } ```  此時可觀察頁面變化，點擊導航按鈕測試。如果頁面沒有動，檢查下icon路徑和頁面路徑等設置是否正確：  此時就可以在各個頁面自由發揮了。 3.全局樣式設置 一張圖就能大概理解的內容，就不多bb了：  另外，關于其他樣式也可以到uniapp官網進行查詢，全局樣式設置鏈接[https://uniapp.dcloud.io/collocation/pages.html#globalstyle](https://uniapp.dcloud.io/collocation/pages.html#globalstyle)：  4.界面設置 以下拉刷新為例，我們在首頁加入下拉刷新功能。 ``` "enablePullDownRefresh": true ```  此時在首頁下拉頁面就可以看到刷新樣式，同時這里的背景顏色就是上面全局樣式中的backgroundColor樣式的顏色：  接下來在首頁設置下拉操作后運行的js方法： ``` onPullDownRefresh() { console.log('刷新頁面'); setTimeout(function () { uni.stopPullDownRefresh(); }, 1000); }, // 解釋：onPullDownRefresh()在進行下拉操作時執行其中方法： // 1.日志中顯示“刷新頁面”四個字（可以替換成我們想要進行的操作） // 2.等待1秒后進行關閉下拉樣式的方法stopPullDownRefresh() ``` 放在首頁index.vue中js部分：  測試，沒問題：  最后，如何在不下拉的情況下設置下拉刷新？ ``` uni.startPullDownRefresh() ``` 比如某些數據在更新后頁面需要刷新才可以顯示，但在用戶體驗上，這種情況不該讓用戶自行刷新，所以我們要自動刷新這個頁面。 這是我們只需要封裝一個方法，調用上邊這個uni封裝好的接口，進行下拉刷新。  以上這個過程，就是點擊Uniapp這個圖片，此時觸發刷新方法，然后進行操作的過程，與用戶下拉刷新的操作結果相同。 測試，沒問題：  到此，以上就是小程序頁面制作的基礎方法。我先繼續往下做，定期更新我遇到的工具和效果等問題。