微信小程序購物商城系統(tǒng)開發(fā)系列-目錄結(jié)構(gòu)介紹
上一篇我們簡單介紹了一下微信小程序的IDE(微信小程序購物商城系統(tǒng)開發(fā)系列-工具篇),相信大家都已經(jīng)蠢蠢欲試建立一個自己的小程序,去完成一個獨(dú)立的商城網(wǎng)站。
先別著急我們一步步來,先嘗試下寫一個自己的小demo.
這一篇文章我們主要的是介紹一下小程序的一些目錄結(jié)構(gòu),以及一些語法,為我們后面的微信小程序商城系統(tǒng)做鋪墊。
首先我們來了解下小程序的目錄結(jié)構(gòu)
Pages 我們新建的一些頁面將保存在這個文件夾下面,每一個小程序頁面是由同路徑下同名的四個不同后綴文件的組成,如:index.js、index.wxml、index.wxss、index.json。.js后綴的文件是腳本文件,.json后綴的文件是配置文件,.wxss后綴的是樣式表文件,.wxml后綴的文件是頁面結(jié)構(gòu)文件。
Utils 我們寫的一些公共的工具js可以放里面。
app.js 是小程序的腳本代碼。我們可以在這個文件中監(jiān)聽并處理小程序的生命周期函數(shù)、聲明全局變量。調(diào)用框架提供的豐富的 API,如本例的同步存儲及同步讀取本地數(shù)據(jù)。
app.json 是對整個小程序的全局配置。我們可以在這個文件中配置小程序是由哪些頁面組成,配置小程序的窗口背景色,配置導(dǎo)航條樣式,配置默認(rèn)標(biāo)題。
{ "pages":[ "pages/index/index", "pages/logs/logs" ], "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "WeChat", "navigationBarTextStyle":"black" } }
注:app.json中是對整個小程序的全局設(shè)置,當(dāng)然每個頁面也有自己的json文件。每個頁面下的json文件只能對window 進(jìn)行設(shè)置,所以頁面json文件下只需寫入window的配置即可
{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "WeChat", "navigationBarTextStyle":"black" }
app.wxss 是整個小程序的公共樣式表。我們可以在頁面組件的 class 屬性上直接使用 app.wxss 中聲明的樣式規(guī)則。
每個頁面中也可以定義自己的wxss。Wxss也就是微信所提供的css樣式表,里面的寫法幾乎和css差不多。不過他支持的選擇器相對比較少。在寫的時候我們以前的一些項(xiàng)目的css 基本可以拿過來用,不過除了下面這些選擇器外,你使用了其他的選擇器,可能使整個頁面報錯!
Index.whtml wxml后綴的文件夾也就是微信小程序提供給我們的頁面結(jié)構(gòu)文檔,就相當(dāng)于我們以前的web頁面的html 差不多,只不過他自定義了一些自己的標(biāo)簽。
接下來我們就新建一個頁面來嘗試下
在pages 下新建頁面test 注意新建的.js,.json,.xml,.wxss。和page 下定義的 test文件夾名稱保持一致,微信微信小程序會自動讀取這些文件,并生成小程序?qū)嵗?img src="http://img.jbzj.com/file_images/article/201611/2016112114553848.png" alt="" />
首先我們要在app.json下配置好我們剛新建的頁面
注意:頁面配置先后的順序,在實(shí)際操作中發(fā)現(xiàn),第一個配置的為首頁。
配置好后我們就可以編寫我們的頁面代碼。
大家可以看到,我們在app.json 頁面可以直接配置當(dāng)前頁面的一些window屬性
Wxml 中我們可以編寫一些我們頁面展示的結(jié)構(gòu),也就是我們以前寫html一樣。這中間我們使用到了 <view> 標(biāo)簽,他就相當(dāng)于我們以前用的div 差不多。
Wxss 大家看到是不是和我們以前寫的css 差不多。這邊是個我們之前定義的 .box 加一個樣式。
test.js 是頁面的腳本文件,在這個文件中我們可以監(jiān)聽并處理頁面的生命周期函數(shù)、獲取小程序?qū)嵗?,聲明并處理?shù)據(jù),響應(yīng)頁面交互事件等。
這邊我們使用bintap給view綁一個點(diǎn)擊事件然后再彈出一個提示框。
注意:這邊js的寫法和我們以前的寫法完全一樣,只不過這里面不能使用window對象和document對象,同樣的也不能使用jquery ,zepto等框架,因?yàn)檫@些框架中會使用到window和document 對象。
好啦!今天只是給大家簡單介紹下小程序的目錄結(jié)構(gòu)和簡單的使用了下,下一節(jié)我們會來開始我們商城系統(tǒng)的編寫。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- 詳解微信小程序開發(fā)(項(xiàng)目從零開始)
- 微信小程序 刪除項(xiàng)目工程實(shí)現(xiàn)步驟
- 微信小程序項(xiàng)目總結(jié)之記賬小程序功能的實(shí)現(xiàn)(包括后端)
- 基于mpvue搭建微信小程序項(xiàng)目框架的教程詳解
- 微信小程序轉(zhuǎn)化為uni-app項(xiàng)目的方法示例
- 簡單了解微信小程序的目錄結(jié)構(gòu)
- 微信小程序?qū)W習(xí)筆記之目錄結(jié)構(gòu)、基本配置圖文詳解
- 微信小程序開發(fā)(二)圖片上傳+服務(wù)端接收詳解
- 微信小程序 增、刪、改、查操作實(shí)例詳解
- 微信小程序 實(shí)戰(zhàn)小程序?qū)嵗?/a>
- 微信小程序?qū)W習(xí)總結(jié)(一)項(xiàng)目創(chuàng)建與目錄結(jié)構(gòu)分析
相關(guān)文章
javaScript 連接打印機(jī),打印小票的實(shí)例
下面小編就為大家分享一篇javaScript 鏈接打印機(jī),打印小票的實(shí)例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2017-12-12調(diào)整小數(shù)的格式保留小數(shù)點(diǎn)后兩位
調(diào)整小數(shù)的格式,如保留小數(shù)點(diǎn)后兩位等等在開發(fā)過程中經(jīng)常會遇到,下面本文搜集了一些不錯的實(shí)現(xiàn)方法與分享2014-05-05canvas實(shí)現(xiàn)動態(tài)小球重疊效果
在javascript運(yùn)動系列中,詳細(xì)介紹了各種運(yùn)動,其中就包括碰壁運(yùn)動。但是,如果用canvas去實(shí)現(xiàn),卻是另一種思路。本文將詳細(xì)介紹canvas動態(tài)小球重疊效果。下面跟著小編一起來看下吧2017-02-02利用javascript實(shí)現(xiàn)的三種圖片放大鏡效果實(shí)例(附源碼)
這篇文章主要介紹了利用javascript實(shí)現(xiàn)的幾種放大鏡效果,很實(shí)用一款漂亮的js圖片放大鏡特效,常見于電商網(wǎng)站上產(chǎn)品頁,用來放大展示圖片細(xì)節(jié),很有實(shí)用性,推薦下載學(xué)習(xí)研究。文中提供了完整的源碼供大家下載,需要的朋友可以參考借鑒,一起來看看吧。2017-01-01用函數(shù)模板,寫一個簡單高效的 JSON 查詢器的方法介紹
本篇文章小編將為大家介紹,用函數(shù)模板,寫一個簡單高效的 JSON 查詢器的方法介紹,需要的朋友可以參考一下2013-04-04淺談js中的attributes和Attribute的用法與區(qū)別
這篇文章主要介紹了淺談js中的attributes和Attribute的用法與區(qū)別,attributes可以獲取一個對象中的一個屬性,attributes 屬性返回指定節(jié)點(diǎn)屬性的集合,文中通過示例代碼介紹的非常詳細(xì),需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07