微信小程序開發的基本流程

時間 2019-11-08

標籤微信程序開發基本流程简体版

原文原文鏈接

微信小程序開發的基本流程

一,微信小程序簡介

1,微信小程序簡稱小程序，張小龍在微信公開課 Pro 上發佈的小程序正式上線，時間是2017年1月9日。html

2,微信小程序這個詞能夠分解爲「微信」和「小程序」兩部分編程

(1),其中「微信」能夠理解爲「微信中的」，指的是小程序的執行環境；固然微信在提供執行環境的同時也延長了用戶使用微信的時間。json

(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 網頁增長動態功能。

app

二,註冊微信小程序

在建立本身的微信小程序以前,首先須要註冊小程序帳號,有以下帳號類型：

具體的註冊流程,能夠參考官方的簡易教程

三,安裝工具,建立項目

第一步：下載微信小程序開發者工具並安裝，下載路徑：

https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html

進到下載界面後，根據本身的操做系統選擇相應的連接進行下載，下載完成後進行安裝。

第二步：安裝登陸工具

開發者工具安裝完成後咱們就能夠將其打開，初次打開會須要用微信掃碼登陸，以下圖，用手機微信掃一掃後確認登陸就能夠了。

第三步：選擇一個項目類型

登陸成功後，若是是第一次使用該工具會彈出選擇項目類型的窗口，以下圖：

第四步：建立一個項目

選擇項目類型成功後，會彈出建立項目的窗口，以下圖：

在建立過程當中，若是選擇的本地文件夾是個空文件夾會出來一個勾選項「創建雲開發快速啓動模版」，爲方便初學者瞭解微信小程序的基本代碼結構，請勾選此項，勾選後，開發者工具會幫助咱們在開發目錄裏生成一個簡單的 demo，以下圖：

四,項目代碼結構說明與開發

4.1,項目代碼結構

點擊開發者工具上側導航的「編輯器」，咱們能夠看到這個項目，已經初始化幷包含了一些簡單的代碼文件。最關鍵也是必不可少的，是 app.js、app.json、app.wxss 這三個。其中，.js後綴的是腳本文件，.json後綴的文件是配置文件，.wxss後綴的是樣式表文件。微信小程序會讀取這些文件，並生成小程序實例。

下面咱們簡單瞭解這三個文件的功能，方便修改以及從頭開發本身的微信小程序。

一、app.js是小程序的腳本代碼。咱們能夠在這個文件中監聽並處理小程序的生命週期函數、聲明全局變量。調用框架提供的豐富的 API，如本例的同步存儲及同步讀取本地數據。

二、 app.json 是對整個小程序的全局配置。咱們能夠在這個文件中配置小程序是由哪些頁面組成，配置小程序的窗口背景色，配置導航條樣式，配置默認標題。注意該文件不可添加任何註釋。

三、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 
 7       open-type="getUserInfo" 
 8       bindgetuserinfo="onGetUserInfo"
 9       class="userinfo-avatar"
10       style="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({
  5   data: {
  6     avatarUrl: './user-unlogin.png',
  7     userInfo: {},
  8     logged: false,
  9     takeSession: false,
 10     requestResult: ''
 11   },
 12 
 13   onLoad: function() {
 14     if (!wx.cloud) {
 15       wx.redirectTo({
 16         url: '../chooseLib/chooseLib',
 17       })
 18       return
 19     }
 20 
 21     // 獲取用戶信息
 22     wx.getSetting({
 23       success: res => {
 24         if (res.authSetting['scope.userInfo']) {
 25           // 已經受權，能夠直接調用 getUserInfo 獲取頭像暱稱，不會彈框
 26           wx.getUserInfo({
 27             success: res => {
 28               this.setData({
 29                 avatarUrl: res.userInfo.avatarUrl,
 30                 userInfo: res.userInfo
 31               })
 32             }
 33           })
 34         }
 35       }
 36     })
 37   },
 38 
 39   onGetUserInfo: function(e) {
 40     if (!this.logged && e.detail.userInfo) {
 41       this.setData({
 42         logged: true,
 43         avatarUrl: e.detail.userInfo.avatarUrl,
 44         userInfo: e.detail.userInfo
 45       })
 46     }
 47   },
 48 
 49   onGetOpenid: function() {
 50     // 調用雲函數
 51     wx.cloud.callFunction({
 52       name: 'login',
 53       data: {},
 54       success: res => {
 55         console.log('[雲函數] [login] user openid: ', res.result.openid)
 56         app.globalData.openid = res.result.openid
 57         wx.navigateTo({
 58           url: '../userConsole/userConsole',
 59         })
 60       },
 61       fail: err => {
 62         console.error('[雲函數] [login] 調用失敗', err)
 63         wx.navigateTo({
 64           url: '../deployFunctions/deployFunctions',
 65         })
 66       }
 67     })
 68   },
 69 
 70   // 上傳圖片
 71   doUpload: function () {
 72     // 選擇圖片
 73     wx.chooseImage({
 74       count: 1,
 75       sizeType: ['compressed'],
 76       sourceType: ['album', 'camera'],
 77       success: function (res) {
 78 
 79         wx.showLoading({
 80           title: '上傳中',
 81         })
 82 
 83         const filePath = res.tempFilePaths[0]
 84         
 85         // 上傳圖片
 86         const cloudPath = 'my-image' + filePath.match(/\.[^.]+?$/)[0]
 87         wx.cloud.uploadFile({
 88           cloudPath,
 89           filePath,
 90           success: res => {
 91             console.log('[上傳文件] 成功：', res)
 92 
 93             app.globalData.fileID = res.fileID
 94             app.globalData.cloudPath = cloudPath
 95             app.globalData.imagePath = filePath
 96             
 97             wx.navigateTo({
 98               url: '../storageConsole/storageConsole'
 99             })
100           },
101           fail: e => {
102             console.error('[上傳文件] 失敗：', e)
103             wx.showToast({
104               icon: 'none',
105               title: '上傳失敗',
106             })
107           },
108           complete: () => {
109             wx.hideLoading()
110           }
111         })
112 
113       },
114       fail: e => {
115         console.error(e)
116       }
117     })
118   },
119 
120 })

index.wxss 是頁面的樣式表：

  1 /**index.wxss**/
  2 
  3 page {
  4   background: #f6f6f6;
  5   display: flex;
  6   flex-direction: column;
  7   justify-content: center;
  8 }
  9 .userinfo, .uploader, .tunnel {
 10   margin-top: 40rpx;
 11   height: 140rpx;
 12   width: 100%;
 13   background: #fff;
 14   border: 1px solid rgba(0, 0, 0, 0.1);
 15   border-left: none;
 16   border-right: none;
 17   display: flex;
 18   flex-direction: row;
 19   align-items: center;
 20   transition: all 300ms ease;
 21 }
 22 
 23 .userinfo-avatar {
 24   width: 100rpx;
 25   height: 100rpx;
 26   margin: 20rpx;
 27   border-radius: 50%;
 28   background-size: cover;
 29   background-color: white;
 30 }
 31 
 32 .userinfo-avatar:after {
 33   border: none;
 34 }
 35 
 36 .userinfo-nickname {
 37   font-size: 32rpx;
 38   color: #007aff;
 39   background-color: white;
 40   background-size: cover;
 41 }
 42 
 43 .userinfo-nickname::after {
 44   border: none;
 45 }
 46 
 47 .uploader, .tunnel {
 48   height: auto;
 49   padding: 0 0 0 40rpx;
 50   flex-direction: column;
 51   align-items: flex-start;
 52   box-sizing: border-box;
 53 }
 54 
 55 .uploader-text, .tunnel-text {
 56   width: 100%;
 57   line-height: 52px;
 58   font-size: 34rpx;
 59   color: #007aff;
 60 }
 61 
 62 .uploader-container {
 63   width: 100%;
 64   height: 400rpx;
 65   padding: 20rpx 20rpx 20rpx 0;
 66   display: flex;
 67   align-content: center;
 68   justify-content: center;
 69   box-sizing: border-box;
 70   border-top: 1px solid rgba(0, 0, 0, 0.1);
 71 }
 72 
 73 .uploader-image {
 74   width: 100%;
 75   height: 360rpx;
 76 }
 77 
 78 .tunnel {
 79   padding: 0 0 0 40rpx;
 80 }
 81 
 82 .tunnel-text {
 83   position: relative;
 84   color: #222;
 85   display: flex;
 86   flex-direction: row;
 87   align-content: center;
 88   justify-content: space-between;
 89   box-sizing: border-box;
 90   border-top: 1px solid rgba(0, 0, 0, 0.1);
 91 }
 92 
 93 .tunnel-text:first-child {
 94   border-top: none;
 95 }
 96 
 97 .tunnel-switch {
 98   position: absolute;
 99   right: 20rpx;
100   top: -2rpx;
101 }
102 
103 .disable {
104   color: #888;
105 }
106 
107 .service {
108   position: fixed;
109   right: 40rpx;
110   bottom: 40rpx;
111   width: 140rpx;
112   height: 140rpx;
113   border-radius: 50%;
114   background: linear-gradient(#007aff, #0063ce);
115   box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
116   display: flex;
117   align-content: center;
118   justify-content: center;
119   transition: all 300ms ease;
120 }
121 
122 .service-button {
123   position: absolute;
124   top: 40rpx;
125 }
126 
127 .service:active {
128   box-shadow: none;
129 }
130 
131 .request-text {
132   padding: 20rpx 0;
133   font-size: 24rpx;
134   line-height: 36rpx;
135   word-break: break-all;
136 }
137 .text-title{
138 margin-top: 50%;
139 }
140 .text-title text{
141   font-size: 96rpx;
142   font-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 }