微信小程序开发:一篇文章掌握基础配置、基本语法和功能

框架主题文件

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