微信小程序基础

微信小程序

一、微信小程序介绍

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

二、开发环境搭建

开发微信⼩程序之前，必须要准备好相应的环境

（一）注册账号

进入小程序注册页 根据指引填写信息和提交相应的资料，就可以拥有自己的小程序帐号。

（二）获取APPID

在这个小程序管理平台，你可以管理你的小程序的权限，查看数据报表，发布小程序等操作。

登录小程序后台成功后可看到如下界⾯

由于后期调⽤微信⼩程序的接⼝等功能，需要索取开发者的⼩程序中的 APPID ，我们可以在菜单 “开发管理”-“开发设置” 看到小程序的 AppID 了 ，然后复制你的APPID,悄悄的保存起来，不要给别⼈看到😄。

小程序的 AppID 相当于小程序平台的一个身份证，后续你会在很多地方要用到 AppID （注意这里要区别于服务号或订阅号的 AppID）。

有了小程序帐号之后，我们需要一个工具来开发小程序。

（三）下载开发工具

前往开发者工具下载页面 ，根据自己的操作系统下载对应的安装包进行安装。

三、开发工具介绍

（一）打开微信开发工具

注意第⼀次登录的时候 需要扫码登录

（二）新建小程序项目

（三）开发工具概览

微信⼩程序开发者⼯具，集 开发 预览 调试 发布 于⼀⾝的 完整环境。 但是由于编码的体验不算好，因此 建议使⽤ vs code + 微信小程序编辑工具 来实现编码，其中vs code 负责敲代码， 微信小程序编辑工具负责预览

（四）微信开发者工具介绍

详细的使⽤，可以查看官网

四、小程序目录结构

小程序框架的⽬标是通过尽可能简单、⾼效的⽅式让开发者可以在微信中开发具有原⽣APP体验的服务。

⼩程序框架提供了⾃⼰的视图层描述语⾔ WXML 和 WXSS ，以及 JavaScript ，并在视图层与逻辑层间提供了数据传输和事件系统，让开发者能够专注于数据与逻辑。

（一）小程序文件结构和传统web对比

通过以上对⽐得出，传统web是三层结构。⽽微信⼩程序是四层结构，多了⼀层配置.json

（二）基本的项目目录

五、小程序文件配置

⼀个⼩程序应⽤程序会包括最基本的两种配置⽂件。⼀种是全局的 app.json 和 每个⻚⾯⾃⼰的page.json

注意：配置文件中不能出现注释

（一）JSON 语法

• JSON文件都是被包裹在一个大括号中 {}，通过key-value的方式来表达数据。JSON的Key必须包裹在一个双引号中，在实践中，编写 JSON 的时候，忘了给 Key 值加双引号或者是把双引号写成单引号是常见错误。
• JSON的值只能是以下几种数据格式，其他任何格式都会触发报错，例如 JavaScript 中的 undefined。
  1. 数字，包含浮点数和整数
  2. 字符串，需要包裹在双引号中
  3. Bool值，true 或者 false
  4. 数组，需要包裹在方括号中 []
  5. 对象，需要包裹在大括号中 {}
  6. Null
• 还需要注意的是 JSON 文件中无法使用注释，试图添加注释将会引发报错。

（二）全局配置

小程序根目录下的 app.json 文件用来对