小程序所使用的程序文件類型大致分為以下幾種:" />

服務熱線:18609840880

常見問題

建站知識

您當前位置:首頁 > 常見問題

微信小程序完整開發(fā),看這篇文章就夠了

發(fā)布時間:2018-05-02

微信使用的開發(fā)語言和文件很「特殊」。
小程序所使用的程序文件類型大致分為以下幾種:
①WXML(WeiXin Mark Language,微信標記語言)
②WXSS(WeiXin Style Sheet,微信樣式表)
③JS(Java,小程序的主體)
在語言方面,小程序看似重新定義了一套標準。但實際上,它們與「前端三件套」——HTML、CSS 和 Java——差不太多。
下面,我們就來對比一下小程序開發(fā)語言和「前端三件套」有什么異同點:
HTML 與 WXML:兩者差異比較大,如果之前沒有接觸過 Android 開發(fā),可能會覺得有些頭疼。事實上,WXML 更像是 Android 開發(fā)中的界面 XML 描述文件,適合于程序界面的構建;而 HTML 則傾向于文章的展示(這與 HTML 的歷史有關),以及互聯(lián)網(wǎng)頁面的構建。
WXSS 與 CSS:兩者在語言上幾乎沒有差別,可以直接通用。
JS 文件:小程序的 JS 文件與前端開發(fā)使用的 JS 幾乎沒有區(qū)別,只是小程序的 JS 新增了微信的一些 API 接口,并去除了一些不必要的功能(如 DOM)。
在語言上,小程序完全向學習成本低的前端開發(fā)看齊,但這不代表所有前端開發(fā)者都能無縫遷移。
如果你是從前端開發(fā)轉向小程序,就需要注意這兩個點:
HTML 與 WXML 兩種文件的構建思想差異較大,如果之前只接觸過前端開發(fā),需要一點時間才能適應 WXML 的編寫方法。
雖然小程序使用的是前端語言,但不代表可以繼續(xù)沿用前端的開發(fā)思想進行開發(fā)。小程序對前端開發(fā)的要求從「構建界面」升級成「開發(fā)完整應用」,前端開發(fā)需要在意識上進行轉變。
界面構建
1. 基本邏輯
WXML 和 WXSS 兩種文件是小程序界面元素聲明及樣式描述文件。
WXML 大的特點是以視圖(view)的方式串聯(lián)界面元素,并通過程序邏輯(AppService),將信息更新實時傳遞至視圖層。
view 類似于 HTML 中的 div 元素。在構建的時候,view 可以被多級嵌套,view 內可以放置任意視覺元素。
需要注意的是,元素一旦超出屏幕之外,用戶就無法看到了,這與 HTML 有較大不同。
比如,我們將手機屏幕想像成一個舞臺,舞臺之外的演員是無法被觀眾看到的。
小程序有專門用于滾動的視圖。
如果希望界面是一個可以自由滾動的界面(例如列表等),可以使用 scroll-view 視圖,在 WXSS 中將其大小調整為整個屏幕,并設置 scroll-y(上下滾動)或 scroll-x(左右滾動)為 true。

小程序中不能直接使用 DOM 控制 WXML 元素。如果需要進行數(shù)據(jù)更新,就得使用 WXML 提供的數(shù)據(jù)綁定及元素渲染方法。
還有一點需要注意的是:小程序的柵格排版系統(tǒng)使用的是 Flex 布局,它是 W3C 在 2009 年提出的一種排版標準。
2. 綁定數(shù)據(jù)
對于單個字段,開發(fā)者可以使用數(shù)據(jù)綁定的方法進行信息更新。
綁定的數(shù)據(jù)除了在加載的時候可以更新,也可以在 JS 主程序中以函數(shù)形式進行更新,更新同樣可以反映到界面上被綁定的數(shù)據(jù)中。
3. 條件渲染與列表(循環(huán))渲染
條件渲染適用于有意外情況提示的頁面(如無法加載列表或詳情時,做出提示等等)。
它的渲染帶有觸發(fā)條件,即符合條件時渲染這個頁面,否則忽略或渲染另一段代碼。

兩個花括號所包含的判斷條件中的變量于主程序 JS 代碼中的 data 中聲明。

若需要在界面中構建一個列表,可以使用 WXML 中的循環(huán)渲染,將同一元素渲染代碼進行集合。循環(huán)的數(shù)據(jù)可以通過數(shù)組的方式寫入 data 中供 WXML 訪問。

渲染完畢后,渲染判斷條件的變動可以影響界面變動。
4. 模板與引用
WXML 支持使用模板與引用減少代碼體積。
模板是在 WXML 代碼中對相同的代碼進行復用的方式。
可以將多個模板寫入至同一文件,并使用 import 在其他文件中進行引用。

如果需要整個頁面引用,需要使用到 include。

5. 樣式
通過 WXSS 樣式表,開發(fā)者可以定義 WXML 中的元素樣式。
WXSS 與 CSS 代碼一樣,可以直接使用選擇器選擇元素。在 WXML 中也可以直接定義元素的 id 和 class 以便于在 WXSS 文件中進行樣式定義。
6. 用戶操作與事件響應
由于微信使用的不是 HTML,所以也 不能通過添加超鏈接(a 元素)的方式來監(jiān)測用戶的點擊事件。
對于需要監(jiān)聽點擊事件的元素,應該在 WXML 中使用 bindtap 屬性或 catchtap 屬性進行綁定。

除了點擊一次,微信也提供按住、開始觸摸、松手等事件響應。
在 WXML 中綁定好一個事件之后,就能在主程序 JS 中使用。

其他 API 中也有其他相應的事件,這些事件可以在微信小程序的官方文檔中查閱到。
當需要在小程序的頁面間進行跳轉時,應該使用 wx.navigateTo() 方式。

需要注意的是,有關于頁面層級跳轉,微信將層級跳轉限制到了五層。在開發(fā)時需要注意是否超過了相應限制。
網(wǎng)絡訪問
小程序支持三種請求方式。
一種是直接的 HTTP 連接請求,請求后直接返回結果,連接結束。另一種是 Socket 持續(xù)性連接,當一方主動關閉連接時,連接結束。
除了以上兩種收發(fā)純文本的連接方式,微信還提供了一個文件收發(fā)接口。 小程序中錄制的語音以及選擇的照片都需要這個方式來進行上傳。
通過小程序訪問網(wǎng)絡需要服務器端必須支持 HTTPS 安全連接,且端口號必須為 443。
同時,小程序只能訪問開發(fā)者在登記小程序時所設定的服務器地址。
多媒體與存儲
若需在小程序中播放多媒體(包括音視頻)或進行數(shù)據(jù)存儲,不能使用 HTML 5 中所提供的標準, 必須使用微信提供的小程序多媒體播放控制接口及存儲接口等。
關于聲音的接口,有音頻播放與音樂播放兩種。
音頻播放提供了播放、暫停和停止播放三種接口,不提供跳轉至某個播放時間點的功能,也不能獲取目前的播放進度。
音樂播放接口提供除以上的基礎播放控制外的音樂狀態(tài)檢查和監(jiān)聽等功能。
小程序提供照片和視頻數(shù)據(jù)交換接口。通過這個接口,小程序可以訪問用戶選定或拍攝的照片與視頻。
通過音頻錄制和視頻照片接口獲得的多媒體信息是臨時的,需要通過小程序存儲文件接口對文件進行永久保存。
對于文本數(shù)據(jù),小程序也提供了存儲這類數(shù)據(jù)的接口。從諸如 Android 或其他 app 平臺轉向的開發(fā)者需要注意的是,小程序不提供數(shù)據(jù)庫式的本地數(shù)據(jù)保存形式,而是通過 「字段 - 值」的一對一形式進行保存。
硬件相關
小程序依托于微信,提供許多與硬件有關的 API。
小程序可以通過 API 獲取到以下數(shù)據(jù):
系統(tǒng)相關信息(包括網(wǎng)絡狀態(tài)、設備型號、窗口尺寸等)
重力感應數(shù)據(jù)
羅盤數(shù)據(jù)
通過以上 API,應該可以輕松寫出「搖一搖」等互動性頁面。
但需要注意: 這些數(shù)據(jù)只能主動獲取,不能通過這些數(shù)值變化的回調實時獲取。
推送服務
小程序提供推送服務,可以隨時向用戶發(fā)送必要的通知。 但請注意,推送服務只能用于通知提醒,不能用于群發(fā)。
在小程序中,推送服務叫做「模板消息」(之前有開發(fā)過服務號的開發(fā)者應該比較熟悉)。開發(fā)者需要在微信小程序后臺登記新的模板推送消息(比如:購買成功通知等)并審核通過后,才能在小程序中使用模板消息推送服務。具體審核標準建議參考相應文檔。
模板消息審核通過后,開發(fā)者需要先向微信服務器獲取 Access Token,隨后將該值、模板編號和模板中的動態(tài)變量(比如:訂單號、價格等)提交給微信,由微信向用戶推送通知。
用戶信息與微信支付
小程序可以在用戶同意的前提下獲取到用戶的信息。
首先,小程序要通過微信登錄的接口,讓用戶授權登錄。之后,小程序就可以展示并使用用戶信息了。
在使用微信登錄的時候需要注意, 消息需要經(jīng)過簽名確認其完整性之后,方能保證數(shù)據(jù)未經(jīng)篡改。
小程序中也可以使用微信支付。需要注意的是在發(fā)送支付請求時,需要在發(fā)送的消息中添加簽名,以確認消息完整性。

大連新圖聞科技有限公司是一家品牌設計服務提供商,企業(yè) 網(wǎng)絡服務品牌,也是企業(yè)郵箱“盈世”的大連地區(qū)代理商。 公司服務項目包括網(wǎng)站建設、平面設計、網(wǎng)絡營銷推廣、商 業(yè)攝影、企業(yè)郵箱等,幫助客戶提高企業(yè)綜合競爭能力。

18609840880(微信同步)

市場部 : 8001@newtwowin.com
業(yè)務聯(lián)系,業(yè)務需求請發(fā)到此郵箱.

QQ咨詢: 94091176
客服部:xxz@newtwowin.com
地址:大連市西安路羅斯福B座3109