小程序wxml

微信小程序的html的内容写在了wxml里面。他是用的是封装好的标签

view button text

数据绑定

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

page({

   data:{

         message:'hello'

  }

})

判断 wx:if wx:elif wx:else

<view wx:if="{{view == 'WEBVIEW'}}"> WEBVIEW </view>
<view wx:elif="{{view == 'APP'}}"> APP </view>
<view wx:else="{{view == 'MINA'}}"> MINA </view>wx:if="{{view == 'WEBVIEW'}}"> WEBVIEW </view>
<view wx:elif="{{view == 'APP'}}"> APP </view>
<view wx:else="{{view == 'MINA'}}"> MINA </view>

page({

   data:{

         view:'MINA'

  }

})

模板 template

<template name =" staffName ">

<view>

FirstName: {{firstName}}, LastName: {{lastName}}

</view>

</template>

下面引用上面的模板：

<template is =" staffName " data ="{{ ... staffA}}"></template> //扩展运算符...来将一个对象展开

<template is="staffName" data="{{...staffB}}"></template>

<template is="staffName" data="{{...staffC}}"></template>

js:

data:{

staffA: { firstName: 'Hulk', lastName: 'Hu' },

staffB: { firstName: 'Shang', lastName: 'You' },

staffC: { firstName: 'Gideon', lastName: 'Lin' }

}

结果显示：  FirstName: Hulk, LastName: Hu 

                   FirstName: Shang, LastName: You 

                   FirstName: Gideon, LastName: Lin 

                  

循环  wx:for

有时候报错

Now you can provide attr "wx:key" for a "wx:for" to improve performance

只需要加上一个wx:key="XXX"（这个XXX可以任意指定一个作为主键的值。index 或者item.name，或者是item里面的某个属性。它一定是不能改变的量唯一性）

<view wx:for={{a}}  wx:key="index">索引：{{index}}，对应的值：{{item.name}}</view> //必须的写item才能显示出来,这个item就代表的for循环里面的每一项.

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

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

<view wx:for={{a}}  wx:key="index">索引：{{index}}，对应的值：{{item.name}}</view>如果用wx:for-item, wx:for-index就变成了 <view wx:for={{a}}  wx:key="index" wx:for-index="iii" wx:for-item="JJJ">索引：{{iii}}，对应的值：{{JJJ.name}}</view>

相当于把原来的index和item重命名了。下面直接用重命名的就可以了。

js：

data:{

    a:[{"name":1},{"name":2}{,"name":3},{"name":4}],

}

结果就是       索引：0，所对应的值1

                    索引：1，所对应的值2

                   索引：2，所对应的值3

                   索引：3，所对应的值4

注意：wx:for的每个子项都可以用item来获取，如果有具体的参数就是item.name(参数名)

比如你数组写的是items。子项是item.name.数组名是a。子项也是item.name.并不是a.name啊

事件的使用方式

点击事件：bindtap catchtap 区别是bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡。

事件对象属性列表

changedTouches触摸事件，当前变化的触摸点信息的数组 currentTarget当前组件的一些属性值集合 detail额外的信息 type事件类型 timeStamp 触发事件时候的时间戳

常用的e.target.id获取点击元素的id值，e.target.dataset.X 当前组件上由data-开头的自定义属性组成的集合

<view data-alpha-beta="1" data-alphaBeta="2" bindtap="bindViewTap" id="number"> DataSet Test </view>

bindViewTap:function(event){

event.target.id //number

event.target.dataset.alphaBeta // 1 会转为驼峰写法,不然你用event.target.dataset.alpha-beta获取不到内容的

event.target.dataset.alphabeta // 2 大写会转为小写 ，但是小写不可以转大写。

}

引用

inport。可以引用别的页面里定义的template

比如item.wxml里面有个

<template name="item"> <text>{{text}}</text></template>

我想在index.wxml里面使用。

<import src="item.wxml">

<template is="item" data="{{text:'forbar'}}"></template>

include 可以引入整个页面的除了template之外的所有的内容。常用在一些具有公共属性的头尾。

<include src="header.wxml"/>

<view> body </view>

<include src="footer.wxml"/>

wxss可以通过@import 引入其他页面的样式 写在那个wxss的开头即可。

@import "common.wxss";

.middle-p { padding:15px;}

组件

<view></view>视图容器，属性hover-class按下去的样式

scroll-view  可滚动视图区域  ，属性scroll-x 允许x轴滚动。scroll-y允许y轴滚动。使用竖向y滚动时，需要给<scroll-view/>一个固定高度，通过 WXSS 设置 height。作为他的滚动区域。

swiper  滑块  

<!-- 轮播图 -->

< swiper indicator-dots= "{{indicatorDots}}" autoplay= "{{autoplay}}" interval= "{{interval}}" duration= '{{duration}}' circular="{{circular}}" >

< block wx:for= "{{imgeUrl}}" wx:key= "index">

<swiper-item>

< image src= "{{item}}" class= 'slide-image'></ image >

</swiper-item>

</ block >

</ swiper >

data: {

imgeUrl: [ '../../images/1.png', '../../images/2.png', '../../images/1.png'], //轮播图

indicatorDots: true, //是否显示点

autoplay: true, //是否自动播放

interval: 5000, //间隔

duration: 1000, //持续时间

circular:true, //是否采用衔接滑动
 

}

movable-view 的可移动区域 。可以用鼠标拖拽里面的区域  必须设置width和height属性，不设置默认为10px.必须是movable的子集

 <movable-area style="height: 200px; width: 200px; background: red;">
    <movable-view style="height: 50px; width: 50px; background: blue;" x="{{x}}" y="{{y}}" direction="all">
    </movable-view>
  </movable-area>

cover-view 可覆盖在原生组件上的文本。可覆盖的原生组件包括map、video、canvas、camera、live-player、live-pusher，只支持嵌套cover-view、cover-image。

icon图标 <icon type="success"   size="23"   color:"red"></icon>

icon的类型，type有效值：success, success_no_circle, info, warn, waiting, cancel, download, search, clear

size默认单位是px。所以写的时候不用加

text文本 

• <text/> 组件内只支持 <text/> 嵌套。

rich-text 富文本，可以在里面写html的标签

progress进度条

< progress percent= "20" color= "pink" stroke-width= "12" active show-info / > active 进度条从左往右的动画

button按钮

type ：primary default warn

size：default  mini

form-type：submit  reset （用于 <form/> 组件）

open-type：contact-打开客服会话  getUserInfo-获取用户信息 getPhoneNumber-获取用户手机号  share-触发用户转发（微信开放的一些功能，）

checkbox-group 多个多选框    checkbox单个多选框 bindchange触发

< checkbox-group bindchange= "checkboxchange">

< label class= "checkbox" wx:for= "{{itemsAA}}">

< checkbox value= "{{item.name}}" checked= "{{item.checked}}">{{item.value}} </ checkbox >

</ label >

</ checkbox-group >

data:{

itemsAA: [{ value : "1",name: "唱歌1", checked: true }, { value: "2",name: "唱歌2", checked: false }],

},

checkboxchange:function(){

console.log("选中的value值"+e.detail.value)

}

radio-group多个单选框。radio单个单选框.和多选框是一样的啊。

<radio-group>

< label class= "checkbox" wx:for= "{{itemsAA}}">

< radio value= "{{item.name}}" checked= "{{item.checked}}">{{item.value}} </ radio >

</ label >

</radio-group>

switch 开关按钮。

 <switch checked bindchange="switch1Change"/>  

label 表单组件通过for来指定点击对应的id。或者是把表单放在这个label里面，点击时就触发里面的事件，里面可能有，checkbox radio button <switch/>

form 表单组件

把input checkbox radio picker slider提交

当form里面某个button的formType=submit的时候点击这个按钮，触发提交事件，但是里面的组件要写name

<form bindsubmit="formSubmit" bindreset="formReset">

<view class="section section_gap">
    <view class="section__title">radio</view>
    <radio-group name="radio-group">
      <label><radio value="radio1"/>radio1</label>
      <label><radio value="radio2"/>radio2</label>
    </radio-group>
  </view>

<view class="btn-area">
    <button formType="submit">Submit</button>
    <button formType="reset">Reset</button>
  </view>

</form>

 formSubmit: function(e) {
    console.log('form发生了submit事件，携带数据为：', e.detail.value)
  },
  formReset: function() {
    console.log('form发生了reset事件')
  }

input 输入框

type:text number idcard（身份证输入键盘） digit（带小数点的数字键盘）

password=true 代表是密码

placeholder占位符

confirm-type 弹出键盘的右下角按钮上面的文字 send 发送 search 搜索 next 下一个 go前往 done完成

textarea 多行输入框，这是一个单标签

maxlength最大的长度 auto-foucs 自动聚焦

 <form bindsubmit="bindFormSubmit">
    <textarea placeholder="form 中的 textarea" name="textarea"/>
    <button form-type="submit"> 提交 </button>
  </form>

bindFormSubmit: function(e) {
    console.log(e.detail.value.textarea)
  }

picker底部弹起的滚动选择器

mode分别是普通选择器selector，多列选择器multiSelector，时间选择器time，日期选择器date，省市区选择器region，默认是普通选择器。

range="{{array}}" 在selector和multiSelector里面才有的。代表下面弹出的数组的值。

navigator 页面链接

<view class="btn-area">
  <navigator url="/page/navigate/navigate?title=navigate" hover-class="navigator-hover">跳转到新页面</navigator>
  <navigator url="../../redirect/redirect/redirect?title=redirect" open-type="redirect" hover-class="other-navigator-hover">在当前页打开</navigator>
  <navigator url="/page/index/index" open-type="switchTab" hover-class="other-navigator-hover">切换 Tab</navigator>
  <navigator target="miniProgram" open-type="navigate" app-id="" path="" extra-data="" version="release">打开绑定的小程序</navigator>
</view>

媒体组件

audio 音频 （注意：1.6.0 版本开始，该组件不再维护。建议使用能力更强的 wx.createInnerAudioContext 接口）

image 图片 src链接地址 lazy-load:true是否支持懒加载 只有在scroll-view下的图片有效

video视频 src地址 autoplay:true是否自动播放 loop循环播放