摘要:在新建一個項目后,微信小程序會生成一個默認的程序框架,后續程序的開發工作都在這個框架上進行。微信小程序的開發模式確實和開發很相似。通常一個完整的微信小程序包含上面兩部分,當然我們也可以定義自己的目錄用于存放公共代碼和程序需要的其它文件。
在上一篇教程的最后,我們生成了一個類似"Hello World"的小程序,這個過程中沒有編寫任何一行代碼。
在新建一個項目后,微信小程序會生成一個默認的程序框架,后續程序的開發工作都在這個框架上進行。這個默認框架包含下面幾部分:
每個微信小程序都會包含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":[ "pages/index/index", "pages/logs/logs" ], "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "WeChat", "navigationBarTextStyle":"black" } }
其中pages部分包含了程序的頁面,這樣框架就能知道從哪里找到頁面文件。而window部分包含了程序窗口的一些配置。詳細的配置項可以參考配置 小程序
app.wxssapp.wxss文件包含了全局的樣式信息,在默認生成的程序中,只有一個類選擇器.container,該類型在index.wxml和 logs.wxml中有使用到。
app.js該文件包含了程序的主體流程代碼實現,關于該部分的分析請見下一篇教程。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/80937.html
摘要:在之前的教程中寫到,微信小程序框架將程序分為邏輯層文件和視圖層文件。關于數據綁定的更多講述,敬請期待微信小程序開發教程基礎篇數據綁定下 在之前的教程中寫到,微信小程序框架將程序分為邏輯層(.js文件)和視圖層(.wxml文件)。這是一種常見的UI和邏輯分離的程序設計方式,開發出來的程序更加靈活,易擴展。 這種程序設計方式通常要解決兩個問題: UI層響應邏輯層邏輯和數據的變化UI層將用戶...
摘要:微信小程序應用號開發資源匯總文檔工具教程代碼插件組件文檔從搭建一個微信小程序開始小程序開發文檔小程序設計指南工具小程序開發者工具官方支持微信小程序實時預覽的支持的微信小程序組件化開發框架轉在線工具小程序云端增強社區微信小程序 微信(小程序or應用號)開發資源匯總-文檔-工具-教程-代碼-插件-組件 文檔 從搭建一個微信小程序開始 小程序開發文檔 小程序設計指南 工具 小程序開發者...
閱讀 2368·2021-11-18 10:07
閱讀 2318·2021-09-22 15:59
閱讀 3077·2021-08-23 09:42
閱讀 2276·2019-08-30 15:44
閱讀 1191·2019-08-29 15:06
閱讀 2303·2019-08-29 13:27
閱讀 1210·2019-08-29 13:21
閱讀 1412·2019-08-29 13:13