微信小程式開發的基本流程
微信小程式開發的基本流程
一,微信小程式簡介
1,微信小程式簡稱小程式，張小龍在微信公開課 Pro 上釋出的小程式正式上線，時間是2017年1月9日。
2,微信小程式這個詞可以分解為“微信”和“小程式”兩部分
(1),其中“微信”可以理解為“微信中的”，指的是小程式的執行環境；當然微信在提供執行環境的同時也延長了使用者使用微信的時間。
(2),“小程式”是說它首先是程式，然後具備輕便的特徵。小程式並不像其他應用那樣，它不需要安裝，而是通過掃描二維碼等開啟後直接執行；用完以後也不需要解除安裝。這就是所謂用完即走的原則。
3,微信小程式，很多類似形態的應用都採用類似的架構：
- 使用 JSON 技術來表現應用的配置資訊。包含應用的基本資訊，頁面配置和路由，應用全體的資訊等。
- 使用經過定製 CSS+XML 技術來實現檢視層的描述。畫面元素，例如列表、按鈕、文字框、選擇框等都通過 XML 語言來描述，遵從 XML 語法，對於頁面的共同風格，使用 CSS 進行定義。
- 使用 JavaScript 語言來實現邏輯層結構。包括使用者操作的處理，系統 API 的呼叫等。
- 架構在檢視層和邏輯層之間提供資料和事件傳輸功能，從而儘量減少難度。由於類似應有都屬於輕應用，所以提供的功能都比較單一。
4,JSON（JavaScript Object Notation）是一種輕量級的資料交換格式。它基於 ECMAScript（W3C 制定的 JavaScript 規範）的一個子集，採用完全獨立於程式語言的文字格式來儲存和表示資料。簡潔和清晰的層次結構使得 JSON 成為理想的資料交換語言。易於人閱讀和編寫，同時也易於機器解析和生成，並有效地提升網路傳輸效率。
5,XML（Extensible Markup Language），中文名為可擴充套件標記語言，標準通用標記語言的子集，是一種用於標記電子檔案使其具有結構性的標記語言。
在電子計算機中，標記指計算機所能理解的資訊符號，通過此種標記，計算機之間可以處理包含各種的資訊，比如文章等。它可以用來標記資料、定義資料型別，是一種允許使用者對自己的標記語言進行定義的源語言。它非常適合全球資訊網傳輸，提供統一的方法來描述和交換獨立於應用程式或供應商的結構化資料。是 Internet 環境中跨平臺的、依賴於內容的技術，也是當今處理分散式結構資訊的有效工具。早在1998年，W3C 就釋出了 XML1.0 規範，使用它來簡化 Internet 的文件資訊傳輸。
6,CSS層疊樣式表（英文全稱：Cascading Style Sheets）是一種用來表現 HTML 或 XML 等檔案樣式的計算機語言。CSS 不僅可以靜態地修飾網頁，還可以配合各種指令碼語言動態地對網頁各元素進行格式化。CSS 能夠對網頁中元素位置的排版進行畫素級精確控制，支援幾乎所有的字型字號樣式，擁有對網頁物件和模型樣式編輯的能力。
7,JavaScript 一種直譯式指令碼語言，是一種動態型別、弱型別、基於原型的語言，內建支援型別。它的直譯器被稱為 JavaScript 引擎，為瀏覽器的一部分，廣泛用於客戶端的指令碼語言，最早是在 HTML 網頁上使用，用來給 HTML 網頁增加動態功能。
二,註冊微信小程式
在建立自己的微信小程式之前,首先需要 ofollow,noindex">註冊小程式賬號 ,有如下賬號型別：
具體的註冊流程,可以參考官方的 簡易教程
三,安裝工具,建立專案
第一步：下載微信小程式開發者工具並安裝，下載路徑：
https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html
進到下載介面後，根據自己的作業系統選擇相應的連結進行下載，下載完成後進行安裝。
第二步：安裝登入工具
開發者工具安裝完成後我們就可以將其開啟，初次開啟會需要用微信掃碼登入，如下圖，用手機微信掃一掃後確認登入就可以了。
第三步：選擇一個專案型別
登入成功後，如果是第一次使用該工具會彈出選擇專案型別的視窗，如下圖：
第四步：建立一個專案
選擇專案型別成功後，會彈出建立專案的視窗，如下圖：
在建立過程中，如果選擇的本地資料夾是個空資料夾會出來一個勾選項“建立雲開發快速啟動模版”，為方便初學者瞭解微信小程式的基本程式碼結構，請勾選此項，勾選後，開發者工具會幫助我們在開發目錄裡生成一個簡單的 demo，如下圖：
四,專案程式碼結構說明與開發
4.1,專案程式碼結構
點選開發者工具上側導航的“編輯器”，我們可以看到這個專案，已經初始化幷包含了一些簡單的程式碼檔案。最關鍵也是必不可少的，是 app.js、app.json、app.wxss 這三個。其中， .js 字尾的是指令碼檔案， .json 字尾的檔案是配置檔案， .wxss 字尾的是樣式表文件。微信小程式會讀取這些檔案，並生成小程式例項。
下面我們簡單瞭解這三個檔案的功能，方便修改以及從頭開發自己的微信小程式。
1、app.js是小程式的指令碼程式碼。我們可以在這個檔案中監聽並處理小程式的生命週期函式、宣告全域性變數。呼叫框架提供的豐富的 API，如本例的同步儲存及同步讀取本地資料。
2、 app.json 是對整個小程式的全域性配置。我們可以在這個檔案中配置小程式是由哪些頁面組成，配置小程式的視窗背景色，配置導航條樣式，配置預設標題。注意該檔案不可新增任何註釋。
3、app.wxss 是整個小程式的公共樣式表。我們可以在頁面元件的 class 屬性上直接使用 app.wxss 中宣告的樣式規則。
我們注意到，在例項程式的程式碼中還有2個資料夾，一個是pages,一個是style,其中style是放通用樣式的一個資料夾，pages是存放所有頁面的資料夾。我們著重講一下這個pages.
4.2,小程式頁面檔案構成
在這個示例中，我們有七個頁面，index 頁面，即歡迎頁，他們都在 pages 目錄下。微信小程式中的每一個頁面的【路徑+頁面名】都需要寫在 app.json 的 pages 中，且 pages 中的第一個頁面是小程式的首頁。
每一個小程式頁面是由同路徑下同名的四個不同字尾檔案的組成，如：index.js、index.wxml、index.wxss、index.json。 .js 字尾的檔案是指令碼檔案， .json 字尾的檔案是配置檔案， .wxss 字尾的是樣式表文件， .wxml 字尾的檔案是頁面結構檔案。
index.wxml 是頁面的結構檔案：
1 <!--index.wxml-->
2 <view class="container">
3
4<!-- 使用者 openid -->
5<view class="userinfo">
6<button
7open-type="getUserInfo"
8bindgetuserinfo="onGetUserInfo"
9class="userinfo-avatar"
10style="background-image: url({{avatarUrl}})"
11></button>
12<view>
13<text>jackson影琪</text>
14 </view>
15 </view>
16
17 <view class="text-title">
18<text>Hello world</text>
19 </view>
20 </view>
本例中使用了 <view/> 、 <button/> 、 <text/> 來搭建頁面結構，繫結資料和互動處理函式。
index.js 是頁面的指令碼檔案，在這個檔案中我們可以監聽並處理頁面的生命週期函式、獲取小程式例項，宣告並處理資料，響應頁面互動事件等。
1 //index.js
2 const app = getApp()
3
4 Page({
5data: {
6avatarUrl: './user-unlogin.png',
7userInfo: {},
8logged: false,
9takeSession: false,
10requestResult: ''
11},
12
13onLoad: function() {
14if (!wx.cloud) {
15wx.redirectTo({
16url: '../chooseLib/chooseLib',
17})
18return
19}
20
21// 獲取使用者資訊
22wx.getSetting({
23success: res => {
24if (res.authSetting['scope.userInfo']) {
25// 已經授權，可以直接呼叫 getUserInfo 獲取頭像暱稱，不會彈框
26wx.getUserInfo({
27success: res => {
28this.setData({
29avatarUrl: res.userInfo.avatarUrl,
30userInfo: res.userInfo
31})
32}
33})
34}
35}
36})
37},
38
39onGetUserInfo: function(e) {
40if (!this.logged && e.detail.userInfo) {
41this.setData({
42logged: true,
43avatarUrl: e.detail.userInfo.avatarUrl,
44userInfo: e.detail.userInfo
45})
46}
47},
48
49onGetOpenid: function() {
50// 呼叫雲函式
51wx.cloud.callFunction({
52name: 'login',
53data: {},
54success: res => {
55console.log('[雲函式] [login] user openid: ', res.result.openid)
56app.globalData.openid = res.result.openid
57wx.navigateTo({
58url: '../userConsole/userConsole',
59})
60},
61fail: err => {
62console.error('[雲函式] [login] 呼叫失敗', err)
63wx.navigateTo({
64url: '../deployFunctions/deployFunctions',
65})
66}
67})
68},
69
70// 上傳圖片
71doUpload: function () {
72// 選擇圖片
73wx.chooseImage({
74count: 1,
75sizeType: ['compressed'],
76sourceType: ['album', 'camera'],
77success: function (res) {
78
79wx.showLoading({
80title: '上傳中',
81})
82
83const filePath = res.tempFilePaths[0]
84
85// 上傳圖片
86const cloudPath = 'my-image' + filePath.match(/\.[^.]+?$/)[0]
87wx.cloud.uploadFile({
88cloudPath,
89filePath,
90success: res => {
91console.log('[上傳檔案] 成功：', res)
92
93app.globalData.fileID = res.fileID
94app.globalData.cloudPath = cloudPath
95app.globalData.imagePath = filePath
96
97wx.navigateTo({
98url: '../storageConsole/storageConsole'
99})
100},
101fail: e => {
102console.error('[上傳檔案] 失敗：', e)
103wx.showToast({
104icon: 'none',
105title: '上傳失敗',
106})
107},
108complete: () => {
109wx.hideLoading()
110}
111})
112
113},
114fail: e => {
115console.error(e)
116}
117})
118},
119
120 })
index.wxss 是頁面的樣式表：
1 /**index.wxss**/
2
3 page {
4background: #f6f6f6;
5display: flex;
6flex-direction: column;
7justify-content: center;
8 }
9 .userinfo, .uploader, .tunnel {
10margin-top: 40rpx;
11height: 140rpx;
12width: 100%;
13background: #fff;
14border: 1px solid rgba(0, 0, 0, 0.1);
15border-left: none;
16border-right: none;
17display: flex;
18flex-direction: row;
19align-items: center;
20transition: all 300ms ease;
21 }
22
23 .userinfo-avatar {
24width: 100rpx;
25height: 100rpx;
26margin: 20rpx;
27border-radius: 50%;
28background-size: cover;
29background-color: white;
30 }
31
32 .userinfo-avatar:after {
33border: none;
34 }
35
36 .userinfo-nickname {
37font-size: 32rpx;
38color: #007aff;
39background-color: white;
40background-size: cover;
41 }
42
43 .userinfo-nickname::after {
44border: none;
45 }
46
47 .uploader, .tunnel {
48height: auto;
49padding: 0 0 0 40rpx;
50flex-direction: column;
51align-items: flex-start;
52box-sizing: border-box;
53 }
54
55 .uploader-text, .tunnel-text {
56width: 100%;
57line-height: 52px;
58font-size: 34rpx;
59color: #007aff;
60 }
61
62 .uploader-container {
63width: 100%;
64height: 400rpx;
65padding: 20rpx 20rpx 20rpx 0;
66display: flex;
67align-content: center;
68justify-content: center;
69box-sizing: border-box;
70border-top: 1px solid rgba(0, 0, 0, 0.1);
71 }
72
73 .uploader-image {
74width: 100%;
75height: 360rpx;
76 }
77
78 .tunnel {
79padding: 0 0 0 40rpx;
80 }
81
82 .tunnel-text {
83position: relative;
84color: #222;
85display: flex;
86flex-direction: row;
87align-content: center;
88justify-content: space-between;
89box-sizing: border-box;
90border-top: 1px solid rgba(0, 0, 0, 0.1);
91 }
92
93 .tunnel-text:first-child {
94border-top: none;
95 }
96
97 .tunnel-switch {
98position: absolute;
99right: 20rpx;
100top: -2rpx;
101 }
102
103 .disable {
104color: #888;
105 }
106
107 .service {
108position: fixed;
109right: 40rpx;
110bottom: 40rpx;
111width: 140rpx;
112height: 140rpx;
113border-radius: 50%;
114background: linear-gradient(#007aff, #0063ce);
115box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
116display: flex;
117align-content: center;
118justify-content: center;
119transition: all 300ms ease;
120 }
121
122 .service-button {
123position: absolute;
124top: 40rpx;
125 }
126
127 .service:active {
128box-shadow: none;
129 }
130
131 .request-text {
132padding: 20rpx 0;
133font-size: 24rpx;
134line-height: 36rpx;
135word-break: break-all;
136 }
137 .text-title{
138 margin-top: 50%;
139 }
140 .text-title text{
141font-size: 96rpx;
142font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
143 }
頁面的樣式表是非必要的。當有頁面樣式表時，頁面的樣式表中的樣式規則會層疊覆蓋 app.wxss 中的樣式規則。如果不指定頁面的樣式表，也可以在頁面的結構檔案中直接使用 app.wxss 中指定的樣式規則。
index.json 是頁面的配置檔案：
頁面的配置檔案是非必要的。當有頁面的配置檔案時，配置項在該頁面會覆蓋 app.json 的 window 中相同的配置項。如果沒有指定的頁面配置檔案，則在該頁面直接使用 app.json 中的預設配置。
1 {
2"pages": [
3"pages/index/index",
4"pages/userConsole/userConsole",
5"pages/storageConsole/storageConsole",
6"pages/databaseGuide/databaseGuide",
7"pages/addFunction/addFunction",
8"pages/deployFunctions/deployFunctions",
9"pages/chooseLib/chooseLib"
10],
11"window": {
12"backgroundColor": "#F6F6F6",
13"backgroundTextStyle": "light",
14"navigationBarBackgroundColor": "#F6F6F6",
15"navigationBarTitleText": "jackson影琪",
16"navigationBarTextStyle": "black"
17}
18 }
執行結果如下：
手機預覽
開發者工具上側選單欄，點選"預覽"，掃碼後即可在微信客戶端中體驗。
