框架主题文件
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
})
