微信小程序基础

目录结构

json文件 各个页面的配置（此处的配置会覆盖app.json下相同的配置） 

页面的显示需要在app.json的pages节点以 文件目录+文件名 注册，第一个注册的页面为启动页 

小程序的注册、各个页面的注册

app.js 里必须要一个有App()函数来注册当前小程序，App()函数接受一个 object 参数，其指定小程序的生命周期函数等。

App({

/**

* 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）

*/

onLaunch: function () {

},

/**

* 当小程序启动，或从后台进入前台显示，会触发 onShow

*/

onShow: function (options) {

},

/**

* 当小程序从前台进入后台，会触发 onHide

*/

onHide: function () {

},

/**

* 当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息

*/

onError: function (msg) {

}

})

各个页面的.js文件必须有Page() 函数用来注册当前页面。Page() 函数接受一个 object 参数，其指定页面的初始数据、生命周期函数、事件处理函数等。

Page({

  /**
   * 页面的初始数据
   */
  data: {

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {        //动态绑定数据
        this.setData({postData:"aaa"});
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

模块化

wxml、js、wxss三类都可以模块化。

1、js类

可以将一些公共的代码抽离为一个单独的js文件，作为一个模块。模块只有通过  module.exports或者exports才能对外暴露接口。

模块文件common.js：

function sayNo() {

console.log( "no bug");

}

var fruits = [ 'taozi', 'pingguo'];

module.exports = {

fruits: fruits,

sayNo:sayNo

}

模块引用：

Tip：require目前仅支持相对路径，不支持绝对路径

var postsData = require( '../../data/common.js')

Page({

data: {

taozi: postsData.fruits[ 0]

},

clickTap: function (e) {

postsData.sayNo();

}

})

二、wxml类

wxml代码里也可以根据界面上不同的部分去分块。从主wxml文件里分出来的文件，可以写成一个模板template。

1、template和引用template都在同一页面内

template:

< template name= "tpl">

< view >it is tpl! </ view >

< view >id:{{id}} </ view >

< view >name:{{username}} </ view >

</ template >

引用template:

< template is= "tpl" data= "{{...userinfo}}"></ template >

JS：

data:{

userinfo:{

id: 110,

username: "Nike"

}

}

2、引用文件和模板文件分别是两个文件

2.1 import引入

模板文件：tpl.wxml

< template name= "tpl1">

< view >这是第二个模板 </ view >

< view >id:{{id}} </ view >

< view >name:{{username}} </ view >

</ template >

引入文件：

< import src= "tpl.wxml" / >

< template is= "tpl1" data= "{{...userinfo}}"></ template >

js文件都用的同一数据

2.2 include引入

模板文件：tpl2.wxml

< template name= "tpl1">

< view >这是第二个模板 </ view >

< view >id:{{id}} </ view >

< view >name:{{username}} </ view >

</ template >

引入：

< include src= "tpl2.wxml" / >

js文件都用的同一数据

2.3 include和import的区别

简单理解就是：import是把相应的一个文件里定义的模板引入进来，让主wxml文件可以用这个模板。而include是直接把相关文件的源码、内容，原封不动的导入进来

三、wxss类

wxss的模块化和sass、less差不多了

@import " tpl . wxss ";

小程序缓存

// 缓存，用户不主动清除，是永远存在的

wx.setStorageSync( 'key', { 'name': 'abc'}); //同步的

wx.getStorageSync( 'key');

wx.removeStorageSync( 'key');

wx.clearStorageSync(); //清除所有缓存

wx.setStorage({ key: 'key2', data: '333', }); //异步的

小程序通知功能

小程序自带API: