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創建和運行小程式專案的步驟了
小白第一次寫博客,如有錯誤請指正,感謝
轉載請註明出處,本文鏈接:https://www.uj5u.com/qiye/549908.html
標籤:其他
