框架主題文件
App.json : 小程序公共設置，小程序的全局配置文件
app.js： 小程序的邏輯文件，用于注冊小程序全局實例，編譯時會和其他頁面邏輯文件打包成js文件
app.wxss：小程序公共樣式，對全局頁面有效
配置文件
{
//頁面路徑配置
"page":[
"mypages/index/index",
...
],
//默認窗口設置
"window":{
"navigationBarBackgroundColor": "#ffffff",
"navigationBarTextStyle": "black",
"navigationBarTitleText": "微信接口功能演示",
"backgroundColor": "#eeeeee",
"backgroundTextStyle": "light",
//支持旋轉屏幕
"pageOrientation":"auto"
},
//底部tab設置
"tabBar":{
"color":"#000000",
"selectedColor":"#ff7f50",
"backgroundColor":"#ffffff",
"borderStyle":"black",
"position":"bottom",
"text":[
{
"iconPath":"images/home.png",
"selectedIconPath":"images/home-selected.png",
"text":"首頁"
},
...
]
},
//設置網絡請求API的超時時間
"networkTimeout":{},
//是否開啟debug模式
"debug":false
}
app.js
App({
//小程序初始化完成時觸發，全局只觸發一次
onLaunch (options) {
// Do something initial when launch.
},
//小程序啟動，或從后臺進入前臺顯示時觸發。也可以使用wx.onAppShow綁定監聽
onShow (options) {
// Do something when show.
},
//小程序從前臺進入后臺時觸發，也可以使用wx.onAppHide綁定監聽
onHide () {
// Do something when hide.
},
//小程序發生腳本錯誤或者API調用報錯時觸發。也可以使用wx.onError綁定監聽
onError (msg) {
console.log(msg)
},
//當頁面不存在時觸發
onPageNotFound(Object.object){
wx.redirectTo({
url:'pages/...'
})//如果是tabbar頁面，請使用wx.switchTab
},
//全局數據
globalData: 'I am global data'
})
頁面配置文件
此文件非必須文件，如果存在將覆蓋app.json里的設置項
{
"navigationBarBackgroundColor": "#ffffff",
"navigationBarTextStyle": "black",
"navigationBarTitleText": "微信接口功能演示",
"backgroundColor": "#eeeeee",
"backgroundTextStyle": "light"
}
頁面邏輯page.js如：index.js
//index.js
Page({
//頁面初始數據
data: {
text: "This is page data."
},
//監聽頁面加載
onLoad: function(options) {
// Do some initialize when page load.
},
//監聽頁面初次渲染完成
onReady: function() {
// Do something when page ready.
},
//監聽頁面顯示
onShow: function() {
// Do something when page show.
},
//監聽頁面隱藏
onHide: function() {
// Do something when page hide.
},
//監聽頁面卸載
onUnload: function() {
// Do something when page close.
},
//監聽用戶下拉
onPullDownRefresh: function() {
// Do something when pull down.
},
//監聽頁面上拉觸底
onReachBottom: function() {
// Do something when page reach bottom.
},
onShareAppMessage: function () {
// return custom share data when user share.
},
//監聽頁面滾動
onPageScroll: function() {
// Do something when page scroll
},
//監聽頁面尺寸改變
onResize: function() {
// Do something when page resize
},
//監聽點擊tab時觸發
onTabItemTap(item) {
console.log(item.index)
console.log(item.pagePath)
console.log(item.text)
},
// 用戶自定義函數Event handler.
viewTap: function() {
this.setData({
text: 'Set some data for updating view.'
}, function() {
// this is setData callback
})
},
//用戶自定義數據
customData: {
hi: 'MINA'
}
})
獲取當前頁面
//獲取頁面數組
var pages = getCurrentPages();
//獲取當前頁對象
var currentPage = pages[pages.length-1]
事件處理
<view bindtap="myevent">點擊執行邏輯層事件</view>
Page{
myenvent:function(){
console.log('點擊了view');
}
}
界面結構文件數據綁定
<view>{{user.username}}</view>
Page({
data:{
user:{username:"jack",age:18},
....
}
})
//設置數據
在方法中 this.setData({
"user.username":'new name',
....
})
列表渲染
<view wx:for="{{array}}">
{{index}}: {{item.message}}
</view>
Page({
data: {
array: [{
message: 'foo',
}, {
message: 'bar'
}]
}
})
//02索引值
<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
{{idx}}: {{itemName.message}}
</view>
//03可嵌套
<view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="i">
<view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="j">
<view wx:if="{{i <= j}}">
{{i}} * {{j}} = {{i * j}}
</view>
</view>
</view>
//4多節點循環
<block wx:for="{{[1, 2, 3]}}">
<view> {{index}}: </view>
<view> {{item}} </view>
</block>
//5 key
<switch wx:for="{{objectArray}}" wx:key="unique" style="display: block;"> {{item.id}} </switch>
<button bindtap="switch"> Switch </button>
<button bindtap="addToFront"> Add to the front </button>
<switch wx:for="{{numberArray}}" wx:key="*this" style="display: block;"> {{item}} </switch>
<button bindtap="addNumberToFront"> Add to the front </button>
條件渲染
//if語句
<view wx:if="{{condition}}"> True </view>
//if..else 語句
<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>
//block wx:if
<block wx:if="{{true}}">
<view> view1 </view>
<view> view2 </view>
</block>
自定義模板使用和引用
import
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'}}"/>
import 的作用域
import 有作用域的概念，即只會 import 目標文件中定義的 template，而不會 import 目標文件 import 的 template。
如：C import B，B import A，在C中可以使用B定義的template，在B中可以使用A定義的template，但是C不能使用A定義的template。
<!-- A.wxml -->
<template name="A">
<text> A template </text>
</template>
<!-- B.wxml -->
<import src="a.wxml"/>
<template name="B">
<text> B template </text>
</template>
<!-- C.wxml -->
<import src="b.wxml"/>
<template is="A"/> <!-- Error! Can not use tempalte when not import A. -->
<template is="B"/>
include
include 可以將目標文件除了 外的整個代碼引入，相當于是拷貝到 include 位置，如：
<!-- index.wxml -->
<include src="header.wxml"/>
<view> body </view>
<include src="footer.wxml"/>
<!-- header.wxml -->
<view> header </view>
<!-- footer.wxml -->
<view> footer </view>
//聲明
<!--
index: int
msg: string
time: string
-->
<template name="msgItem">
<view>
<text> {{index}}: {{msg}} </text>
<text> Time: {{time}} </text>
</view>
</template>
//使用
<template is="msgItem" data="{{...item}}"/>
//數據
Page({
data: {
item: {
index: 0,
msg: 'this is a template',
time: '2016-09-15'
}
}
})
//使用2
<template name="odd">
<view> odd </view>
</template>
<template name="even">
<view> even </view>
</template>
<block wx:for="{{[1, 2, 3, 4, 5]}}">
<template is="{{item % 2 == 0 ? 'even' : 'odd'}}"/>
</block>
事件
touchstart
touchmove
touchcancel
touchend
tab
longpress //超過350ms
transitionend
animationstart
animationiteration//迭代結束時觸發
animationend
touchforcechange //支持3DTouch的iphone重按時觸發
//bing事件名 會冒泡
//catch事件 阻止冒泡
//mut-bind 冒泡對它無效
//事件函數參數e（事件對象）,可以攜帶數據
//data-**
<view data-name="自定義數據"></view>
e.currentTarget.dataset.name
//mark
<view mark:user="jack"></view>
e.mark.user
例子
{
"type":"tap",
"timeStamp":895,
"target": {
"id": "tapTest",
"dataset": {
"hi":"WeChat"
}
},
"currentTarget": {
"id": "tapTest",
"dataset": {
"hi":"WeChat"
}
},
"detail": {
"x":53,
"y":14
},
"touches":[{
"identifier":0,
"pageX":53,
"pageY":14,
"clientX":53,
"clientY":14
}],
"changedTouches":[{
"identifier":0,
"pageX":53,
"pageY":14,
"clientX":53,
"clientY":14
}]
}
動畫
this.animate(selector, keyframes, duration, callback)
this.animate('#container', [
{ opacity: 1.0, rotate: 0, backgroundColor: '#FF0000' },
{ opacity: 0.5, rotate: 45, backgroundColor: '#00FF00'},
{ opacity: 0.0, rotate: 90, backgroundColor: '#FF0000' },
], 5000, function () {
this.clearAnimation('#container', { opacity: true, rotate: true }, function () {
console.log("清除了#container上的opacity和rotate屬性")
})
}.bind(this))
this.animate('.block', [
{ scale: [1, 1], rotate: 0, ease: 'ease-out' },
{ scale: [1.5, 1.5], rotate: 45, ease: 'ease-in', offset: 0.9},
{ scale: [2, 2], rotate: 90 },
], 5000, function () {
this.clearAnimation('.block', function () {
console.log("清除了.block上的所有動畫屬性")
})
}.bind(this))
清除動畫
this.clearAnimation(selector, options, callback)
滾動動畫
this.animate(selector, keyframes, duration, ScrollTimeline)
this.animate('.avatar', [{
borderRadius: '0',
borderColor: 'red',
transform: 'scale(1) translateY(-20px)',
offset: 0,
}, {
borderRadius: '25%',
borderColor: 'blue',
transform: 'scale(.65) translateY(-20px)',
offset: .5,
}, {
borderRadius: '50%',
borderColor: 'blue',
transform: `scale(.3) translateY(-20px)`,
offset: 1
}], 2000, {
scrollSource: '#scroller',
timeRange: 2000,
startScrollOffset: 0,
endScrollOffset: 85,
})
this.animate('.search_input', [{
opacity: '0',
width: '0%',
}, {
opacity: '1',
width: '100%',
}], 1000, {
scrollSource: '#scroller',
timeRange: 1000,
startScrollOffset: 120,
endScrollOffset: 252
})
