微信小程序01-入门

零、文章目录

微信小程序01-入门

1、初识微信小程序

（1）微信小程序是什么

• 微信小程序是一个创新的平台，它允许开发者在微信这个庞大的社交网络内部创建轻量级的应用，这些应用不需要用户下载安装，即点即用，极大地方便了用户获取服务。

• 若想打开一个微信小程序，可以通过搜索关键词、扫码、群分享、好友分享等途径实现。例如，点击微信中的“搜索”按钮，输入关键词“腾讯新闻”，查找与其相关的微信小程序，点击进入。

（2）微信小程序的特点

• 轻量级：无需安装，不占存储，即用即走。

• 唯一性：名称唯一，保护品牌。

• 多入口：多种方式快速访问。

• 强社交：易于在微信生态内传播。

• 低成本：适合小企业和个人开发者。

• 快更新：自动更新，无需用户干预。

• 优体验：与微信界面操作一致，易用性强。

• 微信小程序 VS 原生应用

• 微信小程序 VS HTML5应用

（3）微信小程序的发展前景

• 生态体系：微信小程序构建了一个包括开发者、运营者、投资者在内的多元生态系统，与第三方服务平台的融合，推动了其快速发展和功能扩展。
• 开放能力：微信小程序不断增加开放接口，提供多样化的功能，如扫码、支付、定位等，为开发者提供了深度开发的可能性，适用于广泛的用户和场景。
• 用户黏性：凭借微信庞大的用户基础，小程序实现了高用户黏性，促进了与其他行业的连接，为用户提供了无缝的体验，预示着其广阔的发展空间。

（4）微信小程序的宿主环境

• 宿主环境(Host Environment)是指程序运行所依赖的环境。例如，iOS系统和Android系统提供了两种不同的宿主环境，微信、微博等应用都需要依赖宿主环境才能运行。

• 微信小程序可以跨平台，这是因为微信小程序并不是一个直接安装在Android系统或iOS系统中的应用，而是运行在微信客户端上的应用。

• 微信小程序的宿主环境为微信小程序提供了丰富的组件和API。
  • 组件：用于快速搭建页面的结构。微信小程序的组件包括视图容器、基础内容、表单、导航、媒体、地图、画布、开放能力等
  • API：用于让开发者方便地调用微信提供的功能，例如获取用户信息、微信登录、微信支付等。

2、微信小程序开发前准备

（1）注册微信小程序开发账号

• **注册账号：**在微信公众平台注册小程序账号，账号类型选择【小程序】，然后通过邮箱注册（每个邮箱只能注册一个小程序）

• 登记信息：填写完邮箱、密码等信息后查看注册邮箱的邮件，点击邮件中的链接来选择小程序账号的主体并完成主体信息登记

• **微信小程序管理后台：**填写完用户相关信息后，单击“继续”按钮，进入微信小程序管理后台，微信小程序的发布分为3个步骤
  • 第1步是小程序信息和小程序类目。
  • 第2步是小程序开发与管理。
  • 第3步是版本管理。

（2）获取微信小程序AppID

• 在微信小程序中，AppID又称为小程序ID，它是小程序的唯一标识，每个小程序账号只有一个AppID，因此每个账号只能发布一个小程序，如果要发布多个小程序，需要注册多个小程序账号。获取的AppID将会在创建微信小程序项目时用到。
• 首先登录微信小程序管理后台，在左侧边栏中选择“开发管理”，然后再选择“开发设置”，即可查看AppID。

（3）安装微信开发者工具

• 小程序管理后台的左侧边栏中选择“开发工具”，然后选择“开发者工具”，即可找到微信开发者工具的下载页面。

• 或者直接跳转下载地址：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

• 推荐稳定版，选择自己系统位数的版本下载并安装。

（4）创建微信小程序项目

• 首次打开微信开发者工具时，会出现一个登录界面

• 使用微信扫码登录成功后会进入微信开发者工具的项目选择界面

• 点击“+”可以进入微信小程序项目的创建界面
  • 项目名称和目录：如填写项目名称为“hello”，目录为“D:\miniprogram\hello”。
  • AppID：填写前面获取的AppID即可。如果不想使用自己的AppID，也可以使用测试号，二者的区别是，前者能够使用的功能比后者多，例如代码的上传和发布。
  • 开发模式：有“小程序”和“插件”两种选择，由于我们要创建一个微信小程序项目，所以此处应选择“小程序”。
  • 后端服务：有“微信云开发”和“不使用云服务”两种选择。在“微信云开发”中，开发者无须搭建服务器，即可使用云函数、云数据库、云存储和微信云托管等完整云端能力。初学者在没有掌握基础知识之前进行云开发会有一定难度。本书中的项目统一选择“不使用云服务”。
  • 模板选择：微信开发者工具提供了多种模板用于快速创建微信小程序项目。为了方便学习，此处选择“不使用模板”。

• 点击创建，进入开发界面

3、微信小程序开发基础

（1）微信小程序的项目结构

• 微信小程序项目创建完成后，微信开发者工具会自动创建微信小程序的项目结构
  • pages：用于存放微信小程序的所有页面。
  • .eslintrc.js：用于格式化代码，使代码风格保持一致。
  • app.js：微信小程序的入口文件，用于描述微信小程序的整体逻辑。
  • app.json：微信小程序的全局配置文件，用于设置页面路径、窗口外观、页面表现、标签栏等。
  • app.wxss：微信小程序的全局样式文件，文件可以为空。
  • project.config.json：在微信开发者工具上做的任何配置都会写入这个文件中，当重新安装工具或者更换计算机工作时，只要载入同一个项目的代码包，微信开发者工具会根据该文件自动恢复成开发微信小程序时的个性化配置。
  • project.private.config.json：用于保存微信开发者工具的私人配置，配置的优先级高于project.config.json。
  • sitemap.json：用于配置微信小程序及其页面是否允许被微信索引，如果没有该文件，则默认为所有页面都允许被索引。微信现已开放微信小程序页面的搜索，也就是说微信小程序里面的内容也能被微信搜索引擎搜索到。当开发者允许微信小程序页面被微信索引时，微信会通过爬虫的形式，为微信小程序的页面建立索引。当用户的搜索词条触发该索引时，微信小程序的链接地址将可能展示在搜索结果中。

• 微信客户端在启动微信小程序时
  • 首先会把整个微信小程序的代码包下载到本地；
  • 然后解析app.json全局配置文件，通过该文件解析出微信小程序的所有页面路径；
  • 接着执行app.js入口文件，调用App()函数创建微信小程序的实例；
  • 最后渲染微信小程序的首页。

（2）微信小程序的页面组成

• 一个微信小程序是由一个或多个页面组成的，这些页面被存放在pages目录中。

• 以pages目录下的index页面为例，index页面由4个文件组成，分别是index.js、index.json、index.wxml和index.wxss。

  

• 微信小程序页面的JS、JSON、WXML和WXSS文件分别使用JS、JSON、WXML和WXSS语言编写

  • JS：类似网页制作中的JavaScript语言，用于实现页面逻辑和交互，文件扩展名为.js。需要注意的是，微信小程序中的JS不含DOM和BOM，但它提供了丰富的API，可以实现许多特殊的功能，例如微信登录、音频播放、文件上传等。
  • JSON（JavaScript Object Notation，JavaScript对象符号）：用于利用JSON语法对页面进行配置，文件扩展名为.json。
  • WXML（WeiXin Markup Language，微信标记语言）：类似于网页制作中的HTML语言，用于构建页面结构，文件扩展名为.wxml。
  • WXSS（WeiXin Style Sheets，微信样式表）：类似于网页制作中的CSS语言，用于设置页面样式，文件扩展名为.wxss。

• 微信客户端在加载微信小程序页面时

  • 首先读取并解析页面中JSON文件的配置；
  • 然后加载页面的WXML文件、WXSS文件和JS文件，实现页面渲染。其中，页面中WXSS文件的样式会覆盖项目根目录下的app.wxss文件中相同的全局样式；
  • 页面中JS文件的Page()函数会被调用，用于创建页面实例。

（3）微信小程序的通信模型

• 微信小程序实现了渲染层、逻辑层和第三方服务器的通信。
  • WXML和WXSS工作在渲染层，用于实现页面的渲染。
  • JS工作在逻辑层，用于实现页面的逻辑。
• 微信小程序的通信模型分为两个部分
  • 第1部分是渲染层与逻辑层之间的通信，即将逻辑层的数据渲染到页面中；
  • 第2部分是逻辑层与第三方服务器之间的通信，即通过向第三方服务器发送请求，得到需要的数据。
• Native表示微信客户端的底层，渲染层与逻辑层之间的通信和逻辑层与第三方服务器之间的通信都由微信客户端的底层进行转发。

4、微信开发者工具的使用

（1）认识微信开发者工具

• 微信开发者工具的主界面主要由菜单栏、工具栏、模拟器、编辑器和调试器组成

• **菜单栏：**通过菜单栏可以访问微信开发者工具的大部分功能。

  • 项目：用于新建项目、导入项目、打开最近项目、查看所有项目或关闭当前项目等。
  • 文件：用于新建文件、全部保存或关闭编辑器等。
  • 编辑：用于编辑代码、查看编辑相关的操作和快捷键、对代码进行格式化。
  • 工具：用于项目的编译、刷新、清除缓存等。
  • 转到：用于切换编辑器、快速定位到行、查看问题等。
  • 选择：用于全选、光标的移动等。·视图：用于微信开发者工具可视区的控制。
  • 界面：用于控制主界面中工具栏、模拟器、编辑器、目录树和调试器的显示与隐藏。
  • 设置：用于通用设置、外观设置、快捷键设置、编辑器设置、代理设置、安全设置、扩展设置和项目设置。
  • 帮助：用于工具的反馈和开发文档的查看等。
  • 微信开发者工具：用于账号切换、更换开发模式、检查更新、调试、退出等。

• **工具栏：**提供了一些常用功能的快捷按钮。

  • 个人中心：工具栏最左侧的第1个按钮，显示当前登录用户的头像，单击头像后会显示用户名。
  • 模拟器、编辑器和调试器：用于控制模拟器、编辑器和调试器的显示与隐藏。
  • 可视化：用于代码的可视化编辑，开发者可以通过拖曳等方式对界面进行快速布局与修改。
  • 云开发：开发者可以使用云开发来开发微信小程序、小游戏，无须搭建服务器，即可使用云端能力。云开发能力从基础库2.2.3开始支持。
  • 模式切换下拉菜单：用于在小程序模式和插件模式之间进行切换。
  • 编译下拉菜单：用于切换编译模式，默认为普通编译，可以添加其他编译。
  • 编译：编写完微信小程序的代码后，需要经过编译才能运行。默认情况下，直接按Ctrl+S快捷键保存代码文件，微信开发者工具就会自动编译运行该代码。若想手动编译，则单击“编译”按钮即可。
  • 预览：单击“预览”按钮会生成一个二维码，使用微信扫描二维码，即可在微信中预览微信小程序的实际运行效果。
  • 真机调试：可以实现直接利用微信开发者工具，通过网络连接对手机上运行的微信小程序进行调试，帮助开发者更好地定位和查找在手机上出现的问题。
  • 清缓存：用于清除模拟器缓存、编译缓存。
  • 上传：用于将代码上传到微信小程序管理后台，可以在“开发管理”中查看上传的版本，将代码提交审核。需要注意的是，如果在创建项目时使用的是测试号，则不会显示“上传”按钮。
  • 版本管理：用于通过Git对微信小程序进行版本管理。
  • 详情：用于查看和修改微信小程序的基本信息、本地设置和项目配置。
  • 消息：用于显示消息通知。

• **模拟器：**模拟器可以模拟微信小程序在微信客户端的运行效果。模拟器提供了多个快捷功能，能够帮助开发者更好地进行开发。

  • ①开发者可单击右侧的下拉箭头，根据实际需要选择合适的机型、显示比例和字体大小。
  • ②用于控制热重载的开启和关闭，当开启热重载后，修改代码文件，模拟器可以在不刷新的情况下生效变更。需要注意的是，该功能在2.12.0及以上的基础库中生效。
  • ③用于刷新微信小程序的页面。
  • ④用于终止模拟器，若需要重新启动模拟器可单击工具栏上的“编译”按钮。
  • ⑤用于模拟操作，常用于模拟不同的网络环境，从而检测微信小程序在不同网络环境中的加载速度，例如Wi-Fi、2G、3G、4G等。
  • ⑥用于分离窗口，单击该项后，模拟器将成为一个独立的窗口。
  • ⑦用于显示当前页面的信息，包括页面路径、页面参数和场景值。
  • ⑧用于将当前页面进行真机预览。

• **编辑器：**编辑器分为左右两栏。

  • 左栏为目录树，主要用于展示当前微信小程序项目的目录结构。
  • 右栏为代码编辑区，用于编写文件中的代码。
  • 在左栏中单击某个文件，就可以在右栏中对该文件进行编辑。

• **调试器：**调试器类似于Chrome浏览器中的微信开发者工具。

  • Wxml：Wxml面板，用于查看和调试WXML和WXSS。
  • Console：控制台面板，用于输出调试信息，也可以直接编写代码执行。
  • Sources：源代码面板，用于显示当前项目的脚本文件，在该面板中开发者看到的文件是经过处理之后的脚本文件。
  • Network：网络面板，用于记录网络请求和响应信息，根据它可以进行网络性能优化。
  • AppData：App数据面板，用于查看或编辑当前微信小程序运行时的数据。
  • Storage：存储面板，用于查看和管理本地数据缓存。
  • Sensor：传感器面板，用于模拟地理位置、重力感应。
  • Security：安全面板，用于调试页面的安全和认证等信息。
  • Trace：跟踪面板，用于真机调试时跟踪调试信息。

（2）微信小程序的项目设置

• 菜单栏的“设置”，然后选择“项目设置”，将会弹出一个用于项目设置的选项卡。

• **基本信息：**即可对项目的基本信息进行设置。

• **性能质量：**可查看项目的线上数据和本地情况，供开发者有针对性地进行优化。

  

• **本地设置：**即可对项目进行本地设置。

  • 调试基础库：选择基础库的版本，用于在对应版本的微信客户端上运行。高版本的基础库无法兼容低版本的微信客户端。版本号后边的百分比表示该版本的用户占比。
  • 将JS编译成ES5：选中该项后，JS代码的语法将转换为ES5。
  • 上传代码时样式自动补全：选中该项后，在预览、真机调试、上传时文件中的样式将自动补全，需要注意的是，勾选此项会增大代码包的体积。
  • 上传代码时自动压缩样式文件、上传代码时自动压缩脚本文件和上传代码时自动压缩WXML文件：选中对应选项后，在预览、真机调试、上传时文件中的样式文件、脚本文件、WXML文件将自动压缩。
  • 上传时进行代码保护：选中该项后，微信开发者工具会尝试对项目代码进行保护。
  • 不校验合法域名、web-view（业务域名）、TLS版本以及HTTPS证书：正式发布的微信小程序的网络请求需要校验这些信息，在开发过程中可以选中该项，开发工具将不校验这些信息，从而有助于开发者在开发过程中更方便地完成调试工作。
  • 启用自定义处理命令：选中该项后，微信开发者工具在编译前、预览前、上传前这三个时机调用开发者自定义的命令，开发者可以对代码进行一些预处理。

  

• **项目配置：**即可查看项目的域名信息和高级配置。

  • **域名信息：**用于显示项目的安全域名信息。在微信小程序的管理后台中，选择左侧边栏的“开发管理”，然后在开发管理页面中选择“开发设置”即可设置合法域名。
  • **高级配置：**用于显示代码包的大小、Tabbar的个数等信息。

（3）微信小程序开发常用快捷键

• 项目和文件相关的快捷键

• 编辑相关的快捷键

• 工具相关的快捷键

• 界面相关的快捷键

5、微信小程序的发布上线

（1）微信小程序的版本

（2）微信小程序的上线流程

• **①上传代码：**打开微信开发者工具菜单栏中的”工具栏“–>“上传”，页面中弹出提示框，根据提示填写相应的信息，然后单击“上传”按钮，即可上传代码。

• **②查看上传代码之后的版本：**登录微信小程序管理后台，在左侧边栏中单击“版本管理”，即可进入版本管理页面，查看开发版本，即可看到刚才提交上传的版本。

• **③提交审核：**单击“提交审核”按钮，根据页面提示信息进行操作，即可提交已上传的版本并进行审核。提交审核后在审核版本中会出现正在审核的版本。
• **④发布：**审核通过后审核版本中将显示“发布”按钮，单击该按钮，即可完成微信小程序的发布。
• 配置体验版本：
  • 在开发微信小程序时，开发者会随时修改微信小程序代码从而覆盖开发版本，所以处于开发中的版本是不稳定的。为了让测试组、产品组和设计组有一个完整稳定的版本可以体验测试，微信小程序管理后台允许把其中一个开发版本设置成体验版本。
  • 开发版本提交审核右边有个按钮，可以选择为体验版或者删除体验版。