微信小程序開發-1-開發流程和開發基礎

小程序開發前的準備

• 註冊小程序帳號

• 激活郵箱

• 信息登記

• 登陸小程序管理後臺-多人協同開發，須要在管理後臺綁定開發者信息

• 完善小程序信息

• 綁定開發者

小程序的版本

1. 預覽版本
2. 開發版本
3. 體驗版本
4. 送審版本
5. 線上版本

細節

• 查看已上線小程序相關數據分析-小程序數據助手
• AppSecret(小程序密鑰)
• AppID(小程序ID)

目錄介紹

• app.js 是幫咱們註冊一個微信小程序的應用
  • App({})生命週期鉤子、事件處理函數、data數據
• app.json 是對微信小程序的全局配置
• helloWorld.js 文件 Page({}) 生命週期鉤子、事件處理函數、默認數據
• helloWorld.json helloWorld的配置
• helloWorld.wxml
• hellowWorld.wxss
• 這四個文件須要保持命名一致

wxml

是框架設計的一套標籤語言，結合組件、wxs和事件系統，能夠構建出頁面結構

1. 特性

1. 數據綁定

<view hidden="{{flag ? true : false}}">
 <text data-name="{{theName}}"></text>
</view>

2. 列表渲染

<view>
    <block wx:for="{{items}}" wx:for-item="item" wx:key="index">
    </block>
    // block標籤不是一個組件，只是一個包裝元素，在頁面渲染時是不會被渲染出來的
</view>

3. 模板引用
   • 用template標籤，裏面能夠包含代碼片斷
   • name屬性是模板名稱，在外面能夠直接使用模板
   • 經過is屬性能夠聲明須要使用的是哪一個模板，也可進行動態的數據綁定
   • 模板擁有本身的做用域，只能經過data屬性向模板傳入對應的數據

// index.wxml
<template name="tempItem">
    <view>
        姓名: {{name}}
    </view>
</template>

<template is="tempItem" data="{{...item}}">
</template>

// index.js
Page({
    data:{
        item: {
            name: '張三'
        }
    }
})

4. 條件渲染

<view wx:if="{{conditioin === 1}}">
    米飯1
</view>
<view wx:elif="{{conditioin === 2}}">
    米飯2
</view>
<view wx:else>
    米飯3
</view>

2. 屬性

1. id
2. class
3. style 內聯樣式，能夠動態設置內聯樣式
4. hidden 組件是否顯示，全部組件默認顯示
5. data-* 自定義屬性，組件上觸發事件時，會發送給事件處理函數
6. bind* / catch* 組件的事件

3. 文件引用

1. import
   • 所引用的模板文件的模板，只能渲染其模板對應內容
   • 有做用域概念，只能引用目標文件template模板，若是目標文件裏面嵌套了其餘文件的template模板，是不會被引用到的
   • 也避免了引用模板死循環的問題，

// index.wxml
<import src="a.wxml"></import>
<template is="a"></template>

// a.wxml
<view>hello world1111</view>
<template name="a">
    hello world2222
</template>

// 渲染結果
hello world2222

2. include

• 會引用除了模板代碼塊之外的其餘全部內容，至關於拷貝到了include的位置

// index.wxml
<include src="a.wxml"></import>
<template is="a"></template>

// a.wxml
<view>hello world111</view>
<template name="a">
    hello world2222
</template>

// 渲染結果
hello world111

wxss

與css相比作了的修改和補充

1. 尺寸單位 rpx
   • 響應式像素
2. 樣式導入
   • 外聯樣式經過@import導入
3. 內聯樣式
4. 選擇器

rpx

1. 設備像素（device pixels）
   • 設備能控制顯示的最小物理單位，這些單位是屏幕上的一個個點，這些點是固定不變的
2. css像素（css pixels）
   • 是外部編程的概念，css代碼中所使用的邏輯像素
3. PPI/PPD（pixels per inch）
   • 每英寸所擁有的像素數目，數值越高表明咱們能以更高的密度顯示圖像

屏幕分辨率： X * Y
PPI = 開平方( X² + Y²) / 屏幕尺寸

iphone6爲例：
開平方(750² + 1334²) / 4.7  = 325.6

4. DPR （device pixels ratio）
   • 手機的某一方向上，設備像素和css像素之比，模擬器後面有DPR標識
5. rem
   • 根據html根元素的font-size大小來肯定的
6. rpx
   • 不能直接操做html的樣式屬性，因此rem失效了
   • 解決方案rpx，規定了屏幕寬度爲750rpx，能夠根據屏幕寬度進行自適應
   • 實現原理和rem實現原理很類似，並且rpx最終也是轉換成了rem

選擇器的優先級

• element 1
• class 10
• id 100
• style 1000
• !important 無窮大

小程序中的JavaScript

小程序插件

• 把某個功能插件封裝起來作成插件分享給別人

nodejs中的JavaScript

• ECMAScript
• Native
  • 原生模塊
• Npm

瀏覽器裏面的JavaScript

• ECMAScript
• BOM
• DOM

小程序中的JavaScript

• ECMAScript
• 小程序框架
• 小程序API
• 與瀏覽器JavaScript相比沒有DOM對象和BOM

小程序宿主環境的差別

小程序在不一樣平臺的腳本運行環境也是不同

• IOS
  • 小程序js代碼是運行在JavaScriptCore中，由wk webview渲染
  • 小程序中,ios8和ios9的運行環境並無徹底兼容到es6，因此es6某些關鍵字和語法在ios8和ios9中
  • 常常發現某些功能在模擬器和真機上的表現不一致，能夠經過遠程調試功能在真機上調試；
• Android
  • 小程序js代碼是經過X5 jsCore解析，由X5內核渲染
• 微信開發者工具
  • 小程序js代碼是運行在nwjs中，是由chorme webview渲染
  • nwjs,封裝了nodejs 和 webkit內核，提供了桌面應用的運行環境，讓運行在網頁的應用能夠在桌面端運行

wxs（wxScript）

• 將請求到的數據進行計算或者filter處理，幫助wxml快速構建出頁面結構
• 放到UI線程處理，會避免跨線程通訊的消耗

語言特性

• 模塊
• 變量
• 註釋
  • 單行、多行、結尾註釋（/*）
• 運算符
• 語句
  • 和js同樣，不一樣的是不支持try catch
• 數據類型
  1. number
  2. string
  3. boolean
  4. function
  5. array
  6. object
  7. date; getDate
  8. regexp; getRegexp
  • 判斷是哪一種數據類型能夠經過constructor屬性來判斷
• 基礎類庫
  1. Number
  2. Date
     • 只提供es5中Date構造函數三個方法
     • Date.parse() 解析字符串形式的日期時間，返回該時間的Unix時間戳
     • Date.now() 返回當前時間的Unix時間戳
     • Date.utc() 返回指定日期的時間戳
  3. Global
  4. Json
  5. console
     • 只提供console.log()
  6. Math

模塊

• 標籤 wxs標籤
• 文件 .wxs後綴
  • 在一個頁面中，不能重複聲明wxs模塊名，不然後面的會覆蓋前面的

// 標籤 index.wxml
// wxs有做用域， wxs 標籤和 wxs文件內定義的變量對外都是不可見的
<wxs module="m1">
    module.exports = {
        msg: 'hello'
    }
</wxs>
<view>{{ m1.msg }}</view>

// 文件 .wxs後綴
// index.wxml
<wxs src="./m2.wxs" module="m2"></wxs>
<view>{{m2.msg}}</view>

// m2.wxs
module.exports = require('./m1.wxs')

// m1.wxs
module.exports = {
    msg: 'hello world'
}

小程序開發框架MINA框架底層實現和運行機制

MINA框架組成

• View層
  • page,wxml,wxss
• App Service 邏輯層
  • Manager 邏輯處理部分的執行
  • API WAService.js的文件，封裝接口，讓各個平臺的接口都能經過這個api使用微信客戶端的能力
  • 整個小程序只有一個app service，而且整個生命週期是常駐內存的
  • 是由 app service 線程來加載運行的
  • 視圖層和邏輯層是雙線程通訊的，提供了數據傳輸data和事件event系統
  • 視圖層和邏輯層是經過系統層的JSBridge通訊的；
    • 邏輯層把數據變化通知到視圖層，而後觸發視圖層的頁面更新
    • 視圖層把事件通知到邏輯層進行業務處理，
• Native 系統層
  • JSBridge
  • 微信能力
  • 離線存貯
  • 網絡請求...

視圖層是如何將數據變化實時展現出來的

• 首先咱們知道wxml是一個具備元素屬性和文本的節點樹結構，在節點樹結構中，每一個節點都是有上下文的關係；
• 在渲染wxml時，小程序的運行環境，會把wxml轉化成js對象，AST抽象語法樹
• 在邏輯層發生數據變動時，須要經過App Service的setData方法，把數據從邏輯層傳遞到視圖層
• webview容器在渲染節點內容時會把傳過來的數據進行一個先後差別對比，這個差別是經過deep算法計算的
• 而後把差別運用在原來的節點樹上，渲染出正確的ui界面

啓動運行機制

運行機制-啓動

1. 冷啓動
   • 首次打開或被微信
   • 主動銷燬
     • 超過5min
     • 5s內連續收到兩次系統告警
2. 熱啓動
   • 打開過，必定時間再次打開時，從後臺切換到前臺

運行機制-更新

• 冷啓動時發現有新的版本，這時會幫咱們異步下載最新版本代碼包；
• 同時用微信客戶端本地的包進行啓動，下次打開小程序才能應用上
• 若是立刻用到最新版本的代碼包，須要調用api

運行機制-加載