微信小程序（一）

小程序

WXSS

rpx ，

仅支持部分 CSS 选择器

document，window无效 ，用this.route

运行

  1. 5分钟会被微信主动销毁

  2. 内存占用过高回收

性能

  1. 避免setData频繁调用

  2. 每次 setData 都传递大量新数据1024kb

  3. 后台态页面进行 setData

  4. 减少使用大图片资源（运行&下载打开速度）

逻辑层

  1. 模块化

     
     
     
     
     
     
     
    module.exports.sayHello = sayHello；
    var common = require('common.js')；
     

  2. 全局变量 getApp().globalData

视图层

  1.  
     
     
     
     
     
     
    <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>
     
  2.  
     
     
     
     
     
     
    <view wx:if="{{length > 5}}"> 1 </view>
    <view wx:elif="{{length > 2}}"> 2 </view>
    <view wx:else> 3 </view>
     

  3. wx:if 有更 耗而 hidden 有更高的初始渲染消耗

  4.  
     
     
     
     
     
     
    <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'}}"/>
     

  5. 事件：

    1. 冒泡：bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡。bind:tap、、catch:touchstart

    2. 捕获：capture-bind、capture-catch

    3.  
       
       
       
       
       
       
      <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>
       
  6.  
     
     
     
     
     
     
    <!-- index.wxml -->
    <include src="header.wxml"/>
    <view> body </view>
    <include src="footer.wxml"/>
     
  1.  
     
     
     
     
     
     
    <wxs module="m1">
    var msg = "hello world";
    module.exports.message = msg;
    </wxs>
    ​
    <view> {{m1.message}} </view>
    ​
    <wxs src="./../logic.wxs" module="logic" />
     

  1. 规定屏幕宽为750rpx

自定义组件

  1. "component": true；

和vue，angular的小区别

  1. wx：if中使用 {{ }}；

  2. 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>
 

 

posted @ 2018-02-12 13:28  ♥卿  阅读(250)  评论(0)  编辑  收藏  举报