開發工具
如果你想開發微信小程式 那你無疑需要下一個微信開發者工具，因為只有這樣你才能把小程式專案跑起來
但微信開發者工具的編碼體驗確實很不好
那我們就可以用一下第三方的編碼工具來撰寫小程式專案
其中有 vscode sublime webstorm 等等前端編輯器可以撰寫小程式專案
檔案結構
如圖所示，無論是page還是組件 都是有四個檔案 其中 wxml是我們的頁面檔案 可以理解為html wxss是我們書寫元素樣式的地方，同比css檔案
js就是pc端的老朋友了，主要撰寫頁面邏輯運行 json主要是我們頁面的一下基本配置
專案的最外層會后一個app.json 如果沒有 那就需要你手動在根目錄上新建一個，
app.json的常用配置項
pages 是一個字串陣列型別，每一個下標代表一個路徑 參考代碼如下
"pages": [
"pages/page/classicl",
"pages/music/music"
],
window 是一個json型別，小程式基本操作配置 主要欄位有
navigationBarBackgroundColor 可以改變導航條演示 默認黑
navigationBarTitleText 可以設定導航條標題
navigationBarTextStyle 設定導航條標題字體顏色 但只能是white(白色)/black(黑色)
navigationStyle 是否需要用小程式提供的導航頭 默認default(需要) custom(不需要)
backgroundColor 設定上拉下拉展示時的空出區域
enablePullDownRefresh 設定開發工具中小程式是否能拉動 默認false(不能) true能
參考代碼如下
"window": {
"navigationBarBackgroundColor": "#FFFFFF",
"navigationBarTitleText": "花樣圖書",
"navigationBarTextStyle": "black",
"navigationStyle": "default",
"backgroundColor": "#FFFFFF",
"enablePullDownRefresh": false
},
tabBar jonso型別，設定小程式底部導航
backgroundColor :設定tab的背景顏色
selectedColor 設定按鍵選中時的文字顏色
color 設定默認按鍵文字顏色
list 型別陣列 里面每一個下標都是一個json物件 每一個json都是一個導航按鈕
list 下的設定項
text 導航名稱
pagePath 點擊導航按鍵需要跳轉的位置
iconPath 按鍵圖片
selectedIconPath :按鍵選中時的圖片
參考代碼如下
"tabBar": {
"selectedColor": "#2828FF",
"backgroundColor": "#FF5809",
"color": "#E1E100",
"list": [
{
"selectedIconPath": "./packageB/images/tab/addvue.jpg",
"pagePath": "pages/page/classicl",
"text": "流行",
"iconPath": "./packageB/images/tab/pgflse.jpg"
},
{
"selectedIconPath": "./packageB/images/tab/play.jpg",
"pagePath": "pages/music/music",
"text": "書籍",
"iconPath": "./packageB/images/tab/suspend.jpg"
}
]
},
subpackages 陣列型別，每個下標是一個目錄 設定小程式分包處理
root 目錄名稱
name 分包代理名
pages 具體檔案
參考代碼如下
"subpackages": [
{
"root": "packageC",
"name": "packageC",
"pages": [
"book/book"
]
}
],
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/290627.html
標籤：其他
上一篇：IEC60870-5-103繼電保護設備資訊介面通信協議測驗方法
下一篇：微信開發工具常用快捷鍵