版權聲明：本文為博主原創文章，未經博主允許不得轉載。

PS:轉載請注明出處
作者:TigerChain
地址:http://www.lxweimin.com/p/b69b35fbf242
本文出自TigerChain簡書--微信小程序系列

教程簡介

• 1、閱讀對象

本篇教程適合初學者，老鳥直接略過，如果有誤，歡迎指出，謝謝。

• 2、教程難度

  初級

正文

由前面二節我們知道了什么是小程序，并且知道如何創建一個小程的項目，接下來我們說動手寫一個helloworld的小程序的Demo。寫helloworld目的是為了掌握小程序的配置目錄結構和一些組件。

1、文件的組成

1、首先我們看一下傳統的web前端應用

web_app.png

一般來說，一個前端應用無非就是包含這四個界面html,css,js,json等。

• 1、html:用來展示界面就是一個View
• 2、css:決定html界面是何種方式展示(顯示效果)
• 3、js:決定了這個html界面有何種功能
• 4、json:一些配置信息，比如初始化默認數據，api請求地址等。

2、小程序應用

mini_app.png

從圖上我們可以看出，小程序和web應用除了文件后綴名不一樣，其表現形式是一樣的。

2、小程序樣式配置的原則

如果我們寫了兩個樣式文件，在主體文件和頁面中都寫了樣式文件，那么先調用那個呢，小程序遵循的就近原則，以頁面中的樣式優先。json配置文件也一樣，按就按就近原則。

3、編寫HelloWorld

1、打開開發工具，新建一個項目

create_helloworld.png

2、創建完項目以后，我們看到的是一個空項目

empty_content.png

由于我們在創建項目的時候沒有選擇quick start來創建項目，所以創建出的項目是一個空項目(沒有自動生成一些文件)

3、編寫主體文件

通過上節我們知道，小程序由主體文件和頁面組成，而且主體文件是必不可少的，所以我們手動添加主體文件(如果創建項目的時候使用quick start那么主體文件會被自動創建)

• 1、編寫主體文件和項目文件

我們將開發工具切換到編輯模式下，如下建立三個主體文件和兩個目錄

cerate_page.png

由上節我們知道，主體文件必須在項目的根目錄中，并且名字是app.js,app.json,app.wxss,不能修改

• 2、我們打開helloworld.wxml輸入

<view>
    <text>Hello World</text>
</view>

然后ctrl+s保存直接就報錯了

error_appjs.png

原因是我們的helloworld.wxml編寫在page/helloworld下面的目錄下面，但是小程序不知道我們在這個目錄下，所以我們要讓小程序知道這個界面，我們就要在app.json中去配置(注冊一下)

• 3、在app.json中去注冊

打開app.json并且輸入以下內容，如果我們自己的目錄名字不叫這個換成自己的目錄即可

{
   "pages": [
    "pages/helloworld/helloworld"
  ]
}

show_helloworld.png

3、常見的一些組件

1、view組件

view 組件就類似于 Html 中的 div 標簽。

<view>
    ...
    ...
</view>

2、text組件

text 組件就相于是 Html 中的 lable 標簽

<text>TigerChain</text>

3、image組件

毫無疑問，image 就是圖片組件的意思，使用 src 屬性來設置圖片路徑

<image> src="xxx.png"</image>

到此為止我們就使用小程序編寫出來了一個 Helloworld 的應用了，但是這個 Helloworld 是沒有樣式和功能的。