文档

你个愚蠢的人类,你是一个前端开发人员吗?

快捷键列表:

格式调整

  • Ctrl+S:保存文件(必须保存才可以看到效果
  • Ctrl+[, Ctrl+]:代码行缩进
  • Ctrl+Shift+[, Ctrl+Shift+]:折叠打开代码块
  • Ctrl+C Ctrl+V:复制粘贴,如果没有选中任何文字则复制粘贴一行
  • Shift+Alt+F:代码格式化
  • Alt+Up,Alt+Down:上下移动一行
  • Shift+Alt+Up,Shift+Alt+Down:向上向下复制一行
  • Ctrl+Shift+Enter:在当前行上方插入一行
  • Ctrl+Shift+F:全局搜索

光标相关

  • Ctrl+End:移动到文件结尾
  • Ctrl+Home:移动到文件开头
  • Ctrl+i:选中当前行
  • Shift+End:选择从光标到行尾
  • Shift+Home:选择从行首到光标处
  • Ctrl+Shift+L:选中所有匹配
  • Ctrl+D:选中匹配
  • Ctrl+U:光标回退

界面相关

  • Ctrl + \\:隐藏侧边栏
  • Ctrl + m: 打开或者隐藏模拟器

文件类型

  1. .json 后缀的 JSON 配置文件:

小程序配置 app.json

  • app.json 是对当前小程序的全局配置,包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等
  • pages字段 —— 用于描述当前小程序所有页面路径,这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。
  • window字段 —— 默认页面的窗口表现小程序所有页面的顶部背景颜色,文字颜色定义在这里的。
  • networkTimeout—-网络超时时间
  • debug—-是否开启debug模式
  • tarBar—-底部tab的表现

2.    .wxml 后缀的 WXML 模板文件    html

  • 多了一些 wx:if 这样的属性以及 {{ }} 这样的表达式 在网页的一般开发流程中,我们通常会通过 JS 操作 DOM (对应 HTML 的描述产生的树),以引起界面的一些变化响应用户的行为。例如,用户点击某个按钮的时候,JS 会记录一些状态到 JS 变量里边,同时通过 DOM API 操控 DOM 的属性或者行为,进而引起界面一些变化。当项目越来越大的时候,你的代码会充斥着非常多的界面交互逻辑和程序的各种状态变量,显然这不是一个很好的开发模式,因此就有了 MVVM 的开发模式(例如 React, Vue),提倡把渲染和逻辑分离。简单来说就是不要再让 JS 直接操控 DOM,JS只需要管理状态即可,然后再通过一种模板语法来描述状态和界面结构的关系即可。
  • 通过 {{ }} 的语法把一个变量绑定到界面上,我们称为数据绑定。仅仅通过数据绑定还不够完整的描述状态和界面的关系,还需要 if/else, for等控制能力,在小程序里边,这些控制能力都用 wx: 开头的属性来表达。

3. .wxss 后缀的 WXSS 样式文件       css

4. .js 后缀的 JS 脚本逻辑文件            js

  • app.js 小程序逻辑
  • 与用户交互,获取用户位置信息,调用API
  • 使用函数


     

生命周期

  • onLaunch: function(){} 当小程序初始化完成时,会触发 onLaunch(全局只触发一次)
  • onShow: function(){}当小程序启动,或从后台进入前台显示,会触发 onShow
  • onHide: fuction(){}当小程序从前台进入后台,会触发 onHide
  • 前台后台定义:点击右上角的关闭/关闭微信,小程序并未销毁,只是进入后台;再次进入微信或打开小程序,则是从后台进入前台
  • 示例代码:

    小程序提供了全局的 getApp()函数,可以获取到小程序实例。

    注意:
  • App() 必须在 app.js 中注册,且不能注册多个
  • 不要在定义于 App() 内的函数中调用 getApp() ,使用 this 就可以拿到 app 实例
  • 不要在 onLaunch 的时候调用 getCurrentPage(),此时 page 还没有生成
  • 通过 getApp() 获取实例之后,不要私自调用生命周期函数
属性 类型 描述 data Object 页面的初始数据 onLoad Function 生命周期函数–监听页面加载 onReady Function 生命周期函数–监听页面初次渲染完成 onShow Function 生命周期函数–监听页面显示 onHide Function 生命周期函数–监听页面隐藏 onUnload Function 生命周期函数–监听页面卸载

  • 小程序注册完成后,加载页面,触发onLoad方法。
  • 页面载入后触发onShow方法,显示页面。
  • 首次显示页面,会触发onReady方法,渲染页面元素和样式,一个页面只会调用一次。
  • 当小程序后台运行或跳转到其他页面时,触发onHide方法。
  • 当小程序有后台进入到前台运行或重新进入页面时,触发onShow方法。
  • 当使用重定向方法wx.redirectTo(OBJECT)或关闭当前页返回上一页wx.navigateBack(),触发onUnload。

总结:

  • onLoad: 页面加载。
    1)一个页面只会调用一次。
    2)参数可以获取wx.navigateTo和wx.redirectTo及<navigator/>中的 query。
  • onShow: 页面显示
    1)每次打开页面都会调用一次。
  • onReady: 页面初次渲染完成
    1)一个页面只会调用一次,代表页面已经准备妥当,可以和视图层进行交互。
    2)对界面的设置如wx.setNavigationBarTitle请在onReady之后设置。详见生命周期
  • onHide: 页面隐藏
    1)当navigateTo或底部tab切换时调用。
  • onUnload: 页面卸载
    1)当redirectTo或navigateBack的时候调用。

 

框架

  1. 视图层:view
  2. 逻辑层:APP Service
  3. 在逻辑层修改数据,视图层有相应的更新
  4. 视图层中用{{  xxxxx   }} 调用了逻辑层中的var(值)
  5. button 中的bindtap=‘’属性相当于id属性,将此时间发送至逻辑层寻找对应的时间处理函数