small01

微信開發概述

微信官方將自身技術、數據、業務等資源開放給開發人員，方便實現企業與微信整合。之與相對應的一系列技術實現，稱爲微信開發。

微信開放平臺主要提供帳號管理、資質審覈、技術文檔等服務。開發內容主要包括移動應用開發、網站應用開發、公衆帳號開發、第三方平臺開發。

• 移動應用開發
  • 微信分享與收藏
  • 微信支付
  • 微信登陸
  • 智能接口
• 網站應用開發
  • 微信登陸
  • 微信智能接口
• 公衆帳號開發
  • 服務號：給企業和組織提供更強大的業務服務和用戶管理能力，幫助企業快速實現全新的公衆號服務平臺。
  • 訂閱號：爲媒體和我的提供一種新的信息傳播方式，構建與讀者之間更好的溝通與管理模式。
  • 小程序：一種新的開放能力，能夠在微信內被便捷地獲取和傳播，同時具備出色的使用體驗。
  • 企業微信：企業的專業辦公管理工具。支持用企業微信添加客戶微信，幫助企業實現統一管理客戶關係，並與微信支付、小程序等互通。
• 第三方平臺開發 第三方平臺的開放，讓公衆號或小程序運營者在面向垂直行業需求時，能夠經過一鍵登陸受權給第三方開發者，來完成相關能力。

小程序概述

小程序是一種不須要下載安裝便可使用的應用。

• 2011年1月21日，微信正式上線；
• 2012年8月17日，微信公衆平臺正式上線。
• 2015年1月21日，朋友圈廣告上線；
• 2017年1月9日，微信小程序上線；
• 從2018年1月微信小程序遊戲【跳一跳】上線，截止到2018年1月，已上線小程序數量超過58萬。
• 小程序能作什麼
  • 工具
  • 內容
  • 電商、餐飲
  • 遊戲娛樂
  • ......(大廠大都提供了小程序端)
• 公司運營業務
  • PC端
  • 移動Web
  • APP（IOS、Android）
    • React Native
    • ionic
    • Flutter(Dart)
  • 小程序
  • 公衆號
  • 桌面程序（Electron，基於Node.js）

開發小程序準備工做

• 註冊小程序帳號
• 下載並安裝小程序開發工具

註冊小程序帳號

• 進入官網
• 點擊【當即註冊】，選擇小程序
  • 訂閱號
  • 服務號
  • 小程序
  • 企業微信
• 進入註冊頁面
  • 郵箱
  • 密碼
• 經過郵箱激活帳號
• 完善帳號信息
  • 姓名
  • 身份證號
  • 手機號
• 進入小程序管理後臺
• 設置小程序名稱、頭像等信息

下載並安裝小程序開發工具

• 進入官網
• 經過【工具】菜單下載安裝包（選擇合適的版本）
  • 雙擊安裝包一直下一步就能夠安裝成功
• 經過工具建立小程序項目
  • 須要指定項目的位置和名稱
  • 若是註冊了小程序的帳號，那麼須要提供APPID
  • 若是沒有註冊帳號，使用測試帳號
• 開發工具功能介紹

小程序之Hello World

• 小程序項目結構概述
• 小程序相關配置
  • 全局配置app.json
    • pages表示頁面列表，排在第一個的是默認打開頁面
    • window用於設置小程序的狀態欄、導航條、標題、窗口背景色。
    • tabBar設置頁面導航菜單
  • 頁面配置page.json
    • 頁面標題名稱
    • 頁面背景色
  • 工具相關配置project.config.json
• 小程序項目代碼分析
  • app.js文件是小程序的入口文件（小程序從該文件開始執行）
  • app.wxss文件是小程序的全局樣式文件
  • pages文件夾用來放置小程序的頁面
    • wxml 模板文件，相似於以前的HTML內容
    • wxss 樣式文件，相似於以前的css文件
    • js 文件，用於處理js的交互邏輯，與以前的js做用相似
    • json文件，用於當前頁面的配置
  • utils文件夾用於提供一些工具方法

小程序開發框架概覽

網頁編程採用的是HTML+CSS+JS這樣的組合，其中HTML是用來描述當前這個頁面的結構，CSS 用來描述頁面的樣子，JS一般是用來處理這個頁面和用戶的交互。

在小程序中也有相似的處理方式，只是語法不一樣而已，相應的小程序中提供了WXML+WXSS+JS(WXS)的方式。

• wxml（模板）
• wxss（樣式）
• js（交互邏輯）
• wxs（微信腳本語言）

WXML

微信小程序模板語法是特有的規則，提供了一些內置組件，也支持自定義組件

• WXML與HTML不一樣的地方
  • 標籤名字不同
  • 多了一些 wx:if 這樣的屬性以及 {{ }} 這樣的表達式
  • 事件處理方式不一樣

內置組件的用法

• 基礎組件
  • text
    • text標籤不能夠嵌套別的組件，可是能夠嵌套本身
    • 若是須要長按選中文本的話，必須使用text標籤包裹
  • icon
  • progress
• 容器組件
  • view 相似於HTML中的div，能夠進行嵌套
• 導航組件
  • navigator
    • 若是要跳轉到tab連接，須要指定屬性open-type="switchTab"
    • 若是要跳轉到普通連接，不須要指定open-type
    • 在微信中實現連接跳轉不可使用傳統的a標籤
• 媒體組件
  • image
    • mode裁切方式

WXSS

WXSS 具備 CSS 大部分的特性，小程序在 WXSS 也作了一些擴充和修改。

• WXSS與CSS的不一樣之處
  • 分爲全局樣式和局部樣式
  • 內聯樣式 style class
  • 新增了尺寸單位rpx（px em rem 百分比 vh vw rpx）
  • WXSS僅支持部分CSS選擇器

JS交互邏輯

在小程序裏邊，咱們就經過編寫 JS 腳本文件來處理用戶的操做

• app.js中最外層須要App({}) ，該函數是微信平臺提供的api
• page.js中最外層須要Page({})，該函數是微信平臺提供的api
• app.js和page.js中均可以經過data屬性提供數據（data名字是固定的嗎？是）
• 在page.js中能夠經過getApp()方法獲取全局數據（也就是app.js中的data數據），也能夠獲取本頁面中data數據

小程序生命週期

• 程序生命週期
  • onLaunch 小程序初始化完成時（全局只觸發一次）
  • onShow 小程序啓動，或從後臺進入前臺顯示時
  • onHide 小程序從前臺進入後臺時
  • onError 小程序發生腳本錯誤，或者 api 調用失敗時觸發，會帶上錯誤信息
  • onPageNotFound 小程序要打開的頁面不存在時觸發，會帶上頁面信息回調該函數
• 頁面生命週期
  • onLoad 頁面加載時觸發
  • onShow 頁面顯示/切入前臺時觸發。
  • onReady 頁面初次渲染完成時觸發。
  • onHide 頁面隱藏/切入後臺時觸發。
• 生命週期函數中通常用於作什麼事情？
  • 調用後臺接口獲取數據
  • 啓動定時任務
  • 初始化操做