微信小程序現在很普遍了，如果前端不會小程序，找工作什麼的應該都很受限制的，所以還是要多學點，我也是最近大佬走了，我纔開始自己搭建小程序，比想想中的要簡單很多的
一、 註冊小程序賬號
小程序不同於web，需要通過郵箱單獨註冊小程序的賬號（一個郵箱只能註冊一個哦），必須是你能收到驗證碼的郵箱，後續會有激活，激活之後就是填寫基本信息了，小程序的類型什麼的，可以是個人的也可以是公司的，公司的話需要認證，對公賬戶，企業資質之類的還需要審覈幾天，有點麻煩，還掏了300元的認證費，很坑，但是公司要求的話，還是需要企業認證的（需要和財務對接好），一步一步走就好。
二、使用uni-app搭建小程序框架
用uni-app搭建是有兩種方式的，我一般就直接使用第二種通過vuie-cli命令行安裝，畢竟我們比較熟悉vue
環境安裝
全局安裝vue-cli
npm install -g @vue/cli
創建uni-app
使用正式版（對應HBuilderX最新正式版）
vue create -p dcloudio/uni-preset-vue my-project
此時，會提示選擇項目模板，初次體驗建議選擇 hello uni-app 項目模板，如下所示：
運行、發佈uni-app
npm run dev:%PLATFORM%
npm run build:%PLATFORM%
%PLATFORM% 可取值如下：
| 值 | 平臺 |
|---|---|
| app-plus | app平臺生成打包資源（僅支持npm run build:app-plus，也就是App平臺運行調試不支持cli方式，需在HBuilderX中運行調試） |
| h5 | H5 |
| mp-alipay | 支付寶小程序 |
| mp-baidu | 百度小程序 |
| mp-weixin | 微信小程序 |
| mp-toutiao | 字節跳動小程序 |
| mp-qq | qq 小程序 |
| quickapp-webview | 快應用 |
但是，我們現在就只使用微信小程序，所以就只需要執行mp-weixin的就可以了。截止到現在我們的框架算是搭建好了但是還是不能直接用微信開發者工具打開的，會提示必須打開包含app.json和 project.config.json的文件，那麼我們就開始第三步。
三、配置小程序相關文件
uni-app其實會幫我們構建好對應的文件，我們需要執行npm run build:mp-weixin或者npm run serve:mp-weixin，就會生成一個dist/build/mp-weixin/或者dist/dev/mp-weixin/文件夾，但是小程序並不知道我們入口在哪，所以就有了project.config.json文件
{
"appid": "", // 小程序的id
"compileType": "miniprogram",
"description": "項目配置文件。",
"miniprogramRoot": "dist/build/mp-weixin", // 路徑
"projectname": "", // 名稱
"setting": {
"urlCheck": false,
"es6": false,
"postcss": true,
"minified": true,
"newFeature": true,
"coverView": true,
"autoAudits": false,
"uglifyFileName": true,
"checkInvalidKey": true,
"checkSiteMap": true,
"uploadWithSourceMap": true,
"babelSetting": {
"ignore": [],
"disablePlugins": [],
"outputPath": ""
}
},
"simulatorType": "wechat",
"simulatorPluginLibVersion": {},
"condition": {
"conversation": {
"current": -1,
"list": []
},
"game": {
"currentL": -1,
"list": []
},
"search": {
"current": -1,
"list": []
},
"miniprogram": {
"current": -1,
"list": [// 小程序編譯模式入口
{
"id": 0,
"name": "設備詳情頁面",
"pathName": "pages/Deveice/DeveiceDetails",
"query": "version= '1.0.0'"
}
]
}
}
}
- 小程序的id就去微信小程序平臺中獲取，登陸---> 開發 ---> 開發設置 ---> AppID(小程序ID)
- 路徑的話，其實我們應該有兩個路徑，一個是正常開發的dev的路徑，一個是build之後的路徑，這個部分開個人需求看看有沒有必要改成動態的，我是在package.json中配置好的，把一些不相關的去掉了，加上了一點必要存在的，其中的./src/project.config.dev.json這些都是寫好的在src路徑下的文件，和project.config.json文件幾乎一摸一樣
- 執行npm run serve的時候，把./src/project.config.dev.json複製給project.config.json，就是project.config.json中的路徑miniprogramRoot變爲了 "miniprogramRoot": "dist/dev/mp-weixin",相當於我們展示了測試環境
-
執行npm run build的時候，把./src/project.config.build.json複製給project.config.json，就是project.config.json中的路徑miniprogramRoot變爲了 "miniprogramRoot": "dist/build/mp-weixin",相當於我們展示了打包後的小程序
"scripts": {
"preserve": "cp ./src/project.config.dev.json ./project.config.json",
"serve": "npm run dev:mp-weixin",
"prebuild": "cp ./src/project.config.build.json ./project.config.json",
"build": "npm run build:mp-weixin",
"build:mp-weixin": "cross-env NODE_ENV=production UNI_PLATFORM=mp-weixin vue-cli-service uni-build",
"dev:mp-weixin": "cross-env NODE_ENV=development UNI_PLATFORM=mp-weixin vue-cli-service uni-build --watch"
},
截止到這，我們所有的配置都寫完了，現在使用微信開發者工具導入項目就可以正常打開了
之後我們寫好了自己的代碼，一定要先build一下，要不然包太大了 ，build之後點擊上傳，輸入版本號和項目備註就可以看到體驗版本的小程序了。之後需要提交審覈之類，前提是我們的額小程序上是有東西的，空白提交是不會審覈通過的。也可以添加開發者和體驗者，讓大家看到體驗版的小程序。（小程序有開發版、體驗版、正式版）。