Skip to content

Latest commit

 

History

History
154 lines (83 loc) · 2.97 KB

微信小程序第一天.md

File metadata and controls

154 lines (83 loc) · 2.97 KB

微信小程序第一天

1、什么是微信小程序

微信小程序，简称小程序，英文名Mini Program，是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用。

2、微信公众平台的订阅号与服务号有什么区别

https://zhidao.baidu.com/question/1767942672363940100.html

3、vscode微信插件

  • wxml 高亮 vscode wxml

  • wxss 高亮 vscode-wechat

  • vscode weapp api 代码提示

4、项目文件架构

  • pages 页面存放文件

  • utils 存放一些自己封装的工具 js库

  • app.js 小程序逻辑

  • app.json 小程序公共配置

  • app.wxss 小程序公共样式表

  • project.config.json 项目配置文件

5、页面文件的架构 pages

  1. 一个文件夹就是一个页面

  • .js 页面逻辑 (必须)

  • .wxml 页面结构 (必须)

  • .wxss 页面样式表 （可选)

  • .json 页面配置 （可选)

6、app.json 文件配置的属性

  • pages 配置程序的页面

  • window 全局配置窗口的样式

  • tabbar 配置页面的跳转

  • networkTimeout 配置网络的时间

  • debug 配置开启调式模式

7、page.json (只能配置window属性)

8、tabBar配置


  "pagePath": "pages/index/index",                       // 页面的路径
  "text": "index",                                       // 图标的描述
  "iconPath": "assets/tabbar/board.png",                 //默认图标的路径
  "selectedIconPath": "assets/tabbar/board-actived.png"  //选中图标的路径

9、nodeJS、JavaScript、微信小程序的组成部分

  • JavaScript

ECMAScript + DOM + BOM

  • NodeJS

ECMASCript + 核心成员 + api

  • 小程序

ECMAScript + 网络 + 文件 + 媒体 + .etc

10、应用和页面的初始化对象

  1. 应用 app.js
 App({
   生命周期函数,
   foo: 1
 })

 应用的构造里面可以放生命周期函数和任意的成员   

 const app = getApp() 

 console.log(app.foo)
  1. 页面 page.js (是指所有的页面)
  Page({
    // 存放数据  model  
    data: {

    },
    生命周期函数
  })

11、应用的生命周期和页面的生命周期

应用的生命周期

  • onLaunch (一个应用同时最多只能开启一次，也就是说该生命周期函数只会触发一次，应用打开的时候触发)

  • onShow (应用显示在前台)

  • onHide (应用隐藏在后台)

  • onError (捕获异常)

页面的生命周期

  • onLoad （类似于vue的created）

  • onReady (类似于vue的mounted)

  • onShow (页面显示的时候)

  • onHide (页面隐藏的时候)

  • onUnload (页面卸载)

12、 小程序中的数据绑定

  • 直接在组件中

    {{msg}}

  • 在组件上

  • checkbox上的时候

    需要借助 {{}} 才能输出有类型的数据，不然一直默认是 字符串