1､数据绑定 {{}}
<view id="item-{{id}}"> </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),可以在模板中定义代码片段,然后在不同
的地方调用。 模板在外部引用 import include
<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]}}">
<template is="{{item % 2 == 0 ? 'even' : 'odd'}}"/>
</block>
import 可以在该文件中使用目标文件定义的 template,如: 在 item.wxml 中定义了一个叫 item 的 template
<!-- item.wxml -->
<template name="item">
<text>{{text}}</text>
</template>
在 index.wxml 中引用了 item.wxml,就可以使用 item 模板
<import src="item.wxml"/>
<template is="item" data="{{text: 'forbar'}}"/>
注意C import B,B import A,在 C 中可以使用 B 定义的 template,在 B 中可以使用 A 定义的 template,
但是 C 不能使用 A 定义的 template
include 可以将目标文件除了<template/>的整个代码引入,相当于是拷贝到 include 位置
<!-- index.wxml -->
<include src="header.wxml"/>
<view> body </view>
<include src="footer.wxml"/>
<!-- header.wxml -->
<view> header </view>
<!-- footer.wxml -->
<view> footer </view>
微信小程 pages 页面启动顺序配置，排在第一位的是首页
{
"pages":[
"pages/news/news",
"pages/index/index",
"pages/logs/logs"
] }
utils 中自定义模块
微信小程序中中,utils 下面一个 JavaScript 文件中定义的变量、函数,都只在这个文件 内部有效。当需要从此 JS 文件外部引用这些变量、函数时,必须使用 exports 对象进行暴 露。使用者要用 require()命令引用这个 JS 文件
//暴露给外部
module.exports = {
formatTime: formatTime
}
//外部引用
var Api = require('../../utils/api.js');
如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({
url: 'http://www.phone.com/appapi.php?a=getPortalCate',
data: {
id: '11' , name: '222'
}, header: {
'Content-Type': 'application/json'
},
success: function(res){
console.log(res.data.result)
} })
request POST 数据提交
wx.request({
url: 'http://www.57lehuo.com/upload.php', method:"POST",
data: {
username: '张三 1111' ,
age: '222'
},
header: {
'Content-Type': 'application/json'
},
success: function(res) {
console.log(res.data) }
})