小程序

custom：自定义 util（油头）：工具 referer：来源 extra：附加的

invoked：引用 tap：轻轻一点（手指触摸后马上离开） capture：捕获

picker：选择器 section：段落 section_gap：段落间隔

[key]：key用中括号括起来就变成变量了

  data: {
    markers: [
      {
      aa: 1
      bb: 1
      }
      ],
  }, 

getPos: function() {

        var index = 0
        var markersaa = 'markers[' + index + '].aa'
        var markersbb = 'markers[' + index +'].aa'

        that.setData({
          [markersaa ]: 2,
          [markersbb ]: 2
        })
    
        // that.setData({
        // "markers[0].aa": 2,
        // "markers[0].bb": 2
       // })

      },

获取对象属性的点方法和中括号法的区别

var obj = {'name':'张三','age':'18'};
var getName = obj.name;//点方法
var getAge = obj['age'];//中括号法
console.log(getName);//打印结果:张三
console.log(getAge);//打印结果:18

中括号法可以用数字作为属性名,而点语法不可以

var obj = {'34':{
        '可能错误原因':'无',
        '错误代码':'D000',
        '错误位置':'接收方成员行(MEMBER)',
        '错误描述':'无',
    }};

console.log(obj.34);//语法报错
console.log(obj['34']);//正常获取到;

中括号法可以用变量作为属性名,而点方法不可以

var obj = {};
obj.name = '张三';
var myName = 'name';
console.log(obj.myName);//undefined,访问不到对应的属性
console.log(obj[myName]);//张三

中括号法可以使用js的关键字和保留字作为属性名,而点语法不可以(尽量避免在变量或者属性中使用关键字或保留字)

swiper：滑块切换

slider：滑动

switch：开关

progress: 进度条

单标签：

<template is="object" data="{{a:1, b:2, tempname:name}}"/>

<import src="item.wxml"/>

<include src="item.wxml"/>

<wxs src="./../tools.wxs" module="tools" />

引入相关：

WXML：

<import src="item.wxml"/>  //引入直接目标文件中的template，但不会引入目标文件中import的template
<include src="header.wxml"/>  //拷贝目标文件中除了 template、<wxs>模块 的代码，到include的位置

WXSS:
@import "common.wxss";  //导入外联样式表


JS:
var common = require('common.js')    //使用 require(path) 将公共代码引入

WXS:
<wxs src="./../tools.wxs" module="tools"></wxs>  //WXML中引用<wxs>文件
var tools = require("./tools.wxs");  //在.wxs模块中引用其他 wxs 文件模块

页面引入页面：import、include
页面引入js：<wxs src="" module=""></wxs>
css引入css：@import ""
js引入js：require("")

wxml：import

c.wxml:

<template name="c">
  <text>我是c.wxml里的{{pass}}</text>
</template>
-------------------------------------------------------
item.wxml:

<view>我是item.wxml</view>

<import src="c.wxml"/>

<template name="item">
  <text>我是item.wxml里的{{name}}</text>
</template>
-------------------------------------------------------
text.wxml:

<import src="../item/item.wxml" />

<template is="item" data="{{name: 'sunjia'}}"/>

<template is="c" data="{{pass: '12345'}}"/>   //不起作用

-------------------------------------------------------
//我是item.wxml里的sunjia

wxml：include

c.wxml:

<template name="c">
  <text>我是c.wxml里的{{pass}}</text>
</template>

--------------------------------------------------------------

item.wxml

<view>我是item.wxml</view>

<import src="c.wxml"/>

<template name="item">
  <text>我是item.wxml里的{{name}}</text>
</template>

--------------------------------------------------------------

text.wxml

<include src="../item/item.wxml" />

<template is="item" data="{{name: 'sunjia'}}"/>

<template is="c" data="{{pass: '12345'}}"/>

--------------------------------------------------------------

//我是item.wxml
//我是c.wxml里的12345

模板里边用...扩展运算符

<template name="object">
  <view>{{a}}</view>
  <view>{{b}}</view>
  <view>{{tempname}}</view>
</template>


<template is="object" data="{{...obj1,tempname:name}}"/>


data: {
   name: 'sunjia',
   obj1: {a: 3, b: 4}
},


<page>
<view>3</view>
<view>4</view>
<view>sunjia</view>
</page>

模板拥有独立作用域

<template name="object">
  <view>{{a}}</view>
  <view>{{b}}</view>
  <view>{{tempname}}</view>
</template>


<template is="object" data="{{a:1, b:2, tempname:name}}"/>


data: {
    name: 'sunjia',
  },

timeStamp：事件生成时的时间戳

页面打开到触发事件所经过的毫秒数。

回调函数：做为参数的函数（在已有的function上插入自己的代码）

function execute(callback, value) {
  console.log("maicaimaicai")
      val = callback(value);    //叫了一下回调函数
      if(val == "true") {
        console.log("xuyaomaimaoyi,maimaoyi")
      }
  console.log("jixumaicai")
  console.log("maicaimaicai")
}

execute(function(value){return value;}, 'true')

maicaimaicai
　　xuyaomaimaoyi,maimaoyi
jixumaicai
maicaimaicai

冒泡事件：点击事件（tap）、长按事件（longtap）、触摸事件（touchstart、touchuend、touchumove、touchcancel）

target: 发生事件的组件

currentTarget：绑定事件的组件

组件没有层级（z-index）之分，从点击的位置，由内向外冒泡（触发），最内部的组件是target，（冒泡过程中）绑定了事件的组件是currentTarget，没有绑定事件的（或冒泡被阻止之后的组件），不会触发。

<view class='view1' bindtap="view1Click" id='view1' data-title="新闻标题" data-id="100">
  view11
  <view class='view2' bindtap="view2Click" id='view2'>
  view22
    <view class='view3' bindtap="view3Click" id='view3'>
      view33
    </view>
  </view>
</view>


view1Click: function(event) {
    console.log("view1clicked")
    console.log(event)
  },
  view2Click: function() {
    console.log("view2clicked")
  },
  view3Click: function (event) {
    console.log("view3clicked")
    console.log(event)
  },


.view1 {
  height: 500rpx;
  width: 100%;
  background: rebeccapurple;
}

.view2 {
  height: 400rpx;
  width: 80%;
  background: red;
}

.view3 {
  height: 300rpx;
  width: 60%;
  background: saddlebrown;
}

闭包、自运行函数

https://www.cnblogs.com/ZinCode/p/5551907.html

a++ / ++a

只在判断语句中才起作用，a++，先判断值，再+1，++a，先+1，再判断

var a = 10, b = 20;

console.log(10 === a++)          //true
console.log(10 === ++a);        //false

`bind`事件绑定不会阻止冒泡事件向上冒泡，`catch`事件绑定可以阻止冒泡事件向上冒泡

<view id="outer" bindtap="handleTap1">
  outer view
  <view id="middle" catchtap="handleTap2">
    middle view
    <view id="inner" bindtap="handleTap3">
      inner view
    </view>
  </view>
</view>

点击 inner view 会先后调用handleTap3和handleTap2(因为tap事件会冒泡到 middle view，而 middle view 阻止了 tap 事件冒泡，不再向父节点传递)，点击 middle view 会触发handleTap2，点击 outer view 会触发handleTap1

扩展运算符（spread）是三个点（…），将一个数组||类数组||字符串转为用逗号分隔的序列。这家伙是用来对数组进行操作的，把数组里面的东西统统拿出来

//展开数组
let a = [1,2,3,4,5],
b = [...a,6,7];
console.log(b);
//打印出来的值[1, 2, 3, 4, 5, 6, 7]

//数组的拷贝
var c = [1, 2, 3];
var d = [...c];
d.push(4);
console.log(d);
//打印出来的值[1, 2, 3, 4]

//数组的合并
var j = [7, 1, 2];
var k = [5, 0, 8];
j = [...k, ...j];
console.log(j)
//打印出来的值[5, 0, 8, 7, 1, 2]

//展开函数调用
function fn(a,b,c,d){
 console.log(a+b+c+d);
}
var p=[1,9,3,,6];
let result=fn(5,...p);
//打印出来的值18

wx:key

如果wx:for中item的位置会动态改变(如新增)，并且希望列表中的item保持自己的特征和状态(如原来已选中)，需要使用 `wx:key` 来指定列表中项目的唯一的标识符。

wx:key="property" //关联数组

wx:key="*this" //索引数组

<switch wx:for="{{objectArray}}" wx:key="name" style='display: block'>{{item.id}}</switch>
<button bindtap='switch'>Switch</button>
<button bindtap='addToFront'>Add to front</button>

<switch wx:for="{{numberArray}}" wx:key="*this" style='display: block'>{{item}}</switch>
<button bindtap='addNumberToFront'>Add to front</button>


data: {
  objectArray: [
    {id: 0, name: 'a0'},
    {id: 1, name: 'a1'},
    {id: 2, name: 'a2'},
    {id: 3, name: 'a3'},
  ],
  numberArray: [1, 2, 3, 4]
  },
  switch: function(e) {
    const length = this.data.objectArray.length
    for (let i = 0; i < length; ++i) {
      const x = Math.floor(Math.random() * length)
      const y = Math.floor(Math.random() * length)
      const temp = this.data.objectArray[x]
      this.data.objectArray[x] = this.data.objectArray[y]
      this.data.objectArray[y] = temp
    }
    this.setData({
      objectArray: this.data.objectArray
    })
  },
  addToFront: function(){
    const length = this.data.objectArray.length
    this.data.objectArray = [{id: length, name: 'a'+length}].concat(this.data.objectArray)
    this.setData({
      objectArray: this.data.objectArray
    })
  },
  addNumberToFront: function(){
    this.data.numberArray = [this.data.numberArray.length + 1].concat(this.data.numberArray)
    this.setData({
      numberArray: this.data.numberArray
    })
  },

小程序（app）的生命周期：

onLaunch    //初始化

onShow     //后台进入前台

onHide     //前台进入后台

onError    //脚本错误或api调用失败

onPageNotFound   //要打开的页面不存在

页面（page）的生命周期：

onLoad       //加载

onReady     //初次渲染完成

onShow      //页面显示

onHide       //页面隐藏

onUnload    //页面卸载

posted @ 2018-05-19 17:45 254980080 阅读(211) 评论(0) 收藏举报

刷新页面返回顶部

254980080

小程序