微信小程序快速入门

学习目标：微信小程序快速入门

• 快速掌握微信小程序项目的搭建
• 了解项目目录基本结构及其意义

---

学习内容：

一、快速掌握微信小程序项目的搭建

1.申请小程序账号

申请小程序账号

2.查看小程序AppID

小程序的 AppID 相当于小程序平台的一个身份证，后续你会在很多地方要用到 AppID

• 登录小程序后台
• 打开开发-开发设置

3.安装开发工具

4.开始搭建第一次的Hello World项目

• 新建项目选择小程序项目
• 选择代码存放的硬盘路径
  ps：你要选择一个空的目录才可以创建项目
• 填入刚刚申请到的小程序的 AppID
• 给你的项目起一个名字
• 勾选 “不使用云服务”
• 点击新建

至此，你的HelloWorld项目已经搭建完毕，点击顶部菜单编译就可以在微信开发者工具中预览你的第一个小程序

二、了解项目目录基本结构及其意义

1.小程序代码构成

JSON 配置

• .json文件是什么
  JSON 是一种数据格式，并不是编程语言，在小程序中，JSON扮演的静态配置的角色
• .json有哪些文件
  app.json
  project.config.json
  pages下的页面中的.json
• 各个.json文件的作用
  • app.json官方参考文档
    • app.json是当前小程序的全局配置
    • 包括了小程序的所有页面路径pages、界面表现window、网络超时时间networkTimeout、底部tabBar 等各种配置
  • project.config.json
    • 针对项目对开发工具做出例如界面颜色、编译配置等等个性化配置时，当你重新安装工具或者换电脑工作时，你只要载入同一个项目的代码包，开发者工具就自动会帮你恢复到当时你开发项目时的个性化配置
  • pages下的.json文件
    • 小程序页面相关的配置，可以理解为局部只对当前页面起作用的配置，当app.json与pages页面下的.json中的配置重复时，优先使用pages页面下的.json文件中的配置
• JSON语法
  • JSON文件都是被包裹在一个大括号中 {}，通过key-value的方式来表达数据
  • JSON的Key必须包裹在一个双引号中
  • JSON的值只能是以下几种数据格式
    • 1 数字，包含浮点数和整数
    • 2.字符串，需要包裹在双引号中
    • 3.Bool值，true 或者 false
    • 4.数组，需要包裹在方括号中 []
    • 5.对象，需要包裹在大括号中 {}
    • 6.Null

ps：JSON 文件中无法使用注释

WXML 模板

• WXML是什么
  • 用来搭建微信小程序的页面结构的标签语言
• WXML有什么作用
  • 用来描述当前这个页面的结构，类似于网页编程中的HTML
• WXML的语法规则
  • 类似于HTML语言，只是标签名字有点不一样
  • 多了一些 wx:if 这样的列表渲染属性以及 {{ }} 这样的数据绑定表达式

ps:将js于api分开

WXSS 样式

• WXSS是什么
  • 类似于CSS层叠样式表语言
• WXSS有什么作用
  • WXSS 用来决定 WXML 的组件应该怎么显示
• WXSS语法规则
  • 新增了尺寸单位rpx，免去换算的烦恼
  • 提供了全局的样式和局部样式

JS 逻辑交互

• JS的作用
  • 处理用户的操作，响应用户的点击、获取用户的位置等等
• JS中可以调用小程序提供的丰富的API

---

学习时间：

• 2022-04-05
• 2022-04-06

学习产出：

• 快速掌握微信小程序项目的搭建
• 了解项目目录基本结构及其意义