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>