uniapp-微信小程序篇

一、創建項目(以Vue3+TS 項目為示例)
可以通過命令行的方式創建也可以通過HBuilderX進行創建（通過HBuilderX創建的項目建議選擇最簡單的模板），個人建議使用命令行方式。
(1) 命令行方式：

npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project

如下載失敗：可以直接去gitee官網下載

https://gitee.com/dcloud/uni-preset-vue/repository/archive/vite-ts.zip

(2) HBuilderX 創建

通過HBuilderX沒有默認的Vue3+Ts模板 所以我建議還是使用命令行的方式。

二、配置manifest.json
找到manifest.json文件中的mp-weixin項進行微信小程序基礎配置

"mp-weixin" : {"appid" : "xxxx", // 你的微信小程序appId"setting" : {"urlCheck" : false,"minified" : true,"postcss" : true // 支持postcss預處理},"usingComponents" : true, // 使用組件化"optimization" : { // 進行分包"subPackages" : true},"lazyCodeLoading" : "requiredComponents",// 按需加載"permission" : { // 需要申請獲取的權限"scope.userLocation" : {"desc" : "獲取用戶定位"}}
},

三、配置微信開發者工具
我們使用HBuilderX 開發中需要調試、此時因為微信小程序的工具功能都沒有、所以我們可以通過HBuilderX連接微信開發者工具進行頁面調試。

找到設置下面的代理設置- 設置為使用系統代理

準備好這些就可以開始開發了。

四、分包
當我們項目很大的時候微信小程序會有打包大小限制、所以就需要進行分包處理。
下面我做了一個basePackages分包、pages 是主包(默認)。我們可以根據自己業務需求進行功能代碼差分、可以分出不同的包、這里只是為了做演示。

下面是目錄結構：

對應的pages.json內容為：

{"pages": [{"path": "pages/login/index","style": {"navigationBarTitleText": "登錄"}},{"path": "pages/order/index","style": {"navigationBarTitleText": "訂單","enablePullDownRefresh": true // 支持下拉刷新}},],"subPackages": [{"root": "basePackages", // 此處是分包目錄名稱"pages": [ // 此數組內配置的頁面根目錄所有都默認為basePackages{"path": "order/modifyInfo/index", // 目錄：basePackages/order/modifyInfo/index"style": {"navigationBarTitleText": "修改信息"}},]}],
}

五、注意事項
(1). 微信小程序的taBar 圖標不支持字體圖標、必須使用圖片（否則無效）。
首次開發因為uniapp是支持的、所以使用了字體圖標，一直出不來

"tabBar": {"borderStyle": "white", //邊框顏色"backgroundColor": "#fff", //背景顏色"color": "#000000", //默認顏色"selectedColor": "#1B5BFF", //選中的顏色"fontSize": "14px", // 字體大小"list": [{"iconPath": "static/orderMenu.png","selectedIconPath": "static/orderMenuActive.png","text": "訂單","pagePath": "pages/order/index"},{"iconPath": "static/checkPrice.png","selectedIconPath": "static/checkPriceActive.png","text": "查貨","pagePath": "pages/checkPrice/index"},]
}

六、發版
這里注意一個問題、就是開發完成需要發版的時候、一定要在微信公眾平臺進行服務器域名配置、否則將無法與你的后端服務進行通信。



在此處將你們的后端服務地址配置上（注意還必須是https），沒有配置https的可以自行去你們的服務器（阿里云、騰訊云）申請就好了。