微信小程序> wxml,小程序wxml

wxml,小程序wxml

浏览量:478 时间: 来源:夏天想
微信小程序的html的内容写在了wxml里面。他是用的是封装好的标签
viewbuttontext
数据绑定
view{{}message}/view
page({
data:{
message:'hello'
}
})
判断wx:ifwx:elifwx:elseviewwx:if="{{view=='WEBVIEW'}}"WEBVIEW/viewviewwx:elif="{{view=='APP'}}"APP/viewviewwx:else="{{view=='MINA'}}"MINA/viewpage({
data:{
view:'MINA'
}
})
模板template
templatename="staffName"viewFirstName:{{firstName}},LastName:{{lastName}}/view/template下面引用上面的模板:templateis="staffName"data="{{...staffA}}"/template//扩展运算符...来将一个对象展开templateis="staffName"data="{{...staffB}}"/templatetemplateis="staffName"data="{{...staffC}}"/templatejs:
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
有时候报错
Nowyoucanprovideattr"wx:key"fora"wx:for"toimproveperformance只需要加上一个wx:key="XXX"(这个XXX可以任意指定一个作为主键的值。index或者item.name,或者是item里面的某个属性。它一定是不能改变的量唯一性)
viewwx:for={{a}}wx:key="index"索引:{{index}},对应的值:{{item.name}}/view//必须的写item才能显示出来,这个item就代表的for循环里面的每一项.
使用wx:for-item可以指定数组当前元素的变量名
使用wx:for-index可以指定数组当前下标的变量名:
viewwx:for={{a}}wx:key="index"索引:{{index}},对应的值:{{item.name}}/view如果用wx:for-item,wx:for-index就变成了viewwx: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啊
事件的使用方式点击事件:bindtapcatchtap区别是bind事件绑定不会阻止冒泡事件向上冒泡,catch事件绑定可以阻止冒泡事件向上冒泡。
事件对象属性列表

触摸事件,当前变化的触摸点信息的数组l额外的信息type事件类型timeStamp触发事件时候的时间戳
常用的e.target.id获取点击元素的id值,e.target.dataset.X当前组件上由data-开头的自定义属性组成的集合
viewdata-alpha-beta="1"data-alphaBeta="2"bindtap="bindViewTap"id="number"DataSetTest/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里面有个
templatename="item"text{{text}}/text/template
我想在index.wxml里面使用。
importsrc="item.wxml"
templateis="item"data="{{text:'forbar'}}"/template
include可以引入整个页面的除了template之外的所有的内容。常用在一些具有公共属性的头尾。includesrc="header.wxml"/viewbody/viewincludesrc="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/一个固定高度,通过设置height。作为他的滚动区域。
swiper滑块!--轮播图--swiperindicator-dots="{{indicatorDots}}"autoplay="{{autoplay}}"interval="{{interval}}"duration='{{duration}}'circular="{{circular}}"blockwx:for="{{imgeUrl}}"wx:key="index"swiper-itemimagesrc="{{item}}"class='slide-image'/image/swiper-item/block/swiperdata:{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-areastyle="height:200px;width:200px;background:red;"movable-viewstyle="height:50px;width:50px;background:blue;"x="{{x}}"y="{{y}}"direction="all"/movable-view/movable-areacover-view可覆盖在原生组件上的文本。可覆盖的原生组件包括map、video、canvas、camera、live-player、live-pusher,只支持嵌套cover-view、cover-image。icon图标icontype="success"size="23"color:"red"/iconicon的类型,type有效值:success,success_no_circle,info,warn,waiting,cancel,download,search,clear
size默认单位是px。所以写的时候不用加
text文本
text/组件内只支持text/嵌套。
rich-text富文本,可以在里面写html的标签progress进度条
progresspercent="20"color="pink"stroke-width="12"activeshow-info/active进度条从左往右的动画
button按钮
type:primarydefaultwarn
size:defaultmini
form-type:submitreset(用于form/组件)
open-type:contact-打开客服会话getUserInfo-获取用户信息getPhoneNumber-获取用户手机号share-触发用户转发(微信开放的一些功能,)
checkbox-group多个多选框checkbox单个多选框bindchange触发
checkbox-groupbindchange="checkboxchange"labelclass="checkbox"wx:for="{{itemsAA}}"checkboxvalue="{{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
labelclass="checkbox"wx:for="{{itemsAA}}"radiovalue="{{item.name}}"checked="{{item.checked}}"{{item.value}}/radio/label/radio-group
switch开关按钮。
switchcheckedbindchange="switch1Change"/label表单组件通过for来指定点击对应的id。或者是把表单放在这个label里面,点击时就触发里面的事件,里面可能有,checkboxradiobuttonswitch/form表单组件
把inputcheckboxradiopickerslider提交
当form里面某个button的formType=submit的时候点击这个按钮,触发提交事件,但是里面的组件要写name
formbindsubmit="formSubmit"bindreset="formReset"viewclass="sectionsection_gap"viewclass="section__title"radio/viewradio-groupname="radio-group"labelradiovalue="radio1"/radio1/labellabelradiovalue="radio2"/radio2/label/radio-group/viewviewclass="btn-area"buttonformType="submit"Submit/buttonbuttonformType="reset"Reset/button/view/formformSubmit:function(e){console.log('form发生了submit事件,携带数据为:',e.detail.value)},formReset:function(){console.log('form发生了reset事件')}
input输入框
type:textnumberidcard(身份证输入键盘)digit(带小数点的数字键盘)
password=true代表是密码
placeholder占位符
confirm-type弹出键盘的右下角按钮上面的文字send发送search搜索next下一个go前往done完成
textarea多行输入框,这是一个单标签
maxlength最大的长度auto-foucs自动聚焦
formbindsubmit="bindFormSubmit"textareaplaceholder="form中的textarea"name="textarea"/buttonform-type="submit"提交/button/formbindFormSubmit:function(e){console.log(e.detail.value.textarea)}
picker底部弹起的滚动选择器
mode分别是普通选择器selector,多列选择器multiSelector,时间选择器time,日期选择器date,省市区选择器region,默认是普通选择器。
range="{{array}}"在selector和multiSelector里面才有的。代表下面弹出的数组的值。
navigator页面链接viewclass="btn-area"navigatorurl="/page/navigate/navigate?title=navigate"hover-class="navigator-hover"跳转到新页面/navigatornavigatorurl="../../redirect/redirect/redirect?title=redirect"open-type="redirect"hover-class="other-navigator-hover"在当前页打开/navigatornavigatorurl="/page/index/index"open-type="switchTab"hover-class="other-navigator-hover"切换Tab/navigatornavigatortarget="miniProgram"open-type="navigate"app-id=""path=""extra-data=""version="release"打开绑定的小程序/navigator/view
媒体组件
audio音频(注意:1.6.0版本开始,该组件不再维护。建议使用能力更强的接口)
image图片src链接地址lazy-load:true是否支持懒加载只有在scroll-view下的图片有效
video视频src地址autoplay:true是否自动播放loop循环播放

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎