微信小程序开发笔记(二)

1、import和include
import是用来导入模板。
includes用来导入除模板以外的内容。

2、wxss引用

@import './test_0.wxss'

3、App构造器

App({
  onLaunch: function(options) {},
  onShow: function(options) {},
  onHide: function() {},
  onError: function(msg) {},
  globalData: 'I am global data'
})

4、小程序全局共享数据

// app.js
App({
  // 全局共享数据
  globalData: {
    userInfo: null
  }
})

// 其他页面脚本other.js
var appInstance = getApp()
console.log(appInstance.globalData.userInfo) // 输出: userInfo

5、 Page构造器

Page({
  data: { text: "This is page data." },
  onLoad: function(options) { },
  onReady: function() { },
  onShow: function() { },
  onHide: function() { },
  onUnload: function() { },
  onPullDownRefresh: function() { },
  onReachBottom: function() { },
  onShareAppMessage: function () { },
  onPageScroll: function() { }
})

6、修改构造器的data注意事项

* 直接修改 Page实例的this.data 而不调用 this.setData 是无法改变页面的状态的，还会造成数据不一致。
* 由于setData是需要两个线程的一些通信消耗，为了提高性能，每次设置的数据不应超过1024kB。
* 不要把data中的任意一项的value设为undefined，否则可能会有引起一些不可预料的bug。

7、API一般调用的约定

wx.on* 开头的 API 是监听某个事件发生的API接口，接受一个 Callback 函数作为参数。当该事件触发时，会调用 Callback 函数。
如未特殊约定，多数 API 接口为异步接口 ，都接受一个Object作为参数。
API的Object参数一般由success、fail、complete三个回调来接收接口调用结果，示例代码如代码清单3-17所示，详细说明如表3-9所示。
wx.get* 开头的API是获取宿主环境数据的接口。
wx.set* 开头的API是写入数据到宿主环境的接口。


通过wx.request发起网络请求示例：

wx.request({
    url: 'test.php',
    data: {},
    header: { 'content-type': 'application/json' },
    success: function(res) {
     // 收到https服务成功后返回
     console.log(res.data)
    },
    fail: function() {
     // 发生网络错误等情况触发
    },
    complete: function() {
     // 成功或者失败后触发
    }
})

8、常见的事件类型

类型	触发条件
touchstart	手指触摸动作开始
touchmove	手指触摸后移动
touchcancel	手指触摸动作被打断，如来电提醒，弹窗
touchend	手指触摸动作结束
tap	手指触摸后马上离开
longpress	手指触摸后，超过350ms再离开，如果指定了事件回调函数并触发了这个事件，tap事件将不被触发
longtap	手指触摸后，超过350ms再离开（推荐使用longpress事件代替）
transitionend	会在 WXSS transition 或 wx.createAnimation 动画结束后触发
animationstart	会在一个 WXSS animation 动画开始时触发
animationiteration	会在一个 WXSS animation 一次迭代结束时触发
animationend	会在一个 WXSS animation 动画完成时触发

当事件回调触发的时候，会收到一个事件对象，对象的详细属性如下表所示。
属性	类型	说明
type	String	事件类型
timeStamp	Integer	页面打开到触发事件所经过的毫秒数
target	Object	触发事件的组件的一些属性值集合
currentTarget	Object	当前组件的一些属性值集合
detail	Object	额外的信息
touches	Array	触摸事件，当前停留在屏幕中的触摸点信息的数组
changedTouches	Array	触摸事件，当前变化的触摸点信息的数组

这里需要注意的是target和currentTarget的区别，currentTarget为当前事件所绑定的组件，而target则是触发该事件的源头组件。

9、事件对象示例

<!-- page.wxml -->
<view id="outer" catchtap="handleTap">
  <view id="inner">点击我</view>
</view>

// page.js
Page({
  handleTap: function(evt) {
       // 当点击inner节点时
    // evt.target 是inner view组件
       // evt.currentTarget 是绑定了handleTap的outer view组件
       // evt.type == “tap”
       // evt.timeStamp == 1542
       // evt.detail == {x: 270, y: 63}
       // evt.touches == [{identifier: 0, pageX: 270, pageY: 63, clientX: 270, clientY: 63}]
       // evt.changedTouches == [{identifier: 0, pageX: 270, pageY: 63, clientX: 270, clientY: 63}]
  }
})

10、flex布局可设置的容器的属性

display:flex;

flex-direction:row（默认值） | row-reverse | column |column-reverse

flex-wrap:nowrap（默认值） | wrap | wrap-reverse

justify-content:flex-start（默认值） | flex-end | center |space-between | space-around | space-evenly

align-items:stretch（默认值） | center  | flex-end | baseline | flex-start

11、微信小程序自带的提示框

wx.showToast({ // 显示Toast

      title: '已发送',

      icon: 'success',

      duration: 1500

    })

11、微信小程序自带的模态框

wx.showModal({

      title: '标题',

      content: '告知当前状态，信息和解决方法',

      confirmText: '主操作',

      cancelText: '次要操作',

      success: function(res) {

        if (res.confirm) {

          console.log('用户点击主操作')

        } else if (res.cancel) {

          console.log('用户点击次要操作')

        }

      }

    })

12、发起HTTPS网络通信wx.request

// get请求 通过data参数传递数据

wx.request({

  url: 'https://test.com/getinfo',

     data: { id:1, version:'1.0.0' },

  success: function(res) {

    console.log(res)// 服务器回包信息

  }

})

// post请求 请求的包体为 {"a":{"b":[1,2,3],"c":{"d":"test"}}}

wx.request({

  url: 'https://test.com/postdata',

  method: 'POST',

  header: { 'content-type': 'application/json'},

  data: {

    a: {

      b: [1, 2, 3],

      c: { d: "test" }

    }

  },

  success: function(res) {

    console.log(res)// 服务器回包信息

  }

})

13、request常见代码（状态处理，响应码判断，错误处理）

var hasClick = false;

Page({

  tap: function() {

    if (hasClick) {

      return

    }

    hasClick = true

    wx.showLoading()



    wx.request({

      url: 'https://test.com/getinfo',

      method: 'POST',

      header: { 'content-type':'application/json' },

      data: { },

      success: function (res) {

        if (res.statusCode === 200) {

          console.log(res.data)// 服务器回包内容

        }

      },

      fail: function (res) {

        wx.showToast({ title: '系统错误' })

      },

      complete: function (res) {

        wx.hideLoading()

        hasClick = false

      }

    })

  }

})