小程序API | 易学教程

一、条件渲染：

小程序：

<view wx:if="{{ condition }}"> 111 </view>

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

vue   :

<div v-if="condition"> 111 </div>

二、列表渲染小程序：

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

vue   :

<div v-for"(item, index) in array" :key = "index">{{item}}<div>

小程序数据：

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

vue数据

export default({
   data(){
      return{
          array: [ {message: 'foo'}, {message: 'bar'}];
      }
   } 
})

注意：

使用 wx:for-item 可以指定数组当前元素的变量名，

使用 wx:for-index 可以指定数组当前下标的变量名：

<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
  {{idx}}: {{itemName.message}}
</view>

三、 block

block 可以是一个结构快，将多个组件包装起来，并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。

专用于 wx：if 或 wx： for

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

四、模板

小程序

使用name属性，作为模板的属性

在item.wxml中定义模板

<template name= "msgItem">
    <view>
        <text> {{ index}} : {{msg}}</text>
        <text> Time: {{time}} </text>
    </view>
</template>

使用模板: 在index.wxml 中引用 item.wxml

<import src="item.wxml"/>  //引入  <template  is = "msgItem"  data="{{...item}}" />

Page({
   data:{
      item:{index: 0, msg: 'this is a template', time: '2016-09-05'}
   }
    
})

is 属性可以使用 Mustache 语法，来动态决定具体需要渲染哪个模板：

<template name="odd">
  <view>odd</view>
</template>
<template name="even">
  <view>even</view>
</template>

<block wx:for="{{[1, 2, 3, 4, 5]}}">
  <template is="{{item % 2 == 0 ? 'even' : 'odd'}}" />
</block>

vue 模板（组件）

五、事件 bindtap

小程序

<view id = "tapText"  data-hi = "wechat" bindtap = "tapName"></view>

在.js文件中 Page里必定有一个 tapName事件方法

在相应的Page定义中写上相应的事件处理函数，参数是event。

Page({
  tapName(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
    }
  ]
}

Vue

v-bind:click 或者 @click

六、import / include

import 的作用域

import 有作用域的概念，即只会 import 目标文件中定义的 template，而不会 import 目标文件 import 的 template。

如：C import B，B import A，在C中可以使用B定义的template，在B中可以使用A定义的template，但是C不能使用A定义的template。

include

include 可以将目标文件除了 <template/> <wxs/> 外的整个代码引入，相当于是拷贝到 include 位置，如：

<!-- index.wxml -->
<include src="header.wxml" />
<view>body</view>
<include src="footer.wxml" />
<!-- header.wxml -->
<view>header</view>
<!-- footer.wxml -->
<view>footer</view>

七、wxss 样式导入

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

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

来源：https://www.cnblogs.com/dudu123/p/10314128.html

标签

小程序api