什麼是微信小程序【重點學習系列---乾貨十足--一文詳解】

引言

本文主要從什麼是微信小程序、微信小程序的介紹、小程序開發流程、小程序代碼構成、小程序安裝使用、配置分析、開發特點、實戰項目等多角度手把手帶你詳解微信小程序。

第一章-什麼是微信小程序？（以下都有直接用小程序稱）

微信小程序，簡稱小程序，英文名Mini Program，是一種不需要下載安裝即可使用的應用，它實現了應用“觸手可及”的夢想，用戶掃一掃或搜一下即可打開應用。
全面開放申請後，主體類型爲企業、政府、媒體、其他組織或個人的開發者，均可申請註冊小程序。小程序、訂閱號、服務號、企業號是並行的體系。
2017年1月9日，微信之父張小龍在2017微信公開課Pro上發佈的小程序正式上線。
2017年度百度百科十大熱詞之一
2018年2月，微信官方發佈公告稱：已對涉及假貨高仿、色情低俗和違規“現金貸”等超過2000個小程序，進行永久封禁處理。
小程序提供了一個簡單、高效的應用開發框架和豐富的組件及API，幫助開發者在微信中開發具有原生 APP 體驗的服務。
小程序剛發佈的時候要求壓縮包的體積不能大於1M,，否則無法通過，在2017年4月做了改進，由原來的1M提升到2M；

第二章-小程序可以幹什麼？

同App進行互補，提供同app類似的功能，比app操作更加簡潔的輕應用
通過掃一掃或者在微信搜索即可下載
用戶使用頻率不高，但又不得不用的功能軟件，目前看來小程序是首選
連接線上線下
開發門檻低，成本低

第三章-小程序開發流程

註冊小程序
官網：https://mp.weixin.qq.com/
註冊小程序賬號
進入小程序註冊頁根據指引填寫信息和提交相應的資料，就可以擁有自己的小程序帳號。
登錄小程序後臺，我們可以在菜單 “設置”-“開發設置” 看到小程序的 AppID 了。
小程序的 AppID 相當於小程序平臺的一個身份證，後續你會在很多地方要用到 AppID ,直接複製保存到txt文檔中。
前往開發者工具下載頁面，根據自己的操作系統下載對應的安裝包進行安裝（直接下載安裝穩定版）

第四章-小程序代碼構成

	.json 後綴的 JSON 配置文件
	.wxml 後綴的 WXML 模板文件
	.wxss 後綴的 WXSS 樣式文件
	.js 後綴的 JS 腳本邏輯文件

JSON 是一種數據格式，並不是編程語言，在小程序中，JSON扮演的靜態配置的角色。
app.json 是當前小程序的全局配置，包括了小程序的所有頁面路徑、界面表現、網絡超時時間、底部 tab 等。
- pages字段 —— 用於描述當前小程序所有頁面路徑，這是爲了讓微信客戶端知道當前你的小程序頁面定義在哪個目錄。
- window字段 —— 定義小程序所有頁面的頂部背景顏色，文字顏色定義等
工具配置 project.config.json
- 通常大家在使用一個工具的時候，都會針對各自喜好做一些個性化配置，例如界面顏色、編譯配置等等，當你換了另外一臺電腦重新安裝工具的時候，你還要重新配置。
- 考慮到這點，小程序開發者工具在每個項目的根目錄都會生成一個 project.config.json，你在工具上做的任何配置都會寫入到這個文件，當你重新安裝工具或者換電腦工作時，你只要載入同一個項目的代碼包，開發者工具就自動會幫你恢復到當時你開發項目時的個性化配置，其中會包括編輯器的顏色、代碼上傳時自動壓縮等等一系列選項。
其他配置項細節可以參考文檔開發者工具的配置。
頁面配置 page.json
- 這裏的 page.json 其實用來表示 pages/logs 目錄下的 logs.json 這類和小程序頁面相關的配置。
- 如果你整個小程序的風格是藍色調，那麼你可以在 app.json 裏邊聲明頂部顏色是藍色即可。實際情況可能不是這樣，可能你小程序裏邊的每個頁面都有不一樣的色調來區分不同功能模塊，因此我們提供了 page.json，讓開發者可以獨立定義每個頁面的一些屬性，例如剛剛說的頂部顏色、是否允許下拉刷新等等。
JSON 語法
- 這裏說一下小程序裏JSON配置的一些注意事項。
- JSON文件都是被包裹在一個大括號中 {}，通過key-value的方式來表達數據。JSON的Key必須包裹在一個雙引號中，在實踐中，編寫 JSON 的時候，忘了給 Key 值加雙引號或者是把雙引號寫成單引號是常見錯誤。
- JSON的值只能是以下幾種數據格式，其他任何格式都會觸發報錯，例如 JavaScript 中的 undefined。
- 還需要注意的是 JSON 文件中無法使用註釋，試圖添加註釋將會引發報錯。
WXML 模板
從事過網頁編程的人知道，網頁編程採用的是 HTML + CSS + JS 這樣的組合，其中 HTML 是用來描述當前這個頁面的結構，CSS 用來描述頁面的樣子，JS 通常是用來處理這個頁面和用戶的交互。

第五章-小程序和其他的技術的區別

1.標籤名字有點不一樣:小程序的 WXML 用的標籤是 view, button, text 等等，這些標籤就是小程序給開發者包裝好的基本能力，我們還提供了地圖、視頻、音頻等等組件能力。

2.wx:if 這樣的屬性以及表達式:{{}} JS只需要管理狀態:this.setData({msg:‘哈哈’})

3.wxss樣式不同:

新增了尺寸單位。在寫 CSS 樣式時，開發者需要考慮到手機設備的屏幕會有不同的寬度和設備像素比，採用一些技巧來換算一些像素單位。WXSS 在底層支持新的尺寸單位 rpx ，開發者可以免去換算的煩惱，只要交給小程序底層來換算即可，由於換算採用的浮點數運算，所以運算結果會和預期結果有一點點偏差。
提供了全局的樣式和局部樣式。和前邊 app.json, page.json 的概念相同，你可以寫一個 app.wxss 作爲全局樣式，會作用於當前小程序的所有頁面，局部頁面樣式 page.wxss 僅對當前頁面生效。
此外 WXSS 僅支持部分 CSS 選擇器

JS邏輯交互(事件操作)

<view>{{ msg }}</view>
<button bindtap="clickMe">點擊我</button>
Page({
  clickMe: function() {
    this.setData({ msg: "Hello World" })
  }
})

小程序中使用rpx—1rpx=1物理像素=0.5px,推薦使用flex

第六章-小程序協同工作和發佈

協同工作和發佈
 小程序開發法指南

第七章-小程序特點

是一種不需要下載安裝即可使用的應用，它實現了應用“觸手可及”的夢想，用戶掃一掃或搜一下即可打開應用
小程序提供了一個簡單、高效的應用開發框架和豐富的組件及API，幫助開發者在微信中開發具有原生 APP 體驗的服務
沒有數據代理
沒有DOM
沒有雙向綁定

第八章-源碼分析

全局配置-app.json文件中進行配置☛（舉慄配置）

pages	string[]	是	頁面路徑列表	
window	Object	否	全局的默認窗口表現	
tabBar	Object	否	底部 tab 欄的表現

{
  "pages": ["pages/index/index", "pages/logs/logs"],
  "window": {
    "navigationBarBackgroundColor": "#02a774",
    "navigationBarTextStyle": "white",
    "navigationBarTitleText": "圖書",
  },
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/books/main",
        "text": "圖書列表",
        "iconPath": "/static/imgs/book.png",
        "selectedIconPath": "/static/imgs/book-active.png"
      },
      {
        "pagePath": "pages/search/main",
        "text": "搜索圖書",
        "iconPath": "/static/imgs/todo.png",
        "selectedIconPath": "/static/imgs/todo-active.png"
      },
      {
        "pagePath": "pages/personal/main",
        "text": "個人中心",
        "iconPath": "/static/imgs/me.png",
        "selectedIconPath": "/static/imgs/me-active.png"
      }
    ]
  }
}

框架接口

App({
  data:{
    這裏寫的數據和Vue中data一樣
  }
  onLaunch (options) {
    // Do something initial when launch.
  },
  onShow (options) {
    // Do something when show.
  },
  onHide () {
    // Do something when hide.
  },
  onError (msg) {
    console.log(msg)
  },
  // 這裏寫方法--Vue中方法在methosd中書寫,這裏方法直接上面的方法同級
})

頁面接口

Page({
  data: {
    text: "This is page data." //需要使用this.setData({})來管理數據
  },
  onLoad: function(options) {
    // Do some initialize when page load.
  },
  onReady: function() {
    // Do something when page ready.
  },
  onShow: function() {
    // Do something when page show.
  },
  onHide: function() {
    // Do something when page hide.
  },
  onUnload: function() {
    // Do something when page close.
  },
  onPullDownRefresh: function() {
    // Do something when pull down.
  },
  onReachBottom: function() {
    // Do something when page reach bottom.
  },
  onShareAppMessage: function () {
    // return custom share data when user share.
  },
  onPageScroll: function() {
    // Do something when page scroll
  },
  onResize: function() {
    // Do something when page resize
  }
})

小程序全局對象

Object wx
小程序 API 全局對象，用於承載小程序能力相關 API

數據綁定

<view id="item-{{id}}"> </view>
Page({
  data: {
    id: 0
  }
})

列表渲染

在組件上使用 wx:for 控制屬性綁定一個數組，即可使用數組中各項的數據重複渲染該組件。

默認數組的當前項的下標變量名默認爲 index，數組當前項的變量名默認爲 item
<view wx:for="{{array}}">
  {{index}}: {{item.message}}
</view>
Page({
  data: {
    array: [{
      message: 'foo',
    }, {
      message: 'bar'
    }]
  }
})
wx:key
如果列表中項目的位置會動態改變或者有新的項目添加到列表中，並且希望列表中的項目保持自己的特徵和狀態（如 input 中的輸入內容，switch 的選中狀態），需要使用 wx:key 來指定列表中項目的唯一的標識符。

wx:key 的值以兩種形式提供

字符串，代表在 for 循環的 array 中 item 的某個 property，該 property 的值需要是列表中唯一的字符串或數字，且不能動態改變。
保留關鍵字 *this 代表在 for 循環中的 item 本身，這種表示需要 item 本身是一個唯一的字符串或者數字，如：
當數據改變觸發渲染層重新渲染的時候，會校正帶有 key 的組件，框架會確保他們被重新排序，而不是重新創建，以確保使組件保持自身的狀態，並且提高列表渲染時的效率。

如不提供 wx:key，會報一個 warning， 如果明確知道該列表是靜態，或者不必關注其順序，可以選擇忽略。

模板

WXML提供模板（template），可以在模板中定義代碼片段，然後在不同的地方調用。

定義模板
使用 name 屬性，作爲模板的名字。然後在<template/>內定義代碼片段，如：

<!--
  index: int
  msg: string
  time: string
-->
<template name="msgItem">
  <view>
    <text> {{index}}: {{msg}} </text>
    <text> Time: {{time}} </text>
  </view>
</template>
使用模板
使用 is 屬性，聲明需要的使用的模板，然後將模板所需要的 data 傳入，如：

<template is="msgItem" data="{{...item}}"/>
Page({
  data: {
    item: {
      index: 0,
      msg: 'this is a template',
      time: '2016-09-15'
    }
  }
})


模版引入
import
import可以在該文件中使用目標文件定義的template，如：

在 item.wxml 中定義了一個叫item的template：

<!-- item.wxml -->
<template name="item">
  <text>{{text}}</text>
</template>
在 index.wxml 中引用了 item.wxml，就可以使用item模板：

<import src="item.wxml"/>
<template is="item" data="{{text: 'forbar'}}"/>
import 的作用域

組件

詳細使用請戳這裏☛組件使用

swiper

滑塊視圖容器。其中只可放置swiper-item組件，否則會導致未定義的行爲。
indicator-dots	boolean	false	否	是否顯示面板指示點	1.0.0
indicator-color	color	rgba(0, 0, 0, .3)	否	指示點顏色	1.1.0
indicator-active-color	color	#000000	否	當前選中的指示點顏色	1.1.0
autoplay	boolean	false	否	是否自動切換	1.0.0
current	number	0	否	當前所在滑塊的 index	1.0.0

button
按鈕。

屬性	類型	默認值	必填	說明	最低版本
size	string	default	否	按鈕的大小	1.0.0
type	string	default	否	按鈕的樣式類型	1.0.0
plain	boolean	false	否	按鈕是否鏤空，背景色透明	1.0.0
disabled	boolean	false	否	是否禁用	1.0.0
loading	boolean	false	否	名稱前是否帶 loading 圖標	1.0.0

input 文本框
輸入框。該組件是原生組件，使用時請注意相關限制

屬性	類型	默認值	必填	說明	最低版本
value	string		是	輸入框的初始內容	1.0.0
type	string	text	否	input 的類型	1.0.0
password	boolean	false	否	是否是密碼類型	1.0.0
placeholder	string		是	輸入框爲空時佔位符	1.0.0
placeholder-style	string		是	指定 placeholder 的樣式	1.0.0
placeholder-class	string	input-placeholder	否	指定 placeholder 的樣式類	1.0.0

第九章-圖解介紹小程序

第十章-小程序API彙總

詳細請戳這裏☛官方API文檔

路由
wx.switchTab-------如果界面中有tapbar那麼使用這個路由進行跳轉
wx.redirectTo------不能跳tapbar
wx.navigateTo------不能跳tapbar
wx.showToast-------顯示提示消息(收藏的時候使用過)
wx.request---------發送請求(獲取用戶的openid的時候使用過)
wx.setStorageSync-----同步緩存數據
wx.setStorage---------異步緩存數據
wx.getStorageSync-----同步獲取緩存數據
wx.getStorage---------異步獲取緩存數據
wx.playBackgroundAudio----播放音樂方法
wx.pauseBackgroundAudio---暫停音樂方法
wx.onBackgroundAudioPlay---監視播放音樂操作
wx.onBackgroundAudioPause---監視暫停音樂操作
wx.login 登錄---一般放在小程序初次加載
wx.getUserInfo---獲取登錄後的用戶信息--一般放在onoad事件中(page中)
支付wx.requestPayment-----涉及到整個的支付流程
wx.requestPayment------發起微信支付操作

第十一章-組件總結

詳細請戳這裏☛官方組件文檔

swiper 用來做輪播圖,相關屬性可直接設置輪播圖是否有按鈕,樣式等等
template 用來使用模版組件的,需要配合name屬性,is屬性及import 引入
button 
	open-type這個屬性一定要多看,點擊按鈕可以直接彈出對話框讓用戶授權登錄操作
	bindgetuserinfo用戶點擊該按鈕時，會返回獲取到的用戶信息，回調的detail數據與wx.getUserInfo返回的一致，open-type="getUserInfo"時有效
    
input
	placeholder  可以設置提示信息
    placeholder-class 提示信息樣式操作

第十二章-事件總結

冒泡事件：當一個組件上的事件被觸發後，該事件會向父節點傳遞。
非冒泡事件：當一個組件上的事件被觸發後，該事件不會向父節點傳遞。
bindtap 冒泡
catchtap 非冒泡
小程序的事件都是以bind或者catch開頭
如果到了mpvue中,那麼可以把小程序中的bind或者catch幹掉,直接使用@

第十三章-適配總結

物理像素:屏幕的分辨率,設備能控制顯示的最小單元，可以把物理像素看成是對應的像素點
設備獨立像素:(也叫密度無關像素)，可以認爲是計算機座標系統中的一個點，這個點代表一個可以由程序使用並控制的虛擬像素(比如：CSS 像素,只是在android機中CSS 像素就不叫”CSS 像素”了而是叫”設備獨立像素”)，然後由相關係統轉換爲物理像素。
dpr: 設備像素比，物理像素/設備獨立像素 = dpr，一般以Iphon6的dpr爲準 dpr = 2
小程序的適配方案:
- Iphon6： 1rpx = 1物理像素 = 0.5px
微信官方提供的換算方式：
- 以iPhone6的物理像素個數爲標準: 750;
- 1rpx = 目標設備寬度 / 750 * px;
- 注意此時底層已經做了viewport適配的處理

第十四章-其他問題

小程序訪問http出現的問題

小程序出於安全考慮所有的協議都是https協議，且如果沒有在開發設置中配置請求的連接是無法訪問指定的鏈接的。
一個微信小程序的併發網絡請求數量被限制在最多5個

小程序路由傳值

以其中一個路由方法舉例說明:
- wx.navigateTo
- url屬性
- 需要跳轉的應用內非 tabBar 的頁面的路徑, 路徑後可以帶參數。參數與路徑之間使用 ? 分隔，參數鍵與參數值用 = 相連，不同參數用 & 分隔；如 ‘path?key=value&key2=value2’
- 可以在另一個路由組件中的onload(options){}的toptions中獲取傳過來的參數

第十五章-mpvue

使用Vue.js的開發小程序的前端框架(基於Vue)

mpvue:Vue.js in mini program

特點:

組件化開發,提高代碼複用
可以使用vuex進行數據管理(小程序的時候一般不用,沒必要)
支持npm
H5代碼轉換編譯,es6都支持

mpvue源碼:

main.js/app.json/app.vue
main.js----小程序中的app.js
app.json—小程序中的app.json
app.vue—小程序中的wxml和wxss

第十六章-Wepy

小程序支持組件化開發的框架

特點：

支持Props傳值,自定義事件,組件複用,computed,slot
組件化,npm,promist,es2015
支持多種插件,文件壓縮,圖片壓縮,內容替換,擴展簡單
框架小,壓縮後24.3KB

問題：小程序是什麼？它有着什麼樣的功能？

答：

小程序是一種不需要下載安裝即可使用的應用，它實現了應用“觸手可及”的夢想，用戶掃一掃或者搜一下即可打開應用。也體現了“用完即走”的理念，用戶不用關心是否安裝太多應用的問題。應用將無處不在，隨時可用，但又無需安裝卸載。對於開發者而言，小程序開發門檻相對較低，難度不及APP，能夠滿足簡單的基礎應用，適合生活服務類線下商鋪以及非剛需低頻應用的轉換。小程序能夠實現消息通知、線下掃碼、公衆號關聯等七大功能。其中，通過公衆號關聯，用戶可以實現公衆號與小程序之間相互跳轉。由於小程序不存在入口。

總結

實戰（未完待續）
本文一共用了十六章分析詳解了一下小程序，從小程序的詳細安裝到每一個細節的知識點的分析，希望可以幫你入門小程序的開發及理解
加油吧騷年！
願你在這個代碼繁雜、頭髮漸禿的編碼世界裏，可以溫暖疲倦的自己，堅持學習

在人生的黃昏時，一代不幸的人在摸索徘徊：一些人在鬥爭中死去；一些人墮入深淵；種種機緣，希望和仇恨衝擊着那些被偏見束縛着的人；在那黑暗泥濘的道路上同樣也走着那些給人點亮燈光的人，每一個頭上舉着火種的人儘管沒有人承認他的價值，但他總是默默地生活着勞動着，然後像影子一樣消失。——普魯斯