微信小程序開發環境安裝以及相關設置配置

一.安裝

軟件名稱:wechat_devtools_1.02.1907232_x64

軟件安裝地址:https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

使用官方文檔:https://developers.weixin.qq.com/miniprogram/dev/framework/

二.小程序項目創建以及設置

點創建項目時候其中appid是唯一的需要去自己小程序賬號上查找

下面選項一般不使用雲服務

其中相關設置點擊設置或者右上角詳情可以點出相關設置

其中本地測試需要在右上角詳情→本地設置→不校驗合法域名進行勾選

三.目錄結構

一個小程序主體部分由三個文件組成，必須放在項目的根目錄，如下：

文件	必需	作用
app.js	是	小程序邏輯
app.json	是	小程序公共配置
app.wxss	否	小程序公共樣式表

一個小程序頁面由四個文件組成，分別是：

文件類型	必需	作用
js	是	頁面邏輯
wxml	是	頁面結構
json	否	頁面配置
wxss	否	頁面樣式表

注意：為了方便開發者減少配置項，描述頁面的四個文件必須具有相同的路徑與文件名。

四.常用配置

一.配置項

屬性	類型	必填	描述	最低版本
pages	string[]	是	頁面路徑列表
window	Object	否	全局的默認窗口表現
tabBar	Object	否	底部 tab 欄的表現
networkTimeout	Object	否	網絡超時時間
debug	boolean	否	是否開啟 debug 模式，默認關閉
functionalPages	boolean	否	是否啟用插件功能頁，默認關閉	2.1.0
subpackages	Object[]	否	分包結構配置	1.7.3
workers	string	否	Worker 代碼放置的目錄	1.9.90
requiredBackgroundModes	string[]	否	需要在后台使用的能力，如「音樂播放」
plugins	Object	否	使用到的插件	1.9.6
preloadRule	Object	否	分包預下載規則	2.3.0
resizable	boolean	否	iPad 小程序是否支持屏幕旋轉，默認關閉	2.3.0
navigateToMiniProgramAppIdList	string[]	否	需要跳轉的小程序列表，詳見 wx.navigateToMiniProgram	2.4.0
usingComponents	Object	否	全局自定義組件配置	開發者工具 1.02.1810190
permission	Object	否	小程序接口權限相關設置	微信客戶端 7.0.0
sitemapLocation	String	是	指明 sitemap.json 的位置
style	String	否	指定使用升級后的weui樣式

二.全局樣式設置

app.json文件中window文件中

  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#250",
    "navigationBarTitleText": "YWY",
    "navigationBarTextStyle": "black"
  },

屬性	類型	默認值	描述	最低版本
navigationBarBackgroundColor	HexColor	#000000	導航欄背景顏色，如 #000000
navigationBarTextStyle	string	white	導航欄標題顏色，僅支持 black / white
navigationBarTitleText	string		導航欄標題文字內容
navigationStyle	string	default	導航欄樣式，僅支持以下值： default 默認樣式 custom 自定義導航欄，只保留右上角膠囊按鈕。參見注 2。	微信客戶端 6.6.0
backgroundColor	HexColor	#ffffff	窗口的背景色
backgroundTextStyle	string	dark	下拉 loading 的樣式，僅支持 dark / light
backgroundColorTop	string	#ffffff	頂部窗口的背景色，僅 iOS 支持	微信客戶端 6.5.16
backgroundColorBottom	string	#ffffff	底部窗口的背景色，僅 iOS 支持	微信客戶端 6.5.16
enablePullDownRefresh	boolean	false	是否開啟全局的下拉刷新。 詳見 Page.onPullDownRefresh
onReachBottomDistance	number	50	頁面上拉觸底事件觸發時距頁面底部距離，單位為 px。 詳見 Page.onReachBottom
pageOrientation	string	portrait	屏幕旋轉設置，支持 auto/ portrait / landscape 詳見 響應顯示區域變化	2.4.0 (auto) / 2.5.0(landscape)

• 注 1：HexColor（十六進制顏色值），如"#ff00ff"
• 注 2：關於navigationStyle

三.頁面路由設置

  "pages": [
    "pages/test/test",
    "pages/index/index",
    "pages/logs/logs"
  ],

注意點:

誰在最前面誰當首頁顯示

最后結尾不能有,

四.底部導航欄

"tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首頁",
      "iconPath": "",
      "selectedIconPath": ""
    },
    {
      "pagePath": "pages/test/test",
      "text": "測試",
      "iconPath": "",
      "selectedIconPath": ""
    }]
  }

里面用數組套對象的形式,而且只能配置最少 2 個、最多 5 個 tab。

屬性

屬性	類型	必填	默認值	描述	最低版本
color	HexColor	是		tab 上的文字默認顏色，僅支持十六進制顏色
selectedColor	HexColor	是		tab 上的文字選中時的顏色，僅支持十六進制顏色
backgroundColor	HexColor	是		tab 的背景色，僅支持十六進制顏色
borderStyle	string	否	black	tabbar 上邊框的顏色， 僅支持 black / white
list	Array	是		tab 的列表，詳見 list 屬性說明，最少 2 個、最多 5 個 tab
position	string	否	bottom	tabBar 的位置，僅支持 bottom/ top
custom	boolean	否	false	自定義 tabBar，見詳情	2.5.0

其屬性值如下：

屬性	類型	必填	說明
pagePath	string	是	頁面路徑，必須在 pages 中先定義
text	string	是	tab 上按鈕文字
iconPath	string	否	圖片路徑，icon 大小限制為 40kb，建議尺寸為 81px * 81px，不支持網絡圖片。 當 position 為 top 時，不顯示 icon。
selectedIconPath	string	否	選中時的圖片路徑，icon 大小限制為 40kb，建議尺寸為 81px * 81px，不支持網絡圖片。 當 position 為 top 時，不顯示 icon。

​

五.其他配置

https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#%E9%85%8D%E7%BD%AE%E9%A1%B9