微信小程式(1)

準備工作

1 獲取 AppID(小程式ID) 

	登入微信公眾平臺,新建一個郵箱,避免舊有的郵箱有註冊過公眾號等.無法獲取.  進行小程式的註冊.  選擇個人, 然後填寫資訊.進行登入之後, 在首頁, 設定中. 然後點選開發設定 進行獲取  AppID(小程式ID) 



2 下載安裝開發工具

開發工具下載地址：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

建立一個自己的微信小程式

完成上面之後,我們就擁有了一個 appID 與工具.

點選開啟,工具 根據下面的資訊進行填寫,記的保證自己的版本的更新

瞭解工具的日常使用與檔案構成

切換開發模式

 當我們工作中在開發小程式的同時也在開發微信公眾號 , 則必須進行切換開發者模式, 在頂部微信開發者工具中_--> 有更換開發者模式-->公眾號網頁除錯

新增和修改編譯模式

當我們需要修改 初始化時 顯示的頁面時, 則需要進行更改啟動頁面. 我們可以通過在 app.json 中的 pages 中 切換路徑的順序進行 切換(不推薦). 或者通過 在編譯模式下 新增一個編譯模式. 進行 切換. 



預覽和真機除錯

預覽除錯：開發者可以通過手機掃描預覽提供的二維碼來訪問小程式

真機除錯：和預覽一樣會提供訪問的二維碼，不同的是真機除錯模式會彈出控制檯，可以檢視手機模式下的除錯資訊

清除快取

有選項的刪除 快取資訊 清除本地的授權記錄、sessionStorage和localStorage等快取資料 . 

右上角詳情

則可以檢視自己依賴的庫是什麼版本, 版本過低可能會影響使用

注意版本庫的選擇，不要輕易去修改這個配置，很容易導致專案的api不相容
 

小程式的檔案結構介紹

基本的結構

- pages // 包含了所有頁面
	- index // 頁面資料夾
		- index.js    // 頁面的指令碼邏輯檔案
		- index.wxml  // 頁面模板檔案
		- index.wxss  // 頁面樣式檔案
		- index.json  // 頁面配置檔案 --->(重要)
		-如果有其他頁面, 會在此生成
- utils // 普通的工具函式 -->(不需要注意)
- app.js   // 專案啟動入口
- app.json // 全域性的配置  --->(重要)
- app.wxss // 全域性樣式
- project.config.json // 專案的配置檔案
 

和web的頁面結構比較：

檔案 小程式 web 模板 .wxml .html 樣式 .wxss .css 指令碼 .js .js/script標籤

注意：微信小程式頁面目錄下，.js 和  .wxml 檔案是必需的

專案的json檔案配置

參考文件的地址Title

pages配置

pages 陣列中的頁面路徑地址必須存在pages資料夾中

pages 陣列中的頁面路徑地址下標為0，也就是第一個路徑在普通編譯模式下會作為啟動頁面，但不建議使用更換順序的方式修改啟動頁， 可以通過新增或修改編譯模式更改啟動頁

window配置示例

// app.json
{
  "window":{
    "navigationBarBackgroundColor": "#fff", // 導航欄背景顏色 
    "navigationBarTextStyle": "black",      // 導航欄標題顏色，僅支援 black / white
    "navigationBarTitleText": "weChart",    // 導航欄標題文字內容
    "backgroundColor": "#fff",				// 視窗的背景色
    "backgroundTextStyle": "light"，			// 下拉 loading 的樣式，僅支援 dark / light
    "enablePullDownRefresh": true			// 設定允許下拉重新整理
  }
}

注意： window的配置
1. navigationBarTextStyle導航欄標題顏色，僅支援 black / white
2. backgroundTextStyle下拉 loading 的樣式，僅支援 dark / light

tab Bar 配置示例

// app.json
{
  "tabBar": {
  	"color": "#000",					// tab 上的文字預設顏色
  	"selectedColor": "#000",			// tab 上的文字選中時的顏色
  	"backgroundColor": "#f5f5f5",		// tab 的背景色
    "list": [{
      "pagePath": "pages/index/index",	// 頁面路徑，必須在 pages 中先定義（必填）
      "text": "首頁",					// tab 上按鈕文字（必填）
      "iconPath": "",					// tab 上的圖片路徑,不支援網路圖片
      "selectedIconPath": ""			// 選中時的圖片路徑
    }, {
      "pagePath": "pages/logs/logs",
      "text": "日誌",
      "iconPath": "",					
      "selectedIconPath": ""		
    }]
  }
}

注意：配置了tabBar後，底部欄只對配置的頁面可見, 而且tabBar的設定至少兩個，最多5個

WXML 模板檔案和元件

新建頁面

1 通過app.json來新建    2  編輯器手動建立

wxml和html的不同點

1. 標籤名字不一樣，如html裡常用的標籤 div、a、span等，在小程式裡標籤是view、navigator、text等，除了常用的元素塊標籤，小程式還提供了地圖，視訊，音訊等元件
2. 可以通過表示式{{ }}渲染狀態資料

元件(不稱為標籤稱為元件)

元件文件地址 Title

元件共同屬性型別

所有元件都有的屬性：

屬性名 型別 描述 註解 id String 元件的唯一標示 保持整個頁面唯一 class String 元件的樣式類 在對應的 WXSS 中定義的樣式類 style String 元件的內聯樣式 可以動態設定的內聯樣式 hidden Boolean 元件是否顯示 所有元件預設顯示 data-* Any (任意屬性) 自定義屬性 元件上觸發的事件時，會發送給事件處理函式 bind* / catch* EventHandler 元件的事件 詳見事件

元件的介紹

view (塊級容器相當於 div)

<view class="container">
	<!-- 頁面內容 -->
</view>

text (相當於 sapn) 

注意: span中可以放置div 雖然不推薦, 但是 text 只能 放置其 自己

1. 基礎庫版本低於 2.1.0 時， text 元件內嵌的 style 設定可能不會生效

2. text元件內只支援 text 巢狀

3. 除了文字節點以外的其他節點都無法長按選中

   111

   navigator

注意: 0 navigator是不能跳轉至 外部連結的

1  wep 中的a標籤使用的是href 但是 微信小程式的元件 中的 則是 url 

2 注意點是, 需要使用 絕對路徑  ( / )  在url前加 / 

3 當你的 tabBar中 有使用 了哪個 頁面的路徑 需要跳轉的話 必須新增 

	open-type :' switchTab '   不然不會起作用

	open-type 常用的有效值

		redirect 		  覆蓋當前頁面

		switchTab	  跳轉到tabBar頁

		navigateBack  關閉當前頁面，返回上一頁面 ( 設定這個值的話, 當你單擊這個連結時會關閉當前的頁面, 跳轉回上一頁面  但是 跳轉的頁面兩個都有 在tabBar 就不能返回的)

<navigator url="/pages/demo/domo">

		跳轉到demo

</navigator>

image圖片元件

image的基本使用

<image 
	style="width: 200px; height: 200px;
	mode="aspectFill" 
	src="圖片地址">
</image>

注意：image元件預設寬度300px、高度240px 注2：image元件中二維碼/小程式碼圖片不支援長按識別

常用的mode 有效值

• scaleToFill 不保持縱橫比縮放圖片，使圖片的寬高完全拉伸至填滿 image 元素 aspectFit 保持縱橫比縮放圖片，使圖片的長邊能完全顯示出來 aspectFill 保持縱橫比縮放圖片，只保證圖片的短邊能完全顯示出來

  注意：微信朋友圈和QQ的說說頁的圖片裁剪方式，可以通過設定 mode=aspectFill 實現類似功能

form表單元件

form元件包含了以下常用的子元件

• input 輸入框元件 label 表單欄位說明元件 checkbox 多項選擇器元件 radio 單項選擇器元件 button 按鈕元件

  上述表單的子元件除了button都有name屬性，給表單提供欄位名的對映

input輸入框元件

input的簡單使用

<input placeholder="請輸入文字" type="text"/>

input常用的屬性

屬性 型別 預設值 說明 value String 輸入框的初始內容 type String “text” input 的型別 password Boolean false 是否是密碼型別 placeholder String 輸入框為空時佔位符 disabled Boolean false 是否禁用

input type 有效值

值 說明 text 文字輸入鍵盤 number 數字輸入鍵盤 (手機號碼) idcard 身份證輸入鍵盤 digit 帶小數點的數字鍵盤(輸入金額常用)

checkbox多選項和radio單選項的使用

當兩個存在多個可選項時候需要使用

checkbox-group或者radio-group

進行包裹-----> 不包裹的話會出現問題(比如單選框可以選中多個) 文件中有許多屬性–> 更改顏色 選中狀態等

checkbox元件文件: Title

radio元件文件: Title

button 按鈕元件

button常用的屬性

屬性 型別 預設值 說明 size String default 按鈕的大小 ( mini) type String default 按鈕的樣式型別 ( primary綠色 warn 紅色) disabled Boolean false 是否禁用 loading Boolean false 名稱前是否帶 loading 圖示 form-type String 用於form元件，可選值 submit/reset，觸發form的提交和reset事件

form表單元件

form表單基本提交案例

第一步，設定button form-type='submit

第二步，通過bindsubmit設定form的提交事件處理函式

// wxml
<form bindsubmit="formSubmit">
	<input type="text" name="username" placeholder></input>
	<button form-type="submit">提交</button>
</form>


// js 中 配置 函式
formSubmit: function(e){
    console.log(e.detail.value)
  }

wxss樣式

WXSS 對 CSS 進行了擴充以及修改，與 CSS 相比，WXSS 擴充套件的特性有：

• 尺寸單位

• 樣式匯入

• 選擇器

  rpx 尺寸單位

rpx可以使元素根據螢幕寬度進行自適應，小程式規定螢幕的寬度為750rpx， 也就是 100% = 750rpx; 50% = (750 / 2)rpx

其他自適應方法

web中使用rem，vw, 百分比

使用方法

在開發小程式是建議使用750畫素寬度的設計稿，這樣設計稿的元素寬度是多少畫素就直接設定為多少rpx

注意1rpx在某些螢幕上可能無效

樣式匯入

基本概念

通過@import匯入外部的樣式

匯入方法，參考weui-wxss提供的例子：

// 地址：https://github.com/Tencent/weui-wxss/blob/master/dist/app.wxss
@import 'style/weui.wxss';

選擇器

參考css中的選擇器, 詳細的文件地址:Title