微信小程序 — 速学速查笔记

摘要：配置配置全解析项目配置文件文件描述项目配置文件项目代码配置是否检查域名安全性和版本是否将项目的代码转成是否自动补全兼容前缀是否压缩代码是否启用新功能编译方式版本号项目名项目配置搜索关键字客服编译方式小程序配置项目路由设置第一项为首页窗

1. 配置

配置全解析

project.config.json ( 项目配置文件 )

{
    // 文件描述
    "description": "项目配置文件",
    // 项目代码配置
    "setting": {
        // 是否检查 url 域名安全性和 TLS 版本
        "urlCheck": false,
        // 是否将项目的 es5 代码转成 es6
        "es6": true,
        // 是否自动补全 css 兼容前缀
        "postcss": true,
        // 是否压缩代码
        "minified": true,
        // 是否启用新功能
        "newFeature": true
    },
    // 编译方式
    "compileType": "miniprogram",
    // 版本号
    "libVersion": "1.7.2",
    // appid
    "appid": "touristappid",
    // 项目名
    "projectname": "haiyangbg",
    // 项目配置
    "condition": {
        // 搜索关键字
        "search": {
            "current": -1,
            "list": []
        },
        // 客服
        "conversation": {
            "current": -1,
            "list": []
        },
        // 编译方式
        "miniprogram": {
            "current": -1,
            "list": []
        }
    }
}

app.json ( 小程序配置 )

{
  // 项目路由设置（第一项为首页）
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  // 窗口设置
  "window":{
    // 顶部导航栏背景色，必须是十六进制颜色值，如"#000000"
    "navigationBarBackgroundColor": "#9ef468",
    // 顶部导航栏显示文字
    "navigationBarTitleText": "组件展示",
    // 导航栏文字颜色，仅支持 black/white
    "navigationBarTextStyle": "black",
    // 下拉背景的文字样式，仅支持 dark/light
    "backgroundTextStyle":"light",
    // 下拉背景色，必须是十六进制颜色值，如"#000000"
    "backgroundColor": "#333",
    // 是否开启下拉刷新
    "enablePullDownRefresh": true,
    // 距离最底端触多少距离时触发触底事件，单位px
    "onReachBottomDistance": 40
  },
  //网络请求过期时间，单位毫秒
  "networkTimeout": {
    // 普通ajax请求
    "request": 20000,
    // Socket请求
    "connectSocket": 20000,
    // 文件上传
    "uploadFile": 20000,
    // 文件下载
    "downloadFile": 20000
  },
  // tab导航栏
  "tabBar": {
    // 文字的颜色
    "color": "#999",
    // 选中时文字的颜色
    "selectedColor": "#000",
    // 背景色
    "backgroundColor": "#fff",
    // 上边框的颜色，仅支持 black/white
    "borderStyle": "black",
    // tab导航栏显示在底部还是顶部(顶部不显示图片)
    "position": "bottom",
    // 导航栏列表项
    "list": [{
      // 导航到的页面路径
      "pagePath": "pages/index/index",
      // tab按钮上的文字
      "text": "组件",
      // 图片路径
      "iconPath": "img/com-l.png",
      // 选中后显示的图片
      "selectedIconPath": "img/com-d.png"
    },{
      "pagePath": "pages/logs/logs",
      "text": "API",
      "iconPath": "img/api-l.png",
      "selectedIconPath": "img/api-d.png"
    }]
  },
  // 调试信息
  "debug": true
}

page.json （ 单页面配置 ）

单页面的json就是app.json的window字段，当加载到这个页面时，此配置将覆盖app.json

2. 生命周期

小程序 App 生命周期

onLaunch ------ 小程序初始化完成时，触发(只会调用一次)

onShow ------ 1. 小程序启动 2. 从后台进入前台显示，触发

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

onError ------ 1. 发生脚本错误 2. api 调用失败，触发并带上错误信息

单页面 Page 生命周期

onLoad ------ 页面加载时，触发(只会调用一次)

onShow ------ 页面显示时，触发

onReady ------ 初次渲染完成时，触发(只会调用一次)

onHide ------ 页面隐藏时，触发

onUnload ------ 页面卸载时，触发

详细的生命周期分类：

1.小程序启动：

App.onLaunch - -> App.onShow - -> 注册app.json pages里的页面(按索引顺序) - -> 将app路由设置为首页路由 - -> 首页page参数深拷贝 - -> 初始化首页 data - -> Page.onLoad - -> Page.onShow - -> Page.onReady

2.切后台（app 和 page 生命周期重合）：

小程序被切到后台 - -> page.onHide - -> App.onHide - -> 切回小程序 - -> App.onShow - -> page.onShow

3.跳转页面：

old 表示前一个页面， new 表示新页面

navigateTo跳转 - -> 将路由设置为目标页面路由 - -> old.onHide - -> 初始化页面 data - -> new.onLoad - -> new.onShow - -> new.onReady

redirectTo重定向 - -> 设置路由 - -> old.onUnload - -> init data - -> new.onLoad - -> new.onShow - -> new.onReady

navigateBack页面返回 - -> 设置路由 - -> old.onUnload - -> init data - -> new.onShow

reLaunch重启动 - -> 设置路由 - -> old.onUnload - -> init data - -> new.onLoad - -> new.onShow - -> new.onReady

switchTabTab 切换（图截自官方文档）

3. 数据绑定和渲染

数据绑定： { { message } }

渲染

列表渲染：

- wx:for=" { { message } } "  
- wx:for-index="idx" （设置索引的变量名，默认 index ） 
- wx:for-item="itemName"（设置每一项的变量名，默认item ）

渲染块：

条件渲染：

- wx:if="boolean" - wx:elif="boolean" -wx:else="boolean" == (if - else if - if)
- hidden="boolean"

4. 模板（template） 基本用法

( 定义代码片段，可以在不同的地方调用，使用 name 属性，作为模板的名字,调用时使用 is 属性 )

// 源码（需要和调用的页面在同一个wxml里）


// 调用