微信小程序（一）
阿新 • • 發佈：2018-02-12
ase 分鐘 style 自定義 hello move footer 回收 iteration
WXSS
rpx ，
僅支持部分 CSS 選擇器
document，window無效 ，用this.route
運行
-
5分鐘會被微信主動銷毀
-
內存占用過高回收
性能
-
避免setData頻繁調用
-
每次 setData 都傳遞大量新數據1024kb
-
後臺態頁面進行 setData
-
減少使用大圖片資源（運行&下載打開速度）
邏輯層
-
模塊化
module.exports.sayHello = sayHello；var common = require(‘common.js‘)； -
全局變量
getApp().globalData
視圖層
-
<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName"><block wx:for="{{[1, 2, 3]}}"><view> {{index}}: </view><view> {{item}} </view></block><switch wx:for="{{objectArray}}" wx:key="某個key" style="display: block;"> {{item.id}} </switch><switch wx:for="{{numberArray}}" wx:key="*this" style="display: block;"> {{item}} </switch> -
<view wx:if="{{length > 5}}"> 1 </view><view wx:elif="{{length > 2}}"> 2 </view><view wx:else> 3 </view> -
wx:if有更 耗而hidden有更高的初始渲染消耗 -
<template name="msgItem"><view><text> {{index}}: {{msg}} </text><text> Time: {{time}} </text></view></template><template is="msgItem" data="{{...item}}"/><template is="{{item % 2 == 0 ? ‘even‘ : ‘odd‘}}"/>?<import src="item.wxml"/><template is="item" data="{{text: ‘forbar‘}}"/> -
事件：
-
冒泡：
bind事件綁定不會阻止冒泡事件向上冒泡，catch事件綁定可以阻止冒泡事件向上冒泡。bind:tap、、catch:touchstart -
捕獲：
capture-bind、capture-catch -
<view id="outer" bind:touchstart="handleTap1" capture-bind:touchstart="handleTap2">outer view<view id="inner" bind:touchstart="handleTap3" capture-bind:touchstart="handleTap4">inner view</view></view>
-
-
<!-- index.wxml --><include src="header.wxml"/><view> body </view><include src="footer.wxml"/>
-
<wxs module="m1">var msg = "hello world";module.exports.message = msg;</wxs>?<view> {{m1.message}} </view>?<wxs src="./../logic.wxs" module="logic" />
-
規定屏幕寬為750rpx
自定義組件
-
"component": true；
和vue，angular的小區別
-
wx：if中使用 {{ }}；
-
ng-container => block
分包；
{
"pages":[
"pages/index",
"pages/logs"
],
"subPackages": [
{
"root": "packageA",
"pages": [
"pages/cat",
"pages/dog"
]
}, {
"root": "packageB",
"pages": [
"pages/apple",
"pages/banana"
]
}
]
}
組件
https://mp.weixin.qq.com/debug/wxadoc/dev/component/view.html
API
https://mp.weixin.qq.com/debug/wxadoc/dev/api/
其他
1. 事件對象
{
"type":"tap",
"timeStamp":895,
"target": {
"id": "tapTest",//事件源組件的id
"dataset": {//事件源組件上由data-開頭的自定義屬性組成的集合
"hi":"WeChat"
}
//tagName String 當前組件的類型
},
"currentTarget": {
"id": "tapTest",
"dataset": {
"hi":"WeChat"
}
},
"detail": {
"x":53,
"y":14
},
"touches":[{
"identifier":0,
"pageX":53,//距離文檔左上角的距離，文檔的左上角為原點 ，橫向為X軸，縱向為Y軸
"pageY":14,
"clientX":53,//距離頁面可顯示區域（屏幕除去導航條）左上角距離，橫向為X軸，縱向為Y軸
"clientY":14
}],
//CanvasTouch 對象
//屬性 類型 說明 特殊說明
//identifier Number 觸摸點的標識符
//x, y Number 距離 Canvas 左上角的距離，Canvas 的左上角為原點 ，橫向為X軸，縱向為Y軸
"changedTouches":[{
"identifier":0,
"pageX":53,
"pageY":14,
"clientX":53,
"clientY":14
}]
//detail
2.事件類型
| 類型 | 觸發條件 | 最低版本 |
|---|---|---|
| touchstart | 手指觸摸動作開始 | |
| touchmove | 手指觸摸後移動 | |
| touchcancel | 手指觸摸動作被打斷，如來電提醒，彈窗 | |
| touchend | 手指觸摸動作結束 | |
| tap | 手指觸摸後馬上離開 | |
| longpress | 手指觸摸後，超過350ms再離開，如果指定了事件回調函數並觸發了這個事件，tap事件將不被觸發 | 1.5.0 |
| longtap | 手指觸摸後，超過350ms再離開（推薦使用longpress事件代替） | |
| transitionend | 會在 WXSS transition 或 wx.createAnimation 動畫結束後觸發 | |
| animationstart | 會在一個 WXSS animation 動畫開始時觸發 | |
| animationiteration | 會在一個 WXSS animation 一次叠代結束時觸發 | |
| animationend | 會在一個 WXSS animation 動畫完成時觸發 |
兼容
兼容方式 - 接口
對於新增的 API，可以用以下代碼來判斷是否支持用戶的手機。
if (wx.openBluetoothAdapter) {
wx.openBluetoothAdapter()
} else {
// 如果希望用戶在最新版本的客戶端上體驗您的小程序，可以這樣子提示
wx.showModal({
title: ‘提示‘,
content: ‘當前微信版本過低，無法使用該功能，請升級到最新微信版本後重試。‘
})
}
?
兼容方式 - 參數
對於 API 的參數或者返回值有新增的參數，可以判斷用以下代碼判斷。
wx.showModal({
success: function(res) {
if (wx.canIUse(‘showModal.cancel‘)) {
console.log(res.cancel)
}
}
})
?
兼容方式 - 組件
對於組件，新增的組件或屬性在舊版本上不會被處理，不過也不會報錯。如果特殊場景需要對舊版本做一些降級處理，可以這樣子做。
Page({
data: {
canIUse: wx.canIUse(‘cover-view‘)
}
})
?
<video controls="{{!canIUse}}">
<cover-view wx:if="{{canIUse}}">play</cover-view>
</video>
微信小程序（一）