小程序

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;
   100%;
  background: rebeccapurple;
}

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

.view3 {
  height: 300rpx;
   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 会先后调用handleTap3handleTap2(因为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    //页面卸载

  

原文地址:https://www.cnblogs.com/qq254980080/p/9061080.html