微信小程序開發-基礎
1.小程序環境搭建
賬號註冊
百度搜索 “微信公衆平臺”
官網地址： https://mp.weixin.qq.com/
微信公衆平臺小程序註冊地址：https://mp.weixin.qq.com/wxopen/waregister?action=step1&token=&lang=zh_CN
註冊時主體類型選擇
注意：註冊小程序使用的郵箱賬號不能和訂閱號或者服務號的重複，也就是假如該郵箱賬號註冊過訂閱號或者服務號，就不能用來註冊小程序賬號了，推薦註冊一個新的郵箱賬號，
2.創建小程序
1.下載開發工具
開發工具下載地址：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
2.獲取appid
小程序的appid相當於小程序平臺的一個身份證，很多地方需要用到appid，比如在創建小程序項目時候就需要用到appid
1.登錄微信公衆開發平臺（地址見賬號註冊）
2.進入設置
3.切換到開發設置
3.創建第一個小程序項目
打開微信開發者工具，根據下面提示填寫項目信息
點擊右下角的確定按鈕，創建項目成功
總結：
1. 賬號註冊，推薦使用新註冊的郵箱，可以是163郵箱、新浪郵箱、qq郵箱等等
2. 個人開發者，註冊時第三選擇賬號主體要選擇個人
3. 獲取appid，登錄微信公衆平臺，選擇左側欄的設置，在右側內容頁切換到開發設置
4. 創建項目時需要輸入上一步獲取的appid
5. 選擇啓動模板： 選擇快速啓動模板
3.開發工具功能介紹
1.新增和修改編譯模式
編譯模式可以修改啓動頁和添加該頁面的參數，新增界面如下圖：
點擊確定按鈕，頁面就會刷新並顯示爲當前設置的啓動頁
2.預覽和真機調試
調試：開發者可以通過手機掃描預覽提供的二維碼來訪問小程序
真機調試：和預覽一樣會提供訪問的二維碼，不同的是真機調試模式會彈出控制檯，可以查看手機模式下的調試信息
3.清除緩存
清除本地的授權記錄、sessionStorage和localStorage等緩存數據
4.項目的詳情設置
通過頂部的菜單欄，選擇 - 設置 - 項目設置，點擊後有右側打開項目設置面板
注意版本庫的選擇，不要輕易去修改這個配置，
很容易導致項目的api不兼容
4.小程序文件結構
1.基本的結構
- 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 文件是必需的
2.全局配置 app.json
app.json文件用來對微信小程序進行全局配置
常見的屬性：
| 屬性 | 類型 | 必填 | 描述 | 詳細配置地址 |
|---|---|---|---|---|
| pages | String | 是 | 頁面路徑列表 | https://developers.weixin.qq.com/miniprogram/dev/framework/config.html#pages |
| window | Object | 否 | 全局的窗口樣式 | https://developers.weixin.qq.com/miniprogram/dev/framework/config.html#window |
| tabBar | Object | 否 | 底部tab欄的配置 | https://developers.weixin.qq.com/miniprogram/dev/framework/config.html#tabBar |
局部配置
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
tabBar配置示例
// 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個
3.頁面配置
每一個小程序頁面也可以使用.json文件來對本頁面的窗口表現進行配置。
注意：頁面的配置只能設置 app.json 中部分 window 配置項的內容，
頁面中配置項會覆蓋 app.json 的 window 中相同的配置項。
5.小程序的組件
新建頁面
通過app.json來新建
wxml和html的不同點
標籤名字不一樣，如html裏常用的標籤 div、section, article, a、span等，在小程序裏標籤是view、navigator、text等
view容器組件
view組價的基本使用
<view class="container">
<!-- 頁面內容 -->
</view>
text文本組件
text的基本使用
<view class="container">
<!-- text組件 -->
<text>文本內容</text>
</view>
- text組件內只支持 text 嵌套
- 除了文本節點以外的其他節點都無法長按選中
### navigator頁面鏈接組件
navigator的基本使用
// url的連接前面必須加上斜杆 “/”
<navigator url="/pages/demo/domo">
跳轉到demo
</navigator>
注意：navigator不支持跳轉到外部的url，
例如url=“https://www.baidu.com”
**跳轉到tabBar的頁面**
設置open-type值爲switchTab，比如index頁面是tabBar的頁面，可以這樣來設置
跳轉到tabBar的使用方法
<navigator url="/pages/index/index" open-type="switchTab">
跳轉到首頁
</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` 實現類似功能
input組件
input的簡單使用
input常用的屬性
| 屬性 | 類型 | 默認值 | 說明 |
|---|---|---|---|
| value | String | 輸入框的初始內容 | |
| type | String | “text” | input 的類型 |
| password | Boolean | false | 是否是密碼類型 |
| placeholder | String | 輸入框爲空時佔位符 | |
| disabled | Boolean | false | 是否禁用 |
input type 有效值
| 值 | 說明 |
|---|---|
| text | 文本輸入鍵盤 |
| number | 數字輸入鍵盤 |
| idcard | 身份證輸入鍵盤 |
| digit | 帶小數點的數字鍵盤 |
button 按鈕組件
button常用的屬性
| 屬性 | 類型 | 默認值 | 說明 |
|---|---|---|---|
| size | String | default | 按鈕的大小 |
| type | String | default | 按鈕的樣式類型 |
| 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)
}
6.小程序樣式
WXSS 對 CSS 進行了擴充以及修改，與 CSS 相比，WXSS 擴展的特性有：
- 全局樣式和局部樣式
- 尺寸單位
- 樣式導入
1.全局樣式和局部樣式
app.wxss是全局樣式,page中的wxss是頁面的局部樣式
2.rpx 尺寸單位
什麼是rpx？
rpx可以使元素根據屏幕寬度進行自適應，小程序規定屏幕的寬度爲750rpx， 也就是 100% = 750rpx; 50% = (750 / 2)rpx
其他自適應方法
web中使用rem，vw, vh, 百分比
使用方法
在開發小程序是建議使用750像素寬度的設計稿，這樣設計稿的元素寬度是多少像素就直接設置爲多少rpx
注意1rpx在某些屏幕上可能無效
3.樣式導入
通過@import導入外部的樣式，常用語公共樣式
總結：
1.wxss 不需要導入到wxml，在頁面目錄下創建即可生效
2.app.wxss是全局樣式,page中的wxss是頁面的局部樣式
3.rpx 尺寸單位
4.@import 樣式導入
7.小程序生命週期
生命週期有程序的生命週期和頁面的生命週期
1.程序的生命週期
文檔地址：https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/app.html
在程序入口app.js中調用App(), 而且必須調用且只能調用一次，然後再App()的參數中可以聲明生命週期函數
前臺，後臺的概念
- 前臺：打開微信就進入小程序前臺
- 後臺：當用戶點擊右上角關閉，或者按了設備 Home 鍵離開微信，此時小程序並沒有直接銷燬，而是進入了後臺；
常用的生命週期：
| 屬性 | 描述 | 觸發時機 |
|---|---|---|
| onLaunch | 監聽小程序初始化 | 小程序初始化完成時（全局只觸發一次） |
| onShow | 監聽小程序顯示 | 小程序啓動，或從後臺進入前臺顯示時 |
| onHide | 監聽小程序隱藏 | 小程序從前臺進入後臺時 |
注意：小程序的運行機制
- 小程序沒有重啓的概念
- 當小程序進入後臺，客戶端會維持一段時間的運行狀態，超過一定時間後（目前是5分鐘）會被微信主動銷燬
2.頁面的生命週期
頁面需要通過Page(Object) 函數用來註冊一個頁面。接受一個 Object 類型參數，其指定頁面的初始數據、生命週期回調、事件處理函數等。
文檔地址：https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/page.html
常用的生命週期：
| 屬性 | 描述 |
| onLoad | 監聽頁面加載 |
| onShow | 監聽頁面顯示 |
| onReady | 監聽頁面初次渲染完成 |
| onHide | 監聽頁面隱藏 |
onLoad
頁面加載時觸發。一個頁面只會調用一次，可以在 onLoad 的參數中獲取打開當前頁面路徑中的參數。
參數說明, 通過query獲取當前頁面路徑中的參數
| 名稱 | 類型 | 說明 |
|---|---|---|
| query | Object | 打開當前頁面路徑中的參數 |
注意：頁面需要訪問api接口來初始化頁面， 都可以在onLoad中調用
總結：
- 程序的生命週期: app.js中onLaunch在小程序初始化中觸發
- 頁面的生命週期: onLoad 只在頁面加載的時候執行一次, onShow每次訪問頁面都會執行, 通常onLoad在onShow之前執行
本文轉自：微信小程序開發