微信小程序基礎入門

前言

今天抱着學習新技術的心態開始第一次接觸微信小程序，甭管外面怎麼吹捧小程序，咱們學到就是賺到，好啦，廢話不多說，開始學習！！

一、簡介

小程序是一種不需要下載安裝即可使用的應用，它實現了應用“觸手可及”的夢想，用戶掃一掃或者搜一下即可打開應用。也體現了“用完即走”的理念，用戶不關心是否安裝太多應用的問題。應用將無處不在，隨時隨地可用，但又無需安裝卸載。

至此，我們可以總結下小程序的特點：

• 無需下載和安裝
• 用完即走
• 隨時可用

二、安裝

1、小程序註冊

註冊完之後就可以在開發設置中看到APPID了，到這裏個人申請小程序已經順利完成了非常重要的準備工作了，

2、下載微信開發者工具 （傳送門）
安裝完成之後，新建我們的第一個項目

接下來點擊工具上的編譯按鈕，可以在工具的左側模擬器界面看到這個小程序的表現，也可以點擊預覽按鈕，通過微信的掃一掃在手機上體驗你的第一個小程序。

3、小程序代碼構成
在我們剛剛創建的項目中，可以留意到在這個項目中生成了不同類型的文件
1、.json 後綴的 JSON 配置文件
2、.wxml 後綴的 WXML 模板文件
3、.wxss 後綴的 WXSS 樣式文件
4、.js 後綴的 JS 腳本邏輯文件

這裏我只說一下，我認爲重要的兩點，詳情請參考（傳送門）

先說說app.json這個腳本要注意的地方

 { 
 	  "pages":[
		 "pages/index/index",
		  "pages/logs/logs"
	  ], //這裏是配置你小程序裏所有的頁面的，如果你要新添加了頁面，記得一定要在這裏配置好 
	
	 "window":{//這裏就是頁面屬性及樣式的配置了，大家可以去更改下配置去看看具體的效果 
		 "backgroundTextStyle":"light", 
		 "navigationBarBackgroundColor": "#fff", 
		 "navigationBarTitleText": "WeChat",  
		 "navigationBarTextStyle":"black"  
	  } 
} 

再來說說app.wxss
app.wxss 是整個小程序的公共樣式表

.container { //看到這個很熟悉了吧,.class呦，你明白就好 
  height: 100%; display: flex;  
  flex-direction: column;  
  align-items: center;  
  justify-content: space-between;  
  padding: 200rpx 0;  
  box-sizing: border-box; 
   }

OK，對於小程序，我們有了大概的瞭解，這裏值得一提的是，每當我們新建一個頁面，就要在app.json中配置該頁面（很重要）

4、小程序的配置
全局配置 （app.json）
小程序根目錄下的 app.json 文件用來對微信小程序進行全局配置，決定頁面文件的路徑、窗口表現、設置網絡超時時間、設置多 tab 等。

{
  "pages": [
    "pages/index/index",
    "pages/logs/index"
  ],
  "window": {
    "navigationBarTitleText": "Demo"
  },
  "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首頁"
    }, {
      "pagePath": "pages/logs/index",
      "text": "日誌"
    }]
  },
  "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  },
  "debug": true,
  "navigateToMiniProgramAppIdList": [
    "wxe5f52902cf4de896"
  ]
}

完整配置項說明請參考 （傳送門）
頁面配置
每一個小程序頁面也可以使用同名 .json 文件來對本頁面的窗口表現進行配置，頁面中配置項會覆蓋 app.json 的 window 中相同的配置項。

{
  "navigationBarBackgroundColor": "#ffffff",
  "navigationBarTextStyle": "black",
  "navigationBarTitleText": "微信接口功能演示",
  "backgroundColor": "#eeeeee",
  "backgroundTextStyle": "light"
}

完整配置項說明請參考 （傳送門）

三、API

事件監聽 API
以 on 開頭的 API 用來監聽某個事件是否觸發，如：wx.onSocketOpen，wx.onCompassChange 等。

//這類 API 接受一個回調函數作爲參數，當事件觸發時會調用這個回調函數，並將相關數據以參數形式傳入。
wx.onCompassChange(function (res) {
  console.log(res.direction)
})

同步 API
以 Sync 結尾的 API 都是同步 API， 如 wx.setStorageSync，wx.getSystemInfoSync 等。此外，也有一些其他的同步 API，如 wx.createWorker，wx.getBackgroundAudioManager 等，

//同步 API 的執行結果可以通過函數返回值直接獲取，如果執行出錯會拋出異常。
try {
  wx.setStorageSync('key', 'value')
} catch (e) {
  console.error(e)
}

異步API

大多數 API 都是異步 API，如 wx.request，wx.login 等。
這類 API 接口通常都接受一個 Object 類型的參數，這個參數都支持按需指定以下字段來接收接口調用結果

要獲取用戶的地理位置時，只需要：

wx.getLocation({
  type: 'wgs84',
  success: (res) => {
    var latitude = res.latitude // 緯度
    var longitude = res.longitude // 經度
  }
})
調用微信掃一掃能力，只需要：

wx.scanCode({
  success: (res) => {
    console.log(res)
  }
})

注：多數 API 的回調都是異步，需要處理好代碼邏輯的異步問題

四、小程序手機預覽

當我們做完小程序後，就可以打開手微信掃描件二維碼，然後在手機看我們做的小程序啦，是不是很nice~，是不是敲有成就感喔

今天主要先了解一下微信小程序，後續在講解其他內容