微信小程序前端怎么做新手開發(fā)入門教程

1、單位變化，寫H5頁，一般用rem、px、percentage等。在小程序，它有自己的單位rpx。我自己的理解是，一個(gè)寬度為100%的div，也就是常說的橫幅，所以它的寬度是750rpx。50%寬，也就是375rpx。這個(gè)rpx可以自動(dòng)適應(yīng)不同的屏幕尺寸，所以不用擔(dān)心小程序中頁面的兼容性問題。

2.完全支持flex布局。flex布局之前也接觸過，因?yàn)闉g覽器兼容性還沒有完全覆蓋，所以沒什么用。現(xiàn)在還在用float，在小程序，可以放心使用。實(shí)際使用后，感覺比float強(qiáng)多了。我相信再過幾年，flex布局會(huì)成為主流，這將是前端布局的一次革命，因?yàn)樗鼜氐赘淖兞爽F(xiàn)有的模式。不熟悉flex的小伙伴們，趕緊學(xué)起來吧。

3.關(guān)于背景圖，首先小程序中不支持背景圖。Base64，對(duì)于前端人員來說，這兩種方法完全不現(xiàn)實(shí)。因此，不支持背景圖像。那我該怎么辦呢？解決辦法是：小圖，用字體圖標(biāo)寫。大圖，用圖像寫，再寫絕對(duì)定位。到目前為止，還沒有更好的辦法。

4.字體圖標(biāo)的使用。小程序有自己的字體圖標(biāo)，但是太少了。這根本不夠好。我們還是要用大阿里的logo庫(kù)，但是不能直接用。我們必須將ttf字體轉(zhuǎn)換成base64。百度有具體方法。

5.關(guān)于標(biāo)簽閉包小程序，標(biāo)簽閉包的要求特別嚴(yán)格，過于精確。可以說稍微短一點(diǎn)就會(huì)報(bào)錯(cuò)，有點(diǎn)像xhtml。標(biāo)簽必須是關(guān)閉的。要特別注意像input這樣的單標(biāo)簽，如果跟隨/不寫的話是永遠(yuǎn)不行的。

6，模板和文件引用，只要當(dāng)遇到重用的代碼塊時(shí)，可以構(gòu)建一個(gè)模板在任何地方引用它，比如頭、底、列表。模板的用法也不難，就是把代碼放進(jìn)去，給它起個(gè)名字，就是一個(gè)模板。使用IS屬性引用模板。詳情請(qǐng)查閱官方文件。

7.善用公文。前端人員主要看組件，框架部分，夠用了。小程序有自己的官方開發(fā)文檔，很詳細(xì)，就是對(duì)于第一次接觸的人來說，有點(diǎn)頭疼無從下手，不好讀。

微信小程序開發(fā)版和體驗(yàn)版的區(qū)別

1，小程序架構(gòu)，小程序主要分為兩個(gè)主要部分：視圖模塊和服務(wù)模塊。查看模塊負(fù)責(zé)UI展示。它包括：wxml和wxss轉(zhuǎn)換后的代碼和微信提供幫助模塊。一個(gè)視圖模塊對(duì)應(yīng)一個(gè)webview組件，小程序支持多個(gè)視圖。視圖模塊通過微信jsbridge對(duì)象與后臺(tái)通信。

2.類型小程序，小程序主要分為三種版本類型開發(fā)版，體驗(yàn)版，正式版。開發(fā)板和體驗(yàn)版不需要審核。你需要給許可微信。掃描二維碼小程序即可訪問。正式版需要經(jīng)過微信的審核流程。開發(fā)版和體驗(yàn)版的區(qū)別在于開發(fā)小程序版的二維碼有效期比較短。在項(xiàng)目中，你可以準(zhǔn)備兩到三套環(huán)境。開發(fā)版本訪問測(cè)試環(huán)境，正式版訪問生產(chǎn)環(huán)境。

3.測(cè)試5，電話號(hào)碼小程序。雖然小程序是在微信推出的新品，但是和模式上的其他客戶端測(cè)試是一樣的。小程序的測(cè)試主要分為四個(gè)方面，分別是功能測(cè)試，兼容性測(cè)試，性能測(cè)試，后臺(tái)接口測(cè)試。對(duì)于安全性測(cè)試，因?yàn)樾〕绦蚣稍谖⑿趴蛻舳耍啾葌鹘y(tǒng)的網(wǎng)頁，安全性更能得到保障。只要保證后臺(tái)接口上數(shù)據(jù)的安全性測(cè)試，客戶端的安全性由

4，功能測(cè)試，功能測(cè)試類似于傳統(tǒng)的web端測(cè)試，這里就不贅述了。

5.兼容性測(cè)試，兼容性測(cè)試要考慮三個(gè)方面系統(tǒng)兼容性，微信兼容性和緩存數(shù)據(jù)兼容性。