前端與移動開發----微信小程式----小程式（一）

微信小程式第一天

1. 什么是小程式

1.1 小程式的概念

小程式是一種不需要下載、安裝即可使用的應用，它實作了應用觸手可及的夢想，用戶掃一掃或者搜一下就能打開應用，也實作了用完即走的理念，用戶不用安裝太多應用，應用隨處可用，但又無須安裝卸載

1. 特點：無需下載（并非不下載，而是小程式體積非常小，用戶感知不到下載的程序 打開任意一個小程式(2MB)）、無需卸載
2. 理念：用完即走（讓用戶在短時間內完成某件操作，用戶離開小程式即可，并不需要關注小程式本身）
3. 入口：掃一掃、搜一下、群聊……

1.2 小程式產生的目的

攔截用戶流量入口，今后，用戶每天的大多數應用需求，都可以從微信小程式中獲得

2. 小程式與普通網頁開發以及APP的區別

1. 運行環境不同

   • 網頁 運行在 瀏覽器環境 中
   • 小程式 運行在 微信環境 中
   • App 運行在 手機作業系統 中

2. API 不同

   • 由于運行環境的不同，所以小程式中，無法呼叫 DOM 和 BOM 的 API
   • 但是，在小程式中可以呼叫微信環境提供的各種 API，例如：
     • 微信支付
     • 微信掃碼
     • 地理定位
   • App 的 API 是手機作業系統給提供

3. 開發模式不同

   • 網頁的開發模式：代碼編輯器 + 瀏覽器
   • 小程式擁有自己的一套標準開發模式
     • 申請小程式開發賬號
     • 安裝小程式開發者工具
     • 創建和配置并開發小程式專案
     • 在開發者工具中對代碼進行上線
   • App 開發模式需要呼叫 IOS 和 Android 的組件庫

3. 小程式開發的流程

參考網址：微信公眾平臺

1. 注冊：在微信公眾平臺注冊小程式，完成注冊后可以同步進行資訊完善和開發

   • 在實際開發中，注冊通常由運營、產品經理、專案經理進行注冊
   • 并不是前端程式員來進行注冊

2. 小程式資訊完善：填寫小程式基本資訊，包括名稱、頭像、介紹及服務范圍等

   • 在實際開發中，完善小程式的基本資訊，通常是由運營、專案經理、產品經理進行完善
   • 前端程式員不要更改這些的基本資訊

3. 開發小程式：完成小程式開發者系結、開發資訊配置后，開發者可下載開發者工具、參考開發檔案進行小程式的開發和除錯

   • 前端程式員主要戰場
   • 在實際開發中，開發一個小程式，首先需要將自己的微信號給相關的負責人系結到注冊的小程式中，才能夠進行開發
   • 下載開發者工具
   • 參考開發檔案進行小程式的開發

4. 提交審核和發布：完成小程式開發后，提交代碼至微信團隊審核，審核通過后即可發布(公測期間不能發布)

   • 在實際開發中，小程式的發布和上線，可能是前端程式員或者相關的負責人進行發布和上線
   • 開發好專案以后，需要確認是否是由前端進行上線

4. 注冊小程式開發賬號的流程

需要在微信公眾平臺注冊小程式賬號

微信公眾平臺：微信公眾號平臺

微信公眾號實際上分為 4 類：訂閱號(就是咱們平臺聊天時候說的公眾號)、服務號、小程式、企業微信

1. 點擊注冊按鈕

   使用瀏覽器打開 微信公眾平臺 網址，點擊右上角的 “立即注冊” 即可進入到小程式開發賬號的注冊流程

2. 選擇注冊的帳號型別

3. 填寫賬號資訊

   • 郵箱不能被個人微信系結

4. 郵箱激活

5. 點擊鏈接激活賬號

6. 選擇主體型別

7. 主體登記資訊

8. 注冊完畢

5. 獲取小程式 AppID

相當于小程式在微信中的“身份證”，有了 AppID ，微信客戶端才能確定小程式“身份”，并使用微信提供的高級介面

• 用來創建小程式專案
• 呼叫一些高級的介面

6. 微信開發者工具

6.1 安裝微信開發者工具

1. 了解微信開發者工具

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

   • 快速創建小程式專案
   • 代碼的查看和編輯
   • 對小程式功能進行除錯
   • 小程式的預覽和發布

2. 下載并安裝微信開發者工具

   • 推薦下載和安裝最新的穩定版 Stable Build 的微信開發者工具
   • 微信開發者工具下載地址
   • 安裝方式： 下一步 --> 下一步

6.2 掃碼登錄到微信開發者工具

6.3 設定外觀和代理

1. 為什么需要代理設定 ?

   • 因為部分同學可能電腦安裝了網路加速器或者翻墻工具，導致網路不穩定
   • 為了防止加速器造成網路的不穩定，所以推薦代理設定為 不使用任何代理

6.4 演示新建小程式的步驟

1. 點擊 + 號，新建專案

   

2. 填寫專案資訊

   

6.5 預覽小程式的兩種方式

1. 在模擬器上查看專案效果

   

2. 在真機上預覽專案效果

   

6.6 開發者工具主界面的 5 個組成部分

1. 主界面的 5 個組成部分，從上到下，到左到右，依次是

   • 選單欄
   • 工具列
   • 模擬器
   • 代碼編輯區
   • 除錯區

7. 小程式專案的構成

7.1 小程式目錄的構成

1. pages 用來存放所有小程式的頁面
2. utils 用來存放工具性質的模塊（例如：格式化時間的自定義模塊）
3. app.js 小程式專案的入口檔案 — main.js
4. app.json 小程式專案的全域組態檔
5. app.wxss 小程式專案的全域樣式檔案
6. project.config.json 專案的組態檔
7. sitemap.json 用來配置小程式及其頁面是夠允許被微信索引 – SEO – 搜索引擎優化

• json 檔案在小程式中是組態檔
  • 不能寫注釋
  • 鍵和值都必須是雙引號
  • 不能出現多余的逗號

7.2 小程式頁面的組成部分

vue 單檔案組件：3 個部分：template 、script、style

小程式官方建議把所有的 小程式頁面，都存放在 pages 目錄中，每個頁面以單獨的檔案夾存在

其中，每個頁面 由 4 個基本檔案 組成，他們分別是：

1. .js 檔案 – 頁面的腳本檔案，存放頁面的資料、事件處理函式、生命周期等
2. .json 檔案 – 當前頁面的組態檔，配置頁面的外觀、表現等
3. .wxml 檔案 – 頁面的模板結構檔案
4. .wxss 檔案 – 當前頁面的樣式表檔案

7.3 認識小程式中的 4 種組態檔

JSON 是一種資料格式，在實際開發中，JSON 總是以組態檔的形式出現，小程式專案也不例外，通過不同的 .json 組態檔，可以對小程式專案進行不同級別的配置，小程式專案中有 4 中 json 檔案，分別是：

1. 專案根目錄中的 app.json 組態檔 ★★★★★
2. 專案根目錄中的 project.config.json 組態檔
3. 專案根目錄中的 sitemap.json 組態檔
4. 每個頁面檔案夾中的 .json 組態檔 ★★★★★

7.4 app.json 檔案

app.json 是當前小程式的全域配置，包括了小程式的所有頁面路徑、視窗外觀、界面表現、底部 tab 等， Demo 專案里面的 app.json 配置內容如下：

• 全域組態檔就是指配置好以后，能夠影響到每一個頁面
• 所有頁面路徑

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

1. pages：用來記錄當前小程式所有頁面的路徑
2. window：全域定義小程式所有頁面的背景色、檔案顏色等
3. style：全域定義小程式組件所使用的樣式版本
   • 微信小程式是運行到微信內部的
   • 樣式風格和微信是一致的
   • 微信主要樣式風格會發生改變，小程式也會隨之發生改變
   • 這時候就產生了樣式版本的概念
4. sitemapLocation：用來指明 sitemap.json 的位置

7.5 project.config.json 檔案

project.config.json 是專案組態檔，用來記錄我們對小程式開發工具所做的個性化配置，例如：

1. setting 中保存了編譯相關的配置
2. projectname 中保存的是專案名稱
3. appid 中保存的是小程式的賬號 ID

7.6 sitemap.json 檔案

在實際開發中，這個檔案，默認就可以

如果需要進行配置，需要按照運營的要求，進行檔案的配置

微信現已開放小程式內搜索，效果類似于 PC 網頁的 SEO （搜索引擎優化），sitemap.json 用來配置小程式頁面是否允許微信搜索，

當開發者允許微信搜索時，微信會通過爬蟲的形式，為小程式的頁面內容建立索引，當用戶的搜索關鍵字和頁面的索引匹配成功的時候，小程式的頁面將可能展示在搜索結果中，

注意： sitemap 的索引提示是默認開啟的，如需要關閉 sitemap 的索引提示，可在小程式專案組態檔 project.config.json 的 setting 中配置欄位 checkSiteMap 為 false

7.7 頁面的 .json 組態檔

小程式中的每一個頁面，可以使用 .json 檔案來對本頁面的視窗外觀進行配置，頁面中的配置項會覆寫 app.json 中的 window 中的配置項

7.8 新建小程式頁面

1. 在 pages 檔案中右鍵 新建檔案夾 -- home，在 home 檔案夾右鍵 新建 home -- 輸入 hoome
   • 官方推薦檔案夾名稱和頁面的名稱一致，方便后期的維護
   • 新建頁面組件的時候，不需要輸入后綴名
2. 在 app.json --> pages 中新增頁面的存放路徑，小程式開發者工具即可幫我們自動創建對應的頁面檔案
3. 對 pages 目錄下頁面的洗掉或者新增都需要在 app.json 檔案的 pages 陣列中進行新增或洗掉

7.9 設定首頁的兩個方式

1. 調整 app.json --> pages 陣列中頁面路徑的前后順序，即可修改專案的首頁，小程式會把排在第一位的頁面，當作專案首頁進行渲染

2. 在 app.json 中 pages 同級，配置一個新的節點 entryPagePath 節點，傳入需要設定為首頁的路徑即可
   • 最終小程式專案的首頁，以 entryPagePath 節點設定的為準

7.10 WXML 的概念以及和 HTML 之間的區別

1. 什么是 WXML

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

2. WXML 和 HTML 的區別

   • 標簽名稱不同

     • HTML — div、p、span、img
     • WXML — view、text、image、navigator

   • 屬性節點不同

     • <a href="#">超鏈接</a>
     • <navigator url="/pages/home/home"></navigator>

   • 提供了類似于 Vue 中的模板語法

     • 資料系結 – 插值運算式
     • 串列渲染 – wx:for – v-for
     • 條件渲染 – wx:if – v-if

7.11 WXSS 的概念以及和 CSS 之間的區別

1. 什么是 WXSS

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

2. WXSS 和 CSS 之間的區別

   • 新增了 rpx 自適應尺寸單位

     • CSS 中需要手動進行像素單位換算，例如 rem
     • WXSS 在底層支持新的尺寸單位 rpx，在不同大小的螢屏上小程式會自動進行換算

   • 提供了全域的樣式和區域樣式

     • 專案根目錄中的 app.wxss 會作用于所有小程式頁面
     • 區域頁面的 .wxss 樣式僅對當前頁面生效

   • WXSS 僅支持部分 CSS 選擇器

     • 重點使用 class 選擇器

     • .class 和 #id

     • element

     • 并集選擇器和后代選擇器

     • ::after 和 ::before 等偽類選擇器

7.12 小程式中 JS 檔案的三大分類

一個專案僅僅提供頁面的展示是不夠的，在小程式中，我們通過 .js 檔案來處理用戶的操作，例如：回應用戶的點擊、獲取用戶的位置等等

小程式中的 JS 檔案分類三大類，分別是：

1. app.js

   • 是整個小程式專案的入口檔案，通過呼叫 App() 函式 來啟動整個小程式

2. 頁面的 .js 檔案

   • 是頁面的入口檔案，通過呼叫 Page() 函式來創建小程式頁面，并運行小程式頁面

3. 普通的 .js 檔案

   • 是普通的功能模塊檔案，用來封裝公共的函式或屬性供頁面使用

8. 宿主環境

8.1 了解宿主環境的概念

宿主環境指的是 程式運行所必須的依賴環境，例如：

1. Android 系統和 IOS 系統是兩個不同的宿主環境
2. 安卓版的微信 App 是不能在 IOS 環境下運行的，所以 Android 是安卓軟體的宿主環境，脫離了宿主環境的軟體是沒有任何意義的

8.2 小程式的宿主環境

1. 小程式的宿主環境

   微信是小程式的宿主環境，如圖所示：

? 小程式借助宿主環境提供的能力，可以完成許多普通網頁無法完成的功能，例如：微信掃碼、微信支付、微信登錄、地理定位 等等

2. 小程式宿主環境包含的內容
   • 通信模型
   • 運行機制
   • 組件 – “標簽”
   • API – “方法”

8.3 小程式的通信主體

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

1. WXML 模板和 WXSS 樣式作業在渲染層
2. JS 腳本作業在邏輯層

8.4 小程式的通信模型

小程式中的通信模型分為兩個部分

1. 渲染層 和 邏輯層 之間的通信

   • 由微信客戶端進行轉發

2. 邏輯層 和 第三方服務器 之間的通信

   • 由微信客戶端進行轉發

8.5 運行機制

1. 小程式啟動的程序

   • 把小程式的代碼包下載到本地
   • 決議 app.json 全域組態檔
   • 執行 app.js 小程式入口檔案，呼叫 App() 創建小程式實體
   • 渲染小程式首頁
   • 小程式啟動完成

2. 頁面渲染的程序

   • 加載決議頁面的 .json 組態檔
   • 加載頁面的 .wxml 模板和 .wxss 樣式
   • 執行頁面的 .js 檔案，呼叫 Page() 創建頁面實體
   • 頁面渲染完成

9. 小程式中的組件

9.1 了解常用的視圖容器組件

1. 小程式中的組件也是由宿主環境提供的，開發者可以基于組件快速搭建出漂亮的頁面結構，官方把小程式的組件分為了 9 大類，分別是：

    ① 視圖容器    ② 基礎內容   ③ 表單組件   ④ 導航組件  ⑤ 媒體組件
   
    ⑥ map 地圖組件  ⑦  canvas 畫布組件  ⑧ 開發能力  ⑨ 無障礙訪問
   

2. 常用的視圖容器類組件

   • view 組件

     • 普通視圖區域
     • 類似于 HTML 中的 div ，是一個塊級元素
     • 常用來實作頁面的布局效果

   • scroll-view 組件

     • 可滾動的視圖區域
     • 常用來實作滾動串列效果

   • swiper 和 swiper-item 組件

     • 輪播圖容器組件和輪播圖 item 組件

9.2 view 組件的基本使用

view 類似于 div ，一般主要用來布局

實作如圖的 Flex 橫向布局效果：

<view class="container">
  <view>A</view>
  <view>B</view>
  <view>C</view>
</view>

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

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

.container view:nth-child(1) {
  background-color: lightgreen;
}

.container view:nth-child(2) {
  background-color: lightskyblue;
}

.container view:nth-child(3) {
  background-color: lightcoral;
}

9.3 scroll-view 組件的基本使用

<!-- scroll-x 屬性：允許橫向滾動 -->
<!-- scroll-y 屬性：允許縱向滾動 -->
<!-- 注意：使用豎向滾動時，必須給 scroll-view 一個固定的高度 -->
<scroll-view class="container" scroll-y>
  <view>A</view>
  <view>B</view>
  <view>C</view>
</scroll-view>

.container {
  width: 100px;
  height: 120px;
}

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

.container view:nth-child(1) {
  background-color: lightgreen;
}

.container view:nth-child(2) {
  background-color: lightskyblue;
}

.container view:nth-child(3) {
  background-color: lightcoral;
}

9.4 swiper 和 swiper-item 的基本使用

<!-- 輪播圖區域 -->
<!-- indicator-dots 屬性：顯示面板指示點 -->
<swiper indicator-dots class="swiper-container">
  <!-- 第一項 -->
  <swiper-item>
    <view class="item">A</view>
  </swiper-item>
  <!-- 第二項 -->
  <swiper-item>
    <view class="item">B</view>
  </swiper-item>
  <!-- 第三項 -->
  <swiper-item>
    <view class="item">C</view>
  </swiper-item>
</swiper>

.swiper-container {
  /* 輪播圖容器的高度 */
  height: 150px;
}

.item{
  height: 100%;
  line-height: 150px;
  text-align: center;
}

swiper-item:nth-child(1) .item{
  background-color: lightgreen;
}

swiper-item:nth-child(2) .item{
  background-color: lightskyblue;
}

swiper-item:nth-child(3) .item{
  background-color: lightcoral;
}

9.5 swiper 組件的常用屬性

• swiper 組件的常用屬性檔案

9.6 text 和 rich-text 組件

1. 常用的基礎內容組件

   • text 組件

     • 文本組件
     • 類似于 HTML 中的 span 標簽，是一個行內元素

   • rich-text 組件 （v-html）

     • 富文本組件
     • 支持把 HTML 字串渲染為 WXML 結構
     • 富文本編輯器，生成 HTML字串然后保存到資料中，如果 HTML 字串需要渲染到小程式中
     • 小程式不支持 HTML，就使用 rich-text 將 HTML 字串進行決議和渲染

2. text 組件的基本使用

   • 通過 text 組件的 selectable 屬性，實作長按選中文本內容的效果

   <!-- 常用的基礎內容組件 text 和 rich-text 的用法 -->
   <view>
     手機號支持長按選中效果
     <text selectable>18222222222</text>
   </view>
   

3. rich-text 組件的基本使用

   • 通過 rich-text 組件的 nodes 屬性節點，把 HTML 字串渲染為對應的 UI 結構

   <!-- 應用場景 -->
   <rich-text nodes="<h4 style='color: red'>rich-text組件</h4>"></rich-text>
   

9.7 button 按鈕組件

1. 常用的其他組件

   • button

     • 按鈕組件
     • 功能比 HTML 中的 button 按鈕豐富
     • 通過 open-type 屬性可以呼叫微信提供的各種功能(客服、轉發、獲取用戶授權、獲取用戶資訊等)

2. button 按鈕的基本使用

   • Button 組件的詳細檔案

   屬性名	型別	默認值	說明
   size	String	default	按鈕的大小
   type	String	default	按鈕的樣式型別
   plain	Boolean	false	按鈕是否鏤空，背景色透明
   disabled	Boolean	false	是否禁用
   loading	Boolean	false	名稱是否帶 loading t圖示

<view>~~~ 通過 type 指定按鈕型別 ~~~</view>

<button>默認按鈕</button>
<button type="primary">主色調按鈕</button>
<button type="warn">警告按鈕</button>

<view>~~~ size="mini" 小尺寸按鈕 ~~~</view>

<button size="mini">默認按鈕</button>
<button size="mini" type="primary">主色調按鈕</button>
<button size="mini" type="warn">警告按鈕</button>

<view>~~~ plain 鏤空效果 ~~~</view>

<button plain size="mini">默認按鈕</button>
<button plain size="mini" type="primary">主色調按鈕</button>
<button plain size="mini" type="warn">警告按鈕</button>

9.8 image 圖片組件

1. image 組件的基本使用

   • src – 支持本地和網路上的圖片
   • mode – 指定圖片的裁剪、縮放的模式

   <!-- 1. 空圖片 -->
   <image></image>
   
   <!-- 2. 使用 src 指向圖片路徑 -->
   <image src="/images/ha.jpg"></image>
   
   

   image {
     border: 1px solid red;
   }
   

2. image 組件的 mode 屬性

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

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

9.9 小程式 API 的 3 大分類

小程式中的 API 是宿主環境提供的，通過這些豐富的微信原生 API，可以方便的調起微信提供的能力，如獲取用戶資訊，本地存盤，支付功能等，小程式官方把 API 分為如下 3 大類：

1. 事件監聽 API

   • 特點：以 on 開頭的 API 用來監聽某個事件是否觸發
   • 舉例：wx.onWindowResize(function callback)

2. 同步 API

   • 特點1：以 Sync 結尾的 API 都是同步 API
   • 特點2：同步 API 的執行結果，可以通過函式回傳值直接獲取，如果執行出錯會拋出例外
   • 舉 例：wx.setStorageSync(‘key’, value) 向本地存盤中寫入內容

3. 異步 API

   • 特點：類似于 jQuery 中的 $.ajax(options) 函式，需要通過 success、fail、complete 接收呼叫結果

   • 舉例：wx.request() 發起網路資料請求，通過 success 回呼函式接收資料

   • 小程式中，大多數的 API 都是異步 API

10. 協同作業(成員管理)

10.1 了解權限管理需求、組織結構、開發流程

1. 了解權限管理需求

   • 在中大型的公司中，人員的分工非常仔細：同一個小程式專案，一般會有不同的崗位、不同角色的員工同時參與設計與開發
   • 此時出于管理需要，我們迫切需要對不同的崗位、不同的角色的員工的權限進行邊界的劃分，使他們能夠高效的進行協同開發

2. 了解專案成員的組織結構

   

3. 小程式的開發流程

   

10.2 了解小程式成員管理的兩個方面

小程式成員管理體現在 管理員 對小程式 專案成員 及 體驗成員 的管理：

1. 專案成員

   • 表示參與小程式開發、運營的成員
   • 可登陸小程式管理后臺(微信公眾平臺)
   • 管理員可以添加、洗掉專案成員，并設定專案成員的角色

2. 體驗成員

   • 表示參與小程式內測體驗的成員
   • 可使用體驗版小程式，但不屬于專案成員
   • 管理員及專案成員均可添加、洗掉體驗成員

10.3 開發者的權限說明

1. 不同專案成員對應的權限

   • 專案成員分為三個角色： 運營成員、開發人員、資料分析者

   

2. 開發者的權限說明

   • 開發者權限：可使用小程式開發者工具及對小程式的功能進行代碼管理
   • 體驗者權限：可使用體驗版小程式
   • 登錄權限：可登錄小程式的后臺管理，無需要管理員確認
   • 開發設定：設定小程式服務器域名、訊息推送及掃描普通鏈接二維碼打開小程式
   • 騰訊云管理：云開發相關設定

10.4 了解如何添加專案成員和體驗成員

11. 小程式的發布

11.1 了解小程式的版本階段

1. 軟體開發程序中，根據時間節點的不同，會產出不同的軟體版本

   • 開發版本：開發者撰寫代碼的同時，對專案代碼進行自測
   • 體驗版本：直到程式達到一個穩定可靠，可體驗的狀態時，開發者把體驗版本給到產品經理和測驗人員進行體驗測驗
   • 正式版本：最后修復完程式的 bug 后，發布正式版供外部用戶使用

2. 小程式的版本

   

審核是微信官方進行審核，審核周期一般是 3 ~ 7 天

11.2 了解小程式發布上線的主要步驟

1. 小程式發布上線 的整體步驟

   一個小程式的發布上線，一般要經過 上傳代碼 --> 提交審核 --> 發布 這三個步驟

2. 上傳代碼

   • 點擊開發者工具頂部工具列中的“上傳”按鈕
   • 填寫版本號以及專案備注

   

3. 在后臺查看上傳之后的版本

   登錄小程式管理后臺 --> 管理 --> 版本管理 --> 開發版本，即可查看剛才提交上傳的版本

4. 提交審核

   • 為什么需要提交審核

     • 為了保證小程式的質量，以及符合相關的規范，小程式的發布是需要經過騰訊官方審核的

   • 提交審核的方式

     • 在開發版本的串列中，點擊 提交審核 按鈕之后，按照頁面提示填寫相關的資訊，就能把小程式提交到騰訊官方進行審核

5. 發布

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

11.3 基于小程式碼進行推廣

1. 相對于普通二維碼來說，小程式碼的優勢如下：

   • 在樣式上更具有辨識度和視覺沖擊力
   • 能夠更加清晰的樹立小程式的品牌形象
   • 可以幫助開發者、商家更好的推廣小程式

2. 獲取小程式碼的 5 個步驟：

   登錄小程式管理后臺 --> 設定 --> 基本設定 --> 基本資訊 --> 小程式碼及線下物料下載

11.4 查看小程式的運營資料

1. 在 小程式后臺 查看

   • 登錄小程式管理后臺
   • 點擊側邊欄的 “統計”
   • 點擊相應的 tab 可以看到相關的資料

2. 使用 小程式資料助手 查看

   • 打開微信
   • 搜索 “小程式資料助手”
   • 查看已發布的小程式相關的資料

如有不足，請多指教，
未完待續，持續更新！
大家一起進步！