【微信小程序】 基础语义笔记1：配置、页面文件、组件。

小程序配置

1.根目录的app.json是全局配置，目前的配置项有，页面路径、页面配置、底部菜单配置、超时时间、分包结构、debag模式、插件、插件配置、程序后台功能、workers目录、外部小程序、组件配置、新style主题、sitmap、扩展库、iPad是否旋转。

2.页面配置在app.json的window，也可以在每个页面的.json文件配置，会覆盖app.json的配置。

3.页面配置能设定是否支持屏幕旋转，小程序导航样式和内容，滚动。

4.小程序的主包依然是2MB，总包是14MB，剩余空间可以在分包使用。

5.后台功能目前有音乐、定位。

框架接口

框架有APP、Page、组件、模块化和基本功能

APP：

1.在app.js，生命周期函数有初始化（onLaunch）、启动和切换前台（onShow）、切换后台（onHide）、错误监听（onError）、页面不存在监听（onPageNotFound）

2.可以自定义方法和属性，如globalData属性、IntervalData属性、userLogin方法等。

3.可以注意一下，getApp()有个allowDefault（是否使用默认属性），一般用于独立分包，独立分包不会下载小程序，运行速度快，一般可以用在启动小程序时，但不能使用APP、组件、插件、主包、普通分包等，只有在回到主包或普通分包，才会下载小程序。6.7.2之前没独立分包。

//在页面引用APP

var appInstance = getApp()  //不要私调生命周期函数

Page:

1.包含4个文件，js、json、wxss、wxml，js包含有data项、生命周期函数、事件（转发、下拉、上拉、滚动、tab点击、屏幕尺寸变化）。

2.生命周期函数多了渲染完成时（onReady）、页面卸载时（onUnload）

3.setData()给data赋值，同时页面数据变化、this.route获取当前路径

4.使用getCurrentPages()是页面的集合，首页是第一页，当前页是最后一页，在跳转页面时，wx.navigateTo不会关闭页面，wx.redirectTo会关闭页面，最多十层页。

 

Page({
  data: {
    text: "页面"
  },
    onLoad: function(options) {
      var that =this
      that.setData({text:'加载中'})   
      var pageObj = getCurrentPages();
      console.log(pageObj[pageObj.length-1]);
  }
})

Component自定义组件：

内容有点多并且很强大，要多练习多熟悉才能用好来。

可以使用的参数有：

对外部数据 - properties  ； 

对内部数据 - data  ；

数据监听器 observers

响应方法、事件 - methods ；

组件间的复制机制 - behaviors ；

生命函数有 ：created（创建时，不能用setData），attached（进入节点树时），ready（布局完成），moved（被移到另一个节点树时），detached（被移除），lifetimes（声明对象时），pageLifetimes（所在页面声明对象时），

relations（组件间关系），externalClasses（外部的样式），options（选项）

definitionFilter（过滤器）

组件实例时的属性：

is（组件的文件路径），id(节点ID)，dataset(节点dataset)，data和prpperties是一样的（组件的属性和方法）

组件实例时的方法：

setData（设置data并渲染）、groupSetData（立刻返回callback）、hasBehavior（是否behavior），triggerEvent（触发事件），

createSelectorQuery（创建SelectorQuery对象），createIntersectionObserver（创建IntersectionObserver对象），

getPageId（返回页面标识符）、

selectComponent、selectAllComponents、selectOwnerComponent（三种返回实例对象）

getRelationNodes（返回所有关联节点）、getTabBar（返回页面的 custom-tab-bar ）

模块化的引用和绑定

require引用模块.js，module来绑定js的属性和方法

//comm.js

module.exports =
{
      sayHello :   sayHello
}

function sayHello(){   console.log('sayHello') }

//a页面.js

var comm = require('../utils/comm.js')

Page{
    onload:function(options){
         comm.sayHello();
    }  
}    

WXML语义

里面有基础的语义，比如页面绑定数据{{abc}}，wx:for，wx:if，import，include，template等，这里只记录几点我关注的：

1.template模块多次使用，而且能灵活判断来渲染，很好用。

<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'}}" data=""/>
</block>

2.import是引用template，include是引用页面，但不引用template和wxs

WXS语义

 独立的模块，可以被在页面引用，如：

也可以在wxs引用wxs。

// /pages/tools.wxs

var foo = "'hello world' from tools.wxs";
var bar = function (d) {
  return d;
}
module.exports = {
  FOO: foo,
  bar: bar,
};
module.exports.msg = "some msg";

<!-- page/index/index.wxml -->

<wxs src="./../tools.wxs" module="tools" />
<view> {{tools.msg}} </view>
<view> {{tools.bar(tools.FOO)}} </view>