一、結(jié)構(gòu)介紹：
☆pages： 用來(lái)存放所有小程序的頁(yè)面
? .js: 頁(yè)面的腳本文件，存放頁(yè)面的數(shù)據(jù)、事件處理函數(shù)等
? .json: 當(dāng)前頁(yè)面的配置文件，配置窗口的外觀、表現(xiàn)等
? .wxml: 頁(yè)面的模板結(jié)構(gòu)文件
? .wxss: 當(dāng)前頁(yè)面的樣式表文件
utils：用來(lái)存放工具性質(zhì)的模塊(如：格式化時(shí)間的自定義模塊)
☆app.js: 小程序項(xiàng)目的入口文件
☆app.json: 小程序項(xiàng)目的全局配置文件,包括了小程序的所有頁(yè)面路徑、窗口外觀、界面表現(xiàn)、底部tab等
app.wxss: 小程序項(xiàng)目的全局樣式文件
project.config.json: 項(xiàng)目的配置文件，用來(lái)記錄對(duì)小程序開發(fā)工具所做的個(gè)性化配置
sitemap.json: 用來(lái)配置小程序及其頁(yè)面是否允許被微信索引，微信現(xiàn)已開發(fā)小程序內(nèi)搜索，效果類似于PC網(wǎng)頁(yè)的SEO （當(dāng)開發(fā)者允許微信索引時(shí)，微信會(huì)通過爬蟲的形式，為小程序的頁(yè)面內(nèi)容建立索引。當(dāng)用戶的搜索關(guān)鍵字和頁(yè)面的索引匹配成功的時(shí)候，小程序的頁(yè)面將可能展示在搜索結(jié)果中。）

json配置文件：
? app.json?
? ? ?pages：用來(lái)記錄當(dāng)前小程序所有頁(yè)面的路徑
? ? ?window： 全局定義小程序所有頁(yè)面的背景色、文字顏色等
? ? ?style：全局定義小程序組件所使用的的樣式版本
? ? ?sitemapLocation： 用來(lái)指明sitemap.json的位置
? project.config.json
? ? setting: 保存了編譯相關(guān)的配置
? ? projectname：保存的是項(xiàng)目名稱
? ? appid： 小程序的賬號(hào)id
? sitemap.json?
? ? SEO
? pages/.json
? ? 使用.json文件來(lái)對(duì)本頁(yè)面的窗口外觀進(jìn)行配置，頁(yè)面中的配置項(xiàng)會(huì)覆蓋app.json的window中相同的配置項(xiàng)。

二、WXML模板
1.什么是WXML?
? WXML是小程序框架設(shè)計(jì)的一套標(biāo)簽語(yǔ)言，用來(lái)構(gòu)建小程序頁(yè)面的結(jié)果，其作用類似于網(wǎng)頁(yè)開發(fā)中的HTML。
2. WXML和HTML區(qū)別
? a. 標(biāo)簽名稱不同
? ? HTML (div, span, img, a)
? ? WXML (view, text, image, navigator)
? b. 屬性節(jié)點(diǎn)不同
? ? <a href="#">超鏈接</a>
? ? <navigator url="/pages/home/home"></navigator>
? c. 提供了類似于Vue中的模板語(yǔ)法
? ? 數(shù)據(jù)綁定
? ? 列表渲染
? ? 條件渲染

三、WXSS樣式
1. 什么是WXSS
? WXSS是一套樣式語(yǔ)言，用于描述WXML的組件樣式，類似于網(wǎng)頁(yè)開發(fā)中的CSS。
2. WXSS和CSS的區(qū)別
? a. 新增了rpx尺寸單位
? ? CSS中需要手動(dòng)進(jìn)行像素單位換算，如: rem
? ? WXSS在底層支持新的尺寸單位rpx，在不同大小的屏幕上小程序會(huì)自動(dòng)進(jìn)行換算
? b. 提供了全局的樣式和局部樣式
? ? 項(xiàng)目根目錄中的app.wxss會(huì)作用于所有小程序頁(yè)面
? ? 局部頁(yè)面的.wxss樣式僅對(duì)當(dāng)前頁(yè)面生效
? c. WXSS僅支持部分CSS選擇器?
? ? .class 和 #id
? ? element
? ? 并集選擇器、后代選擇器
? ? ::after和::before等偽類選擇器

四、JS邏輯交互
1. .json文件
? 在小程序中，通過.js文件來(lái)處理用戶的操作。如: 響應(yīng)用戶的點(diǎn)擊、獲取用戶的位置等。
2. .js文件的分類
? a. app.js
? ? 是整個(gè)小程序項(xiàng)目的入口文件,通過調(diào)用App()函數(shù)來(lái)啟動(dòng)整個(gè)小程序
? b. 頁(yè)面的.js文件
? ? 是頁(yè)面的入口文件，通過調(diào)用Page()函數(shù)來(lái)創(chuàng)建并運(yùn)行頁(yè)面
? c. 普通的.js文件
? ? 是普通的功能模塊文件,用來(lái)封裝公共的函數(shù)或?qū)傩怨╉?yè)面使用

五、小程序宿主環(huán)境
1. 通信模型
? a. 通信主體(小程序中通信的主體是渲染層和邏輯層)
? ? WXML模板和WXSS樣式工作在渲染層
? ? JS腳本工作在邏輯層
? b. 通信模型
? ? 渲染層和邏輯層之間的通信 -- 由微信客戶端進(jìn)行轉(zhuǎn)發(fā)
? ? 邏輯層和第三方服務(wù)器直接的通信 -- 有微信客戶端進(jìn)行轉(zhuǎn)發(fā)
2. 運(yùn)行機(jī)制
? a. 啟動(dòng)過程
? ? i: 把小程序的代碼包下載到本地
? ? ii: 解析app.json全局配置文件
? ? iii: 執(zhí)行app.js小程序入口文件,調(diào)用App()創(chuàng)建小程序?qū)嵗?br> ? ? iV: 渲染小程序首頁(yè)
? ? v: 小程序啟動(dòng)完成
? b. 頁(yè)面渲染過程
? ? i: 加載解析頁(yè)面的.json配置文件
? ? ii: 加載頁(yè)面的.wxml模板和.wxss樣式
? ? iii: 執(zhí)行頁(yè)面的.js文件,調(diào)用Page()創(chuàng)建頁(yè)面實(shí)例
? ? iv: 頁(yè)面渲染完成
3. 組件
? ☆1. 視圖容器
? ? a. view
? ? ? 普通視圖區(qū)域
? ? ? 類似于HTML中的div，是一個(gè)塊級(jí)元素
? ? ? 常用來(lái)實(shí)現(xiàn)頁(yè)面的布局效果
? ? b. scroll-view
? ? ? 可滾動(dòng)的視圖區(qū)域
? ? ? 常用來(lái)實(shí)現(xiàn)滾動(dòng)列表效果
? ? c. swiper和swiper-item
? ? ? 輪播圖容器組件和輪播圖item組件
? ☆2. 基礎(chǔ)內(nèi)容
? ? a. text
? ? ? 文本組件
? ? ? 類似于HTML中的span標(biāo)簽，是一個(gè)行內(nèi)元素
? ? b. rich-text
? ? ? 富文本組件
? ? ? 支持把HTML字符串渲染為WXML結(jié)構(gòu)
? ? c. button
? ? ? 按鈕組件
? ? ? 功能比HTML中的button按鈕豐富
? ? ? 通過open-type屬性key調(diào)用微信提供的各種功能(客服、轉(zhuǎn)發(fā)、獲取用戶授權(quán)、獲取用戶信息等)
? ? d. image
? ? ? 圖片組件
? ? ? image組件默認(rèn)寬度約300px、高度約240px
? ? f. navigator
? ? ? 頁(yè)面導(dǎo)航組件
? ? ? 類似于HTML中的a鏈接
? ☆3. 表單組件
? ☆4. 導(dǎo)航組件
? 5. 媒體組件
? 6. map地圖組件
? 7. canvas畫布組件
? 8. 開發(fā)能力
? 9. 無(wú)障礙訪問
4. API
? a. 事件監(jiān)聽API
? ? 特點(diǎn): 以on開頭，用來(lái)監(jiān)聽某些事件的觸發(fā)
? ? 如: wx.onWindowResize(function callback)監(jiān)聽窗口尺寸變化的事件
? b. 同步API
? ? 特點(diǎn)1：以Sync結(jié)尾的API都是同步API
? ? 特點(diǎn)2：同步API的執(zhí)行結(jié)果，可以通過函數(shù)返回值直接獲取，如果執(zhí)行出錯(cuò)會(huì)拋出異常
? ? 如：wx.setStorageSync('key','value')向本地存儲(chǔ)中寫入內(nèi)容
? c. 異步API
? ? 特點(diǎn): 類似于JQuery中的$.ajax(options)函數(shù)，需要通過success、fail、complete接收調(diào)用的結(jié)果
? ? 如：wx.request()發(fā)起網(wǎng)絡(luò)數(shù)據(jù)請(qǐng)求，通過success回調(diào)函數(shù)接收數(shù)據(jù)

六、協(xié)同工作
? 管理員
? 開發(fā)者
? 數(shù)據(jù)分析者
? 運(yùn)營(yíng)者
??

?文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-499398.html

到了這里，關(guān)于微信小程序入門一~結(jié)構(gòu)介紹的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！