在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
1、数据绑定 {{}} <view > </view> 2、条件语句 wx:if wx:elif wx:else <view wx:if="{{length > 5}}"> 1 </view> <view wx:elif="{{length > 2}}"> 2 </view> <view wx:else> 3 </view> 注意: <block/> 并不是一个组件,它仅仅是一个包装元素,不会在页面中做任何渲染,只接受控制属 性。 3、列表循环 wx:for ,默认数组的当前项的下标变量名默认为 index,数组当前项的变量名默认为 item ,wx:for 也可以嵌套 <view wx:for="{{items}}"> {{index}}: {{item.message}} </view> 使用 wx:for-item 可以指定数组当前元素的变量名,使用 wx:for-index 可以指定数组当前下标的变量名 <view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName"> {{idx}}: {{itemName.message}} </view>
模板 WXML 提供模板(template),可以在模板中定义代码片段,然后在不同 <template name="msgItem"> <view> <text> {{index}}: {{msg}} </text> <text> Time: {{time}} </text> </view> </template> 使用 is 属性,声明需要的使用的模板,然后将模板所需要的 data 传入 <template is="msgItem" data="{{...item}}"/>
is 属性可以使用 Mustache 语法,来动态决定具体需要渲染哪个模板 ,模板拥有自己的作用域,只能使用 data 传入的数据 <block wx:for="{{[1, 2, 3, 4, 5]}}"> </block>
<!-- item.wxml --> <template name="item"> <text>{{text}}</text> </template> 在 index.wxml 中引用了 item.wxml,就可以使用 item 模板 <import src="item.wxml"/> 注意C import B,B import A,在 C 中可以使用 B 定义的 template,在 B 中可以使用 A 定义的 template, 但是 C 不能使用 A 定义的 template
include 可以将目标文件除了<template/>的整个代码引入,相当于是拷贝到 include 位置 <!-- index.wxml --> <view> body </view> <include src="footer.wxml"/>
<!-- header.wxml --> <view> header </view>
<!-- footer.wxml --> <view> footer </view>
微信小程 pages 页面启动顺序配置,排在第一位的是首页 { "pages/news/news", "pages/index/index", "pages/logs/logs" ] } utils 中自定义模块 微信小程序中中,utils 下面一个 JavaScript 文件中定义的变量、函数,都只在这个文件 内部有效。当需要从此 JS 文件外部引用这些变量、函数时,必须使用 exports 对象进行暴 露。使用者要用 require()命令引用这个 JS 文件 //暴露给外部 module.exports = { formatTime: formatTime } //外部引用
如data里面写了一些默认数据如果想更改需要使用以下方式 changeName: function(){ this.setData({ name:”这是setData里面改变后的name值” }) }
官方推荐使用标签view和text代替传统的div和p。使用传统的无法使用id选择器,以及微信会自动转换成行内元素,需要自己加display:block转换。 注意微信的使用单位是用rpx,建议用iphone6尺寸来开发。 rpx(responsive pixel): 可以根据屏幕宽度进行自适应。规定屏幕宽为 750rpx。如在 iPhone6 上,屏 幕宽度为 375px,共有 750 个物理像素,则 750rpx = 375px = 750 物理像素,1rpx = 0.5px = 1 物理像素 绑定图片不能用img标签,只能用image标签
绑定事件在dom中用bindtap,function中可以用event接收当前点击的对象。 如<view bindtap=“run” data-id=‘12345’ data-attr=‘attr1’> 在方法中接收额外参数 function run(event){ event.currentTarget.dataset }
冒泡事件列表 touchstart 手指触摸 touchmove 手指触摸后移动 touchcancel 手指触摸动作被打断,如来电提醒,弹窗 touchend 手指触摸动作结束 tap 手指触摸后离开 longtap 手指触摸后,超过 350ms 再离开
bind事件默认不会阻止事件冒泡,如需要阻止,可以用catch绑定事件上,如catchtap
注:除上表之外的其他组件自定义事件都是非冒泡事件,如 <form/> 的 submit 事件,<input/> 的 input 事件, <scroll-view/> 的 scroll 事件
request 数据请求 wx.request({ data: { id: '11' , name: '222' }, header: { 'Content-Type': 'application/json' }, success: function(res){ console.log(res.data.result) } })
request POST 数据提交 wx.request({ username: '张三 1111' , age: '222' }, header: { }, console.log(res.data) } }) |
请发表评论