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) }
})