PHP:【微信小程序】初識(shí)微信小程序，微信小程序配置

一.介紹

• 小程序提供了一個(gè)簡(jiǎn)單、高效的應(yīng)用開(kāi)發(fā)框架和豐富的組件及 API，幫助開(kāi)發(fā)者在微信中開(kāi)發(fā)具有原生 APP 體驗(yàn)的服務(wù)

• 小程序是一種全新的連接用戶(hù)與服務(wù)的方式，它可以在微信內(nèi)被便捷地獲取和傳播，同時(shí)具有出色的使用體驗(yàn)

二.速讀

• 微信小程序是騰訊公司旗下
• 微信小程序只能在微信里打開(kāi)
• 微信小程序代碼構(gòu)成：WXML(html)，WXSS(css)，JS，JSON
• 微信小程序文件構(gòu)成：
  • .json后綴 JSON 配置文件
  • .wxml后綴 WXML 模板文件
  • .wxss后綴 WXSS 樣式文件
  • .js后綴 小程序腳本邏輯文件
  • .wxs后綴 小程序腳本邏輯文件
• 微信小程序上線(xiàn)后，請(qǐng)求項(xiàng)目接口必須是 https 協(xié)議
• 微信小程序支持：微信支付、客服系統(tǒng)、插件

三.整體架構(gòu)介紹

• 整個(gè)小程序框架系統(tǒng)分為兩部分：邏輯層（App Service）和 視圖層（View）。小程序提供了自己的視圖層描述語(yǔ)言 WXML 和 WXSS，以及基于 JavaScript 的邏輯層框架，并在視圖層與邏輯層間提供了數(shù)據(jù)傳輸和事件系統(tǒng)，讓開(kāi)發(fā)者能夠?qū)Ｗ⒂跀?shù)據(jù)與邏輯。

  • 1.視圖層 View
    視圖層由 WXML 與 WXSS 編寫(xiě)，由組件來(lái)進(jìn)行展示
    WXML(WeiXin Markup language) 用于描述頁(yè)面的結(jié)構(gòu)
    WXSS(WeiXin Style Sheet) 用于描述頁(yè)面的樣式
    組件(Component)是視圖的基本組成單元

  • 2.邏輯層 App Service
    小程序開(kāi)發(fā)框架的邏輯層使用 JavaScript 引擎
    邏輯層將數(shù)據(jù)進(jìn)行處理后發(fā)送給視圖層，同時(shí)接受視圖層的事件反饋
    框架 提供豐富的微信原生 API，可以方便的調(diào)起微信提供的能力，如獲取用戶(hù)信息，本地存儲(chǔ)，掃一掃，支付功能等
    提供模塊化能力，每個(gè)頁(yè)面有獨(dú)立的作用域

  • 3.文件結(jié)構(gòu)介紹

• 一個(gè)小程序可以有很多頁(yè)面，每個(gè)頁(yè)面承載不同的功能，頁(yè)面之間可以互相跳轉(zhuǎn)
• 一個(gè)頁(yè)面由配置代碼 JSON 文件、模板代碼 WXML 文件、樣式代碼 WXSS 文件以及邏輯代碼 JavaScript 文件組成

wxchant 微信小程序根目錄
├─pages 頁(yè)面根目錄
│ ├─index index目錄
│ │ ├─index.json json配置文件
│ │ ├─index.wxml wxml模版文件
│ │ ├─index.wxss wxss樣式文件
│ │ └─index.js js邏輯事件文件
│ │
│ ├─logs logs目錄
│ │ ├─logs.json json配置文件
│ │ ├─logs.wxml wxml模版文件
│ │ ├─logs.wxss wxss樣式文件
│ └──└─logs.js js邏輯事件文件
│
├─utils 公共模塊目錄
│ └─util.js 公共模塊文件
│
├─app.json 公共json配置文件
├─app.wxss 公共wxss樣式文件
├─app.js 小程序啟動(dòng)文件
├─project.config.json 開(kāi)發(fā)者工具配置文件
└─sitemap.json 微信索引配置文件

四.配置

• 1、全局配置
  小程序根目錄下的 app.json 文件用來(lái)對(duì)微信小程序進(jìn)行全局配置

• pages 頁(yè)面路徑列表

  

• 1.window 配置項(xiàng)

• 導(dǎo)航欄標(biāo)題文字內(nèi)容
  

• 2.tabBar 配置項(xiàng)

• 3.list 配置項(xiàng)

• 小程序字體按鈕

如果沒(méi)有字體圖標(biāo)，建議去阿里云字體圖標(biāo)看看

• 4.頁(yè)面配置
  • 每一個(gè)小程序頁(yè)面也可以使用 .json 文件來(lái)對(duì)本頁(yè)面的窗口表現(xiàn)進(jìn)行配置

• 頁(yè)面單獨(dú)配置json文件
  

五.視圖層

• 視圖層由 WXML 與 WXSS 編寫(xiě)，由組件來(lái)進(jìn)行展示
  • WXML(WeiXin Markup language) 用于描述頁(yè)面的結(jié)構(gòu)
  • WXSS(WeiXin Style Sheet) 用于描述頁(yè)面的樣式

• 組件(Component)是視圖的基本組成單元

  • wxml 書(shū)寫(xiě)方式跟 html 非常相似
  • wxml 的組件有開(kāi)始標(biāo)簽和結(jié)束標(biāo)簽，忘寫(xiě)結(jié)束標(biāo)簽會(huì)報(bào)錯(cuò)
  • wxml 的標(biāo)簽支持屬性、事件
  • wxml 支持邏輯語(yǔ)法和條件判斷

• 1.什么是組件

  • 組件是視圖層的基本組成單元。
  • 組件自帶一些功能與微信風(fēng)格一致的樣式。
  • 一個(gè)組件通常包括 開(kāi)始標(biāo)簽 和 結(jié)束標(biāo)簽，屬性 用來(lái)修飾這個(gè)組件，內(nèi)容 在兩個(gè)標(biāo)簽之內(nèi)。

• 2.視圖容器

• 3.基礎(chǔ)內(nèi)容

• 4.表單組件

批改老師：歐陽(yáng)克

批改狀態(tài)：合格

老師批語(yǔ)：不錯(cuò)，繼續(xù)努力。。多寫(xiě)寫(xiě)自己的開(kāi)發(fā)和示例。