微信小程序官方文檔複習

持續整理

前端

小程序代碼構成

JSON配置

app.json 全局配置
page.json 頁面配置
project.config.json sitemap 配置

WXML 模板

• 小程序的 WXML 用的標籤(組件)是 view, button, text 等等
• wx:if

WXSS 樣式

• 新的尺寸單位 rpx
• app.wxss 做爲全局樣式，會做用於當前小程序的全部頁面，局部頁面樣式 page.wxss 僅對當前頁面生效

JS 邏輯交互

• 事件
• this.setData wx.XXXX()

WXS

小程序宿主環境

• 頁面管理(路由,生命週期...), 基礎組件, API

協同工做和發佈

• 小程序管理後臺, 開發者權限, 體驗版小程序, 發佈上線, 小程序審覈規範, 小程序碼, 運營數據

小程序框架-主要文檔1

場景值

邏輯層

註冊實例

• getApp 和 getCurrentPages 獲取對應實例 注意調用侷限,還有實例的數據結構
• 註冊小程序(也就是app.js中的 App({}) ); 註冊頁面(也就是app.js中的 Page({}) )

使用 Component 構造器構造頁面. Component 構造器的主要區別是：方法須要放在 methods: { } 裏面.
這種建立相似 自定義組件 ， 可以使用 behaviors 等高級特性。 Component 構造器

生命週期

平時開發要結合wx.XXX 等API的異步, 業務接口的異步的狀況

頁面路由

頁面棧 getCurrentPages()
<navigator open-type="navigateTo"/>、wx.switchTab 等 注意底部菜單的二次切換、reLaunch頁面先清空頁面棧的操做體驗、

模塊化、文件做用域

模塊只有經過 module.exports 或者 exports 才能對外暴露接口
使用小程序的npm管理功能
wxMini 在 JavaScript 文件中聲明的變量和函數只在該文件中有效；不一樣的文件中能夠聲明相同名字的變量和函數，不會互相影響

API

事件監聽 API、同步 API 、 異步 API、

• 約定以 on 開頭的 API 用來監聽某個事件是否觸發，wx.onSocketOpen

• 約定以 Sync 結尾的 API 都是同步 API， 如 wx.setStorageSync，wx.getSystemInfoSync 等。此外，也有一些其餘的同步 API，-如 wx.createWorker，wx.getBackgroundAudioManage

try {
  wx.setStorageSync('key', 'value')
} catch (e) {
  console.error(e)
}

• 大多數 API 都是異步 API，如 wx.request，wx.login 等

視圖層

WXML: 數據綁定、列表渲染、條件渲染、模板、引用

<block/> 並非一個組件，它僅僅是一個包裝元素，不會在頁面中作任何渲染，只接受控制屬性.
不能和hidden一塊兒使用

wx:for="{{array}}" , wx:for-item="item" ,  wx:for-index="index" ,  wx:key="*this"  默認值,保留字 

wx:for="array" === wx:for="{{['a','r','r','a','y']}}"
wx:for="{{[1,2,3]}} "  ===   wx:for="{{[1,2,3] + ' '}}"
wx:for="3"  ===  wx:for="{{[3]}}"
wx:for="{{3}}" === wx:for="{{[1,2,3]}}"

wx:if vs hidden

<view wx:if="{{view == 'WEBVIEW'}}"> WEBVIEW </view>
<view wx:elif="{{view == 'APP'}}"> APP </view>
<view wx:else="{{view == 'MINA'}}"> MINA </view>

模板 template

定義模板name 屬性 , 使用模板 is 屬性 (能夠動態引入)
模板的做用域只能使用 data 傳入的數據以及模板定義文件中定義的 <wxs />, Page的Fn能夠直接調用.

---

• 引用 import和include

mport 有做用域的概念，即只會 import 目標文件中定義的 template，而不會 import 目標文件 import 的 template。
include 能夠將目標文件除了 <template/> <wxs/> 外的整個代碼引入，至關因而拷貝到 include 位置

假設: include是非<template/>包裹抽離的文件

WXS 小程序腳本語言-支持部分js語法

導出 ` module.exports = xxx `  
wxs模塊均爲單例 多個頁面，多個地方，屢次引用，使用的都是同一個 wxs 模塊對象 
引用其餘 wxs 文件模塊` require `函數 相對路徑

<wxs module="diy_name"></wxs>
<wxs src="./../comm.wxs" module="diy_name"></wxs>

事件系統

以bind或catch開頭，而後跟上事件的類型. catch事件綁定能夠阻止冒泡事件向上冒泡
在非原生組件中，bind和catch後能夠緊跟一個冒號，其含義不變，如bind:tap、catch:touchstart
基礎庫版本 2.8.1 起，原生組件也支持bind後緊跟冒號的寫法

事件的捕獲階段, 事件對象 , mark , 使用WXS函數響應事件

基礎組件

注意：全部組件與屬性都是小寫，以連字符-鏈接

獲取界面上的節點信息

wx.createSelectorQuery() ; WXML節點佈局相交狀態 ;

響應顯示區域變化

略

動畫

CSS 漸變 ; CSS 動畫 ; wx.createAnimation ;
WXS 響應事件 的方式能夠經過使用 WXS 來響應事件的方法來動態調整節點的 style 屬性
將頁面的 setData 改成 自定義組件 中的 setData 來提高性能

自定義組件

插件

小程序運行時

小程序進程小時 5分鐘, ios退出殺死進程等; 小程序更新機制