用vant開(kāi)發(fā)小程序(零基礎(chǔ)開(kāi)發(fā)微信小程序)

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

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

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

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

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

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

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

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

:

imagepng

1.image.png，此時(shí)你可以在項(xiàng)目文件夾中看到一個(gè)新生成的folder _npm，包括我們剛剛安裝的vant組件庫(kù)。

2、image.png，

4.在小程序開(kāi)發(fā)工具中，單擊右上角的“詳細(xì)信息”并選中“使用npm模塊”

3、image.png，

5.在需要使用這個(gè)組件庫(kù)的組件中的json文件中，添加需要使用的組件中的內(nèi)容(以button為例)

:

零基礎(chǔ)開(kāi)發(fā)微信小程序

1.課程基于新版微信小程序開(kāi)發(fā)，開(kāi)頭為微信小程序。簡(jiǎn)介微信小程序開(kāi)發(fā)

2.介紹新功能，Cloud開(kāi)發(fā)，云功能的基本使用，后端路由的建立。

3.簡(jiǎn)介微信小程序與后端的聯(lián)合使用，驗(yàn)證過(guò)程，授權(quán)機(jī)制的詳細(xì)說(shuō)明，token的生成，jwt與token的關(guān)系。

4.簡(jiǎn)介微信小程序框架，iview，ColorUI，Vant等UI框架，重點(diǎn)介紹canvas的使用，使用canvas前端生成共享海報(bào)圖片，后端生成共享海報(bào)圖片。

5.項(xiàng)目實(shí)戰(zhàn)，兩個(gè)項(xiàng)目，一個(gè)個(gè)人博客微信小程序項(xiàng)目，以wordpress為后端，前端微信小程序，集分享、評(píng)論、登錄等功能于一體功能。第二個(gè)項(xiàng)目是UI庫(kù)的實(shí)現(xiàn)，模仿Lagou.com做了一個(gè)簡(jiǎn)單的UI界面。