手把手教你如何開發(fā)屬于自己的一款小程序
小程序簡介
概念
小程序是一種不需要下載安裝即可使用的應(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)試
- 小程序的預覽和發(fā)布
我們在編譯的時候會直接在左側(cè)進行更新,如果我們使用的是預覽,它會顯示一個二維碼,我們用微信掃描二維碼之后,可以進行真機實驗。
小程序代碼構(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 文件
(當前頁面的配置文件,配置窗口的外觀、表現(xiàn)等).wxml 文件
(頁面的模板結(jié)構(gòu)文件).wxss 文件
(當前頁面的樣式表文件)
JSON 配置文件
JSON 是一種數(shù)據(jù)格式,在實際開發(fā)中,JSON 總是以配置文件的形式出現(xiàn)。小程序項目中也不例外:通過不同的 .json 配置文件,可以對小程序項目進行不同級別的配置。
小程序項目中有 4 種 json 配置文件,分別是:
- 項目根目錄中的 app.json 配置文件
- 項目根目錄中的 project.config.json 配置文件
- 項目根目錄中的 sitemap.json 配置文件
- 每個頁面文件夾中的 .json 配置文件
接下來我們對上面四種配置文件展開說說:
app.json 文件
app.json 是當前小程序的全局配置,包括了小程序的所有頁面路徑、窗口外觀、界面表現(xiàn)、底部 tab 等。Demo 項目里邊的 app.json 配置內(nèi)容如下:
簡單了解下這 4 個配置項的作用:
- pages:用來記錄當前小程序所有頁面的路徑
- 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 文件用來配置小程序頁面是否允許微信索引。
當開發(fā)者允許微信索引時,微信會通過爬蟲的形式,為小程序的頁面內(nèi)容建立索引。當用戶的搜索關(guān)鍵字和頁面的索引匹配成功的時候,小程序的頁面將可能展示在搜索結(jié)果中。
如果不想被索引,我們可以將action中的allow改成disallow
注意:sitemap 的索引提示是默認開啟的,如需要關(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ù)組中頁面路徑的前后順序,即可修改項目的首頁。小程序會把排在第一位的頁面,當作項目首頁進行渲染,如圖所示:
WXML 模板
WXML(WeiXin Markup Language)
是小程序框架設(shè)計的一套標簽語言,用來構(gòu)建小程序頁面的結(jié)構(gòu),其作用類似于網(wǎng)頁開發(fā)中的 HTML。
WXML 和 HTML 的區(qū)別:
- 標簽名稱不同
- 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 樣式僅對當前頁面生效
- 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)容
- 表單組件
- 導航組件
- 媒體組件
- 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 標簽,是一個行內(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 組件默認寬度約 300px、高度約 240px
- navigator
- 頁面導航組件
- 類似于 HTML 中的 a 鏈接
button 按鈕的基本使用
button的屬性非常多,我們可以通過官方文檔去查看:
image 組件的基本使用
同時我們要注意image是有默認的長寬的:
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é)同工作
在中大型的公司里,人員的分工非常仔細:同一個小程序項目,一般會有不同崗位、不同角色的員工同時參與設(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)限:可登錄小程序管理后臺,無需管理員確認
- ④ 開發(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)理和測試人員進行體驗測試
- ③ 最后修復完程序的 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)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JavaScript使用ZeroClipboard操作剪切板
這篇文章主要為大家詳細介紹了JavaScript使用ZeroClipboard操作剪切板的相關(guān)資料,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-05-05javascript?中動畫制作方法?animate()屬性
這篇文章主要介紹了javascript?中動畫制作方法?animate()屬性,animate是所有dom元素都有的方法,可以用來最做過度動畫,關(guān)鍵幀動畫,下面文章的相關(guān)介紹需要的小伙伴可以參考一下2022-04-04webpack5?import動態(tài)導入實現(xiàn)按需加載并給文件統(tǒng)一命名的配置方法
這篇文章主要介紹了webpack5?import動態(tài)導入實現(xiàn)按需加載并給文件統(tǒng)一命名的配置,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-11-11