微信小程序學習筆記一

一.微信公衆平臺

1.微信小程序

2.微信公衆號

二.微信小程序的註冊

1.準備一個從沒在公衆平臺和我的微信用過的郵箱 （最好本身再註冊一個全新的郵箱）

2.登陸微信公衆平臺, 進行小程序的註冊. 選擇我的, 而後填寫信息.進行登陸以後, 在首頁，開發中. 而後點擊開發設置 進行獲取 AppID(小程序ID)

三.下載微信開發者工具

1.使用工具

2.使用Visual Studio Code ，配置預處理

1.在項目新建.vscode文件裏面新建settings.json文件，這個文件是使vscode不顯示微信的wxss文件

2.settings.json的代碼

{
  "files.exclude": {
    "pages/**/*.wxss": true,
  }
}
複製代碼

3.在vscode的設置

把下面的代碼放進去就能夠了

"less.compile": {
    "outExt": ".wxss"
  }
複製代碼

4.配置完成後就能夠使用了預處理寫樣式了，你在less中寫的樣式會自動轉換成wxss的

四.小程序和傳統web的結構的區別

1.傳統web結構

1. 標籤 html
2. 樣式 css
3. 邏輯 JavaScript

2.小程序的結構

1. 標籤 wxml
2. 樣式 wxss
3. 邏輯 .js
4. 配置 .json

3.小程序的文件結構的介紹

- pages // 包含了全部頁面
	- index // 頁面文件夾
		- index.js    // 頁面的腳本邏輯文件
		- index.wxml  // 頁面模板文件
		- index.wxss  // 頁面樣式文件
		- index.json  // 頁面配置文件 --->(重要)
		-若是有其餘頁面, 會在今生成
- utils // 普通的工具函數 -->(不須要注意)
- app.js   // 項目啓動入口
- app.json // 全局的配置  --->(重要)
- app.wxss // 全局樣式
- project.config.json // 項目的配置文件
--sitemap.json //控制頁面是否被搜索到的配置文件
複製代碼

4.小程序的全局配置文件app.js

1.pages 配置

(1).能夠表示小程序內有幾個頁面

"pages": [
    "pages/index/index",
    "pages/logs/logs"
  ]
複製代碼

(2).快速新建頁面（在微信開發者工具），直接pages數組中添加一個list頁面

"pages": [
    "pages/index/index",
    "pages/logs/logs",
    "pages/list/list"
  ]
複製代碼

(3).josn文件中不能出現註釋

(4).pages 數組中的頁面路徑地址必須存在pages文件夾中

(5).pages數組中的頁面路徑地址下標爲0，也就是第一個路徑在普通編譯模式下會做爲啓動頁面

2.1window 的屬性

// app.json
{
  "window":{
    "navigationBarBackgroundColor": "#fff", // 導航欄背景顏色 
    "navigationBarTextStyle": "black",      // 導航欄標題顏色，僅支持 black / white
    "navigationBarTitleText": "weChart",    // 導航欄標題文字內容
    "backgroundColor": "#fff",				// 窗口的背景色
    "backgroundTextStyle": "light"，		// 下拉 loading 的樣式，僅支持 dark / light
    "enablePullDownRefresh": true			// 設置容許下拉刷新
  }
}
複製代碼

2.2配置每一個頁面的window

不用加 window屬性

{
  "usingComponents": {},
  "navigationBarTitleText": "11111",
  "navigationBarBackgroundColor": "red"
  
}
複製代碼

3.tabbar 屬性

"tabBar": {
    "color":"#666666",  // 默認字體顏色
    "selectedColor":"#0094ff",  //被選擇的字體顏色
    "backgroundColor":"#ff00ff",  //背景顏色
    "borderStyle":"white",  //tabber的上邊框顏色
    "position":"bottom",  //tabber在頁面的位置 通常在底部
   "list":[
     {
       "pagePath":"pages/index/index", //頁面的路徑，必須在pages配置先
       "text":"首頁",	 //tabber上的文字
       "iconPath":"tabs/tab_home_nor@3x.png", //默認的圖片
       "selectedIconPath":"tabs/tab_home_fill@3x.png"  //被選中的圖片
     },
      {
        "pagePath": "pages/logs/logs",
        "text": "日誌",
        "iconPath": "tabs/tab_my_nor@3x.png",
        "selectedIconPath": "tabs/tab_my_fill@3x.png"
      }
   ]
  
  }
//注意：配置了tabBar後，底部欄只對配置的頁面可見, 並且tabBar的設置至少兩個，最多5個
//tabber上的圖片路徑,不支持網上路徑
複製代碼