微信小程式入門篇

1.小程式簡介

1.1小程式與網頁開發的差別

• 運作環境不同：網頁在浏覽器環境、小程式在微信支付寶等環境

• API不同：不發使用DOM和BOM的API，可使用微信環境提供API如支付、掃碼、定位

• 開發模式不同（主要差別）：網頁開發是浏覽器+代碼編輯器；小程式是申請賬号+安裝小程式開發者工具+建立配置項目

1.2 體驗小程式

使用最多的是元件和接口

1.3 注冊小程式開發賬号

https://mp.weixin.qq.com/ 進入網址，點選注冊，選擇小程式，填寫資訊

擷取appID：登入網址=>開發=>開發設定=>AppID

注意：選擇個人主體，不支援微信認證，微信支付，進階接口能力

1.4 安裝微信開發者工具

1.4.1微信開發者工具的功能：

• 快速建立小程式項目

• 代碼的檢視和編輯

• 小程式功能測試

• 小程式的預覽和釋出

1.4.2下載下傳

https://developers.weixin.qq.com/miniprogram/dev/devtools/stable.html

打開網址--穩定版--下載下傳-安裝

安裝成功--掃碼登入--建立項目

1.4.3 設定外觀和代理

外觀--主題--字号18--行距12

代理設定--不使用任何代理，勾選直接連網絡（系統代理會影響代理軟體）

1.5建立第一個小程式項目

建立--後端服務：不使用雲服務--JavaScript

編譯：編譯器運作（常用）

預覽：微信掃碼預覽

幫助--開發者文檔：常用檢視API

2.代碼構成

2.1 項目目錄介紹

• pages: 存放小程式頁面

• utils：存放工具性質的子產品（例如格式化時間的自定義子產品）

• app.js: 入口檔案

• app.json: 全局配置檔案

• app.wxss: 全局樣式檔案

• project.config.json: 配置檔案

• sitemap.json: 配置小程式以頁面是否被微信索引

2.2 頁面的組成部分

小程式的頁面都放在pages檔案夾中，以單獨的檔案夾存在

其中每個頁面又四個基本頁面組成

• js檔案：腳本檔案，存放頁面資料，事件處理

• json檔案：頁面的配置檔案，配置視窗外觀，表現

• wxml檔案：模闆檔案

• wxss檔案：樣式檔案

2.2.1 json配置檔案

json是一種資料格式，以配置檔案形式出現，可對小程式項目進行不同級别的配置

小程式中有四種json配置檔案：

• app.json 全局配置檔案：pages全局記錄頁面；window全局定義頁面背景色，文字顔色等；style全局定義元件樣式；sitemapLocation:指定sitemap.json的位置

• project.config.json項目配置檔案： 記錄個性化配置；setting編譯配置；projectname項目名稱；appid 保持小程式的賬号ID

• sitemap.json配置檔案：類似PC的SEO引擎搜尋是否運作，action：disallow/allow；在config.json裡checkSiteMap: false關閉索引提示

• 每個頁面的json檔案：本頁面外觀配置，會覆寫app.json中相同的配置項

ctrl+k+c注釋快捷鍵

2.2.2 wxml 檔案

微信小程式的标簽語言，類似HTML

2.2.2.1WXML和HTML的差別

1. 标簽名稱不同：div-view, span-text, img-image, a-navigator

1. 屬性節點不同:<a href="#" target="_blank" rel="external nofollow" >百度</a>，<navigator url="/pages/index/index"></navigator>

1. wxxl有vue中的模闆文法:資料綁定，清單渲染，條件渲染

2.2.3 wxss檔案

2.2.3.1 wxss 與css差別

1. 新增rpx尺寸機關：css需用rem進行像素機關換算，wxss用rpx在不同螢幕會自動換算

1. 提供全局樣式和局部樣式：app.wxss是全局的樣式，每個頁面的wxss樣式對目前樣式有效

1. wxss僅支部分持css選擇器：class、id、element、并集、後代、::after/before僞元素選擇器等

2.2.4 js檔案

小程式中js檔案分三大類

1. app.js檔案：入口檔案

1. 頁面上的js：頁面入口檔案調用Page()函數建立并運作頁面

1. 普通的js檔案：普通的功能子產品檔案，用來封裝公共的函數或屬性使用；如utils-util.js檔案

2.3 建立小程式頁面

app.json--pages新增頁面存放路徑，小程式開發者工具會自動建立頁面檔案

2.4 修改項目首頁

app.json -- pages 數組中頁面路徑的前後順序，第一個就是首頁

3.宿主環境

3.1 宿主環境介紹

• 宿主環境是指程式運作所必須的依賴環境

• 例如Android系統和IOS系統是兩個不同的宿主環境，安卓的微信是不能在IOS環境下運作的，安卓的宿主環境是Android，脫離了宿主環境的軟體是沒有意義的

• 手機微信是小程式的宿主環境

3.2小程式的宿主環境

小程式宿主環境包含以下四個：通信模型、運作機制、元件、API

3.2.1通信模型

1、小程式的通信的主體是渲染層和邏輯層

渲染層：wxml模闆、wxss樣式

邏輯層：js腳本檔案

2、小程式的通信分兩部分

渲染層和邏輯層之間通信：微信用戶端轉發

邏輯層和第三方伺服器之前的通信：微信客服端轉發

3.2.2 運作機制

小程式啟動過程

• 代碼下載下傳到本地

• 解析app.json全局配置檔案，調用App()建立小程式執行個體

• app.js入口檔案

• 渲染小程式首頁

• 小程式啟動完成

小程式頁面渲染過程

• 加載解析頁面json檔案

• 加載渲染層：wxml模闆和wxss樣式

• 執行頁面js檔案：調用Page()建立頁面執行個體

• 頁面渲染完成

3.2.3元件

小程式元件是由宿主環境提供的，元件可快速搭建頁面，元件分為了以下九大類

3.2.3.1視圖容器

① view

• 普通的視圖區域

• 類似div，是一個塊級元素

<!--pages/test/test.wxml-->
<!-- 橫向布局flex-direction: row -->
<view class="row">
  <view>1</view>
  <view>2</view>
  <view>3</view>
</view>
<text>我是一條分割線~</text>
<!-- 縱向布局 flex-direction: column -->
<view class="row" style="flex-direction: column;">
  <view>1</view>
  <view>2</view>
  <view>3</view>
</view>
           

/* pages/test/test.wxss */

/* 橫向布局 */
.row {
  display: flex;
  flex-direction: row;
  /* 縱向布局 */
  /* flex-direction: column; */
}
.row view {
  width: 200rpx;
  height: 200rpx;
  line-height: 200rpx;
  text-align: center;
}
.row view:nth-child(1) {
  background-color: pink;
}
.row view:nth-child(2) {
  background-color: greenyellow;
}
.row view:nth-child(3) {
  background-color: rgb(115, 214, 218);
}
           

②scroll-view

• 可滾動的視圖區域

• 實作滾動清單的效果

• 加scorll-y縱向滾動，scorll-x橫向滾動

<scroll-view class="row" scroll-y="true" style="height: 100rpx;">
  <view>1</view>
  <view>2</view>
  <view>3</view>
</scroll-view>
<text>我是一條分割線~</text>
<scroll-view class="row" scroll-x="true" style="width: 100rpx;white-space: nowrap;">
  <view>1</view>
  <view>2</view>
  <view>3</view>
</scroll-view>
           

③swiper和swiper-item

輪播圖容器元件和輪播圖item元件

<swiper    indicator-dots     indicator-color="pink" autoplay interval="1000">
  <swiper-item>a</swiper-item>
  <swiper-item>b</swiper-item>
  <swiper-item>c</swiper-item>
</swiper>
           

④基礎容器元件text和rich-text

• text元件

類似span标簽，是行内元素

隻有text在支援長按選擇功能，view不支援

• rich-text元件

富文本元件，通過node屬性把html結構轉為ui結構

<text selectable>長按選中</text>
<rich-text nodes="<h1 style='color:red'>标題"></rich-text>
           

⑤其他常用元件

• button

功能比原生的豐富：open-type屬性可以使用微信的功能（客服、轉發、授權、擷取使用者資訊）

• image

預設高度width為300px，height為240px

mode 屬性指定圖檔的裁剪和縮放

<!-- 圖檔不改變比例，容器大小有留白 -->
<image src="/images/15.jpg" mode="aspectFit"/> 
<!-- 圖檔不改變元比例，會縮放圖檔，填充容器 -->
<image src="/images/15.jpg" mode="aspectFill"/>
<!-- 縮放模式，高度/寬度不變，寬度/高度自适應 -->
<image src="/images/15.jpg" mode="widthFix"/>
<image src="/images/15.jpg" mode="heightFix"/>
           

• navigator

頁面導航元件，類似a标簽

3.2.4 API

小程式的API 是微信宿主環境提供的，可調用微信功能，如擷取使用者資訊、本地存儲、支付等

小程式的API分為事件監聽API、同步API、異步API

3.2.4.1 事件監聽API

• 特點：on開頭，監聽事件觸發

• 如wx.onWindowResize

3.2.4.2 同步API、

• 特點1：以sync結尾的API

• 特點2：可以通過函數傳回值直接擷取，如果執行出錯就會抛出異常

• 如：wx.setStorageSync(string key, any data),向本地存儲寫入内容

3.2.4.3 異步API

• 特點：類似jquery的$ajax函數，通過success、fail、complete接收調用結果

• 如wx.request()發送網絡請求，通過success回調函數接收資料

注意：編寫樣式類型時，不要和全局樣式類名相同！！會導緻樣式不生效

1. • 協同工作和釋出

4.1 協同工作

4.1.1 管理權限和成員管理

• 權限管理的需求

同一個項目的開發，會有不同崗位，不同人員參與開發

• 項目成員的組織結構：

• 小程式的開發流程

• 成員管理

小程式的管理展現：管理者對項目成員和體驗成員的管理

4.1.2 開發權限和維護項目成員

維護項目成員：https://mp.weixin.qq.com/wxamp/user/manage

4.2 釋出

4.2.1 軟體開發版本

• 開發版：開發者在開發過程中進行自測的版本

• 體驗版：開發版穩定時，産品經理和測試人員進行體驗

• 正式版：bug修複完後，提供使用者使用

4.2.2 小程式開發版本

• 開發版：使用開發者工具開發送出稽核代碼，開發版代碼删除對稽核版和上線版沒有影響

• 體驗版：選擇一個開發版本作為體驗版

• 稽核版：隻有一份代碼處于稽核版，稽核通過變成線上版

• 線上版：供全部使用者使用的版本，新代碼釋出後會覆寫原有的版本

4.2.3 釋出上線

小程式釋出上線步驟：

• 上傳代碼--送出稽核--釋出

①代碼上傳：上傳（右上角）--填寫版本号和備注

背景檢視版本：登入小程式管理背景--版本管理--開發版本

②送出稽核：為了保證品質，符合相關的規則，需要通過騰訊官方稽核

登入小程式管理背景--開發版本-送出稽核

③釋出：當稽核通過，稽核版本--釋出即可

4.2.4 小程式推廣

4.2.4.1 小程式碼的推廣

小程式碼推廣的優勢

• 比普通二維碼具有辨識度，沖擊力

• 清晰的樹立小程度的形象

• 幫助開發者更好的推廣小程式

擷取小程式二維碼步驟：

登入小程式管理背景--設定--基本設定--基本資訊--小程式碼及物流的下載下傳

5.2.5 營運資料

檢視營運資料的兩種方式

1. 小程式背景檢視：小程式管理背景--統計--手機檢視資料（右上角）

1. 小程式營運助手檢視：微信--搜尋小程式資料助手

注：筆記來源于黑馬程式員