微信小程序購物商城系統開發系列-目錄結構

上一篇咱們簡單介紹了一下微信小程序的IDE(微信小程序購物商城系統開發系列-工具篇)，相信你們都已經蠢蠢欲試創建一個本身的小程序，去完成一個獨立的商城網站。

先彆着急咱們一步步來，先嚐試下寫一個本身的小demo.

這一篇文章咱們主要的是介紹一下小程序的一些目錄結構，以及一些語法，爲咱們後面的微信小程序商城系統作鋪墊。

首先咱們來了解下小程序的目錄結構

 

Pages 咱們新建的一些頁面將保存在這個文件夾下面，每個小程序頁面是由同路徑下同名的四個不一樣後綴文件的組成，如：index.js、index.wxml、index.wxss、index.json。.js後綴的文件是腳本文件，.json後綴的文件是配置文件，.wxss後綴的是樣式表文件，.wxml後綴的文件是頁面結構文件。

Utils 咱們寫的一些公共的工具js能夠放裏面。

app.js 是小程序的腳本代碼。咱們能夠在這個文件中監聽並處理小程序的生命週期函數、聲明全局變量。調用框架提供的豐富的 API，如本例的同步存儲及同步讀取本地數據。

app.json 是對整個小程序的全局配置。咱們能夠在這個文件中配置小程序是由哪些頁面組成，配置小程序的窗口背景色，配置導航條樣式，配置默認標題。

{

  "pages":[

    "pages/index/index",

    "pages/logs/logs"

  ],

  "window":{

    "backgroundTextStyle":"light",

    "navigationBarBackgroundColor": "#fff",

    "navigationBarTitleText": "WeChat",

    "navigationBarTextStyle":"black"

  }

}

 

注：app.json中是對整個小程序的全局設置，固然每一個頁面也有本身的json文件。每一個頁面下的json文件只能對window 進行設置，因此頁面json文件下只需寫入window的配置便可

{

    "backgroundTextStyle":"light",

    "navigationBarBackgroundColor": "#fff",

    "navigationBarTitleText": "WeChat",

    "navigationBarTextStyle":"black"

  }

 

 

app.wxss 是整個小程序的公共樣式表。咱們能夠在頁面組件的 class 屬性上直接使用 app.wxss 中聲明的樣式規則。

每一個頁面中也能夠定義本身的wxss。Wxss也就是微信所提供的css樣式表，裏面的寫法幾乎和css差很少。不過他支持的選擇器相對比較少。在寫的時候咱們之前的一些項目的css 基本能夠拿過來用，不過除了下面這些選擇器外，你使用了其餘的選擇器，可能使整個頁面報錯!

 

Index.whtml  wxml後綴的文件夾也就是微信小程序提供給咱們的頁面結構文檔，就至關於咱們之前的web頁面的html 差很少，只不過他自定義了一些本身的標籤。

 

接下來咱們就新建一個頁面來嘗試下

 

在pages 下新建頁面test 注意新建的.js,.json,.xml,.wxss。和page 下定義的 test文件夾名稱保持一致，微信微信小程序會自動讀取這些文件，並生成小程序實例。

首先咱們要在app.json下配置好咱們剛新建的頁面

注意:頁面配置前後的順序，在實際操做中發現，第一個配置的爲首頁。

配置好後咱們就能夠編寫咱們的頁面代碼。

 

你們能夠看到，咱們在app.json 頁面能夠直接配置當前頁面的一些window屬性

 

Wxml 中咱們能夠編寫一些咱們頁面展現的結構，也就是咱們之前寫html同樣。這中間咱們使用到了 <view> 標籤，他就至關於咱們之前用的div 差很少。

 

Wxss 你們看到是否是和咱們之前寫的css 差很少。這邊是個咱們以前定義的 .box 加一個樣式。

test.js 是頁面的腳本文件，在這個文件中咱們能夠監聽並處理頁面的生命週期函數、獲取小程序實例，聲明並處理數據，響應頁面交互事件等。

 

 

這邊咱們使用bintap給view綁一個點擊事件而後再彈出一個提示框。

注意：這邊js的寫法和咱們之前的寫法徹底同樣，只不過這裏面不能使用window對象和document對象，一樣的也不能使用jquery ,zepto等框架，由於這些框架中會使用到window和document 對象。

好啦！今天只是給你們簡單介紹下小程序的目錄結構和簡單的使用了下，下一節咱們會來開始咱們商城系統的編寫。

 

：本系列文章基於「閃酷SAAS微信小程序商城系統【酷客多】」概括整理，可自由轉發，但須要保留知識產權，不然保留追究法律程序權利。