怎么開發微信小程序？寫給開發人員的小程序代碼要點

微信一出小程序，除了各大媒體的內容轉發，微信自己就生產了許多開發干貨，但這么多干貨你有空消化嗎？小寶貼心地幫你把要點都摘出來了，歡迎收藏轉發！

必備技能清單

1、微信標記語言 WeiXin Marked Language（WXML）

2、微信樣式表 （WeiXin Style Sheet, WXSS）

3、JavaScript（JS）

針對iOS / Android開發人員

無論是ios還是Android開發人員，開發小程序都需要學習JavaScirpt語言。對于ios來說可能還需要學習使用HTML（WXML）構建界面方式。

針對網頁前端開發人員

小程序的界面不是一個頁面，而是一個應用界面

雖然WXSS文件“復刻”了CSS，但小程序使用了rpx【reponsive pixel】作為尺寸單位（保證不同分辨率設備的元素正常顯示）。所以他們之間的長度單位換算比例是需要了解的。

動態單位與 px 換算的基本概念是：選擇一個分辨率作為基準，在基準分辨率中，一個像素點顯示有多長，在其他屏幕上會顯示同樣長度。

例如，dp 與 px 換算公式是：dp = px * (目標設備 dpi 分辨率 / 160)。

但微信小程序的 rpx 換算方式，會與其他動態單位的換算方法有些出入。微信官方提供的換算方式更「傻瓜」一些：rpx = px * (目標設備寬 px 值 / 750)。

針對后端開發

這事兒就復雜了，建議你關注【微信號zxcx0101】詳細研讀一下

語言和文件

小程序的文件類型大概分一下幾種：

1、WXML

2、WXSS（Weixin Style Sheet, 微信樣式表）

3、JS

它與前端三件套的異同點：

1、WXML更像是Android開發中的界面XML描述文件，更適合于程序界面的構建；而HTML傾向于文章的展示。

2、WXSS與CSS可直接通用

3、小程序的JS新增了微信的一些API借口，其他都差不多。

語言和文件

WXML最大的特點是以視圖（view）方式串聯界面元素，并通過陳旭邏輯將信息更新實時傳遞至視圖層。View可以被多級嵌套，可以置放視覺元素。

可以使用 scroll-view 視圖，在 WXSS

中將其大小調整為整個屏幕，并設置 scroll-y（上下滾動）或

scroll-x（左右滾動）為 true。

綁定數據

對于單個字段，開發者可以使用數據綁定的方法更新信息。還可以在JS主程序中以函數形式更新，同樣可以反映到界面上被綁定的數據中。

條件渲染與列表渲染

Anna!

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

Page({

data: {

boyname: 'Tom',

girlname: 'Anna'

}

})

若需要建一個列表，可使用WXML中的循環渲染將同一元素渲染代碼進行稽核，把數據通過組數的方式寫入data中供WXML訪問

{{index}}: {{item.message}}

Page({

data: {

array: [{

message: 'foo',

}, {

message: 'bar'

}]

}

})

模板與引用

WXML支持使用模板與引用減少代碼體積?？梢灾v多個模板寫入同一文件，并使用import在其他文件中進行引用

//some other codes

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

樣式

通過WXSS樣式表，開發者可以定義WXML中的元素樣式，可直接用選擇器選擇元素。

用戶操作和事件響應

微信使用的不是HTML，不能添加超廉價來檢測用戶的點擊事件。需要監聽點擊事件的元素，應該在WXML中使用bindtap屬性或catchtap屬性進行綁定。

除了點擊一次，微信也提供按住、開始觸摸、松手等事件響應。

在WXML中綁定好一個事件之后，就能在主程序JS中使用。

Page({

tapName: function(someThingHere){

//執行這部分代碼

}

})

當需要在小程序的頁面間進行跳轉時，應該使用

wx.navigateTo()方式。

tapName: function() {

wx.navigateTo({

URL: '../logs/logs'

})

}

需要注意的是，有關于頁面層級跳轉，微信將層級跳轉限制到了5層。在開發商需要注意是否超過了相應限制。

本文地址：微信小程序開發頻道 http://www.599332.com/web-wxxcx/1918.html，武漢易企推公司是一家專業的武漢網絡推廣，百度開戶競價托管，SEO網站優化公司，提供一站式全網營銷服務：小程序開發，網站建設，SEO百度排名，SEM競價托管，百度推廣開戶、360搜狗百度競價開戶、百度地圖標注、百科詞條創建修改、微信公眾號代運營、公司負面公關處理等；另外，本站部分文章圖片來自網絡，本著互聯網分享精神，如有侵犯到您的權益，請告知我們刪除，謝謝！