本文作者：kelly， 原創(chuàng)文章，轉(zhuǎn)載請注明出處。
很多Java的同學(xué)問到，微信小程序怎么開發(fā)，怎么創(chuàng)建一個小程序項目，和普通的網(wǎng)頁有什么區(qū)別。嗯~~ ， 還是覺得有必要寫一個面向后臺開發(fā)人員的微信小程序教程，教程重點在于小程序的搭建和快速開發(fā)，以及如何對接Java后臺，不做詳細(xì)樣式效果處理，減少不必要的信息量，但是閱讀該課程的同學(xué)有html及js基礎(chǔ)最好。
首先大致給同學(xué)們解釋一下微信公眾號和微信小程序的區(qū)別，二者雖然都是依附于微信應(yīng)用的，但是定位卻不同。
- 微信公眾號以營銷與信息傳遞為主，適合內(nèi)容創(chuàng)作者，及粉絲引流，結(jié)合H5，公眾號也能夠提供一些簡單交互功能。
- 微信小程序不支持關(guān)注，沒有粉絲體系、群發(fā)消息等營銷手段，但使用方便，直接掃碼或者點擊就能打開，主要以服務(wù)為主，相比公眾號運行起來更流暢，接近原生APP的體驗，能夠提供更加復(fù)雜的產(chǎn)品與服務(wù)，比如可以調(diào)用原生的各種接口，像網(wǎng)絡(luò)狀態(tài)、羅盤、重力、地理位置、撥打電話等等。
一.注冊微信小程序
公眾號和小程序都可以單獨注冊，但是大部分真正運營的要用上高級功能，都要進(jìn)行認(rèn)證，認(rèn)證費用每年300元，如果有認(rèn)證的公眾號就可以在公眾號的后臺，利用公眾號的認(rèn)證信息快速注冊小程序并免費認(rèn)證，這樣會方便很好。
如果沒有公眾號的，可以在該地址單獨注冊小程序：https://mp.weixin.qq.com/cgi-bin/wx?token=&lang=zh_CN
如果你只是想體驗一下小程序開發(fā)，不是真正運營使用，可以不用去注冊正式的小程序，因為微信官方為了方便開發(fā)者開發(fā)和體驗小程序的能力，提供了測試號進(jìn)行開發(fā)測試，以及真機(jī)預(yù)覽體驗。
測試號申請地址：
https://developers.weixin.qq.com/weloginpage?redirect_url=%2Fsandbox
申請測試號的過程非常簡單。只需訪問申請地址，并掃碼登錄后，即可查看到已為自己分配好的測試帳號信息。
二.下載開發(fā)工具
開發(fā)微信小程序必須要下載官方提供的開發(fā)工具來進(jìn)行編譯，不然我們沒有辦法看到效果。
下載地址：
https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
工具使用手冊 ：
https://developers.weixin.qq.com/miniprogram/dev/devtools/page.html
三.創(chuàng)建小程序項目
打開工具，選擇小程序項目，并創(chuàng)建新項目。
點擊測試號，工具會自動填入你的測試號的信息，當(dāng)然，如果你已經(jīng)注冊了正式的小程序，就登錄小程序后臺找到AppID，拷貝進(jìn)去。
點擊新建按鈕，項目創(chuàng)建成功，可以看到你自己的頭像和昵稱，這是官方提供的HelloWorld頁面。
四.項目文件結(jié)構(gòu)介紹
上圖是創(chuàng)建好項目之后，我們可以看到的項目文件結(jié)構(gòu)。在進(jìn)行開發(fā)之前，我們先來一起了解一下。
- pages目錄：用來存放小程序頁面，圖中該目錄下包含了兩個小程序頁面：一個叫index，一個叫l(wèi)ogs。
小明同學(xué)：那怎么才算是小程序的頁面呢？
答：其實index和logs名稱的那個文件夾，并不是頁面，真正的頁面是由4個相同名稱，但類型不同(js,json,wxml,wxss)的文件組成的。那個文件夾的作用只是方便分類管理而已。像下圖，也是pages下存放了2個頁面，也沒錯，但是就問你一句，丑不丑？以后頁面多咋辦？
image.png
一個小程序頁面由四個文件組成，分別是：
| 文件類型 | 必需 | 作用 |
|---|---|---|
| js (相當(dāng)于以前的js文件) | 是 | 頁面邏輯 |
| wxml (相當(dāng)于以前的html文件) | 是 | 頁面結(jié)構(gòu) |
| wxss (相當(dāng)于以前的css文件) | 否 | 頁面樣式表 |
| json | 否 | 頁面配置 |
一個小程序主體部分由三個文件組成，必須放在項目的根目錄，如下：
| 文件 | 必需 | 作用 |
|---|---|---|
| app.js | 是 | 小程序邏輯 |
| app.json | 是 | 小程序公共配置 |
| app.wxss | 否 | 小程序公共樣式表 |
app.json文件：用來對小程序進(jìn)行全局配置，決定頁面的路徑、窗口表現(xiàn)、設(shè)置網(wǎng)絡(luò)超時時間、設(shè)置底部tab欄 等。
app.js文件：用來創(chuàng)建小程序?qū)嵗龑ο?/strong>，整個小程序只有一個 app 實例，還可綁定生命周期回調(diào)函數(shù)、監(jiān)聽錯誤等。
app.wxss文件：用來配置一些全局的樣式。
utils目錄：用來存放工具包，比如一些日期處理工具，加密工具，格式化工具等等。
project.config.json文件：小程序項目的相關(guān)開發(fā)配置，用來配置小程序的AppID，項目名稱等等，類似于idea項目中的*.iml配置文件。
小明同學(xué)：這么多的文件，這些文件都是必須存在的嗎？
答：當(dāng)然不是，這是官方提供的HelloWorld項目，目的是把項目結(jié)構(gòu)給大家搭建好，里面有的文件是可以刪的，比如pages里面的兩個頁面，我們做自己的小程序，那肯定是自己來建頁面嘛，但是，如果自己不確定哪些文件必須存在，哪些文件可以刪的，那就先別動，等你寫多幾個功能，熟悉一下。
五.創(chuàng)建小程序頁面
打開app.json文件，可以看到里面有個pages屬性，用于指定小程序由哪些頁面組成，每一項都對應(yīng)一個頁面的 路徑（含文件名） 信息。文件名不需要寫文件后綴，框架會自動去尋找對于位置的 .json, .js, .wxml, .wxss 四個文件進(jìn)行處理。比如圖中pages配置了兩個頁面，就是之前說的index和logs頁面，我們每新建一個頁面，這里都必須配置進(jìn)去，才可以正常使用。
數(shù)組的第一項代表小程序的初始頁面（首頁）。小程序中新增/減少頁面，都需要對 pages 數(shù)組進(jìn)行修改。
現(xiàn)在讓我們來創(chuàng)建一個新的頁面吧~
我們用最快速的辦法，直接修改app.json文件，在里面的pages里面添加"pages/hello/hello"，代表頁面的路徑，按下ctrl+s保存后開發(fā)工具可以自動生成相關(guān)文件。
具體效果如下圖：
這樣，我們自己的小程序頁面就創(chuàng)建成功啦！
六.修改頁面顯示內(nèi)容
之前已經(jīng)介紹過，小程序的每一個頁面，都是由4個文件（wxml,wxss,js,json）組成。
現(xiàn)在我們想要修改頁面顯示內(nèi)容，首先就是修改wxml文件(相當(dāng)于網(wǎng)頁開發(fā)中的html文件)。
打開hello.wxml文件，可以看到以下內(nèi)容
<!--pages/hello/hello.wxml -->
<text>pages/hello/hello.wxml</text>
在改之前，先簡單了解下wxml的標(biāo)簽，注意：這和html是不一樣的，千萬不要把html的標(biāo)簽寫進(jìn)來了。
但是，我們可以來做個類比：
- 小程序的<!-- -- > 跟html中注釋作用是一樣的
- 小程序的text標(biāo)簽是行內(nèi)元素，類似html中的span標(biāo)簽
- 小程序的view標(biāo)簽是塊級元素，類似html中的div標(biāo)簽
前面說的text和view是小程序中最基本的標(biāo)簽，但其實小程序還提供了很多很方便的標(biāo)簽，可以處理更高級的功能，比如video標(biāo)簽可播放視頻，還可以帶彈幕功能；swiper滑塊標(biāo)簽，可實現(xiàn)banner輪播圖功能；map地圖標(biāo)簽；表單相關(guān)標(biāo)簽等等，這里不一一列出，有需要的可以自行查閱官方文檔：https://developers.weixin.qq.com/miniprogram/dev/component/
修改頁面布局及內(nèi)容：
另外，hello.wxss文件是頁面布局文件對應(yīng)的樣式文件，無須手動引入，在文件中直接添加樣式類即可生效。如下例子：
hello.wxss： 聲明樣式類
.view-class{
color: red;
}
hello.wxml ：使用樣式類
<view class="view-class">廣州今日天氣：</view>
<text>晴</text> <text>26度</text>
效果如下：
小明同學(xué)：那我是不是可以自己完成一個完整的小程序應(yīng)用了呢？
答：其實開發(fā)小程序就相當(dāng)于網(wǎng)頁開發(fā)一樣，一個完整的應(yīng)用，若想要處理業(yè)務(wù)，處理數(shù)據(jù)，還需要有后端服務(wù)器支持，而小程序僅僅是作為單獨的一個前端項目，這種其實是屬于前后端分離的架構(gòu)。下一篇，讓我們來進(jìn)一步了解小程序中的組件吧。
