微信小程序——语法篇

深碍√TFBOYSˉ_ 2023-09-27 09:18 2阅读 0赞

## 1.模板语法 ##

WXML（WeiXin Markup Language）是框架设计的⼀套标签语⾔，结合基础组件、事件系统，可以构建出⻚⾯的结构。

#### 1.1数据绑定 ####

##### 1.1.1普通写法 #####

<view>{
       {message}}</view>

Page({
        
    	data:{
        
    	message:'Hello World!'
    	}
    })

##### 1.1.2组件属性 #####

Page({
        
        data: {
        
            id: 0
        }
    })

##### 1.1.3bool类型 #####

不要直接写checked=“false”,其计算结果是一个字符串

#### 1.2运算 ####

##### 1.2.1三元运算 #####

<view hidden="{
         {flag?true:false}}">Hidden</view>

##### 1.2.2算数运算 #####

Page({
        
    data:{
        
    a:1,
    b:2,
    c:3
    }
    })

##### 1.2.3逻辑判断 #####

##### 1.2.4字符串运算 #####

<view>{
       {"hello"+name}}<view>

Page({
        
    data:{
        
    name:"mina"
    }
    })

##### 1.2.5注意 #####

花括号和引号之间如果有空格，将最终被解析成为字符串

#### 1.3列表渲染 ####

##### 1.3.1wx:for #####

项的变量名默认为item wx:for-item 可以指定数组当前元素的变量名

下标变量名默认为index wx:for-index 可以指定数组当前下标的变量名

wx:key用来提高数组渲染的性能

wx:key绑定的值 有如下选择

1.string类型，表示循环项中的唯一属性 如

list:[{
        id:0,name:"炒饭"},{
        id:1,name:"炒面"}]
    wx:key="id"

2.保留字 \*this，它的意思是item本身

\*this代表的必须是唯一的字符串和数组

list:[1,2,3,4,5]
    wx:key="*this"

代码：

<view wx:for="{
         {array}}" wx:key="id">
     {
       {index}}: {
       {item.message}}
    </view>

Page({
        
      data: {
        
        array: [{
        
          id:0,
          message: 'foo',
       }, {
        
          id:1,
          message: 'bar'
       }]
     }
    })

##### 1.3.2block #####

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

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

#### 1.4条件渲染 ####

##### 1.4.1wx:if #####

在框架中，使用wx:if="\{ \{condition\}\}"判断是否需要渲染该代码块：

##### 1.4.2hidden #####

类似 wx:if

频繁切换用hidden

不经常使用用wx:if

### 2.小程序事件的绑定 ###

小程序中绑定事件通过bind关键字来实现。如：bindtap、bindinput、bindchange等

不同的组件支持不同的事件，具体看组件的说明即可

##### 2.1wxml #####

##### 2.2page #####

Page({
        
      // 绑定的事件
      handleInput: function(e) {
        
        console.log(e);
        console.log("值被改变了");
     }
    })

##### 2.3特别注意 #####

1.绑定事件是不能带参数 不能带括号 以下为错误写法

2.事件传值 通过标签自定义属性的方式和value

3.事件触发时获取数据

handleInput: function(e) {
        
        // {item:100}
       console.log(e.currentTarget.dataset)
        // 输入框的值
       console.log(e.detail.value);
     }

### 3.样式WXSS ###

WXSS( WeiXin Style Sheets )是⼀套样式语⾔，⽤于描述WXML的组件样式。

与 CSS 相⽐，WXSS 扩展的特性有：

响应式⻓度单位 rpx

样式导⼊

#### 3.1尺寸单位 ####

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

<table> 
 <thead> 
  <tr> 
   <th>设备</th> 
   <th>rpx换算px（屏幕宽度/750）</th> 
   <th>px换算rpx（750/屏幕宽度）</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>iphone5</td> 
   <td>1rpx=0.42px</td> 
   <td>1px=2.34rpx</td> 
  </tr> 
  <tr> 
   <td>iphone6</td> 
   <td>1rpx=0.5px</td> 
   <td>1px=2rpx</td> 
  </tr> 
  <tr> 
   <td>iphone6Plus</td> 
   <td>1rpx=0.552px</td> 
   <td>1px=1.81rpx</td> 
  </tr> 
 </tbody> 
</table>

建议： 开发微信⼩程序时设计师可以⽤ iPhone6 作为视觉稿的标准。

使⽤步骤：

1.  确定设计稿宽度 pageWidth
2.  计算⽐例 750rpx = pageWidth px ,因此 1px=750rpx/pageWidth 。
3.  在less⽂件中，只要把设计稿中的 px => 750/pageWidth rpx 即可。

##### 3.2样式导入 #####

wxss中直接就⽀持，样式导⼊功能。

也可以和 less中的导⼊混⽤。

使⽤ @import

语句可以导⼊外联样式表，只⽀持相对路径。

⽰例代码：

/** common.wxss **/
    .small-p {
        
      padding:5px; }

/** app.wxss **/
    @import "common.wxss";
    .middle-p {
        
      padding:15px; }

##### 3.3. 选择器 #####

特别需要注意的是 ⼩程序 不⽀持通配符 \* 因此以下代码⽆效！

*{
        
        margin:0;
        padding:0;
        box-sizing:border-box; }

⽬前⽀持的选择器有：

<table> 
 <thead> 
  <tr> 
   <th>选择器</th> 
   <th>样例</th> 
   <th>样例描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>.class</td> 
   <td>.intro</td> 
   <td>选择所有拥有 class= intro 的组件</td> 
  </tr> 
  <tr> 
   <td>#id</td> 
   <td>#firsrname</td> 
   <td>选择拥有id="firstname"的组件</td> 
  </tr> 
  <tr> 
   <td>element</td> 
   <td>view</td> 
   <td>选择所有view组件</td> 
  </tr> 
  <tr> 
   <td>element,element</td> 
   <td>view,checkbox</td> 
   <td>选择所有文档的view组件和所有的checkbox组件</td> 
  </tr> 
  <tr> 
   <td>nth-child(n)</td> 
   <td>view:nth-child(n)</td> 
   <td>选择某个索引的标签</td> 
  </tr> 
  <tr> 
   <td>::after</td> 
   <td>view::after</td> 
   <td>在view组件后边插入内容</td> 
  </tr> 
  <tr> 
   <td>::befor</td> 
   <td>view::befor</td> 
   <td>在view组件前边插入内容</td> 
  </tr> 
 </tbody> 
</table>

### 4.常见组件 ###

常见布局组件

view,text,rich-text,button,image,navigater,icon,swiper,radio,checkbox。等

#### 4.1view ####

代替原来的div标签

<view hover-class="h-class">
     点击我试试
      </view>

#### 4.2text ####

1.文本标签

2.只能嵌套text

3.长按文字可以复制，（只有该标签有这个功能）

4.可以对空格 回车 进行编码

<table> 
 <thead> 
  <tr> 
   <th>属性名</th> 
   <th>类型</th> 
   <th>默认值</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>selectable</td> 
   <td>Boolan</td> 
   <td>false</td> 
   <td>文本是否可选</td> 
  </tr> 
  <tr> 
   <td>decode</td> 
   <td>Boolan</td> 
   <td>false</td> 
   <td>是否解码</td> 
  </tr> 
 </tbody> 
</table>

##### 4.2.1代码 #####

#### 4.3image ####

1.图片标签，image组件默认宽度为320px，高度为240px

2.支持懒加载

<table> 
 <thead> 
  <tr> 
   <th>属性名</th> 
   <th>类型</th> 
   <th>默认值</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>src</td> 
   <td>String</td> 
   <td></td> 
   <td>图片资源地址</td> 
  </tr> 
  <tr> 
   <td>mode</td> 
   <td>String</td> 
   <td>‘scaleToFill’</td> 
   <td>图片裁剪、缩放的模式</td> 
  </tr> 
  <tr> 
   <td>lazy-load</td> 
   <td>Boolean</td> 
   <td>false</td> 
   <td>图片懒加载</td> 
  </tr> 
 </tbody> 
</table>

mode 有效值：

mode有13种模式，其中4种是缩放模式，9种是裁剪模式

#### 4.4swiper微信内置轮播图组件 ####

<table> 
 <thead> 
  <tr> 
   <th>属性名</th> 
   <th>类型</th> 
   <th>默认值</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>indication-dots</td> 
   <td>Boolean</td> 
   <td>false</td> 
   <td>是否显示面板指示点</td> 
  </tr> 
  <tr> 
   <td>indication-color</td> 
   <td>Color</td> 
   <td>rgba(0,0,0,.3)</td> 
   <td>指示点颜色</td> 
  </tr> 
  <tr> 
   <td>indication-activ-color</td> 
   <td>Color</td> 
   <td>#000000</td> 
   <td>当前选中的指示点颜色</td> 
  </tr> 
  <tr> 
   <td>autoplay</td> 
   <td>Boolean</td> 
   <td>false</td> 
   <td>是否自动切换</td> 
  </tr> 
  <tr> 
   <td>interval</td> 
   <td>Number</td> 
   <td>5000</td> 
   <td>自动切换时间</td> 
  </tr> 
  <tr> 
   <td>circular</td> 
   <td>Boolean</td> 
   <td>false</td> 
   <td>是否循环轮播</td> 
  </tr> 
 </tbody> 
</table>

#### 4.5navigator导航组件 类似超链接标签 ####

<table> 
 <thead> 
  <tr> 
   <th>属性名</th> 
   <th>类型</th> 
   <th>默认值</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>tagret</td> 
   <td>String</td> 
   <td>self</td> 
   <td>在那个目标上发生跳转，默认当前小程序，可选值self/miniProgram</td> 
  </tr> 
  <tr> 
   <td>url</td> 
   <td>String</td> 
   <td></td> 
   <td>当前小程序的跳转链接</td> 
  </tr> 
  <tr> 
   <td>open-type</td> 
   <td>String</td> 
   <td>navigate</td> 
   <td>跳转方式</td> 
  </tr> 
 </tbody> 
</table>

open-type有效值

<table> 
 <thead> 
  <tr> 
   <th>值</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>navigate</td> 
   <td>保留当前页面，跳转到应用内的某个页面，但是不能跳到tabber页面</td> 
  </tr> 
  <tr> 
   <td>redirect</td> 
   <td>关闭当前页面，跳转到应用内的某个页面，但是不允许跳转到tabber页面</td> 
  </tr> 
  <tr> 
   <td>swithTab</td> 
   <td>跳转到tabBar页面，打开到应用内的某个页面</td> 
  </tr> 
  <tr> 
   <td>reLaunch</td> 
   <td>关闭所有页面，打开到应用内的某个页面</td> 
  </tr> 
  <tr> 
   <td>navigateBack</td> 
   <td>关闭当前页面，返回上一页面或者多级页面。可通过getCurrenPages()获取当前的页面栈，决定需要返回几层</td> 
  </tr> 
  <tr> 
   <td>exit</td> 
   <td>退出小程序，target='miniProgram’时生效</td> 
  </tr> 
 </tbody> 
</table>

#### 4.6rich-text富文本标签 ####

可以将字符串解析成对应标签，类似vue种 v-html功能

代码：

// 1   index.wxml 加载 节点数组 <rich-text nodes="{
         {nodes}}" bindtap="tap"></rich-text>
    // 2 加载 字符串 <rich-text nodes='<img
    src="https://developers.weixin.qq.com/miniprogram/assets/images/head_global_z_@all.p
    ng" alt="">'></rich-text>
        
    // index.js
        
    Page({
      data: {
        nodes: [{
          name: 'div',
          attrs: {
            class: 'div_class',
            style: 'line-height: 60px; color: red;'
         },
          children: [{
            type: 'text',
            text: 'Hello World!'
         }]
       }]
     },
      tap() {
        console.log('tap')
     }
    })

##### 4.6.1nodes属性 #####

nodes属性支持字符串和标签节点数组

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>说明</th> 
   <th>类型</th> 
   <th>必填</th> 
   <th>备注</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>name</td> 
   <td>标签名</td> 
   <td>string</td> 
   <td>是</td> 
   <td>支持部分受信任的HTML节点</td> 
  </tr> 
  <tr> 
   <td>attrs</td> 
   <td>属性</td> 
   <td>object</td> 
   <td>否</td> 
   <td>支持部分受信任的属性，遵循Pascal命名法</td> 
  </tr> 
  <tr> 
   <td>children</td> 
   <td>子节点列表</td> 
   <td>array</td> 
   <td>否</td> 
   <td>结构和nodes一致</td> 
  </tr> 
 </tbody> 
</table>

文本节点：type=text

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>说明</th> 
   <th>类型</th> 
   <th>必填</th> 
   <th>备注</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>text</td> 
   <td>文本</td> 
   <td>string</td> 
   <td>是</td> 
   <td>支持entitiies</td> 
  </tr> 
 </tbody> 
</table>

**注意：**

nodes 不推荐使⽤ String 类型，性能会有所下降。

rich-text 组件内屏蔽所有节点的事件。

attrs 属性不⽀持 id ，⽀持 class 。

name 属性⼤⼩写不敏感。

如果使⽤了不受信任的 HTML

节点，该节点及其所有⼦节点将会被移除。

img 标签仅⽀持⽹络图⽚。

#### 4.7button按钮组件 ####

代码：

<button
      type="default"
      size="{
         {defaultSize}}"
      loading="{
         {loading}}"
      plain="{
         {plain}}"
    >
     default
    </button>

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>类型</th> 
   <th>默认值</th> 
   <th>必填</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>size</td> 
   <td>string</td> 
   <td>default</td> 
   <td>否</td> 
   <td>按钮的大小</td> 
  </tr> 
  <tr> 
   <td>type</td> 
   <td>string</td> 
   <td>default</td> 
   <td>否</td> 
   <td>按钮的样式类型</td> 
  </tr> 
  <tr> 
   <td>plain</td> 
   <td>string</td> 
   <td>false</td> 
   <td>否</td> 
   <td>按钮是否镂空，背景色透明</td> 
  </tr> 
  <tr> 
   <td>disabled</td> 
   <td>boolean</td> 
   <td>false</td> 
   <td>否</td> 
   <td>是否禁用</td> 
  </tr> 
  <tr> 
   <td>loading</td> 
   <td>boolean</td> 
   <td>false</td> 
   <td>否</td> 
   <td>名称前是否带loading图标</td> 
  </tr> 
  <tr> 
   <td>form-type</td> 
   <td>string</td> 
   <td></td> 
   <td>否</td> 
   <td>用于’‘组件，点击分别会触发’'组件的submit/reset事件</td> 
  </tr> 
  <tr> 
   <td>open-type</td> 
   <td>string</td> 
   <td></td> 
   <td>否</td> 
   <td>微信开放能力</td> 
  </tr> 
 </tbody> 
</table>

size的合法值

<table> 
 <thead> 
  <tr> 
   <th>值</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>default</td> 
   <td>默认尺寸</td> 
  </tr> 
  <tr> 
   <td>mini</td> 
   <td>小尺寸</td> 
  </tr> 
 </tbody> 
</table>

type的合法值

<table> 
 <thead> 
  <tr> 
   <th>值</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>primary</td> 
   <td>绿色</td> 
  </tr> 
  <tr> 
   <td>default</td> 
   <td>白色</td> 
  </tr> 
  <tr> 
   <td>warn</td> 
   <td>红色</td> 
  </tr> 
 </tbody> 
</table>

form-type的合法值

<table> 
 <thead> 
  <tr> 
   <th>值</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>submit</td> 
   <td>提交表单</td> 
  </tr> 
  <tr> 
   <td>reset</td> 
   <td>重置表单</td> 
  </tr> 
 </tbody> 
</table>

open-type的合法值

<table> 
 <thead> 
  <tr> 
   <th>值</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>contact</td> 
   <td>打开客服会话，如果用户在会话中点击消息卡片后返回小程序，可以从bindcontact回调中获得具体信息</td> 
  </tr> 
  <tr> 
   <td>share</td> 
   <td>触发用户转发</td> 
  </tr> 
  <tr> 
   <td>getPhoneNumber</td> 
   <td>获取用户手机号，可以在从bindgetphonebunber回调中获取到用户信息</td> 
  </tr> 
  <tr> 
   <td>getUserInfo</td> 
   <td>获取用户信息，可以从bindgetuserinfo回调中获取到用户信息</td> 
  </tr> 
  <tr> 
   <td>launchApp</td> 
   <td>打开APP，可以通过app-parameter设置设定向APP的参数</td> 
  </tr> 
  <tr> 
   <td>openSetting</td> 
   <td>打开授权设置页</td> 
  </tr> 
  <tr> 
   <td>feedback</td> 
   <td>打开”意见反馈“页面，用户可以提交反馈内容并上传日志，开发者可以登录小程序管理后台进入左侧菜单“客服反馈”页面获取到反馈内容</td> 
  </tr> 
 </tbody> 
</table>

#### 4.8icon ####

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>类型</th> 
   <th>默认值</th> 
   <th>必填</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>type</td> 
   <td>string</td> 
   <td></td> 
   <td>是</td> 
   <td>icon的类型，有效值：success,success_no_circle,info,warn,waiting,cancel,download,search,clear</td> 
  </tr> 
  <tr> 
   <td>size</td> 
   <td>number/string</td> 
   <td>23</td> 
   <td>否</td> 
   <td>icon的大小</td> 
  </tr> 
  <tr> 
   <td>color</td> 
   <td>string</td> 
   <td></td> 
   <td>否</td> 
   <td>icon的颜色，用css的color</td> 
  </tr> 
 </tbody> 
</table>

代码:

Page({
        
      data: {
        
        iconSize: [20, 30, 40, 50, 60, 70],
        iconType: [
          'success', 'success_no_circle', 'info', 'warn', 'waiting', 'cancel',
    'download', 'search', 'clear'
       ],
        iconColor: [
          'red', 'orange', 'yellow', 'green', 'rgb(0,255,255)', 'blue', 'purple'
       ],
     }
    })

wxml

#### 4.9radio单选框 ####

可以通过color属性来修改颜色

需要搭配radio-group一起使用

#### 4.10checkbox复选框 ####

可以通过color属性嘞修改颜色

需要搭配checkbox-group一起使用

#### 4.11自定义组件 ####

##### 1.创建自定义组件 #####

类似于页面，一个组件由json wxml wxss js四个文件组成

在微信开发者工具中新建文件夹名为components，右键新建文件夹，新建文件夹右键新建component，会得到响应的四个文件

##### 2.声明组件 #####

首先需要在组件的json文件中进行自定义组件声明

{
        
    “component”:true
    }

##### 3.编辑组件 #####

同时，还要在组件的wxml文件中编辑组件模板，在wxss文件中加入组件样式

slot表示插槽，类似于vue中的slot

<view class="inner">
     {
       {innerText}}
        <slot></slot>
    </view>

在组件的wxss文件中编写样式

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

/* 这里的样式只应用于这个自定义组件 */
    .inner {
        
      color: red; 
    }

##### 4.注册组件 #####

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

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

##### 5.声明引入自定义组件 #####

首先要在页面的json文件中进行引用声明。还要提供对应的组件名和组件路径

index.wxml

{
        
     // 引用声明
      "usingComponents": {
        
     // 要使用的组件的名称     // 组件的路径
        "my-header":"/components/myHeader/myHeader"
     }
    }

##### 6.页面中使用自定义组件 #####

<view>
      
      <my-header inner-text="Some text">
        <view>用来替代slot的</view>
        </my-header>
    </view>

7.4定义段与示例方法

component构造器可用于定义组件，调用component构造器可以指定组件的属性、数据、方法等

<table> 
 <thead> 
  <tr> 
   <th>定义段</th> 
   <th>类型</th> 
   <th>是否必填</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>properties</td> 
   <td>Object<br>Map</td> 
   <td>否</td> 
   <td>组件的对外属性，是属性名到属性设置的映射表</td> 
  </tr> 
  <tr> 
   <td>data</td> 
   <td>Object</td> 
   <td>否</td> 
   <td>组件的内部数据，和properties一同用于组件的模板渲染</td> 
  </tr> 
  <tr> 
   <td>observers</td> 
   <td>Object</td> 
   <td>否</td> 
   <td>组件数据字段监听器，用于监听properties和data的变化</td> 
  </tr> 
  <tr> 
   <td>methods</td> 
   <td>Object</td> 
   <td>否</td> 
   <td>组件的方法，包括事件响应函数和任意的自定义方法，关于事件响应函数的使用</td> 
  </tr> 
  <tr> 
   <td>created</td> 
   <td>Function</td> 
   <td>否</td> 
   <td>组件生命周期函数，在组件实例刚刚被创建时执行，注意此时不能调用setData</td> 
  </tr> 
  <tr> 
   <td>attached</td> 
   <td>Function</td> 
   <td>否</td> 
   <td>组件的生命周期函数，在组件实例进入页面节点树时执行</td> 
  </tr> 
  <tr> 
   <td>ready</td> 
   <td>Function</td> 
   <td>否</td> 
   <td>组件的生命周期函数，在组件布局完成后执行</td> 
  </tr> 
  <tr> 
   <td>moved</td> 
   <td>Function</td> 
   <td>否</td> 
   <td>组件生命周期函数，在组件实例被移动到节点树另一个位置时执行</td> 
  </tr> 
  <tr> 
   <td>detached</td> 
   <td>Function</td> 
   <td>否</td> 
   <td>组件生命周期函数，在组件实例被从页面节点树移除时执行</td> 
  </tr> 
 </tbody> 
</table>

##### 7.组件-自定义组件传参 #####

1.父组件通过**属性**的方式给子组件传递参数

2.子组件通过**事件**的方式向父组件传递参数

###### 7.1过程 ######

1.**父组件**把数据\*\*\{ \{tabs\}\}\*\*传递到子组件的tabItems属性中

2.父组件监听**onMyTab**事件

3.**子组件**触发**bindmytap**中的mytap事件

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

4.父—>子动态传值 **this.selectComponent(“\#tabs”)**;

父组件代码

// page.wxml
    <tabs tabItems="{
        {tabs}}" bindmytap="onMyTab" >
     内容-这里可以放插槽
    </tabs>
    // page.js
      data: {
        
        tabs:[
         {
        name:"体验问题"},
         {
        name:"商品、商家投诉"}
       ]
     },
      onMyTab(e){
        
        console.log(e.detail);
     },

子组件代码

// com.wxml
    <view class="tabs">
      <view class="tab_title"  >
        <block  wx:for="{
        {tabItems}}" wx:key="{
        {item}}">
          <view bindtap="handleItemActive" data-index="{
        {index}}">{
        {
        item.name}}</view>
        </block>
      </view>
      <view class="tab_content">
        <slot></slot>
      </view>
    </view>
    // com.js
    Component({
        
      properties: {
        
        tabItems:{
        
          type:Array,
          value:[]
       }
     },
      /**
       * 组件的初始数据
       */
      data: {
        
     },
      /**
       * 组件的方法列表
       */
      methods: {
        
        handleItemActive(e){
        
          this.triggerEvent('mytap','haha');
       }
     }
    })

### 5.小程序的生命周期 ###

分为**应用生命周期**和**页面生命周期**

#### 5.1应用生命周期 ####

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>类型</th> 
   <th>默认值</th> 
   <th>必填</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>onLaunch</td> 
   <td>function</td> 
   <td></td> 
   <td>否</td> 
   <td>监听小程序初始化</td> 
  </tr> 
  <tr> 
   <td>onShow</td> 
   <td>function</td> 
   <td></td> 
   <td>否</td> 
   <td>监听小程序启动或切后台</td> 
  </tr> 
  <tr> 
   <td>onHide</td> 
   <td>function</td> 
   <td></td> 
   <td>否</td> 
   <td>监听小程序切后台</td> 
  </tr> 
  <tr> 
   <td>onError</td> 
   <td>function</td> 
   <td></td> 
   <td>否</td> 
   <td>错误监听函数</td> 
  </tr> 
  <tr> 
   <td>onPageNotFound</td> 
   <td>function</td> 
   <td></td> 
   <td>否</td> 
   <td>页面不存在监听函数</td> 
  </tr> 
 </tbody> 
</table>

#### 5.2页面生命周期 ####

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>类型</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>data</td> 
   <td>Object</td> 
   <td>页面的初始数据</td> 
  </tr> 
  <tr> 
   <td>onLoad</td> 
   <td>function</td> 
   <td>生命周期回调-监听页面加载</td> 
  </tr> 
  <tr> 
   <td>onShow</td> 
   <td>function</td> 
   <td>生命周期回调-监听页面显示</td> 
  </tr> 
  <tr> 
   <td>onReady</td> 
   <td>function</td> 
   <td>生命周期回调-监听页面初次渲染完成</td> 
  </tr> 
  <tr> 
   <td>onHide</td> 
   <td>function</td> 
   <td>生命周期回调-监听页面隐藏</td> 
  </tr> 
  <tr> 
   <td>onUnload</td> 
   <td>function</td> 
   <td>生命周期回调-监听页面卸载</td> 
  </tr> 
  <tr> 
   <td>onPullDownRefresh</td> 
   <td>function</td> 
   <td>监听用户下拉动作</td> 
  </tr> 
  <tr> 
   <td>onReachBotton</td> 
   <td>function</td> 
   <td>页面上拉触底事件的处理函数</td> 
  </tr> 
  <tr> 
   <td>onShareAppMessage</td> 
   <td>function</td> 
   <td>用户点击右上角转发</td> 
  </tr> 
  <tr> 
   <td>onPageScroll</td> 
   <td>function</td> 
   <td>页面滚动触发事件的处理函数</td> 
  </tr> 
  <tr> 
   <td>onResize</td> 
   <td>function</td> 
   <td>页面尺寸改变时触发</td> 
  </tr> 
  <tr> 
   <td>onTabltemTap</td> 
   <td>function</td> 
   <td>当前时tab页时，点击tab时触发</td> 
  </tr> 
 </tbody> 
</table>