JB的小程序之旅-HelloWorld

前言

不懂前端的測試狗很痛苦，曾經幻想過學習各類前端，但後來基本都半途而廢了，最近在負責小程序的項目，後面也會愈來愈多，前段時間整理了一份小程序測試的資料，最近老闆們說小程序研發能力不夠，而本身也想弄一個小程序+學習前端，因此就臨時決定學習小程序~

備註，講的東西是面對小白，大神們求輕噴~

工具準備

工欲善其事必先利其器，小程序的概念以前整理小程序測試的時候已經有了，這裏很少說，那咱們直接去找開發工具吧！傳送門

腦殘式下載安裝打開，打開要求掃二維碼登陸，而後就展現這個界面：

點擊後，會跳轉到這個界面：

項目目錄，直接選擇指望這個目錄位置便可；
AppID,若是有註冊就填寫註冊的，若是沒有，點擊小程序會自動生成測試號便可；
項目名稱隨意；
複製代碼

這裏須要注意，選擇了目錄後，會默認勾選創建普通快速啓動模板，能夠理解是微信的demo便可；

建立後，整個界面長這樣：

哪一個界面有什麼用，這裏不打算講解，點幾下就知道了；
對於新手來講，好奇的是hello world跟獲取頭像暱稱文案及功能是怎麼來的？
這裏就要介紹下右側的目錄結構，後面全部項目的結構基本就是圍繞這個開展的；

小程序的文件結構

一個小程序首先有四個應用入口文件：

• app.js：設置一些項目的全局變量
• app.json：每個新頁面都必須在這個地方註冊，項目的導航欄和窗口界面設置有關的
• app.wxss：項目全局樣式
• project.config.json：項目配置文件

一個頁面主要是包含如下四個文件，這四個文件的名字應該都是同樣的，最好以頁面所在的文件夾名字爲標準：

• xxx.wxml：展現小程序頁面的元素和內容
• xxx.wxss：設置小程序頁面元素的樣式
• xxx.json：頁面的配置信息
• xxx.js：處理頁面的邏輯及數據jiaoh

一個最簡單的小程序，要有app.js跟app.json；
一個頁面要包含4個文件：wxml、wxss、json、js;

其餘log文件暫時不說明，其實也都相似；

hello world

上面建立的是微信官方的demo，但對於咱們學習來講，仍是有點門檻，由於一會兒太多文件了，那咱們就來個真正的demo，那建立項目的時候，就要把那個快速啓動模板去掉

效果以下：

這時候建立的項目除了有一個 默認的 project.config.json文件外， 什麼都沒有；
看右下方，提示未找到入口app.json;
上面有說過，一個程序必定要用app.js跟app.json，那咱們來建立它吧 ~

建立後，內容爲空便可，先放着；

接下來，想寫一個helloworld，那須要一個頁面，上面提到，一個頁面須要4個文件，那咱們能夠選擇把4個文件都放在app.js同一個目錄，可是爲了項目美觀，jb就新建一個目錄處理，先配置內容都爲空：

固然，放在同一個目錄也能夠，只是若是這個項目有N個頁面，都放首目錄的話，層次不夠突出並且不美觀：

由於處理下，新建一個pages，新建一個helloworld目錄，裏面放helloworld的4個文件，而後結構就調整成這樣啦~

ok，此時有一個新的頁面，那咱們就來app.json來配置下，上面說起到，每個新頁面都必須在app.json註冊,所以在app.json有這麼一段代碼：

{
  "pages": [
    "pages/helloworld/helloworld"
  ]
}
複製代碼

在app.json文件裏面的冒號前面的pages是微信官方規定的，是一個字段；
pages表示：小程序在啓動時首先加載app.json文件，微信客戶端首先在app.json文件中查找字段"pages"，客戶端找到這個字段名稱後，就能夠加載這裏面的頁面了。

這個pages名字是不能夠修改的，這是微信官方規定的，能夠理解爲微信客戶端用來加載微信小程序路徑的標識，沒有這個標識小程序裏面的頁面沒法加載。

那pages下的就是頁面，而此時咱們的helloworld.wxml就在pages/helloworld下，就此就有了上面這段代碼；

那接下來，就在helloworld.wxml寫下這段代碼：

<view>
	<text>hello world</text>
</view>
複製代碼

固然也能夠不用view,這裏用上是爲了後面介紹wxss，這裏簡單說下，view就至關於HTML 的div；

此時點擊保存，有發生什麼事？

結果下方會報錯：helloworld.json文件解析錯誤，SyntaxError: Unexpected end of JSON input

報這個錯是由於json裏空的,若是沒有配置需求,只須要在.json文件里加個 { } 大括號便可：

可是發現，依然會報錯：js 出現腳本錯誤或者未正確調用Page()

出現這個錯誤是由於咱們尚未寫js,也就是js裏面是空的,暫時咱們不要，那就先只寫個page({ })

此時再點擊保存，發現，helloworld出現啦~

從這個過程，使用到上面的js、json、wxml文件，那wxss文件有什麼用？
按照一開始的介紹，這是用來設置頁面的樣式，還記得咱們在wxml定義了一個view嗎？那咱們就能夠在wxss針對這個view作處理；

view{
  width: 100%;
  height: 40rpx;
  text-align: center
}
複製代碼

運行後的效果：

其餘補充

1）關於app.json，除了pages，還有其餘字段：

更多的信息，請查看小程序 app.json配置

2）rpx
rpx最重要的特性就是能夠根據屏幕寬度進行自適應。它規定屏幕寬爲750rpx。
官方換算表格：

3）小程序代碼結構與基本配置：
（若是不對請及時提出，謝謝~）

小結

經過今天的helloworld，對小程序的項目結構加深了了解，項目結構熟悉是很是重要的一步，猶想起剛看到demo項目時的懵逼，到如今的迷迷糊糊，先留個概念；

後面會逐一介紹小程序的框架、api等信息，也會跟你們一塊兒手把手學習下去;

謝謝你們~