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

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

微信小程序开发基础

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

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

Json配置文件

配置文件分为两类。

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

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

app.json

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

基本组成如下：

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文件中体现。

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

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

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

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

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

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

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

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

    }
})