微信小程序_介紹

開發準備

注冊微信小程序
- 進入微信公眾平臺
- 點擊立即注冊，選擇小程序，前往注冊
- 完善個人/企業信息
獲取AppID

進入小程序頁面->開發->開發設置->AppID
下載微信開發者工具

微信官方下載下載微信開發者工具穩定版
創建項目
- 綁定AppID
- 不使用云服務

組成結構

主界面

在這里插入圖片描述

項目基本結構

在這里插入圖片描述

pages用來存放所有小程序的頁面
utils 用來存放工具性質的模塊（例如:格式化時間的自定義模塊)
app.js 小程序項目的入口文件
app.json 小程序項目的全局配置文件
app.wxss 小程序項目的全局樣式文件
project.config.json 項目的配置文件
sitemap.json 用來配置小程序及其頁面是否允許被微信索引

頁面組成部分

在這里插入圖片描述

其中，每個頁面由4個基本文件組成，它們分別是:

.js文件（頁面的腳本文件，存放頁面的數據、事件處理函數等)
.json文件（當前頁面的配置文件，配置窗口的外觀、表現等)
.wxml文件（頁面的模板結構文件)
.wxss文件（當前頁面的樣式表文件)

json文件

JSON 是一種數據格式，在實際開發中，JSON 總是以配置文件的形式出現。

小程序項目中也不例外：通過不同的 .json 配置文件，可以對小程序項目進行不同級別的配置。

小程序項目中有 4 種 json 配置文件，分別是：

① 項目根目錄中的 app.json 配置文件

② 項目根目錄中的 project.config.json 配置文件

③ 項目根目錄中的 sitemap.json 配置文件

④ 每個頁面文件夾中的 .json 配置文件

app.json

app.json 是當前小程序的全局配置，包括了小程序的所有頁面路徑、窗口外觀、界面表現、底部 tab 等。

Demo 項目里邊的 app.json 配置內容如下：

{//pages：用來記錄當前小程序所有頁面的路徑"pages": ["pages/index/index","pages/logs/logs"],//window：全局定義小程序所有頁面的背景色、文字顏色等"window": {"navigationBarTextStyle": "black","navigationStyle": "custom"},//style：全局定義小程序組件所使用的樣式版本"style": "v2","rendererOptions": {"skyline": {"defaultDisplayBlock": true,"disableABTest": true,"sdkVersionBegin": "3.0.0","sdkVersionEnd": "15.255.255"}},"componentFramework": "glass-easel",//sitemapLocation：用來指明 sitemap.json 的位置"sitemapLocation": "sitemap.json","lazyCodeLoading": "requiredComponents"
}

project.config.json

project.config.json 是項目配置文件，用來記錄我們對小程序開發工具所做的個性化配置

例如：

setting 中保存了編譯相關的配置
projectname 中保存的是項目名稱
appid 中保存的是小程序的賬號 ID

sitemap.json

微信現已開放小程序內搜索，效果類似于 PC 網頁的 SEO。

sitemap.json 文件用來配置小程序頁面是否允許微信索引。

當開發者允許微信索引時，微信會通過爬蟲的形式，為小程序的頁面內容建立索引。

當用戶的搜索關鍵字和頁面的索引匹配成功的時候，小程序的頁面將可能展示在搜索結果中。

sitemap 的索引提示是默認開啟的，如需要關閉 sitemap 的索引提示，可在小程序項目配置文件project.config.json 的 setting 中配置字段 checkSiteMap 為 false

頁面的.json配置文件

小程序中的每一個頁面，可以使用 .json 文件來對本頁面的窗口外觀進行配置，頁面中的配置項會覆蓋app.json 的 window 中相同的配置項。

新建小程序頁面

只需要在 app.json -> pages 中新增頁面的存放路徑，小程序開發者工具即可幫我們自動創建對應的頁面文件

例如：

"pages": ["pages/index/index","pages/logs/logs"，"pages/list/list"]

在pages中添加如上list，就會為我們自動創建相應的文件夾及文件

在這里插入圖片描述

修改項目首頁

只需要調整 app.json -> pages 數組中頁面路徑的前后順序，即可修改項目的首頁。小程序會把排在第一位的頁面，當作項目首頁進行渲染

WXML

WXML（WeiXin Markup Language）是小程序框架設計的一套標簽語言，用來構建小程序頁面的結構，其作用類似于網頁開發中的 HTML。

WXML 和 HTML 的區別

標簽名稱不同
- HTML （div, span, img, a）
- WXML（view, text, image, navigator）
屬性節點不同
- <a href="#">超鏈接</a>
- <navigator url="/pages/home/home"></navigator>
提供了類似于 Vue 中的模板語法
- 數據綁定
- 列表渲染
- 條件渲染

WXSS

WXSS (WeiXin Style Sheets)是一套樣式語言，用于描述 WXML 的組件樣式，類似于網頁開發中的 CSS。

WXSS 和 CSS 的區別

新增了 rpx 尺寸單位
- CSS 中需要手動進行像素單位換算，例如 rem
- WXSS 在底層支持新的尺寸單位 rpx，在不同大小的屏幕上小程序會自動進行換算
提供了全局的樣式和局部樣式
- 項目根目錄中的 app.wxss 會作用于所有小程序頁面
- 局部頁面的 .wxss 樣式僅對當前頁面生效
WXSS 僅支持部分 CSS 選擇器
- .class 和 #id
- element
- 并集選擇器、后代選擇器
- ::after 和 ::before 等偽類選擇器

js文件

一個項目僅僅提供界面展示是不夠的，在小程序中，我們通過 .js 文件來處理用戶的操作。例如：響應用戶的點擊、獲取用戶的位置等等。

.js文件分類

小程序中的 JS 文件分為三大類，分別是：

① app.js

是整個小程序項目的入口文件，通過調用 App() 函數來啟動整個小程序

② 頁面的 .js 文件

是頁面的入口文件，通過調用 Page() 函數來創建并運行頁面

③ 普通的 .js 文件

是普通的功能模塊文件，用來封裝公共的函數或屬性供頁面使用

宿主環境

概念

宿主環境（host environment）指的是程序運行所必須的依賴環境。例如：

Android 系統和 iOS 系統是兩個不同的宿主環境。

安卓版的微信 App 是不能在 iOS 環境下運行的，所以，Android 是安卓軟件的宿主環境，脫離了宿主環境的軟件是沒有任何意義的！

小程序的宿主環境

小程序借助宿主環境提供的能力，可以完成許多普通網頁無法完成的功能

例如：微信掃碼、微信支付、微信登錄、地理定位…

小程序宿主環境包含的內容：

通信模型、運行機制、組件、API

通信模型

小程序中通信的主體是渲染層和邏輯層，其中：

WXML 模板和 WXSS 樣式工作在渲染層
JS 腳本工作在邏輯層

小程序中的通信模型分為兩部分：

渲染層和邏輯層之間的通信
- 由微信客戶端進行轉發
邏輯層和第三方服務器之間的通信
- 由微信客戶端進行轉發

在這里插入圖片描述

運行機制

小程序啟動的過程：

把小程序的代碼包下載到本地
解析 app.json 全局配置文件
執行 app.js 小程序入口文件，調用 App() 創建小程序實例
渲染小程序首頁
小程序啟動完成

頁面渲染過程：

加載解析頁面的 .json 配置文件
加載頁面的 .wxml 模板和 .wxss 樣式
執行頁面的 .js 文件，調用 Page() 創建頁面實例
頁面渲染完成

組件

小程序中的組件也是由宿主環境提供的，開發者可以基于組件快速搭建出漂亮的頁面結構。

官方把小程序的組件分為了 9 大類，分別是：

① 視圖容器

② 基礎內容

③ 表單組件

④ 導航組件

⑤ 媒體組件

⑥ map 地圖組件

⑦ canvas 畫布組件

⑧ 開放能力

⑨ 無障礙訪問

視圖容器

常用的視圖容器類組件：

view
- 普通視圖區域
- 類似于 HTML 中的 div，是一個塊級元素
- 常用來實現頁面的布局效果
scroll-view
- 可滾動的視圖區域
- 常用來實現滾動列表效果
swiper 和 swiper-item
- 輪播圖容器組件和輪播圖 item 組件

view

在這里插入圖片描述

scroll-view

在這里插入圖片描述

swiper 和 swiper-item

在這里插入圖片描述

swiper 組件的常用屬性：

屬性	類型	默認值	說明
indicator-dots	boolean	false	是否顯示面板指示點
indicator-color	color	rgba(0,0,0,3)	指示點顏色
indicator-active-color	color	#000000	當前選中的指示點顏色
autoplay	boolean	false	是否自動切換
interval	number	5000	自動切換時間間隔
circular	boolean	false	是否采用銜接滑動

基礎內容

常用的基礎內容組件：

text
- 文本組件
- 類似于 HTML 中的 span 標簽，是一個行內元素
  
  通過 text 組件的 selectable 屬性，實現長按選中文本內容的效果
rich-text
- 富文本組件
- 支持把 HTML 字符串渲染為 WXML 結構
  
  通過 rich-text 組件的 nodes 屬性節點，把 HTML 字符串渲染為對應的 UI 結構

其他常用組件

button
- 按鈕組件
- 功能比 HTML 中的 button 按鈕豐富
- 通過 open-type 屬性可以調用微信提供的各種功能（客服、轉發、獲取用戶授權、獲取用戶信息等）
image
- 圖片組件
- image 組件默認寬度約 300px、高度約 240px
navigator
- 頁面導航組件
- 類似于 HTML 中的 a 鏈接

button

在這里插入圖片描述

image

在這里插入圖片描述

image的mode屬性

image 組件的 mode 屬性用來指定圖片的裁剪和縮放模式，常用的 mode 屬性值如下：

mode 值	說明
scaleToFill	（默認值）縮放模式，不保持縱橫比縮放圖片，使圖片的寬高完全拉伸至填滿 image 元素
aspectFit	縮放模式，保持縱橫比縮放圖片，使圖片的長邊能完全顯示出來。也就是說，可以完整地將圖片顯示出來。
aspectFill	縮放模式，保持縱橫比縮放圖片，只保證圖片的短邊能完全顯示出來。也就是說，圖片通常只在水平或垂直方向是完整的，另一個方向將會發生截取。
widthFix	縮放模式，寬度不變，高度自動變化，保持原圖寬高比不變
heightFix	縮放模式，高度不變，寬度自動變化，保持原圖寬高比不變

API

概述

小程序中的 API 是由宿主環境提供的，通過這些豐富的小程序 API，開發者可以方便的調用微信提供的能力，

例如：獲取用戶信息、本地存儲、支付功能等

協同工作

項目成員的組織結構

在這里插入圖片描述

小程序開發流程

在這里插入圖片描述

小程序成員管理

項目成員：
- 表示參與小程序開發、運營的成員
- 可登錄小程序管理后臺
- 管理員可以添加、刪除項目成員，并設置項目成員的角色
體驗成員：
- 表示參與小程序內測體驗的成員
- 可使用體驗版小程序，但不屬于項目成員
- 管理員及項目成員均可添加、刪除體驗成員

不同項目成員對應的權限：

權限	運營者	開發者	數據分析者
開發者權限		√
體驗者權限	√	√	√
登錄	√	√	√
數據分析			√
微信支付	√
推廣	√
開發管理	√
開發設置		√
暫停服務	√
解除關聯公眾號	√
騰訊云管理		√
小程序插件	√
游戲運營管理	√

開發者權限：可使用小程序開發者工具及對小程序的功能進行代碼開發

體驗者權限：可使用體驗版小程序

登錄權限：可登錄小程序管理后臺，無需管理員確認

開發設置：設置小程序服務器域名、消息推送及掃描普通鏈接二維碼打開小程序

騰訊云管理：云開發相關設置

小程序的版本

在軟件開發過程中，根據時間節點的不同，會產出不同的軟件版本，例如：

① 開發者編寫代碼的同時，對項目代碼進行自測（開發版本）

② 直到程序達到一個穩定可體驗的狀態時，開發者把體驗版本給到產品經理和測試人員進行體驗測試

③ 最后修復完程序的 Bug 后，發布正式版供外部用戶使用

版本階段	說明
開發版本	使用開發者工具，可將代碼上傳到開發版本中。開發版本只保留每人最新的一份上傳的代碼。點擊提交審核，可將代碼提交審核。開發版本可刪除，不影響線上版本和審核中版本的代碼。
體驗版本	可以選擇某個開發版本作為體驗版，并且選取一份體驗版。
審核中的版本	只能有一份代碼處于審核中。有審核結果后可以發布到線上，也可直接重新提交審核，覆蓋原審核版本。
線上版本	線上所有用戶使用的代碼版本，該版本代碼在新版本代碼發布后被覆蓋更新。