1.微信小程序-起步（未完成）

目录结构

├── app.js
├── app.json
├── app.wxss
├── pages
│   │── index
│   │   ├── index.wxml
│   │   ├── index.js
│   │   ├── index.json
│   │   └── index.wxss
│   └── logs
│       ├── logs.wxml
│       └── logs.js
└── utils

app.json - page字段

描述当前小程序所有页面路径，这是为了让微信客户端知道当前你的小程序页面定义在哪个目录（每个APP页面都需要注册）

{
  "pages": ["pages/index/index", "pages/logs/logs"]
}

app.json - window字段

定义小程序所有页面的顶部背景颜色，文字颜色定义等（APP页面总的设置）

"window":{
    /*导航栏区域*/
 "navigationBarBackgroundColor": "#ff0000", //导航栏的颜色，默认为#000000（黑色）仅支持十六进制颜色
 "navigationBarTextStyle": "white",         //导航栏的文字颜色，只支持black（黑色或white（白色），默认为white
 "navigationBarTitleText": "小程序 Demo" ,   //导航栏的标题文本
  
    /*背景区域（默认不可见，下拉才显示*/
  "backgroundColor":"#efefef"  ,                   //窗口的背景色   十六进制
  "backgroundTextStyle":"light" ,           //下拉loading的样式，仅支持dark/light
    
   "enablePullDownRefresh":false,           //是否开启全局下拉刷新  true/false
   "onReachBottomDistance":50               //上拉触底事件的距离，单位px
   
}

app.json - tabBar（导航栏）

定义导航栏

"tabBar":{
        "list":[ //必填项
                  {
                    "pages":"pages/index/index", //页面路径（必填
                    "text":"index" ,        //tab文字（必填
                    "iconPath":"",          //未选中时图片路径.
                   "selectedIconPath":"",   //选中时的图片路径
                   
             }
         ],
         "position":"bottom"                //tabBar位置，仅支持bottom/top
         "backgroundColor":"",              //背景色 仅支持black/white
         "borderStyle":""  ,                //tabBar上边框的颜色
         "color":""  ,                      //tab上文字的默认(未选中)颜色
         "selectedColr":""                  //tab上的文字选中时的颜色
         }

app.json - networkTimeout（超时设置）

 "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  }

app.json - debug（调试模式）

页面.json

都可以自己设置一些页面的配置

//页面.json
{
  "usingComponents": {},
  "navigationBarBackgroundColor": "#ff0000",     //导航栏颜色
  "navigationBarTextStyle": "black",             //导航栏标题颜色
  "navigationBarTitleText": "String",            //导航栏标题文本
  "backgroundColor": "#ffffff",                  //下拉窗口背景色
  "backgroundTextStyle": "dark",                 //下拉loading的样式，仅支持dark/light
  "enablePullDownRefresh": true,                 //是否开启下拉刷新
  "onReachBottomDistance":50                     //上拉触底距离
}

app.js-应用生命周期

1.onLaunch：APP初始化完成时执行此函数，只执行一次

2.onShow：小程序启动或者进入前台时触发

4.onHide：进入后台时触发

App({
 
  /**
   * 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
   */
  onLaunch: function () {
    
  },
 
  /**
   * 当小程序启动，或从后台进入前台显示，会触发 onShow
   */
  onShow: function (options) {
    
  },
 
  /**
   * 当小程序从前台进入后台，会触发 onHide
   */
  onHide: function () {
    
  },
 
  /**
   * 当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息
   */
  onError: function (msg) {
    
  },
  globalData: 'I am global data'
})

页面.js - 页面生命周期

1.onLoad：页面加载时触发。一个页面只会调用一次

2.onShow：页面显示/切入前台时触发

3.onReady：页面初次渲染完成时触发。一个页面只会调用一次

4.onHide：页面隐藏/切入后台时触发

5.onUnload：页面卸载时触发

Page({
    //1.data 是页面第一次渲染使用的初始数据。
  data: {
    text: "This is page data.",
    array: [{msg: '1'}, {msg: '2'}]
  },
  //2.页面加载时触发。一个页面只会调用一次，
  // 可以在 onLoad 的参数中获取打开当前页面路径中的参数
  onLoad: function(options) {
      //获取其他页面传来的参数
    
  },
  onShow: function() {
   //页面显示/切入前台时触发
  },
  onReady: function() {
    //页面初次渲染完成时触发。一个页面只会调用一次，
    //代表页面已经准备妥当，可以和视图层进行交互
  },
  onHide: function() {
    // 页面隐藏/切入后台时触发.
  },
  onUnload: function() {
    // 页面卸载时触发.
  },
  onPullDownRefresh: function() {
    // 监听用户下拉刷新事件.
     //需要在app.json的window选项中或页面配置
    // 中开启enablePullDownRefresh。
    // 可以通过wx.startPullDownRefresh触发下拉刷新，
     //调用后触发下拉刷新动画，效果与用户手动下拉刷新一致。
      //当处理完数据刷新后，
      //wx.stopPullDownRefresh可以停止当前页面的下拉刷新
  },
  onReachBottom: function() {
    // 监听用户上拉触底事件.
    //可以在app.json的window选项中或页面配置中设置触发距离onReachBottomDistance。
    //在触发距离内滑动期间，本事件只会被触发一次
  },
  onShareAppMessage: function (object) {
    // 监听用户点击页面内转发按钮（button 组件 open-type="share"）
    //或右上角菜单“转发”按钮的行为，并自定义转发内容.
  },
  onPageScroll: function(  object) {
    //监听用户滑动页面事件。
  },
  onResize: function(object) {
    // 小程序屏幕旋转时触发
  },
  onTabItemTap(item) {
      //点击 tab 时触发
    console.log(item.index)
    //被点击tabItem的序号，从0开始
    console.log(item.pagePath)
    //被点击tabItem的页面路径
    console.log(item.text)
    //被点击tabItem的按钮文字
  },
  // 普通的事件处理.
  viewTap: function() {
    this.setData({
        //设置页面的数据
      text: 'Set some data for updating view.'
    }, function() {
     //setData引起的界面更新渲染完毕后的回调函数
    })
  },
  //自由数据
  customData: {
    hi: 'MINA'
  }
})

 wxss样式

WXSS   样式    app.wxss  全局样式        局部页面的.wxss仅对当前页面生效

height:100%   屏幕高度

width:750rpx  屏幕宽度  （rpx单位 小程序的适配 今后直接用rpx书写）

建议采用flex布局  display:flex;

支持部分css选择器
.class和#id
element
并集选择器和后代选择器
::after和::before伪类选择器

@import 可以用于导入样式文件
比如在根目录下创建common文件夹中创建common.wxss
@import '/common/common.wxss';   

WXS 脚本

类似javaScript  单独的语言
1.有自己的数据类型：
number 数值类型       string 字符串    boolean 布尔值
object 对象类型      function 函数类型  arrary数组  date 日期类型 regexp正则
2.不支持类似ES6及以上的语法形式
不支持let const 解构赋值 展开运算符 箭头函数 对象属性简写 ...
3.遵循CommonJs规范
module对象
require()函数
module.exports对象