微信小程序1月9號就要上線了！不說廢話了，學(xué)習(xí)學(xué)習(xí)，加油！

開發(fā)工具：微信web開發(fā)工具（吐槽，果然夠原生，讓我情何以堪?。?img doc360img-src='http://image102.360doc.com/DownloadImg/2017/01/0511/88571672_1' src='http://image102.360doc.com/DownloadImg/2017/01/0511/88571672_1' img_width='81' img_height='98' alt='微信小程序?qū)W習(xí)（1）' data-index='0'>

一、添加項目

自己練習(xí)的話選無AppID就可以了。

填寫項目名稱，項目目錄，然后點擊“添加項目”按鈕！

勾選了“在當(dāng)前目錄中創(chuàng)建quick start項目”選項的，小程序會自動生成一套框架！

是這樣的：

但是今天呢我們不選quick start選項，一張白板一行一行實現(xiàn)上圖的頁面！

在此之前先介紹一下小程序的文件類型：wxml(相當(dāng)于html),wxss(相當(dāng)于css),js,json。

每一個頁面都是由.wxml(實現(xiàn)頁面的結(jié)構(gòu)),.wxss（實現(xiàn)頁面的樣式）,.js（實現(xiàn)頁面的行為）組成的！

例如上圖中項目有兩個頁面，它們包含在pages文件夾下，其中index頁面由index.wxml、index.wxss、index.js組成；logs頁面由logs.wxml 、logs.wxss 、logs.js 、logs.json組成。

下面的app.js 、app.json 、app.wxss可以看作整個app的配置文件對整個項目都有效。

但是大家不要忘了就近原則！??！

好了!本文就實現(xiàn)一個index頁面。go！go！go！

不勾選quick start選項

點擊添加項目進(jìn)入

二、創(chuàng)建文件

點擊加號創(chuàng)建pages文件夾

點擊pages行的加號新建index文件夾

輸入文件名index

在index文件夾下創(chuàng)建wxml,wxss,js文件

創(chuàng)建成功

三、在wxml文件下編寫index頁面結(jié)構(gòu)：

類似html，相當(dāng)于