版權(quán)聲明：本文為博主原創(chuàng)文章诺核，未經(jīng)博主允許不得轉(zhuǎn)載衔肢。
PS:轉(zhuǎn)載請注明出處
作者:TigerChain
地址:http://www.reibang.com/p/b69b35fbf242
本文出自TigerChain簡書--微信小程序系列
教程簡介
- 1、閱讀對象
本篇教程適合初學(xué)者脖含，老鳥直接略過罪塔，如果有誤，歡迎指出养葵，謝謝征堪。
-
2、教程難度
初級
正文
由前面二節(jié)我們知道了什么是小程序关拒，并且知道如何創(chuàng)建一個小程的項目佃蚜，接下來我們說動手寫一個helloworld的小程序的Demo。寫helloworld目的是為了掌握小程序的配置目錄結(jié)構(gòu)和一些組件着绊。
1谐算、文件的組成
1、首先我們看一下傳統(tǒng)的web前端應(yīng)用
一般來說归露，一個前端應(yīng)用無非就是包含這四個界面html,css,js,json等洲脂。
- 1、html:用來展示界面就是一個View
- 2剧包、css:決定html界面是何種方式展示(顯示效果)
- 3恐锦、js:決定了這個html界面有何種功能
- 4、json:一些配置信息疆液，比如初始化默認數(shù)據(jù)一铅，api請求地址等。
2枚粘、小程序應(yīng)用
從圖上我們可以看出馅闽，小程序和web應(yīng)用除了文件后綴名不一樣馍迄，其表現(xiàn)形式是一樣的福也。
2、小程序樣式配置的原則
如果我們寫了兩個樣式文件攀圈，在主體文件和頁面中都寫了樣式文件暴凑，那么先調(diào)用那個呢，小程序遵循的就近原則赘来，以頁面中的樣式優(yōu)先现喳。json配置文件也一樣凯傲，按就按就近原則。
3嗦篱、編寫HelloWorld
1冰单、打開開發(fā)工具，新建一個項目
2灸促、創(chuàng)建完項目以后诫欠，我們看到的是一個空項目
由于我們在創(chuàng)建項目的時候沒有選擇quick start來創(chuàng)建項目，所以創(chuàng)建出的項目是一個空項目(沒有自動生成一些文件)
3浴栽、編寫主體文件
通過上節(jié)我們知道荒叼，小程序由主體文件和頁面組成，而且主體文件是必不可少的典鸡，所以我們手動添加主體文件(如果創(chuàng)建項目的時候使用quick start那么主體文件會被自動創(chuàng)建)
- 1被廓、編寫主體文件和項目文件
我們將開發(fā)工具切換到編輯模式下，如下建立三個主體文件和兩個目錄
由上節(jié)我們知道萝玷，主體文件必須在項目的根目錄中嫁乘，并且名字是app.js,app.json,app.wxss,不能修改
- 2、我們打開helloworld.wxml輸入
<view>
<text>Hello World</text>
</view>
然后ctrl+s保存直接就報錯了
原因是我們的helloworld.wxml編寫在page/helloworld下面的目錄下面间护，但是小程序不知道我們在這個目錄下亦渗，所以我們要讓小程序知道這個界面，我們就要在app.json中去配置(注冊一下)
- 3汁尺、在app.json中去注冊
打開app.json并且輸入以下內(nèi)容法精，如果我們自己的目錄名字不叫這個換成自己的目錄即可
{
"pages": [
"pages/helloworld/helloworld"
]
}
3、常見的一些組件
1痴突、view組件
view 組件就類似于 Html 中的 div 標(biāo)簽搂蜓。
<view>
...
...
</view>
2、text組件
text 組件就相于是 Html 中的 lable 標(biāo)簽
<text>TigerChain</text>
3辽装、image組件
毫無疑問帮碰，image 就是圖片組件的意思，使用 src 屬性來設(shè)置圖片路徑
<image> src="xxx.png"</image>
到此為止我們就使用小程序編寫出來了一個 Helloworld 的應(yīng)用了拾积，但是這個 Helloworld 是沒有樣式和功能的殉挽。
