微信小程序学习笔记一（基础知识 ）

由于最近学习了有关微信小程序的相关知识，故在这里总结一下学习心得。

微信小程序开发基础

1. 登录微信公众平台 https://mp.weixin.qq.com/注册小程序账号。

2. 下载并安装微信web开发者工具

Json配置文件

配置文件分为两类。

1. app.json为全局配置。作用域： 作用于全部页面
2. pages目录下的每个页面下也有一个.json文件，作用域： 只作用于当前页面。

下面来介绍一下app.json的相关知识点。

app.json

app.json文件，是对当前小程序的全局配置。
包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。

基本组成如下：

组成	功能
pages	设置页面路径。
window	设置窗体 （状态栏、导航条、标题、背景）。 如： navigationBarBackgroundColor 导航栏背景色、 navigationBarTextStyle 导航栏标题颜色、 navigationBarTitleText 导航栏标题文字内容 、 backgroundColor 背景色、 backgroundTextStyle 下拉背景字体，loading图的样式、 enablePullDownRefresh 是否开启下拉刷新
tabBar	设置底部的tab。 如： color颜色、 selectedColor tab栏被选中的那一个的颜色、 backgroundColor tab栏的背景色、 borderStyle 边框颜色
debug	设置网络超时时间。
networkTimeOut	是否开启debug。

pages文件夹的所有页面，都要放在app.json中的pages属性中。否则就不会被加载。

{
  //pages属性值是一个数组，每一个元素都是一个页面，且第一个页面就是首页
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ]
}

pages目录

pages目录下有多个目录，且每个目录代表一个页面。

pages的每个子目录下，默认会有xxx.js、xxx.json、xxx.wxml、xxx.wxss 四个文件

xxx.wxml

     xxx.wxml充当的是类似于HTML的角色，用来描述当前页面的结构。

     和HTML非常类似，有标签、属性。但并没有HTML中的p标签，h2标签等。常用的有： button、view、text等。

xxx.wxss

     xxx.wxss语法和CSS大部分一致。

但是，有两点注意点：

1.   wxss中新增了尺寸单位。由于在移动端设备上的像素比、宽度不同，于是采用了rpx来换算像素单位。设备的宽度统一设为750rpx。用于更好的适配各种移动设备。

2.   wxss提供了全局样式和局部样式，和JSON配置文件类似。

xxx.json

     为该页面的配置文件。

xxx.js

      用于与用户的交互等。

生命周期

每个页面会有一个生命周期，在js文件中体现。

生命周期名	动作
data	页面的初始数据
onLoad	监听页面加载
onReady	页面加载成功
onShow	页面显示
onHide	页面隐藏
onPullDownRefresh	监听页面下拉动作
onReachBottom	页面上拉触底
onShareAppMessage	用户点击右上角分享
onUnload	页面卸载

Page({
    /**
     * 页面的初始数据
     */
    data: {
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {

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

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

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

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

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

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

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

    }
})