教你如何從零建造一個小程式項目

IDE準備

下載位址：mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html

知識準備

# JavaScrip還是要看的，推薦教學：JavaScript 初級教學

從零開始

微信小程式中就四種類型的檔案

js ----- ----- JavaScrip檔案

json -------- 專案設定文件，負責視窗顏色等等

wxml ------- 類似HTML檔案

wxss ------- 類似CSS文件

在根目錄下用app來命名的這四中類型的文件，就是程式入口文件。

app.json

必須要有這個文件，如果沒有這個文件，IDE會報錯，因為微信框架把這個作為配置文件入口，

你只需創建這個文件，裡面寫個大括號就行

以後我們會在這裡對整個小程式的全域配置。記錄了頁面組成，配置小程式的視窗 背景色，配置導覽條樣式，配置預設標題。

app.js

必須要有這個文件，沒有也是會報錯！但是這個檔案建立一下就行 什麼都不需要寫

以後我們可以在這個檔案中監聽並處理小程式的生命週期函數、宣告全域變數。

app.wxss

這個檔案不是必須的。因為它只是個全域CSS樣式檔

app.wxml

這個也不是必須的，而且這個並不是指主介面哦~因為小程式的主頁是靠在JSON檔中配置來決定的

有了這兩個文件你運行程序，IDE就不會報錯了，也意味著這是最簡單的微信小程序

創建程序實例Hello World

app.js檔案管理整個程式的生命週期，所以在裡面加入以下程式碼：（輸入App IDE會有提示）

App({  onLaunch: function () {    console.log( 'App Launch')  },  onShow: function () {    console.log('App Show')  },  onHide: function () {    console.log('App Hide')  }})

具體API解釋如下

美化ActionBar

json檔案負責設定ActionBar顏色，我們只需要在裡面加入以下程式碼即可，下圖有參數說明！

Paste_Image.png

Paste_Image.png

{    "window":{        "navigationBarBackgroundColor": "#igBD8", tyle" :"white"    }}

Paste_Image.png

現在看ActionBar是不是像那麼回事了！好接下來我們繼續寫我們第一個介面

美化頁面

美化頁面我們用到了wxml 和wxss檔

為了程式碼結構簡潔

我們需要在跟目錄下創建一個新資料夾名字隨意，我們這裡叫pages

然後在pages資料夾裡再創建新資料夾名字隨意這裡我們叫index

然後我們建立index.wxml檔案然後在裡面寫入以下程式碼

Hellotext>view>

然後建立index.wxss檔案然後在裡面寫入以下程式碼

#.window{ color=#4995fa;}

然後我們建立index.js檔案

在檔案中輸入如下程式碼（輸入Page IDE會有提示）

函數解釋如下：

Paste_Image.png

設定首頁

Json檔案負責設定頁面路徑

所以我們在裡面加入如下程式碼

其中index的意義其實就是指index.js檔

這裡需要說明一點pages 裡面的路徑其實是指向js檔的

如果一個目錄下沒有該名稱的js檔是會報錯的！

"pages":[  "pages/index/index"],

#完成了！我們來運行程式！

超級Hello World

為了學習事件綁定，以及如何將資料在頁面上更新

我們來做個超級Hello World，就是我點擊文字，能讓

它變色！

綁定事件

我們開啟index.wxml 將裡面程式碼改成這樣

Hellotext>view>

其實就是加了catchtap=" click"

這兩個屬性是什麼意思呢別著急我會一一解釋

上圖展示了事件的一些的屬性名稱，這裡需要注意紅框標註起來的內容，要區分出冒泡事件和非冒泡事件，其實冒泡事件就是需要往上面一層容器傳遞這個事件。

看了這張圖我們再來看catchtap="click" 的意思

catch 代表非冒泡事件

tap 代表點擊事件

所以連在一起就是非冒泡點擊事件

那後面那個click是啥

click 其實只是個變數名字

我們在index.js需要用這個名字綁定接收事件的函數

我們開啟index.js

接著加入下列函數

click:function(){    console.log("點擊了文字");  },

添加完後程式碼長這樣紅框中就是新增的這個程式碼

所以其實點擊事件的回呼函數就是catchtap="click"

####中的click 後面加上:function() 構成的###

現在我們來運行程式試試然後點擊文字

看是不是呼叫了click:function 函數並且打出了log

好接下來我們寫點擊一下變色的邏輯

那要如何讓一個文字變色呢，當然是css

所以我們需要再index.wxss 中加入一個樣式

.window-red{    color:#D23933;}

然後我們進入index.js檔

你會發現程式碼裡面有個data:{} 它不是page生命週期函數

#其實他是變數的數組，這個裡面申請的變數都可以在wxml中使用

我們在這裡申請一個color

color的值就是index.wxss中的樣式名稱

然後進入index.wxml中,將class中的值改成{{color}}

其實意思就是將js檔案中變數color的值在這裡使用

#也就是值等於window

然後我們再回到index.js檔案

在最上面申請一個變數控制點擊

然後在click:function() 函數中加入如下程式碼

click:function (){    console.log("點擊了文字");      if(flag){        color = "window-red";        flag = false         }      this.setData({ color      });  },

修改完後的程式碼如圖

其實就是點選是後更換color變數的值而更換的這個值其實就是樣式的名稱

更新介面資料

這裡有個問題我們更換完值但是在wxml中不會立即生效

所以我們需要呼叫

this.setData()方法將值同步給wxml 讓它立即生效

#好了我們運行程式點擊Hello 看看是不是點一下變一下顏色！

最後再補充一點index目錄下也是可以設定json檔案的

也就是每個頁面都可以配置自己獨特的actionbar顏色等等

這裡的設定會覆蓋app.json檔案的設定

原始碼github 位址https://github.com/pwh0996/WXDemo.git

最後分享一波小程式原始碼，488個小程式demo原始碼下載專區：

p/36fc7213b5d0

有精力的朋友建議翻閱。

---

我在知乎開了一個live，4月22日晚（週六）8點半我在知乎與大家見面：【0基礎週末學習小程序開發】（https://www.zhihu.com/lives/832919740296101888），歡迎捧場。

長按小程式碼，打開“修行公社”，即刻加入“微信小程式”米圈

本篇首發於我的個人微信公眾號哲學李論，主推藝術/技術相關內容，關注的都是朋友。

以上是教你如何從零建造一個小程式項目的詳細內容。更多資訊請關注PHP中文網其他相關文章！