第一塊：JSON
上面提到：每個分頁面分為JS（頁面邏輯）、JSON（頁面配置）、WXML（頁面結構）、WXSS（頁面樣式表）四個模塊，那么這些頁面分別都有什么用途呢？

JSON是頁面配置文件，可以對本頁面的窗口表現進行配置，文件內容為一個 JSON 對象，會涉及到很多的屬性。

比如navigationBarTitleText 就是顯示在小程序最上方的標題名稱。

頁面中配置項在當前頁面會覆蓋總的app.json的中相同的配置項。

{"navigationBarBackgroundColor": "#ffffff","navigationBarTextStyle": "black","navigationBarTitleText": "標題zwz","backgroundColor": "#eeeeee","backgroundTextStyle": "light" }

第二塊：WXML

WXML其實就是HTML，是框架設計的一套標簽語言，結合基礎組件、事件系統，可以構建出頁面的結構。

比如最常用的雙向數據綁定：

index.wxml<view class="container">{{msg}} </view> index.jsPage({data: {msg:'hello zwz',},onLoad: function () {} })

這樣，我們雖然在WXML界面沒有直接寫文字，但{{msg}}就直接讀取到了JS文件的變量值。

這時，我們按下CTRL + S（保存，重新編譯），我們會發現前臺會渲染出 hello zwz。

這就是傳說中的雙向數據綁定，你把JS后臺的 hello zwz 改成 hi zwz，那么前臺也會顯示 hi zwz，以此類推。

同理，如果是數組：

在JS頁面的Page的data下，加上array變量，作為普通數組

array:[1,2,3,4,5,6,7,8,9],
接著將WXML界面的msg替換成array，界面則會顯示如下：

本文原創首發CSDN，鏈接 https://blog.csdn.net/qq_41464123/article/details/105198163 ，作者博客https://blog.csdn.net/qq_41464123 ，轉載請帶上本段內容，尤其是腳本之家、碼神島等平臺，謝謝配合。

第三塊：WXSS
WXSS和CSS一樣，是一套樣式語言，用于描述 WXML 的組件樣式，WXSS 用來決定 WXML 的組件應該怎么顯示。WXSS在實際開發過程中，擁有絕大部分CSS的內容。

那么相比CSS而言，WXSS中獨有的rpx單位可能會用得到，這個尺度單位可以根據屏幕寬度進行自適應。

具體格式如下所示，下面是用了類選擇器對WXML中的元素進行樣式美化。

.title{font-size: 30px;color: royalblue; } .input-placeholder{font-size: 16px; } .section{width: 100%;height: 55px;box-sizing: border-box;padding-top: 15px;font-size: 16px;display: flex; }

第四塊：JS
這一塊毫無疑問，就是用來存放后端邏輯代碼的，我們需要掌握幾個常用的生命周期函數，onShow、onLoad。

Page({data: {msg: "hello zwz"},onLoad: function(options) {// 頁面創建時執行},onShow: function() {// 頁面出現在前臺時執行},onReady: function() {// 頁面首次渲染完畢時執行},onHide: function() {// 頁面從前臺變為后臺時執行},onUnload: function() {// 頁面銷毀時執行}, })

然后就是自定義方法，注意是和onLoad()平級。

比如，我們在WXML內定義一個按鈕

按鈕1
接著，在JS頁面編寫響應事件

Page({data: {msg: "hello zwz"},onLoad: function(options) {// 頁面創建時執行},run: function() {// do some things}, })

那么，我們在點擊這個按鈕之后，就會觸發run()這個方法。

五：總結
總而言之，本文講解了微信小程序項目的基本架構，以及如何學習微信小程序，以及學習微信小程序所需要的基礎，還有前臺渲染的基本代碼。

總結

以上是生活随笔為你收集整理的微信小程序接口的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。