閱讀948 返回首頁    go 人物


微信小程序開發教程 基礎篇2-微信小程序概覽

在上一篇教程的最後,我們生成了一個類似”Hello World”的小程序,這個過程中沒有編寫任何一行代碼。

在新建一個項目後,微信小程序會生成一個默認的程序框架,後續程序的開發工作都在這個框架上進行。這個默認框架包含下麵幾部分:

app.xx

每個微信小程序都會包含app.js, app.json, app.wxss 三個文件,其中app.js文件包含了程序的邏輯實現代碼,app.json是一個全局配置文件,app.wxss是一個全局樣式文件。後麵會詳細介紹每個文件的內容和作用。

pages 目錄

pages目錄包含了程序當前的頁麵文件,以默認生成的程序為例,該目錄下包含了index,logs兩個目錄,說明程序包括index和logs兩個頁麵。

以index為例,該目錄下包含index.js,index.wxss,index.wxml3個文件,其中js是代碼文件,wxss是樣式文件,wxml是頁麵結構描述文件。

熟悉web開發的同學應該會感覺很熟悉。微信小程序的開發模式確實和web開發很相似。目前邏輯部分僅支持javascript語言,並使用wxml(類似html)和wxss(類似css)來描述頁麵的結構和樣式。此處的javascript和web中是完全一樣的,但因為不是運行在瀏覽器環境中,因此無法使用 windows,document等對象,自然也無法使用jquery等第三方庫。而wxml,wxss的語法和html,css也是十分相近的。

頁麵也同樣可以包含一個index.json文件用於配置,不過這不是必須的。

通常一個完整的微信小程序包含上麵兩部分,當然我們也可以定義自己的目錄用於存放公共代碼和程序需要的其它文件。

app.json

打開app.json文件,可以看到如下代碼

其中pages部分包含了程序的頁麵,這樣框架就能知道從哪裏找到頁麵文件。而window部分包含了程序窗口的一些配置。詳細的配置項可以參考配置 小程序

app.wxss

app.wxss文件包含了全局的樣式信息,在默認生成的程序中,隻有一個類選擇器.container,該類型在index.wxml和 logs.wxml中有使用到。

app.js

該文件包含了程序的主體流程代碼實現,關於該部分的分析請見下一篇教程。

hello, 我是瘋狂早茶,懂點設計,懂點產品,碼農一枚,歡迎互聯網技術,產品從業者,愛好者關注交流。我的微信公眾號crazytea1,歡迎關注

最後更新:2017-10-08 03:10:45

  上一篇:go 微信平台跟雙十一搶頭條!安全登錄驗證二維碼不加載
  下一篇:go 微信小程序開發教程 基礎篇3-app.js 解析