微信小程序-經常使用API開發技巧學習筆記

前言

已經很久沒動過微信小程序了，週五的時候，有一個朋友說有一個外快，問我幹不幹，幾個朋友一塊兒搞一下，我想了一下，正好週末也沒啥事，女友回家了，就答應下來了，幾個朋友聚到一塊兒整了兩天整完了，由於自己程序要求就不是很高，很久也沒寫什麼技術文了，就順手也整理了一篇微信小程序經常使用的API開發技巧，想作小程序的朋友能夠看一下

第一章 認識微信小程序

  微信小程序是一種不須要下載安裝便可使用的全新的鏈接用戶與服務的方式，它能夠在微信內被便捷地獲取和傳播，同時具備「用完即走，不用關心是否安裝太多應用」的使用體驗。
  微信小程序作成了一個開放式的平臺，它讓開發者能夠將本身的想法作成微信小程序的服務放在平臺上供人們使用。經過微信小程序的開發，應用將無處不在，隨時可用。在進行開發以前，須要進行註冊，綁定開發者等一系列操做。詳情移步微信官方文檔。

  筆者觀看的教學視頻於2017年初拍攝，因此當時最新的開發者工具版本爲0.11.122100版，現官方文檔中提供的最新版本爲1.02.1907112版本。
是真的不須要下載安裝便可使用嗎？
不是的，微信小程序的安裝包小於1MB(最新版改成2MB)，在用戶點擊使用的時候，就不到1MB的安裝包，下載安裝的時候，用戶本人是感覺不到的。

先後端分離的開發方式

  前端先製造假數據，能夠將假數據在頁面很好的展現以後再和服務器的數據進行相應的對接。
  前端驅動服務器開發的設計理念。由此目的在於設計比較合理，api較方便。

小程序的特色

• 小程序適合作簡單的、用完即走的應用
• 小程序適合作低頻的應用
• 小程序適合性能要求不高的應用（被摺疊放入微信，在操做系統之間仍是隔了一層的，不能知足性能高的應用）
  【此處可查閱小程序、外部，混合app、原生應用的性能區別】
  哪些應用適合小程序開發？
  例子：
  一、知乎------不太適合小程序開發
  緣由：
  （1）知乎是數據型應用，用戶停留時間較長，不能知足用完即走的特色。（若是閱讀的時候忽然來了一條消息，則會被迫退出。回來的時候找不到原來的位置）
  （2）知乎的使用頻度較高，不能知足低頻使用的特色。讓用戶屢次打開微信再打開小程序會用戶體驗很差。
  （3）知乎的消息發佈依賴於系統推送，可是小程序的推送是一種模板推送，屬於一種被動觸發。當用戶作一些操做的時間能夠做爲一個消息反饋給用戶。
  （4）小程序不支持UIView。也就是說，小程序沒辦法去加載一個網頁(服務器靜態化好的HTML頁面)。
  二、餓了麼/貓眼電影/滴滴打車------適合小程序開發
  特色：
  （1）業務邏輯簡單
  （2）使用頻度不算高
  （3）提交訂單（表單）性能要求不高
  三、對於中大型應用，能夠將某些功能拆分出來作成小程序
  好比：
  美團的點外賣、銀行的信用卡查詢等單點的服務
  

小程序對開發者的影響

• 短時間內將提高市場對JavaScript程序員的需求量
• 小程序是0基礎開發者很好的入門平臺
• 小程序不可使用現有的JavaScript組件庫
• 由於小程序的平臺是封閉的，小程序是不支持不少組件
  庫，好比DOM的，因此以DOM爲對象的組件庫都是用不了的。
  小程序的思想是數據優先，因此不能操做DOM。
• 開發環境和開發邏輯較簡單，適合新手入門

學習小程序須要的基礎

• JavaScript
• CSS
• ES6-很好的特性構建簡潔的小程序代碼
  

第二章 小程序環境搭建與開發工具介紹

小程序開發環境

前往開發工具下載地址去下載
下載完成以後，經過微信掃一掃打開開發者工具，選擇新建項目

AppID選擇使用測試號（由於註冊小程序號比較麻煩）
其餘選項設置好以後選擇建立，進行建立新的小程序項目
平臺會自動生成一個小程序HelloWorld的demo

  此工具左邊是效果區，右邊是代碼區。它有一個特色就是修改某些參數不須要編譯就能夠預覽。直接Ctrl+S就能夠看見修改的效果。

調試區用來打斷點調試代碼。點擊上方菜單欄的調試工具按鈕打開調試區。
在調試區的js文件：
  帶sm後綴的是用來打斷點調試的文件，和寫的代碼是同樣的。
  不帶sm後綴的是編譯事後的文件，和寫的代碼也是同樣的。只不過第一行出現了一個編譯的信息。

沒有小程序號對開發者的限制

一、不能上傳和發佈小程序
二、不能真機運行，只能夠在PC模擬器中運行
三、錄音、網絡狀態、羅盤、撥打電話等功能沒法使用
四、獲取用戶信息的流程是模擬的而不是真實的
可是，不影響咱們學習小程序開發

調試的幾個區域

在debug的斷點狀態時，快捷鍵和Crome是同樣的。

Console區域—系統編譯區

• 編譯錯誤的報錯信息
• 警告信息
• 用console.log輸出的調試信息

注：在打開調試區的狀態下點擊下圖標註的按鈕，能夠單獨將調試區打開一個窗口，並將Console摺疊放在窗口下方。

NetWork區域—網絡信息的列表

和Crome的NetWork如出一轍

• 網絡連接的列表
• 加載的文件
• 加載耗費的時間
• 具體查看每個網絡請求信息

Storage區域—本地緩存列表

用來查看小程序本地緩存數據

AppData區域—全部頁面被綁定數據狀況

wxml區域—小程序的UI界面和代碼聯調

鼠標停留在右邊代碼上面的時候左邊頁面顯示對應的UI元素

模擬器的上面菜單欄有按鈕切換先後臺，用來模擬打開別的小程序，本程序在後臺運行的動做。當後臺運行時在小程序裏會觸發一個事件。

注：如何快速打開小程序api文檔–點擊上面菜單的：微信開發者工具–>關於–>打開api文檔

第三章 從一個歡迎頁開始製做小程序

生成HelloWorld小程序以後點擊它的主頁面進入一個子頁面能夠查看啓動的日誌信息。

小程序文件類型與目錄結構

• js文件：行爲文件
• json文件：配置文件，對應一個個配置
• wxml文件：對應html文件，編寫小程序骨架
• wxss文件：對應css樣式文件
• app文件：描述應用程序整個狀態，是唯一的
  對於一個樣式來說以離頁面最近的配置爲準

應用程序和頁面之間的關係

注：下圖的無限多個只是理論上的。過多的頁面違背小程序的設計初衷。小程序的整體的壓縮文件包的體積超過1MB將不能上傳(最新版本上傳限制在2MB)。

無限多個

無限多個

無限多個

應用程序入口

一級頁面

二級頁面

三四五級頁面--最多五級

每個頁面由如下文件組成

wxml

wxss

json

js

小程序自生成的目錄結構

在app.json中設置打開的是哪一個頁面

P.S.：json文件是不能夠隨意加註釋的。

註冊小程序頁面，ViewImageText等組件用法

• View組件至關於html中的div標籤，起到容器的做用而且能夠分割小程序文檔的不一樣部分。
• Image組件用來表示一個圖片。它的src屬性用來添加路徑。
• text在小程序中用來做爲文本標籤。
  只有text包圍的文字在手機上才能長按選中
  text能夠支持嵌套text內置樣式，支持轉義字符的轉義。（好比將n轉義爲換行）

圖片大小px與rpx:

  px在這裏不是指圖片屬性的物理像素，而是Iphone6上的邏輯分辨率概念。Iphone6上物理分辨率和邏輯像素的2:1的關係。也就是說，在iphone6上面，2rpx=1px。
  爲了動態去適應不一樣分辨率的設備，咱們用rpx(邏輯分辨率)作適應。設計圖是0-750的像素，大小能夠直接轉化成rpx。

如何設置樣式:
方式一（動態樣式）：在標籤中加入style屬性，寫入當前標籤樣式
方式二（靜態樣式）：寫wxss文件–在標籤上加入一個class屬性，經過class選擇器寫css樣式。wxss文件不須要單獨去引用。由於註冊的是以某名字爲名名的全部文件。
例子：
wxml文件：

wxss文件：

Flex彈性盒子模型

用來將堆疊在一塊兒的元素變規整，顯示成列排布
colum:列排布
row:橫向排布

align-items用來設置對齊版式，center表示左右居中

全局同樣的樣式能夠提到全局的樣式設置裏面設置。

關於背景：

  不能在容器中直接設置background-color的顏色。由於容器沒有設置高度和寬度，它會自適應裏面元素的高度和寬度。若是直接給一個高度的話，若是裏面內容是一個動態內容，可能會超出規定的高度和寬度，形成內容溢出。
解決方案：
  通過調試咱們發現，系統在咱們規定的view容器外面還包了一層名叫page的容器。咱們去設置page的樣式

設置導航欄背景色：
在app.json中有window配置項 用於設置小程序的標題、狀態欄、導航條、窗口背景色。
其中navigationBarBackgroundColor用來設置導航欄背景色。

移動端分辨率及小程序自適應單位RPX

從一張設計圖的實現提及

如何在比例不失真的狀況下顯示一張圖片？

• pt:邏輯分辨率。能夠理解爲一個視覺長度單位。與屏幕尺寸有關係。
• px:物理分辨率。與屏幕尺寸無直接關係。理解爲像素點。

1個pt能夠有1個px構成，也能夠有2個，3個甚至更多構成
一個pt下px越多，圖像顯示越細膩。兩倍已經達到了人眼可以分辨的極限，因此plus版本並不能比6和6S更加清晰。
iphone6下2個px構成1個pt

• 屏幕尺寸：指的是屏幕對角線之間的距離。
• PPI:每英寸包含了多少個物理像素點

PPI=px開根號/屏幕尺寸

爲何模擬器下的ip6的分辨率是375而設計圖通常給750

由於微信小程序顯示的375是邏輯分辨率，而設計圖通常給的是物理分辨率。

如何適配不一樣的機型

使用rpx做爲單位，小程序會自動在不一樣的分辨率下進行轉換。
在iphone6的尺寸進行設計的話，一個像素就是一個rpx。

不是全部的單位都適合用rpx
好比，文字不適合用rpx，否則設備自適應之後看不清文字。
錯誤VM285:1 pages/index/index.js 出現腳本錯誤或者未正確調用 Page()
須要在這個js裏寫一個page方法，裏面什麼都不寫就能夠。

第四章 開發新聞閱讀列表

一、在page文件夾下新建posts文件夾，在其中創建.js.wxml.wxss文件，並在.js文件中填入空的Page函數（若是不填會報錯）。
二、將原先的app.json的pages屬性數組之中加入新建的.wxml文件的地址（當把它放在第一個的時候，運行時默認先顯示它）。
注：快捷鍵F1打開命令面板，有不少快捷選項

Swiper組件的應用-------輪播圖

swiper標籤表明輪播圖，裏面的字標籤swiper-item表明每一個圖片。

• swipper-item沒辦法設置高寬，系統自動將swipper-item的高寬設置成swipper高寬的100%，可是若是swipper-item裏面有image，須要再在image裏設置一下高寬。由於image不會繼承上級的高寬。

• swipper不決定輪播的是什麼內容，它只是一個容器。swipper-item裏面放什麼內容就輪播什麼內容。

代碼示例：

swiper的相關屬性：

App.json裏關於導航欄、標題的配置

  在子頁面的json文件裏能夠配置頁面的導航欄顏色等配置，從而不影響全局的配置。
  可是隻能配置window這一個參數的屬性，因此window就不標了。直接將app.json裏的window參數展開，平鋪到子頁面的json文件中。

絕對路徑與相對路徑

• 以" / "爲開頭的是絕對路徑，用來表示從根目錄下一級一級往下找而找到的資源
• 以". . / . ."開頭的是相對路徑，用來表示資源相對當前文件的位置

部分代碼示例
posts.wxss



經驗：水平用rpx，垂直用px。（水平若是元素少到不可能發生換行也可用px）

posts.wxml

Page頁面與應用程序的生命週期

在編碼過程當中，可使用腳本文件將服務器的數據對接到小程序中。
編寫腳本文件時，在js文件中輸入page，開發工具會生成一個默認的腳本文件結構。
js文件全部的腳本代碼都會在名叫Page的json結構體中運行。
其中包含下列生命週期函數：

• onLoad：頁面加載後調用
• onReady：頁面初次渲染完成後調用
• onShow：頁面顯示完成後調用
• onHide：頁面隱藏完成後調用
• onUnload：頁面卸載後調用
• onPullDownRefresh：用戶下拉動做後調用
• onReachBottom：頁面上拉觸底事件的處理函數
• onShareAppMessage：用戶點擊右上角分享後調用

應用的生命週期：
先進行頁面初始化(onLoad)—>頁面顯示(onShow)–>頁面渲染完成(onReady)

注：js腳本中能夠自定義函數進行調用

在公衆平臺之中小程序完整的生命週期圖片以下

數據綁定（核心）

  在網頁開發的過程當中，咱們要把一個數據顯示到頁面上的操做是：
先獲取DOM對象，再對獲取的節點的數據進行操做。

在小程序中提倡數據優先的思想。
在小程序中不支持DOM，因此在小程序的開發中的操做應該是：
在js腳本的data屬性中以json格式放入數據，在wxml文件中使用雙大括號調用。
示例以下：
js腳本：

wxml:

小程序在這裏實現的數據綁定是單向數據綁定
  也就是說，數據能夠從腳本文件向wxml文件傳遞的時候可直接賦值，可是若是數據被wxml文件所改變，腳本文件中的數據不會發生變化。若是要經過wxml改變腳本文件中的數據，則須要採起事件傳遞的形式。

顯示從服務器動態獲取的數據
  假設數據是從腳本文件向服務器動態獲取的，那麼應該在頁面初始化以後顯示數據。也就是說數據綁定的操做應該寫在onLoad函數裏面來，以後再使用setData()函數平鋪入data數組之中。

示例：
js腳本

對應wxml文件

注：

• 若是綁定的數據是放在標籤的屬性中的，須要在雙花括號外面加上雙引號

數據綁定的運算與邏輯

當某個屬性以"false"進行賦值時並不能獲得想要的效果

緣由：賦給這個屬性的false是個字符串，小程序在解析字符串的時候會將其轉換成布爾值，此字符串的布爾值是true。
例子以下：

解決方法：使用數據綁定的語法，將false用雙花括號括起來，這樣纔會解析成false。

同理，設置某個屬性爲true的時候，隨便置入一個字符串的值，都會被解析成true。

若是js腳本外再包一層json對象，那麼須要經過"{{對象名.屬性名}}"進行調用
示例：


注：兩個數據綁定挨在一塊兒是能夠正常解析的。

wx-if:控制標籤元素的顯示與隱藏

使用示例：

固然，能夠經過腳本文件來動態控制標籤元素的顯示與隱藏。

數據綁定的雙花括號裏可進行簡單的運算

好比：

同理，也能夠在雙花括號之中進行加減乘除的數字計算。

wx-for:循環顯示數據

若是服務器拿過來的數據是一個json數組，那麼須要小程序的for循環進行動態的展現。
json數組示例：

以上作法會出現顯示不了的問題
緣由：this.setData方法是將參數平鋪置入data數組中，在進行循環顯示的時候會顯示不全。
解決方法：給數據數組一個key並置入data中，這樣data解析出來就會是一個數組。

wxml展現示例：

block標籤：理解爲括號，將循環體給包裹起來

• wx:for後面引入數組數據
• wx:for-item後面引入元素指代（默認命名：item）
• wx:for-index後面指代的子元素的序號（默認命名：index）

注：若是指代爲item，則可省略。由於微信小程序默認的元素指代就是以item命名的。

頁面跳轉

一、在app.json的頁面指定的位置將歡迎頁設置爲第一個頁面。

二、目的：點擊歡迎頁的按鈕，跳轉到以前作好的新聞展現頁中（上圖頁面對應posts）

三、綁定事件–tap事件(tap事件詳情見以下表格)
標籤事件綁定的寫法：事件名前面加bind

4.在腳本文件中寫入函數負責頁面跳轉

wx.navigateTo函數負責頁面跳轉

注：填入的url能夠是相對路徑也能夠是絕對路徑，可是須要和app.json中配置的形式一致（不要加.wxml）

5.設置將跳轉進來的頁面不設爲上一個頁面的子頁面（取消左上角返回）

wx.redirectTo函數負責重定向頁面(不可返回)

實現兩個頁面之間的平行跳轉。

效果：

關於這兩個函數完整的參數：

wx.navigateTo和wx.redirectTo的區別

  當調用wx.redirectTo方法時，腳本後臺會調用onUnLoad（頁面被卸載以後觸發）事件。
  當調用wx.navigateTo方法時，腳本後臺會調用onHide（頁面被隱藏以後觸發）事件。

事件與事件對象

什麼是事件？

• 事件是視圖層到邏輯層的通信方式。事件能夠將用戶的行爲反饋到邏輯層進行處理。
• 事件能夠綁定在組件上，當達到觸發事件，就會執行邏輯層中對應的事件處理函數。
• 事件對象能夠攜帶額外信息，如 id, dataset, touches。

使用WXS函數響應事件–基礎庫 2.4.4 開始支持，低版本需作兼容處理。

  從基礎庫版本2.4.4開始，支持使用WXS函數綁定事件，WXS函數接受2個參數，第一個是event，在原有的event的基礎上加了event.instance對象，第二個參數是ownerInstance，和event.instance同樣是一個ComponentDescriptor對象。

事件分類

事件分爲冒泡事件和非冒泡事件：

• 冒泡事件：當一個組件上的事件被觸發後，該事件會向父節點傳遞。
• 非冒泡事件：當一個組件上的事件被觸發後，該事件不會向父節點傳遞。

WXML的冒泡事件列表：

注：除上表以外的其餘組件自定義事件如無特殊聲明都是非冒泡事件，如 form 的submit事件，input 的input事件，scroll-view 的scroll事件，(詳見各個組件)

事件綁定和冒泡

事件綁定的寫法同組件的屬性，以 key、value 的形式。

  key 以bind或catch開頭，而後跟上事件的類型，如bindtap、catchtouchstart。自基礎庫版本 1.5.0 起，在非原生組件中，bind和catch後能夠緊跟一個冒號，其含義不變，如bind:tap、catch:touchstart。
  value 是一個字符串，須要在對應的 Page 中定義同名的函數。否則當觸發事件的時候會報錯。
  bind事件綁定不會阻止冒泡事件向上冒泡，catch事件綁定能夠阻止冒泡事件向上冒泡。

第五章 小程序的模塊化與模板化

  正常的流程應該是從腳本文件向服務器發一個請求去請求數據到js腳本文件，可是小程序目前沒有服務器數據，將數據大量羅列到js腳本文件很是的不利於閱讀。

解決方式：
  將所需數據全都放到一個單獨的文件中去，從腳本文件加載數據文件，從而模擬從服務器加載數據的過程。

AppData區域介紹

小程序緩存

流量限制

列表渲染（核心）

Template模板的使用（核心）

關注公衆號：Java架構師聯盟，每日更新技術好文