小程式開發之基礎入門指引

小程式開發之基礎入門指引
1 Star2 Stars3 Stars4 Stars5 Stars 給文章打分!
Loading...

1. 起步

1.1. 申請賬號

地址:https://mp.weixin.qq.com/wxopen/waregister?action=step1

註冊所填寫資訊:

郵箱
身份證姓名
身份證號(一個身份證號碼只能註冊5個小程式)
手機號(一個手機號碼只能註冊5個小程式)
掃碼繫結一個微信賬號為管理者

不同主體型別間的區別如下:

主體型別說明

如何選擇主體型別,參加官方說明

註冊成功後進入後臺,通過選單“設定 – 開發設定”得到小程式對應的 AppID(小程式身份標識),同時後臺擁有的其它功能如:管理小程式許可權、檢視資料包表、釋出小程式等。

1.2. 安裝開發者工具

下載地址:

Windows 64
Windows 32
macOS

該工具整合了公眾號網頁除錯小程式除錯兩種開發模式:

使用公眾號網頁除錯,開發者可以除錯微信網頁授權和微信 JS-SDK 等功能。 詳情
使用小程式除錯,開發者可以完成小程式的 API 和頁面的開發除錯、程式碼檢視和編輯、小程式預覽和釋出等功能。

關於該工具的詳細介紹,請點選這裡

1.3. Hello World

開啟開發者工具,選擇小程式;

專案配置:

小程式開發者工具專案配置

檢視效果

小程式開發者工具專案配置

在左側的模擬器中,單擊“獲取頭像暱稱”,將得到當前開發者工具已登入微信賬號對應的頭像、暱稱。

注意:因為沒有填寫 AppID,所以開發者工具有一些功能限制,比如上圖右上角中“預覽”、“遠端除錯”等按鈕是灰色。

2. 基本專案結構

通過上一步建立的快速預覽專案,我們可以看到,小程式主要由 *.json、*.js、*.wxss、*.wxml 四類檔案組成,詳細的說明見下文。

2.1. json

副檔名:*.json

主要實現一些靜態配置的功能,分為以下 3 類:

根目錄下的 app.json

對當前小程式的全域性配置,包括:所有頁面路徑、介面表現、網路超時時間、底部 tab 等,詳見這裡

根目錄下的 project.config.json

對當前開發者工具的配置,介面顏色、編譯配置等,詳見這裡

[page].json

存在於每個頁面(模組)對應的目錄底下,用於配置每個頁面的獨立屬性,詳見這裡

2.2. wxml

副檔名:*.wxml

WXML 全稱是 WeiXin Markup Language,是小程式框架設計的一套標籤語言,結合小程式的基礎元件、事件系統,可以構建出頁面的結構。其相當於 HTML,但是在 div、p、span 這些標籤的基礎上,做了一些封裝,新增了一些類似 wx:if 的屬性表示式等,以實現更多的功能,詳見這裡

基本特性簡介:

由開始標籤和結束標籤組成,而且必須嚴格閉合,比如 <view></view>

標籤可以擁有屬性,格式 key="value",大小寫敏感;

所有元件的共同屬性如下:

共同屬性

資料繫結功能,通過 {{變數名}} 來繫結 wxml 檔案對應 js 檔案中的 data 物件屬性;

變數名大小寫敏感;
沒有被定義的變數的或者是被設定為 undefined 的變數不會被同步到 wxml 中;

{{ }} 內進行簡單的邏輯運算

條件邏輯 wx:if="{{condition}}"

列表渲染 wx:for="{{array}}"

模版 <template name="">...</template>

引用其它檔案

import
include

2.3. wxss

副檔名:*.wxss

WXSS(WeiXin Style Sheets)是一套用於小程式的樣式語言,相當於 CSS,但是做了一些擴充和修改,詳見這裡

根目錄下 app.wxss 為專案公共樣式,各頁面共用,其它 *.wxss 適用於具體頁面;

新增了尺寸單位 rpx(responsive pixel);

rpx 的換算是以 375 個物理畫素為基準,也就是在一個寬度為 375 物理畫素的螢幕下,1rpx = 1px。
推薦以 iPhone6 螢幕(寬度為 375px,共 750 個物理畫素)為設計基準,此時 1rpx = 375 / 750px = 0.5px

引用其它樣式檔案 @import './test.wxss'

僅支援部分 CSS 選擇器:

僅支援部分 CSS 選擇器

樣式的權重遇 CSS 類似,從大到小為 !important > style="" > #id > .class > element

官方樣式庫:https://github.com/Tencent/weui-wxss

2.4. js

副檔名:*.js

小程式的主要開發語言是 JavaScript ,開發者使用它響應使用者操作、開發業務邏輯,以及呼叫小程式 API來完成業務需求。

ECMAScript 是一種由 Ecma 國際通過 ECMA-262 標準化的指令碼程式設計語言, JavaScript 是 ECMAScript 的一種實現。

ECMA-262 規定了 ECMAScript 語言的幾個重要組成部分:

語法
型別
語句
關鍵字
操作符
物件

JavaScript 實現形式對比:

js_constructer

小程式中的 JavaScript 是由 ECMAScript 以及小程式框架和小程式 API 來實現的。同瀏覽器中的 JavaScript 相比,沒有 BOM 以及 DOM 物件,所以類似 JQuery、Zepto 這種瀏覽器類庫是無法在小程式中執行起來的,同樣的缺少 Native 模組和 NPM 包管理的機制,小程式中無法載入原生庫,也無法直接使用大部分的 NPM 包。

小程式的執行的入口檔案是 app.js,並且會根據其中 require 的模組順序決定檔案的執行順序。

當 app.js 執行結束後,小程式會按照開發者在 app.json 中定義的 pages 的順序,逐一執行。

3. 執行流程

小程式執行流程

說明:

通過 app.json 中配置的第一個頁面為小程式的首頁。
客戶端裝載頁面程式碼,並通過底層一些機制,將頁面渲染出來。

4. 釋出

4.1. 設定使用者身份

對於一個由團隊開發的小程式專案,給每個參與人員設定不同的身份許可權是十分必要的,通過後臺選單 使用者身份 - 成員管理 進行設定,不同許可權的區別如下:

使用者身份

4.2. 測試預覽

使用開發者工具,如下操作:

小程式開發預覽

提示:如果建立專案的時候,沒有填寫 AppID,該按鈕是灰色不可用。

4.3. 上傳程式碼及釋出上線

同樣通過開發者工具,單擊右上角的“上傳”按鈕,確定上傳並填寫以下兩個欄位:

版本號

必填,僅限字母、數字,如 v1.0.0

專案備註

非必填,是對本次上傳對特別說明資訊。

上傳成功後成為【開發版】,小程式管理員可在後臺將本次上傳設定為【體驗版】,或提交稽核成為【稽核中版本】,稽核通通過後,可釋出小程式,成為【線上版】,具體流程如下:

小程式程式碼版本

說明

【開發版】只保留每人最新上傳的一份程式碼,可隨意刪除,不影響稽核版和線上版。
只能由一份程式碼處於【稽核版】,有稽核結果後,可釋出上線或重新提交稽核。
【線上版】會被每次釋出的新版本覆蓋。

可掃描下面的二維碼,通過小程式開發者助手快捷的體驗以上各版本。

小程式開發者助手

5. 其它

5.1. 檢視小程式運營資料

方式一:登入小程式管理後臺,開啟選單“資料分析”;

方式二:微信掃描下面對二維碼,使用小程式資料助手工具

小程式資料助手

5.2. 相關資源

官方

文件

開發文件
騰訊雲下一代小程式綜合解決方案
騰訊雲相關文件
關於會話服務
關於通道服務

微信開發者社群

更新日誌 – 小程式

更新日誌 – 開發者工具

工具

WeUI for 小程式
小程式元件化開發框架 wepy

Demo 類

豆瓣電影 Demo
電影推薦
仿芒果TV
We重郵

元件類

有贊小程式 UI 庫
美麗街小程式元件庫
小程式營銷元件

綜合類

小程式開發資源彙總
小程式元件化開發框架wepy開發資源彙總

其它

從零開始,用 Ubuntu Node.js MongoDB 搭建微信小程式服務
Flex 佈局教程:語法篇


持續更新地址:https://github.com/whorusq/wechat-learning

相關文章

前端開發 最新文章