微信小程式開發實戰教程 一、微信小程式 它是一種混合開發的方式。 是安裝在微信中的程式（一個程式最多2M空間）。 1.1 註冊 1 2 點擊立即註冊：進入下方頁面 3 4 點擊小程式進入表單填寫頁面 5 6 填寫完畢之後提交，會讓你去郵箱中激活。激活之後就可以進入小程式開發了。 1.2 安裝開發工具 ...
微信小程式開發實戰教程
一、微信小程式
它是一種混合開發的方式。
是安裝在微信中的程式（一個程式最多2M空間）。
1.1 註冊
|
1 2 點擊立即註冊：進入下方頁面 3 4 點擊小程式進入表單填寫頁面 5 6 填寫完畢之後提交，會讓你去郵箱中激活。激活之後就可以進入小程式開發了。 |
1.2 安裝開發工具
經過1.1註冊之後，我們有了開發賬號，但是沒有辦法憑空開發內容，我們需要下載開發工具。使用微信提供的開發工具進行開發。
下載地址：
|
1 https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html |
進入之後，會看到讓你選擇版本的信息。
|
1 |
選擇對應的版本進行安裝。 例如：我的電腦就是windows64位操作系統，那麼我就選Windows 64位
點擊之後就會開始下載
|
1 |
下載完畢之後，得到一個安裝包
|
1 |
雙擊進行安裝，下一步下一步直到結束。
安裝完畢之後，會自動打開登錄界面。有一個二維碼，通過微信掃描該二維碼登錄。
登錄之後
|
1 |
1.3 創建小程式項目
點擊上圖中的小程式項目
|
1 |
項目目錄：就是項目所在目錄
AppId： 小程式的id。你通過註冊之後會得到一個id。輸入它即可。
我們現在沒有註冊完畢，只能點擊測試小程式進行測試
項目名稱： 你當前創建的項目的名稱 這是唯一的。
填寫完畢之後：
|
1 |
建立普通快速啟動模板： 如果勾選 則會在項目目錄下 自動創建一個demo案例
點擊確定之後，編輯器會啟動
|
1 |
預覽視窗： 你編寫的小程式的預覽視窗，可以進行點擊 其實就是一個手機模擬器
功能視窗： 許多功能按鈕
目錄結構： 項目的目錄狀態
代碼編輯視窗：代碼可以在這裡編輯
調試視窗： 代碼書寫過程中，調試時，會在這裡輸出一些信息。也有控制台的功能也有文檔結構的功能。
1.4 目錄結構介紹
1.4.1 pages
這個文件夾，是用來放所有的小程式需要的頁面。
該文件夾中是一個一個的子文件夾，每一個子文件夾表示一個頁面。
預設創建出來的pages中有兩個：1 index 就代表index頁面 2 logs 就代表logs頁面
1.4.2 utils
這個文件夾，是用來放所有的工具的。可以刪除。
1.4.3 app.js
這個文件，叫做應用程式構造器。
整個應用程式的配置，都可以在這裡面書寫，主要是應用程式的聲明周期函數以及全局數據。
全局的腳本文件
App({
/** onLaunch
* 當小程式初始化完成時，會觸發 onLaunch（全局只觸發一次）
*/
/** onShow
* 當小程式啟動，或從後臺進入前臺顯示，會觸發 onShow
*/
/**onHide
* 當小程式從前臺進入後臺，會觸發 onHide
*/
/** onError
* 當小程式發生腳本錯誤，或者 api 調用失敗時，會觸發 onError 並帶上錯誤信息
*/
})
1.4.4 app.json
這個文件，是小程式的配置文件。
配置的是小程式的內容。
這是一個JSON文件 需要使用符合規範的JSON語法。
key必須要使用雙引號
不能有註釋
對象的最後一個屬性值之後不能有逗號
pages: 配置當前小程式在運行過程中所需要的頁面
它的值是一個數組，每一個成員是一個頁面文件的路徑 本質上是在說明index.wxml 但是可以省略尾碼
它有一個特點：如果在添加完某一項並保存之後，該文件和文件夾還沒有存在，則會自動創建出來
window: 配置小程式的界面的
"window"
"backgroundTextStyle": 背景文字顏色
"navigationBarBackgroundColor": 導航部分的背景顏色
"navigationBarTitleText": 導航標題文本
"navigationBarTextStyle": 導航文本顏色
"tabBar": 底部按鈕
"list": 每一個按鈕都配置在這裡面 它是一個數組
數組的成員是對象
"pagePath": 點擊該按鈕的時候跳轉到哪個頁面 該屬性的值必須是pages數組中的某一項
"text": 文本
"iconPath": 圖標路徑,
"selectedIconPath": 選中時候的圖標路徑
1.4.5 app.wxss
其實就是css文件。它裡面配置的內容是全局樣式。類似於我們的reset.css
這是一個全局樣式文件。會自動應用在所有頁面中。
1.4.6 project.config.json
這是針對項目的配置。
1.5 局部文件
pages是一個文件夾，該文件夾內是子文件夾，每一個子文件夾代表一個頁面。
子文件夾內：
1.5.1 局部腳本
.js文件： 局部腳本文件 該文件只對當前頁面生效
Page({
/**data
* 頁面的初始數據
*/
/** onLoad
* 生命周期函數--監聽頁面載入
*/
/**onReady
* 生命周期函數--監聽頁面初次渲染完成
*/
/**onShow
* 生命周期函數--監聽頁面顯示
*/
/**onHide
* 生命周期函數--監聽頁面隱藏
*/
/**onUnload
* 生命周期函數--監聽頁面卸載
*/
/**onPullDownRefresh
* 頁面相關事件處理函數--監聽用戶下拉動作
*/
/**onReachBottom
* 頁面上拉觸底事件的處理函數
*/
/**onShareAppMessage
* 用戶點擊右上角分享
*/
})
1.5.2 局部樣式
位於頁面內的wxss文件，是針對當前頁面的局部樣式。與全局app.wxss一起負責當前頁面的樣式。如果有衝突，優先使用當前頁面的wxss樣式。
1.5.3 頁面骨架
頁面內有一個wxml文件，用於搭建當前頁面的骨架。
html文件內的標簽，我們叫做元素。
wxml文件內的標簽，我們叫做組件。因為對html元素進行了封裝。所以叫做組件。
二、混合開發
從一開始的瀏覽器只是一個內容發佈器開始，到後來的WebApp。
本質上都是在網頁端做事情。
Hybird就是混合開發。它的意思是： 一處開發，多端使用。
微信小程式就是屬於混合開發。
混合開發有三種形式：
1 hybird 瀏覽器渲染
2 reactnative 原生API
3微信小程式
三、屬性
對於一個html來說，內容是由標簽構成的。對於JS來說，我們稱標簽為 “元素”。
對於一個wxml來說，內容是由標簽構成的。對於JS來說，我們成標簽為“組件”。
其實，wxml就是對html的標簽進行了封裝。封裝之後，就不是元素了，而是組件。也不可以使用jQuery等內容。
3.1 通用屬性
對於html的標簽來說
標準屬性分為兩部分
一部分是所有的標簽都有的屬性（通用屬性）
另一部分是某一些標簽特有的屬性（特有屬性）
對於wxml的標簽來說
標準屬性分為兩部分
一部分是所有標簽都有的屬性（通用屬性）
另一部分是某一些標簽特有的屬性（特有屬性）
wxml中的通用屬性：
id 組件的id
class 用於通過類的形式設置樣式
style 行內樣式
hidden 用於隱藏組件
data-* 自定義屬性
bind* | catch* 事件屬性
非通用屬性：
image組件的src屬性等
四、數據相關
頁面所需的數據定義在對應的js文件的對象中。 屬性名叫做data。
微信小程式是屬於數據驅動。
頁面初始化時所需要的數據都必須先定義。
數據渲染的過程就是將對應的數據插入到頁面中的過程。（插值的過程）
插值語法： {{}}
註：它裡面並沒有提供一個真正的js環境，只是一個偽環境。 只能夠執行簡單的運算 而不能夠調用方法。
之前遇見過的插值語法：
underscore: <%=%>
MVC中: <%%>
ejs中: <%%>
ES6中： ${}
less中： @{}
sass中: #{}
4.1 插值
插值模板:
|
1 <view>{{num * 2}}</view> 2 <view>{{title.toUpperCase()}}</view> |
插值數據的定義：
|
1 data: { 2 num: 123, 3 title: "aichuangketang" 4 } |
渲染之後：
|
1 |
4.2 修改數據
要使用頁面去修改數據:
this.setData(option);
option 是一個對象
key: 要修改的屬性層級字元串 可以是單層級 可以是多層級
value: 要修改的對應key的值
demo:
更改數據之前：
|
1 |
更改代碼：
|
1 onLoad: function (options) { 2 var me = this; 3 console.log("index頁面頁面載入") 4 setTimeout(function() { 5 me.setData({ 6 title: "愛創課堂", 7 "obj.name": "王老四" 8 }) 9 console.log(me) 10 }, 3000) 11 }, |
代碼執行之後：
|
1 |
4.3 數據丟失
更改數據，一定要通過setData方法來修改。因為它是微信提供的方法。
如果使用點語法或者方括弧語法直接修改屬性的值。則無法渲染到頁面上。這就叫做數據丟失。
註：儘量只更改關鍵的信息。
demo:
更改數據之前：
|
1 |
更改代碼：
|
1 setTimeout(function() { 2 me.data.title = "愛創課堂"; 3 console.log(me.data) 4 }, 3000) |
數據狀態：
|
1 |
頁面狀態：
|
1 |
數據已經被修改，但是頁面沒有發生變化。
五、事件
根據事件的特性，有兩類
所有組件都擁有的事件 通用事件
touchstart 觸摸開始
touchend 觸摸結束
touchmove 觸摸移動
touchcancel 觸摸取消
tap 輕按
longtap 長按
longpress 長按
transitionend 過渡完成
animationstart 動畫開始
animationend 動畫結束
animationinteration 動畫執行一次就觸發一次
還有一類是某些（個）特定組件的特有事件
例如表單的提交事件
根據事件的綁定方式，也可以分成兩類
一類是冒泡事件
bind[eventName]
另一類是不冒泡事件
catch[eventName]
5.1 綁定冒泡事件
組件結構：
|
1 <!--pages/event/event.wxml--> 2 <view bindtap='parent'> 3 <view bindtap='show'>我是一個組件</view> 4 </view> |
對應的js代碼：
|
1 // pages/event/event.js 2 Page({ 3 4 /** 5 * 頁面的初始數據 6 */ 7 data: { 8 9 }, 10 // 定義show事件 11 show: function() { 12 console.log("點擊我了"); 13 }, 14 // 定義parent事件 15 parent: function() { 16 console.log("點擊到爸爸了") 17 } 18 }) |
點擊之後：兩個事件都會輸出
|
1 |
5.2 綁定不冒泡事件
組件結構：
|
1 <!--pages/event/event.wxml--> 2 <view bindtap='parent'> 3 <view catchtap='show'>我是一個組件</view> 4 </view> |
代碼
|
1 // pages/event/event.js 2 Page({ 3 4 /** 5 * 頁面的初始數據 6 */ 7 data: { 8 9 }, 10 // 定義show事件 11 show: function() { 12 console.log("點擊我了"); 13 }, 14 // 定義parent事件 15 parent: function() { 16 console.log("點擊到爸爸了") 17 } 18 }) |
點擊之後：只有子元素的事件觸發 父元素的事件沒有觸發
|
1 |
5.3 事件對象
查看事件對象：
|
1 |
changedTouches: 改變的手指的列表
currentTarget: 綁定事件的組件
id: 當前組件的id
offsetLeft: 該組件的距離父組件的left值
offsetTop: 該組件的距離父組件的top值
dataset: 該組件的自定義數據
detail: 手指位置
target: 觸發事件的組件
timeStamp：頁面載入到事件觸發的時間間隔
touches: 手指列表
type: 事件類型
