小程序簡介

概念

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

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

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

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

微信開發(fā)者工具

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

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

我們在編譯的時候會直接在左側(cè)進行更新，如果我們使用的是預(yù)覽，它會顯示一個二維碼，我們用微信掃描二維碼之后，可以進行真機實驗。

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

項目結(jié)構(gòu)

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

① pages 用來存放所有小程序的頁面

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

③ app.js 小程序項目的入口文件

④ app.json 小程序項目的全局配置文件

⑤ app.wxss 小程序項目的全局樣式文件

⑥ project.config.json 項目的配置文件

⑦ sitemap.json 用來配置小程序及其頁面是否允許被微信索引

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

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

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

JSON 配置文件

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

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

• 項目根目錄中的 app.json 配置文件
• 項目根目錄中的 project.config.json 配置文件
• 項目根目錄中的 sitemap.json 配置文件
• 每個頁面文件夾中的 .json 配置文件

接下來我們對上面四種配置文件展開說說：

app.json 文件

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

簡單了解下這 4 個配置項的作用：

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

project.config.json 文件

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

• setting 中保存了編譯相關(guān)的配置
• projectname 中保存的是項目名稱(小程序的名稱通過管理后臺來配置)
• appid 中保存的是小程序的賬號 ID

注意：

我們在詳情頁中的本地設(shè)置做出的操作，會在project.config.json文件中進行同步

sitemap.json 文件

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

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

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

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

頁面的 .json 配置文件

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

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

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

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

WXML 模板

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

WXML 和 HTML 的區(qū)別：

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

WXSS 樣式

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

WXSS 和 CSS 的區(qū)別:

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

JS 邏輯交互

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

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

app.js

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

頁面的 .js 文件

是頁面的入口文件，通過調(diào)用 Page() 函數(shù)來創(chuàng)建并運行頁面

普通的 .js 文件

是普通的功能模塊文件，用來封裝公共的函數(shù)或?qū)傩怨╉撁媸褂?/p>

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

宿主環(huán)境簡介

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

例如：

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

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

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

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

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

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

通信模型

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

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

② JS 腳本工作在邏輯層

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

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

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

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

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

運行機制

小程序啟動的過程：

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

頁面渲染的過程：

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

組件

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

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

常用的視圖容器類組件

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

我們對以上的三個組件進行一個簡單的使用：

view組件

我們可以嘗試一下實現(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;
}

我們可以看到在語法方面，其實跟html和css差不多

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

scroll-view組件

swiper 和 swiper-item 組件

swiper 組件的常用屬性：

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

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

text 組件的基本使用

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

rich-text 組件的基本使用

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

其它常用組件

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

button 按鈕的基本使用

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

image 組件的基本使用

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

image 組件的 mode 屬性：

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

例如我們使用一下aspectFit;

API

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

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

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

協(xié)同工作

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

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

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

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

小程序成員管理

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

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

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

開發(fā)者的權(quán)限說明

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

我們可以像下圖一樣在成員管理項中添加項目成員和體驗成員：

小程序的發(fā)布

小程序的版本

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

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

發(fā)布上線

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

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

接下來我們對每一個步驟進行相關(guān)說明：

上傳代碼

• 點擊開發(fā)者工具頂部工具欄中的“上傳” 按鈕
• 填寫版本號以及項目備注

然后我們要在后臺查看上傳之后的版本：

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

提交審核

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

發(fā)布

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

基于小程序碼進行推廣

相對于普通二維碼來說，小程序碼的優(yōu)勢如下：

① 在樣式上更具辨識度和視覺沖擊力

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

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

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

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

① 在“小程序后臺”查看

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

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

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

總結(jié)

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

最新評論