1、微信小程序前端怎么做？新手開(kāi)發(fā)入門(mén)教程微信小程序前端要做的主要內(nèi)容包括：標(biāo)簽更換、單位更換、全面支持flex布局、背景圖、用法字體圖標(biāo)、標(biāo)簽閉合、模板和文件引用等等。一、開(kāi)發(fā)前的預(yù)備。首先要注冊(cè)，在微信開(kāi)發(fā)平臺(tái)的官網(wǎng)上，根據(jù)提醒，一步步來(lái)，注冊(cè)一個(gè)小程序帳號(hào)，然后登錄。接著是安裝開(kāi)發(fā)者工具，裝好后，設(shè)置項(xiàng)目的名目、名稱(chēng)等信息，有一個(gè)重要的appid要填，在管理平臺(tái)的設(shè)置-開(kāi)發(fā)設(shè)置里面二、重要文件app.json的設(shè)置和項(xiàng)目名目的配置。小程序中的文件類(lèi)型，和html也可以一一對(duì)應(yīng)起來(lái)，。wxml就對(duì)應(yīng)著。html文件，。wxss就對(duì)應(yīng)著。css文件，。js文件也有，不用多說(shuō)。新建一個(gè)項(xiàng)目后，根名

2、目下除了文件夾，有四個(gè)文件，其中3個(gè)以app命名，這三個(gè)文件可是相當(dāng)實(shí)用。特殊是app.json，是對(duì)小程序做全局配置的，包括了小程序的全部頁(yè)面路徑、界面表現(xiàn)、網(wǎng)絡(luò)超時(shí)時(shí)光、底部 tab 等。app.wxss，寫(xiě)在這個(gè)里面的css代碼可以作用到全部頁(yè)面上，app.js，寫(xiě)在這個(gè)里面的js代碼同樣可以作用到全部頁(yè)面上。綻開(kāi)pages名目，有一個(gè)index名目，里面也有三個(gè)文件，那么，寫(xiě)在index.wxss里面的css樣式，和寫(xiě)在index.js里面的js代碼，就只作用于index.wxml。每個(gè)頁(yè)面都單獨(dú)建一個(gè)名目，例如頻繁的會(huì)有這些：index，list，detail，news，produc

3、t等，這樣利于管理，文件清楚好查找。每當(dāng)建一個(gè)名目，并建了一個(gè)。wxml文件后，就在app.json的pages參數(shù)中寫(xiě)上這個(gè)文件的路徑，這里面的每一條，對(duì)應(yīng)著一個(gè)頁(yè)面，就根據(jù)這個(gè)格式寫(xiě)，不要寫(xiě)錯(cuò)，注重最后一條沒(méi)有逗號(hào)。第一條，會(huì)顯示在左邊演示界面中，也就是說(shuō)，想調(diào)試哪個(gè)頁(yè)面，就把哪個(gè)頁(yè)面的路徑移到最上方。寫(xiě)完之后，保存，就可以看到，剛才我們新建的名目下，自動(dòng)多了三個(gè)文件，然后就可以在。wxml中寫(xiě)結(jié)構(gòu)代碼，在。wxss中寫(xiě)樣式代碼，在。js中寫(xiě)行為代碼了。三、與html5既相同又不同以上說(shuō)的，可以說(shuō)全是預(yù)備工作，真正的寫(xiě)代碼，剛剛開(kāi)頭，怎么寫(xiě)呢，其實(shí)原理和寫(xiě)h5頁(yè)面徹低一樣，不同的只是標(biāo)簽換

4、了，寫(xiě)法換了，有一些特別注重的地方，我們根據(jù)本來(lái)的習(xí)慣，對(duì)應(yīng)的轉(zhuǎn)換過(guò)來(lái)，即可。1、標(biāo)簽更換小程序中的標(biāo)簽，沒(méi)有html那么豐盛，用于小包的塊元素標(biāo)簽，最最常用的div，在小程序中寫(xiě)成view，內(nèi)聯(lián)元素標(biāo)簽則是text。那么，div，section，article，p，h1到h6，ul，li等，通通寫(xiě)成view。span，em，i，b，font，strong，del等，通通寫(xiě)成text鏈接，比較特殊，到小程序中是，本來(lái)是img，換成image，而且需要加一個(gè)aspectfit屬性，否則的比例會(huì)失調(diào)，固然，還有無(wú)數(shù)其他屬性，查詢開(kāi)發(fā)文檔，都很好理解。表單元素，轉(zhuǎn)變也很大，詳細(xì)就不說(shuō)了，在官方文檔都

5、有解釋。所以，既然小程序的標(biāo)簽比較單一，那么就需要我們添加更多的class了啊，才干分離設(shè)置樣式。2、單位更換寫(xiě)h5頁(yè)面，普通用rem，px，百分比等，在小程序中，有自己的單位rpx，我自己的理解就是，一個(gè)div，寬度是100%，就是常說(shuō)的通欄，那么他的寬度就是750rpx。50%寬的，就是375rpx。這個(gè)rpx可以自動(dòng)適應(yīng)不同的屏幕尺寸，所以說(shuō)，小程序中的頁(yè)面，兼容性無(wú)需不安。那么效果圖最好是按750px去設(shè)計(jì)嘍。3、全面支持flex布局flex布局之前也接觸過(guò)，由于掃瞄器兼容性還沒(méi)有全籠罩，所以沒(méi)實(shí)用，還是用的float，在小程序中，可以放心的用了。實(shí)際用過(guò)后，感覺(jué)比f(wàn)loat強(qiáng)大無(wú)數(shù)呀

6、。我信任，過(guò)不了幾年，flex布局就會(huì)成為主流，這將是前端布局的一場(chǎng)革命，由于他徹低轉(zhuǎn)變了現(xiàn)有模式。還不認(rèn)識(shí)flex的小伙伴，趕緊去學(xué)學(xué)吧。4、關(guān)于背景圖先解釋?zhuān)〕绦蛑惺遣恢С直尘皥D的。不要說(shuō)什么可以用法網(wǎng)絡(luò)地址呀，base64呀，對(duì)前端人員來(lái)說(shuō)，這兩種辦法是徹低不現(xiàn)實(shí)的。所以，就等于不支持背景圖。那么怎么辦呢？解決辦法是：小圖，用字體圖標(biāo)寫(xiě)。大圖，用image寫(xiě)，再寫(xiě)肯定定位。目前沒(méi)發(fā)覺(jué)更好的方法。5、字體圖標(biāo)的用法小程序有自己的字體圖標(biāo)，但是，也太少了吧，這根本不夠用好嘛。我們還是要借助大阿里的圖標(biāo)庫(kù)，但不能挺直用，要把ttf字體轉(zhuǎn)化成base64，詳細(xì)方式百度一下就有。6、關(guān)于標(biāo)簽閉合小程序?qū)τ跇?biāo)簽閉合，要求的特殊嚴(yán)格，太精確，可以說(shuō)，差了一點(diǎn)，都會(huì)報(bào)錯(cuò)，有點(diǎn)像xhtml，標(biāo)簽必需要閉合，尤其注重像input這種單標(biāo)簽 ，后面的 / 不寫(xiě)，那是肯定行不通的。四、模板和文件引用只要碰到重復(fù)用法的代碼塊，就可以建成一個(gè)模板，來(lái)處處引用它，例如頭部、底部、列表。模板的使用也不難，就是把代碼放到中，起個(gè)名字name，就是一個(gè)模板了，引用模板用is屬性