小程序制作

去年暑假需要快速开发一个包括问卷测试、反馈、查看填写记录的小程序，观看完B站视频，总结了下述要点。

• 小程序项目由n个页面组成
• 每一个页面一般有4个核心文件：逻辑代码（js）、页面结构（wxml，其实是html代码）、页面样式（wmss，其实是css代码）、页面配置（json）

demo代码

1. app.json

全局配置文件，所有页面生效

pages：用于声明当前程序项目有几个页面

windows：声明小程序界面配置。如标题、标题颜色背景等

2. index和logs

当前小程序有两个页面，分别是index和logs，每个页面一般由4个文件组成【逻辑代码（js）、页面结构（wxml，其实是html代码）、页面样式（wmss，其实是css代码）、页面配置（json）】

3. utils

全局工具文件，可以简单概括为封装js代码

4. app.js

全局js代码，在该文件里面写的代码在所有页面都会触发

5. app.wxss

全局的css文件，所有页面生效

代码编写

1. 核心开发思想

• 步骤1：显示静态页面（DIV+CSS）
• 步骤2：数据动态化（js发送异步请求获取数据，接着遍历显示数据）

2. 实现步骤

• 创建页面
  • 定义路由（指设定一个网址来访问文件）
  • 创建页面（js、wxss、wxml、json）
  • 修改wxml写结构（html）
  • 修改wxss写样式（css）
• 数据绑定
  • 指页面数据来源于js对象属性，并且对象属性值修改页面同步更新
• 数据遍历和判断

3. 实际操作

• 创建页面

  • 在app.json的pages中添加pages/test/test声明网址，系统自动创建文件夹和文件
  • 文件夹下编写完成四个基本文件（先页面结构，后样式）

• 数据绑定

  • 修改页面的js文件：data里面放当前页面所需要的数据;onload相当于windows.onload;
  • 修改页面的wxml文件。使用{{data的title}}

• 数据的遍历和判断（参看微信手册）

  • 修改js文件代码
  • 修改wxml文件代码（条件语句在这个文件）

项目