1.準備工作:HbuiderX + 微信開發者工具下載安裝+小程式賬號申請開通(這裡就不例舉了,可以看同賬號uniapp小程式開發準備) 2.創建項目 新版本的HbuilderX點擊新建項目——選擇uni-app——選擇預設模板——輸入項目名稱——選擇Vue版本(此隨筆是前後端分離開發,不使用Uni ...
1.準備工作:HbuiderX + 微信開發者工具下載安裝+小程式賬號申請開通(這裡就不例舉了,可以看同賬號uniapp小程式開發準備)
2.創建項目
新版本的HbuilderX點擊新建項目——選擇uni-app——選擇預設模板——輸入項目名稱——選擇Vue版本(此隨筆是前後端分離開發,不使用UniCloud雲開發)
3.目錄有用介紹
裡面基本包含
pages文件夾——存放頁面,等同於Vue中的view
static文件夾——存放靜態資源,類似於Vue中的assets
App.vue存放每個頁面的公共部分——像是下拉刷新或者分享小程式需要放在App.vue中的生命周期中
index.html——根
main.js——入口文件
* manifest.json——項目配置文件(重要)在裡面可以進行分享功能、小程式的Appid等重要功能配置
pages.json——頁面路由等配置(在創建文件的時候它會自動添加路由,如果使用到分包需要自己去進行修改、以及對整個小程式的表頭或者TabBar等進行配置)
4.配置小程式開發者工具調試
選擇運行——運行到小程式模擬器——運行設置 找到小程式運行配置 —— 點擊瀏覽選擇微信開發者工具.exe 保存後即可
5.配置manifest.json文件
將自己申請的小程式APPID填寫到微信小程式配置中的微信小程式AppID中
6.啟動項目
選擇運行——運行到小程式模擬器——微信開發者工具(第一次啟動會有一些慢且需要自己掃碼登陸,選擇自己當前的小程式項目即可)
7.配置微信開發者工具
右上角詳情進行開發設置
建議開啟將JS編譯為ES5、不校驗合法功能變數名稱其他自動開啟的就不用關閉了
在基本信息可以看到自己的發佈狀態和appid等信息
8.根據需求開發
以上就是UniApp創建和運行小程式項目的步驟了
小白第一次寫博客,如有錯誤請指正,感謝