微信小程序基础笔记

列表循环

//1.wx:key用于提高列表渲染的性能
//-- wx:key绑定一个普通字符串的时候，那么这个字符串名称肯定是循环数组中的对象的唯一属性！
//-- wx:key="*this" 就表示你的数组是一个普通数组 *this表示循环项；如：[1,4,7,87],["a","bold","clear"]
//2.当出现嵌套循环的时候尤其要注意绑定的名称不要重名！
//3.默认情况下不写wx:for-item="item"和wx:for-index="index"小程序也会把循环项的名称和索引设置为item和index(只有一层循环这俩项可以省略)
wx:for="{{数组或对象}}"  wx:for-item="循环项的名称"  wx:for-index="循环项的索引"  wx:key="唯一的值"

对象循环

循环对象的时候最好把item和index的值都修改下：

wx:for="{{对象}}"  wx:for-item="value"  wx:for-index="index"

block

渲染一个包含多节点的结构块；block最终不会变成真正的dom元素。

<block wx:for="{{[1,2,3]}}" wx:key="*this">
  <view>{{index}}:</view>
  <view>{{item}}:</view>
</block>

条件渲染

wx:if

判断是否需要渲染该代码块;如：

<view wx:if="{{false}}">1</view>
 <view wx:elif="{{true}}">2</view>
<view wx:else>3</view>

hidden

//类似于wx:if
<view hidden="{{true}}">True</view>

1. 标签频繁切换显示优先使用hidden ；通过样式的方式控制显示与隐藏
2. 不频繁切换显示优先使用 wx:if ;会直接把标签从页面结构移除掉

微信小程序事件绑定

事件类别：

1. tap：点击事件；

2. longtap：长按事件；

3. touchstart：触摸开始；

4. touchend：触摸结束；

5. touchcansce：取消触摸；

事件绑定：

bind绑定：

如bindtap，当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数。

<view id="tapTest" data-hi="WeChat" bindtap="tapName"> Click me! </view>

Page({
  tapName: function(event) {
    console.log(event)
  }
})

可以看到log出来的信息大致如下：

{
  "type":"tap",
  "timeStamp":895,
  "target": {
    "id": "tapTest",
    "dataset":  {
      "hi":"WeChat"
    }
  },
  "currentTarget":  {
    "id": "tapTest",
    "dataset": {
      "hi":"WeChat"
    }
  },
  "detail": {
    "x":53,
    "y":14
  },
  "touches":[{
    "identifier":0,
    "pageX":53,
    "pageY":14,
    "clientX":53,
    "clientY":14
  }],
  "changedTouches":[{
    "identifier":0,
    "pageX":53,
    "pageY":14,
    "clientX":53,
    "clientY":14
  }]
}

currentTarget：是我们点击的这个 view；

target：是我们目标的这个 view；

在冒泡的事件中： currentTarget 和 target是不一致的； currentTarget是我们绑定了的组件，target是发生事件的组件；

绑定并阻止事件冒泡:

除 bind 外，也可以用 catch 来绑定事件。与 bind 不同， catch 会阻止事件向上冒泡。

WXSS

WXSS (WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式。

尺寸单位

rpx(responsive pixel): 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

样式导入

使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。

注意小程序不支持通配符选择器 * ;因此以下代码无效：

*{
  margin:0;
  padding:0;
}

小程序使用less

原生小程序不支持less；其它基于小程序的框架都支持，如：wepy，mpve，taro等。

可以配合vscode编辑器，安装easy less插件，在vscode的设置中加入以下配置：

"less.compile":{
    "outExt":".wxss"
}

在要编写css的地方新建less文件，如index.less，然后正常编辑即可！

button的open-type(微信开放能力)属性

值	说明	最低版本
contact	打开客服会话，如果用户在会话中点击消息卡片后返回小程序，可以从 bindcontact 回调中获得具体信息，具体说明	1.1.0
share	触发用户转发，使用前建议先阅读使用指引	1.2.0
getPhoneNumber	获取用户手机号，可以从bindgetphonenumber回调中获取到用户信息，具体说明	1.2.0
getUserInfo	获取用户信息，可以从bindgetuserinfo回调中获取到用户信息	1.3.0
launchApp	打开APP，可以通过app-parameter属性设定向APP传的参数具体说明	1.9.5
openSetting	打开授权设置页	2.0.7
feedback	打开“意见反馈”页面，用户可提交反馈内容并上传日志，开发者可以登录小程序管理后台后进入左侧菜单“客服反馈”页面获取到反馈内容	2.1.0

open-type的contact的实现i流程

1. 准备两个微信账号

2. 将小程序的appid由测试号改为自己的appid；

3. 登录微信小程序官网，添加 客服 - 微信

自定义组件

创建自定义组件

一个自定义组件由 json wxml wxss js 4个文件组成。要编写一个自定义组件，首先需要在 组件的json 文件中进行自定义组件声明(将 component 字段设为 true 可将这一组文件设为自定义组件)：

{
  "component": true
}

注意：在组件wxss中不应使用ID选择器、属性选择器和标签名选择器。

在自定义组件的 js 文件中，需要使用 Component() 来注册组件，并提供组件的属性定义、内部数据和自定义方法。

Component({
  properties: {
    // 这里定义了innerText属性，属性值可以在组件使用时指定
    innerText: {
      type: String,
      value: 'default value',
    }
  },
  data: {
    // 这里是一些组件内部数据
    someData: {}
  },
  methods: {
    // 这里是一个自定义方法
    customMethod: function(){}
  }
})

使用自定义组件

使用已注册的自定义组件前，首先要在页面的 json 文件中进行引用声明。此时需要提供每个自定义组件的标签名和对应的自定义组件文件路径：

{
  "usingComponents": {
    "component-tag-name": "../../component/component-tag-name"
  }
}

组件间通信与事件

监听事件

<!-- 当自定义组件触发“myevent”事件时，调用“onMyEvent”方法 -->
<component-tag-name bindmyevent="onMyEvent" />
<!-- 或者可以写成 -->
<component-tag-name bind:myevent="onMyEvent" />

Page({
  onMyEvent: function(e){
    e.detail // 自定义组件触发事件时提供的detail对象
  }
})

触发事件

自定义组件触发事件时，需要使用 triggerEvent 方法，指定事件名、detail对象和事件选项：

<!-- 在自定义组件中 -->
<button bindtap="onTap">点击这个按钮将触发“myevent”事件</button>
Component({
  properties: {},
  methods: {
    onTap: function(){
      var myEventDetail = {} // detail对象，提供给事件监听函数
      var myEventOption = {} // 触发事件的选项
      this.triggerEvent('myevent', myEventDetail, myEventOption)
    }
  }
})

注意：

1. 页面js文件中存放事件回调函数 存放在data同层级下！

2. 组件js文件中存放事件回调函数 必须存在methods中！