微信小程序开发基础知识讲解

一，小程序开发工具里项目工程的目录介绍

• 小程序的文件类型
• 小程序的目录说明
• 小程序的全局入口，配置与样式

1. 小程序的文件类型：

• wxml: 类型于html
• wxss: 类似于css
• js
• json配置：分为工具配置——project.config.json；项目配置——app.json；页面配置——<page name>.json 

2. 小程序的目录说明 

• pages目录——页面相关的代码
• utils目录——工具相关的代码（网络请求，文件操作等）
• thirdparty目录——存放第三方代码
• components——存放小程序组件代码
• resources——存放小程序资源（图标，图片）

3. 小程序的全局入口，配置和样式 

• 全局入口——app.js
• 全局配置——app.json
• 全局样式——app.wxss

二，小程序框架

• 小程序的配置
• 小程序的逻辑层和视图层
• 小程序框架

1.小程序的配置（全局配置于页面配置）

小程序的全局配置——app.json

• pages列表配置:存放小程序的页面
• window属性配置
• tabbar配置: 自由切换页面

  "tabBar": {
      "list": [{
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "",
        "selectedIconPath": ""
      },
      {
        "pagePath": "pages/getOpenId/index",
        "text": "第二页",
        "iconPath": "",
        "selectedIconPath": ""
      }
    ]},

 

 小程序的页面配置——index.json

• 只能配置全局配置中的window配置项内容
• 如果与全局配置冲突，会覆盖全局配置中window的配置
• 开启下拉刷新的配置

 2. 小程序的逻辑层

（1）小程序的注册逻辑

• 在app.js里面主要是一个App函数，App函数是用来注册全局唯一的小程序对象，必须在app.js里调用且只能调用一次

（2）页面的注册逻辑

• page函数：注册一个页面，接受一个对象作为函数参数
• 页面数据：data属性，实验全局数据
• 生命周期回调

• 
• 有印象即可，想要理解需要通过实战练习

3.小程序的视图层

• 数据绑定
• 列表渲染
• 条件渲染
• 绑定事件 

 （一）数据绑定

通过{{}}直接引用将index.js中的数据引用到视图层

（二）列表渲染

 

 (三) 条件渲染

 (四) 绑定事件

• 绑定事件的写法以key, value的形式
• key以bind或catch开头，然后跟上事件的类型 
•