小程序簡(jiǎn)介

概念

小程序是一種不需要下載安裝即可使用的應(yīng)用，它實(shí)現(xiàn)了應(yīng)用“觸手可及”的夢(mèng)想，用戶掃一掃或者搜一下即可打開(kāi)應(yīng)用。也體現(xiàn)了“用完即走”的理念，用戶不用關(guān)心是否安裝太多應(yīng)用的問(wèn)題。應(yīng)用將無(wú)處不在，隨時(shí)可用，但又無(wú)需安裝卸載。

小程序與普通網(wǎng)頁(yè)開(kāi)發(fā)的區(qū)別

小程序與普通網(wǎng)頁(yè)開(kāi)發(fā)的區(qū)別主要集中在以下三個(gè)方面：

• 運(yùn)行環(huán)境不同
• API不同
• 開(kāi)發(fā)模式不同

微信開(kāi)發(fā)者工具

微信開(kāi)發(fā)者工具是官方推薦使用的小程序開(kāi)發(fā)工具，它提供的主要功能如下：

• 快速創(chuàng)建小程序項(xiàng)目
• 代碼的查看和編輯
• 對(duì)小程序功能進(jìn)行調(diào)試
• 小程序的預(yù)覽和發(fā)布

我們?cè)诰幾g的時(shí)候會(huì)直接在左側(cè)進(jìn)行更新，如果我們使用的是預(yù)覽，它會(huì)顯示一個(gè)二維碼，我們用微信掃描二維碼之后，可以進(jìn)行真機(jī)實(shí)驗(yàn)。

小程序代碼構(gòu)成

項(xiàng)目結(jié)構(gòu)

然后我們來(lái)看一下項(xiàng)目的基本組成結(jié)構(gòu)：

① pages 用來(lái)存放所有小程序的頁(yè)面

② utils 用來(lái)存放工具性質(zhì)的模塊（例如：格式化時(shí)間的自定義模塊）

③ app.js 小程序項(xiàng)目的入口文件

④ app.json 小程序項(xiàng)目的全局配置文件

⑤ app.wxss 小程序項(xiàng)目的全局樣式文件

⑥ project.config.json 項(xiàng)目的配置文件

⑦ sitemap.json 用來(lái)配置小程序及其頁(yè)面是否允許被微信索引

小程序官方建議把所有小程序的頁(yè)面，都存放在 pages 目錄中，以單獨(dú)的文件夾存在，如圖所示：

其中，每個(gè)頁(yè)面由 4 個(gè)基本文件組成，它們分別是：

• .js 文件（頁(yè)面的腳本文件，存放頁(yè)面的數(shù)據(jù)、事件處理函數(shù)等）
• .json 文件（當(dāng)前頁(yè)面的配置文件，配置窗口的外觀、表現(xiàn)等）
• .wxml 文件（頁(yè)面的模板結(jié)構(gòu)文件）
• .wxss 文件（當(dāng)前頁(yè)面的樣式表文件）

JSON 配置文件

JSON 是一種數(shù)據(jù)格式，在實(shí)際開(kāi)發(fā)中，JSON 總是以配置文件的形式出現(xiàn)。小程序項(xiàng)目中也不例外：通過(guò)不同的 .json 配置文件，可以對(duì)小程序項(xiàng)目進(jìn)行不同級(jí)別的配置。

小程序項(xiàng)目中有 4 種 json 配置文件，分別是：

• 項(xiàng)目根目錄中的 app.json 配置文件
• 項(xiàng)目根目錄中的 project.config.json 配置文件
• 項(xiàng)目根目錄中的 sitemap.json 配置文件
• 每個(gè)頁(yè)面文件夾中的 .json 配置文件

接下來(lái)我們對(duì)上面四種配置文件展開(kāi)說(shuō)說(shuō)：

app.json 文件

app.json 是當(dāng)前小程序的全局配置，包括了小程序的所有頁(yè)面路徑、窗口外觀、界面表現(xiàn)、底部 tab 等。Demo 項(xiàng)目里邊的 app.json 配置內(nèi)容如下：

簡(jiǎn)單了解下這 4 個(gè)配置項(xiàng)的作用：

• pages：用來(lái)記錄當(dāng)前小程序所有頁(yè)面的路徑
• window：全局定義小程序所有頁(yè)面的背景色、文字顏色等
• style：全局定義小程序組件所使用的樣式版本
• sitemapLocation：用來(lái)指明 sitemap.json 的位置

project.config.json 文件

project.config.json 是項(xiàng)目配置文件，用來(lái)記錄我們對(duì)小程序開(kāi)發(fā)工具所做的個(gè)性化配置，例如：

• setting 中保存了編譯相關(guān)的配置
• projectname 中保存的是項(xiàng)目名稱(小程序的名稱通過(guò)管理后臺(tái)來(lái)配置)
• appid 中保存的是小程序的賬號(hào) ID

注意：

我們?cè)谠斍轫?yè)中的本地設(shè)置做出的操作，會(huì)在project.config.json文件中進(jìn)行同步

sitemap.json 文件

微信現(xiàn)已開(kāi)放小程序內(nèi)搜索，效果類似于 PC 網(wǎng)頁(yè)的 SEO。sitemap.json 文件用來(lái)配置小程序頁(yè)面是否允許微信索引。

當(dāng)開(kāi)發(fā)者允許微信索引時(shí)，微信會(huì)通過(guò)爬蟲(chóng)的形式，為小程序的頁(yè)面內(nèi)容建立索引。當(dāng)用戶的搜索關(guān)鍵字和頁(yè)面的索引匹配成功的時(shí)候，小程序的頁(yè)面將可能展示在搜索結(jié)果中。

如果不想被索引，我們可以將action中的allow改成disallow

注意：sitemap 的索引提示是默認(rèn)開(kāi)啟的，如需要關(guān)閉 sitemap 的索引提示，可在小程序項(xiàng)目配置文件project.config.json 的 setting 中配置字段 checkSiteMap 為 false

頁(yè)面的 .json 配置文件

小程序中的每一個(gè)頁(yè)面，可以使用 .json 文件來(lái)對(duì)本頁(yè)面的窗口外觀進(jìn)行配置，頁(yè)面中的配置項(xiàng)會(huì)覆蓋app.json 的 window 中相同的配置項(xiàng)。例如：

新建一個(gè)小程序頁(yè)面：
只需要在 app.json -> pages 中新增頁(yè)面的存放路徑，小程序開(kāi)發(fā)者工具即可幫我們自動(dòng)創(chuàng)建對(duì)應(yīng)的頁(yè)面文件，如圖所示：

pages文件夾下面放著list目錄，list目錄里面有l(wèi)ist頁(yè)面

修改項(xiàng)目首頁(yè):
只需要調(diào)整 app.json -> pages 數(shù)組中頁(yè)面路徑的前后順序，即可修改項(xiàng)目的首頁(yè)。小程序會(huì)把排在第一位的頁(yè)面，當(dāng)作項(xiàng)目首頁(yè)進(jìn)行渲染，如圖所示:

WXML 模板

WXML（WeiXin Markup Language）是小程序框架設(shè)計(jì)的一套標(biāo)簽語(yǔ)言，用來(lái)構(gòu)建小程序頁(yè)面的結(jié)構(gòu)，其作用類似于網(wǎng)頁(yè)開(kāi)發(fā)中的 HTML。

WXML 和 HTML 的區(qū)別：

• 標(biāo)簽名稱不同
  • HTML （div, span, img, a）
  • WXML（view, text, image, navigator）
• 屬性節(jié)點(diǎn)不同
  • <a href="#">超鏈接</a>
  • <navigator url="/pages/home/home"></navigator>
• 提供了類似于 Vue 中的模板語(yǔ)法
  • 數(shù)據(jù)綁定
  • 列表渲染
  • 條件渲染

WXSS 樣式

WXSS (WeiXin Style Sheets)是一套樣式語(yǔ)言，用于描述 WXML 的組件樣式，類似于網(wǎng)頁(yè)開(kāi)發(fā)中的 CSS

WXSS 和 CSS 的區(qū)別:

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

JS 邏輯交互

一個(gè)項(xiàng)目?jī)H僅提供界面展示是不夠的，在小程序中，我們通過(guò) .js 文件來(lái)處理用戶的操作。例如：響應(yīng)用戶的點(diǎn)擊、獲取用戶的位置等等。

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

app.js

是整個(gè)小程序項(xiàng)目的入口文件，通過(guò)調(diào)用 App() 函數(shù)來(lái)啟動(dòng)整個(gè)小程序

頁(yè)面的 .js 文件

是頁(yè)面的入口文件，通過(guò)調(diào)用 Page() 函數(shù)來(lái)創(chuàng)建并運(yùn)行頁(yè)面

普通的 .js 文件

是普通的功能模塊文件，用來(lái)封裝公共的函數(shù)或?qū)傩怨╉?yè)面使用

小程序的宿主環(huán)境

宿主環(huán)境簡(jiǎn)介

宿主環(huán)境（host environment）指的是程序運(yùn)行所必須的依賴環(huán)境。

例如：

Android 系統(tǒng)和 iOS 系統(tǒng)是兩個(gè)不同的宿主環(huán)境。安卓版的微信 App 是不能在 iOS 環(huán)境下運(yùn)行的，所以，Android 是安卓軟件的宿主環(huán)境，脫離了宿主環(huán)境的軟件是沒(méi)有任何意義的！

手機(jī)微信是小程序的宿主環(huán)境，如圖所示：

小程序借助宿主環(huán)境提供的能力，可以完成許多普通網(wǎng)頁(yè)無(wú)法完成的功能，例如：

• 微信掃碼
• 微信支付
• 微信登錄
• 地理定位
• …

小程序宿主環(huán)境包含的內(nèi)容（也就是微信為小程序提供的支持）：

• 通信模型
• 運(yùn)行機(jī)制
• 組件
• API

通信模型

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

① WXML 模板和 WXSS 樣式工作在渲染層

② JS 腳本工作在邏輯層

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

① 渲染層和邏輯層之間的通信

由微信客戶端進(jìn)行轉(zhuǎn)發(fā)

② 邏輯層和第三方服務(wù)器之間的通信

由微信客戶端進(jìn)行轉(zhuǎn)發(fā)

運(yùn)行機(jī)制

小程序啟動(dòng)的過(guò)程：

• ① 把小程序的代碼包下載到本地
• ② 解析 app.json 全局配置文件
• ③ 執(zhí)行 app.js 小程序入口文件，調(diào)用 App() 創(chuàng)建小程序?qū)嵗?/li>
• ④ 渲染小程序首頁(yè)
• ⑤ 小程序啟動(dòng)完成

頁(yè)面渲染的過(guò)程：

• ① 加載解析頁(yè)面的 .json 配置文件
• ② 加載頁(yè)面的 .wxml 模板和 .wxss 樣式
• ③ 執(zhí)行頁(yè)面的 .js 文件，調(diào)用 Page() 創(chuàng)建頁(yè)面實(shí)例
• ④ 頁(yè)面渲染完成

組件

小程序中的組件也是由宿主環(huán)境提供的，開(kāi)發(fā)者可以基于組件快速搭建出漂亮的頁(yè)面結(jié)構(gòu)。官方把小程序的組件分為了 9 大類，分別是：

• 視圖容器
• 基礎(chǔ)內(nèi)容
• 表單組件
• 導(dǎo)航組件
• 媒體組件
• map 地圖組件
• canvas 畫布組件
• 開(kāi)放能力
• 無(wú)障礙訪問(wèn)

常用的視圖容器類組件

• view
  • 普通視圖區(qū)域
  • 類似于 HTML 中的 div，是一個(gè)塊級(jí)元素
  • 常用來(lái)實(shí)現(xiàn)頁(yè)面的布局效果
• scroll-view
  • 可滾動(dòng)的視圖區(qū)域
  • 常用來(lái)實(shí)現(xiàn)滾動(dòng)列表效果
• swiper 和 swiper-item
  • 輪播圖容器組件 和 輪播圖 item 組件

我們對(duì)以上的三個(gè)組件進(jìn)行一個(gè)簡(jiǎn)單的使用：

view組件

我們可以嘗試一下實(shí)現(xiàn)flex橫向布局：

wxml：

<!--pages/list/list.wxml-->
<view class="container1">
  <view>A</view>
  <view>B</view> 
  <view>C</view>  
</view>

wxss:

/* pages/list/list.wxss */

.container1 {
    display: flex;
    justify-content: space-around; 
}

.container1 view:nth-child(1) {
    background-color: lightgreen;
}
.container1 view:nth-child(2) {
  background-color: lightskyblue;
}
.container1 view:nth-child(3) {
  background-color: lightcoral;
}

.container1 view{
  height: 100px;
  width: 100px;
  line-height: 100px;
  text-align: center;
}

我們可以看到在語(yǔ)法方面，其實(shí)跟html和css差不多

注意：
這里的class不能取名為container，因?yàn)閏ontainer是關(guān)鍵字，使用它的話我們的樣式會(huì)不起作用。取名為container1等等都是可以的

scroll-view組件

swiper 和 swiper-item 組件

swiper 組件的常用屬性：

常用的基礎(chǔ)內(nèi)容組件

• text
  • 文本組件
  • 類似于 HTML 中的 span 標(biāo)簽，是一個(gè)行內(nèi)元素
• rich-text
  • 富文本組件
  • 支持把 HTML 字符串渲染為 WXML 結(jié)構(gòu)

text 組件的基本使用

通過(guò) text 組件的 selectable 屬性，實(shí)現(xiàn)長(zhǎng)按選中文本內(nèi)容的效果：

rich-text 組件的基本使用

通過(guò) rich-text 組件的 nodes 屬性節(jié)點(diǎn)，把 HTML 字符串渲染為對(duì)應(yīng)的 UI 結(jié)構(gòu)：

其它常用組件

• button
  • 按鈕組件
  • 功能比 HTML 中的 button 按鈕豐富
  • 通過(guò) open-type 屬性可以調(diào)用微信提供的各種功能（客服、轉(zhuǎn)發(fā)、獲取用戶授權(quán)、獲取用戶信息等）
• image
  • 圖片組件
  • image 組件默認(rèn)寬度約 300px、高度約 240px
• navigator
  • 頁(yè)面導(dǎo)航組件
  • 類似于 HTML 中的 a 鏈接

button 按鈕的基本使用

button的屬性非常多，我們可以通過(guò)官方文檔去查看：

image 組件的基本使用

同時(shí)我們要注意image是有默認(rèn)的長(zhǎng)寬的：

image 組件的 mode 屬性：

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

例如我們使用一下aspectFit;

API

小程序中的 API 是由宿主環(huán)境提供的，通過(guò)這些豐富的小程序 API，開(kāi)發(fā)者可以方便的調(diào)用微信提供的能力，例如：獲取用戶信息、本地存儲(chǔ)、支付功能等。

小程序官方把 API 分為了如下 3 大類：

• 事件監(jiān)聽(tīng) API
  • 特點(diǎn)：以 on 開(kāi)頭，用來(lái)監(jiān)聽(tīng)某些事件的觸發(fā)
  • 舉例：wx.onWindowResize(function callback) 監(jiān)聽(tīng)窗口尺寸變化的事件
• 同步 API
  • 特點(diǎn)1：以 Sync 結(jié)尾的 API 都是同步 API
  • 特點(diǎn)2：同步 API 的執(zhí)行結(jié)果，可以通過(guò)函數(shù)返回值直接獲取，如果執(zhí)行出錯(cuò)會(huì)拋出異常
  • 舉例：wx.setStorageSync(‘key’, ‘value’) 向本地存儲(chǔ)中寫入內(nèi)容
• 異步 API
  • 特點(diǎn)：類似于 jQuery 中的 $.ajax(options) 函數(shù)，需要通過(guò) success、fail、complete 接收調(diào)用的結(jié)果
  • 舉例：wx.request() 發(fā)起網(wǎng)絡(luò)數(shù)據(jù)請(qǐng)求，通過(guò) success 回調(diào)函數(shù)接收數(shù)據(jù)

協(xié)同工作

在中大型的公司里，人員的分工非常仔細(xì)：同一個(gè)小程序項(xiàng)目，一般會(huì)有不同崗位、不同角色的員工同時(shí)參與設(shè)計(jì)與開(kāi)發(fā)。

此時(shí)出于管理需要，我們迫切需要對(duì)不同崗位、不同角色的員工的權(quán)限進(jìn)行邊界的劃分，使他們能夠高效的進(jìn)行協(xié)同工作。

項(xiàng)目成員的組織架構(gòu)：

小程序的開(kāi)發(fā)流程：

小程序成員管理

小程序成員管理體現(xiàn)在管理員對(duì)小程序項(xiàng)目成員及體驗(yàn)成員的管理：

• 項(xiàng)目成員：
  • 表示參與小程序開(kāi)發(fā)、運(yùn)營(yíng)的成員
  • 可登錄小程序管理后臺(tái)
  • 管理員可以添加、刪除項(xiàng)目成員，并設(shè)置項(xiàng)目成員的角色
• 體驗(yàn)成員：
  • 表示參與小程序內(nèi)測(cè)體驗(yàn)的成員
  • 可使用體驗(yàn)版小程序，但不屬于項(xiàng)目成員
  • 管理員及項(xiàng)目成員均可添加、刪除體驗(yàn)成員

我們來(lái)看看不同項(xiàng)目成員對(duì)應(yīng)的權(quán)限：

開(kāi)發(fā)者的權(quán)限說(shuō)明

• ① 開(kāi)發(fā)者權(quán)限：可使用小程序開(kāi)發(fā)者工具及對(duì)小程序的功能進(jìn)行代碼開(kāi)發(fā)
• ② 體驗(yàn)者權(quán)限：可使用體驗(yàn)版小程序
• ③ 登錄權(quán)限：可登錄小程序管理后臺(tái)，無(wú)需管理員確認(rèn)
• ④ 開(kāi)發(fā)設(shè)置：設(shè)置小程序服務(wù)器域名、消息推送及掃描普通鏈接二維碼打開(kāi)小程序
• ⑤ 騰訊云管理：云開(kāi)發(fā)相關(guān)設(shè)置

我們可以像下圖一樣在成員管理項(xiàng)中添加項(xiàng)目成員和體驗(yàn)成員：

小程序的發(fā)布

小程序的版本

軟件開(kāi)發(fā)過(guò)程中的不同版本
在軟件開(kāi)發(fā)過(guò)程中，根據(jù)時(shí)間節(jié)點(diǎn)的不同，會(huì)產(chǎn)出不同的軟件版本，例如：

• ① 開(kāi)發(fā)者編寫代碼的同時(shí)，對(duì)項(xiàng)目代碼進(jìn)行自測(cè)（開(kāi)發(fā)版本）
• ② 直到程序達(dá)到一個(gè)穩(wěn)定可體驗(yàn)的狀態(tài)時(shí)，開(kāi)發(fā)者把體驗(yàn)版本給到產(chǎn)品經(jīng)理和測(cè)試人員進(jìn)行體驗(yàn)測(cè)試
• ③ 最后修復(fù)完程序的 Bug 后，發(fā)布正式版供外部用戶使用

發(fā)布上線

小程序發(fā)布上線的整體步驟：

上傳代碼 -> 提交審核 -> 發(fā)布

接下來(lái)我們對(duì)每一個(gè)步驟進(jìn)行相關(guān)說(shuō)明：

上傳代碼

• 點(diǎn)擊開(kāi)發(fā)者工具頂部工具欄中的“上傳” 按鈕
• 填寫版本號(hào)以及項(xiàng)目備注

然后我們要在后臺(tái)查看上傳之后的版本：

登錄小程序管理后臺(tái) -> 管理 -> 版本管理 -> 開(kāi)發(fā)版本，即可查看剛才提交上傳的版本了

提交審核

為什么需要提交審核：為了保證小程序的質(zhì)量，以及符合相關(guān)的規(guī)范，小程序的發(fā)布是需要經(jīng)過(guò)騰訊官方審核的。
提交審核的方式：在開(kāi)發(fā)版本的列表中，點(diǎn)擊“提交審核”按鈕之后，按照頁(yè)面提示填寫相關(guān)的信息，就能把小程序提交到騰訊官方進(jìn)行審核。

發(fā)布

審核通過(guò)之后，管理員的微信中會(huì)收到小程序通過(guò)審核的通知，此時(shí)在審核版本的列表中，點(diǎn)擊“發(fā)布”按鈕之后，即可把“審核通過(guò)”的版本發(fā)布為“線上版本”，供所有小程序用戶訪問(wèn)和使用。

基于小程序碼進(jìn)行推廣

相對(duì)于普通二維碼來(lái)說(shuō)，小程序碼的優(yōu)勢(shì)如下：

① 在樣式上更具辨識(shí)度和視覺(jué)沖擊力

② 能夠更加清晰地樹(shù)立小程序的品牌形象

③ 可以幫助開(kāi)發(fā)者更好地推廣小程序

獲取小程序碼的 5 個(gè)步驟：
登錄小程序管理后臺(tái) -> 設(shè)置 -> 基本設(shè)置 -> 基本信息 -> 小程序碼及線下物料下載

查看小程序運(yùn)營(yíng)數(shù)據(jù)的兩種方式

① 在“小程序后臺(tái)”查看

• 登錄小程序管理后臺(tái)
• 點(diǎn)擊側(cè)邊欄的“統(tǒng)計(jì)”
• 點(diǎn)擊相應(yīng)的 tab 可以看到相關(guān)的數(shù)據(jù)

② 使用“小程序數(shù)據(jù)助手”查看

• 打開(kāi)微信
• 搜索“小程序數(shù)據(jù)助手”
• 查看已發(fā)布的小程序相關(guān)的數(shù)據(jù)

總結(jié)

到此這篇關(guān)于手把手教你如何開(kāi)發(fā)屬于自己的一款小程序的文章就介紹到這了,更多相關(guān)小程序開(kāi)發(fā)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論