微信小程序开发项目教程（慕课版）全套PPT课件

菏泽炫佑科技 菏泽炫佑小程序开发 菏泽炫佑app制作 炫佑科技

微信小程序开发项目教程（慕课版）全套PPT课件

**章 微信小程序概述 微信小程序开发项目教程（MOOC版）全套PPT课件 自2017年1月9日正式发布以来，微信小程序吸引了众多企业和开发的关注。 许多企业都纳入了微信小程序。 小程序作为公司业务的流量入口。 很多试点业务先做成小程序，投放市场运行。 如果业务发展顺利，有发展前景，那么就会开发一个版本或者iOS版本的App。 这种形式不仅可以让企业尝试新业务，也可以让开发成本得到有效控制。 除了在公司层面受到高度关注外，小程序也成为开发们热议的话题。 微信小程序的开发门槛较低，不少开发尝试自己制作小程序。 微信小程序社区也非常活跃，小程序的产品不断丰富。 此外，腾讯微信小程序允许个人发布，这为微信小程序的发展注入了新的活力。 本章简介《目录导航》1.1《微信小程序简介》1.2

微信小程序环境搭建1.3

微信小程序开发工具1.4的使用

项目实践：创建模范商城小程序1.5

1.1.1 总结

一、微信小程序介绍 微信小程序是继微信服务号、订阅号、企业号之后，腾讯推出的又一款深受大众喜爱的新产品。 为企业和组织提供更强大的业务服务和用户管理能力，主要侧重于服务型交互，也就是我们常说的微信公众号。 服务号为媒体和个人提供了一种新的信息传播方式，其主要功能是向微信用户传递信息。 订阅账号是一项新开放的能力，开发可以快速开发小程序。 小程序02是一款专业的企业办公管理工具。 拥有与微信相同的通讯体验，并提供丰富且免费的办公应用。 企业编号1.1.1

首先介绍微信小程序微信小程序也是一个基于去中心化的平台。 它没有聚合的入口，那么它的入口在哪里呢？ 哪里可以找到小程序？ 在微信的“发现”界面中，可以找到小程序的入口，如图（a）所示。 使用过的小程序可以在微信主界面的下拉窗口中找到，如图（b）所示。 (a)“发现”界面 (b)主界面下拉窗口 1.1.1

初次接触微信小程序可以直接打开好友或群组分享的小程序，如图（c）所示。 扫描二维码即可进入小程序，如图1.2所示。 (c) 分享小程序图1.2 微信小程序二维码1.1.2

微信小程序的功能分享页面功能：用户可以将小程序当前页面分享给好友，例如分享北京到上海的火车票列表界面。 当用户打开页面时，就会显示该页面的实时数据，无需再次启动微信小程序。 分享对话功能：可以将对话分享给好友，也可以分享到微信群。 离线扫描二维码进入微信小程序功能：提示用户附近有哪些微信小程序可用，扫描二维码即可使用微信小程序。 暂停状态功能：比如当有电话打进来时，可以先接听电话，接听电话后可以继续使用微信小程序进行相关操作。 消息通知功能：商家可以向接受服务的用户发送消息，用户也可以使用微信小程序的客服功能联系商家。 实时音视频录制和回放功能：通过该功能，可以随时随地进行直播或录音。 硬件连接功能：通过NFC（近场通讯）功能，可以将手机变成公交卡、门禁卡等，方便使用； 通过Wi-Fi连接功能，进行网络连接。 小游戏功能：微信小程序制作“跳”小游戏打开了游戏的大门，让用户知道小程序也可以制作小游戏。 公众号关联功能：微信小程序可以关联公众号。 公众号可关联3个不同主体的小程序，可关联10个同一主体的小程序。 同一小程序*多可关联3个公众号。 1.1.3

微信小程序的使用场景自微信小程序推出以来，各种小程序如雨后春笋般涌现。 发布小程序时，需要选择服务类别。 通过这些服务类别，可以了解小程序的使用场景。 企业服务类小程序开发的主体是企业。 服务门类更多、服务范围更广，主要包括快递邮政、教育、医疗、政务民生、金融业、旅游交通、房地产、生活服务等。 、IT技术、餐饮、小程序、时事资讯、娱乐、工具、电商平台、商家自营、商业服务开发公益、社交、体育、汽车等。个人服务类别是个人。 服务门类较少，服务范围较小，主要包括出行交通、生活服务、餐饮、旅游、商务服务、快递邮政、教育、工具、体育等。 1.1.4

微信小程序的发展历程 2016年1月9日，微信团队首次提出应用号的概念。 2016年9月22日，“微信公众平台”发出小程序内测邀请，内测名额200个。 2016年11月3日，微信小程序公测。 开发完成后可以提交审核，但公测期间不能发布。 2016年12月28日，微信创始人张小龙在微信公开课上解答了微信小程序的几大疑点，包括没有应用商店、没有推送消息等。 2016年12月30日，“微信公众平台”宣布在线微信小程序*多可生成10000个带参数的二维码。 2017年1月9日，微信小程序正式上线。 2017年2月，开发模糊搜索和摩拜单车小程序，并通过微信扫一扫。 2017年3月27日起，个人开发可以申请小程序的开发和发布。 小程序可以通过公众号菜单和模板消息打开。 可以通过关联小程序发送通知。 应用程序可以共享小程序。 小程序兼容离线。 已经有二维码了。 2017年4月17日，小程序代码包大小限制扩大至2MB，提供小程序代码，开通第三方小程序平台，公众号文章可录入小程序，存储小程序被提供。 2017年4月20日，公众号小程序新规则发布。 1.1.4

微信小程序发展历程 2017年5月，发布“小程序数据助手”，页面新增“转发”按钮，提供附件小程序功能。 2017年9月，微信搜索框新增小程序入口，付费后可链接公众号。 2017年12月，微信更新6.6.1版本，开放小游戏，扩展代码包至4MB，升级实时视频录制和播放能力，升级小程序任务栏菜单。 2018年1月18日，微信提供电子侵权投诉渠道。 用户或企业可以通过“微信公众平台”和微信客户端进行投诉。 2018年1月25日，微信团队在“微信公众平台”宣布，从手机应用分享到微信小程序页面支持访问时打开源应用。 2018年3月，微信正式宣布启动小程序广告组件内测。 内容还包括第三方快速创建和认证小程序、添加小程序插件管理接口以及更新基础能力的能力。 开发可以通过小程序 广告收入，向个人开发开放。 1.1.4

微信小程序的发展历程 2018年4月，可以通过公众号文章打开小程序，并开放微信小程序游戏界面。 2018年5月，App支持打开小程序。 2018年6月，小程序支持开通公众号文章（关联公众号），更新了开发工具：代码云托管，优化预览方式和界面布局，并将代码包扩展至8MB。 2018年7月，开通品牌搜索功能，上线品牌官方专区和微主页，任务栏出现“我的小程序”入口（iOS：7月13日）。 2018年8月，微信小程序云开发上线，支持iPad打开小程序。 2018年10月，小程序支持科目迁移。 2019年8月，微信向开发发布了新功能的公测和更新公告。 新版微信PC版支持打开聊天中分享的小程序。 1.1.5

微信小程序带来的机会。 微信团队在小程序开发上也给了小程序开发很大的支持，这给开发带来了很大的机会，因为微信小程序的门槛很低，不需要太难。 技术，通过学习微信小程序，你也可以成为一名“小程序”。 设计师、学生、创业者、失业青年、“网虫”、策划、编辑、“草根”站长等都可以求助于程序员。 成员。 微信团队大力支持开发，未来将提供更多与服务商相关的能力，连接普通商户与服务商。 微信小程序为企业提供流量入口。 企业可以通过小程序来推广自己的产品，从iOS、网站、公众号门户到新的小程序门户。 得益于腾讯的大力支持，小程序也成为各个企业非常重要的流量入口。 目录导航 1.1 微信小程序简介 1.2 微信小程序环境搭建 1.3

微信小程序开发工具1.4的使用

项目实践：创建模范商城小程序1.5

1.2.1 总结

如需搭建小程序环境，请下载微信开发工具。 在“微信公众平台”官网选择“小程序”→“小程序开发文档”，如图。 .2.1

搭建小程序环境，在打开的界面中选择“工具”→“下载”。 可以看到微信小程序针对不同的操作系统（、、macOS）提供了不同版本的开发工具（由于开发工具的版本更新很快，实际版本以读者操作为准），我们可以下载根据我们自己的操作系统对应的版本，如图。 1.2.1

搭建小程序环境并注册“微信公众平台”账号。 在“微信公众平台”官网选择微信小程序类别进行注册。 小程序支持个人开发帐号，您可以注册个人帐号； 如果企业需要小程序，还可以进行企业认证。 小程序可以通过这两种方式发布，如图。 .2.1

小程序环境是使用下载的微信开发工具包搭建的。 按照提示完成开发工具的安装。 安装完成后，运行微信开发工具，会出现一个二维码。 您需要使用绑定“微信公众平台”的微信扫描登录。 登录后可以发现，开发工具提供了两种调试类型：本地“小程序项目”开发和“公众号网页项目”开发。 如图所示。 .2.2

基础技术准备虽然微信小程序入门门槛低、学习成本低，但也需要一些基础技术准备。 微信小程序定制了一套语言，称为WXML微信标记语言。 它的用法和HTML语言类似，所以我们需要了解HTML语言。 微信小程序也定义了自己的样式语言WXSS，它兼容了CSS（ Style Sheet）样式并得到了采用和扩展，所以我们需要了解CSS（ Style Sheet）； 微信小程序是用来进行业务处理的，兼容了大部分功能，但是还是有一些功能无法使用，所以我们还需要了解一些语言。 对于有HTML、CSS和技术能力的人来说，学习微信小程序的开发是非常容易的。 目录导航 1.1 微信小程序简介 1.2 微信小程序环境搭建 1.3 微信小程序开发工具使用 1.4

项目实践：创建模范商城小程序1.5

1.3.1 总结

如何创建一个项目来获取微信小程序的AppID。 您需要在“微信公众平台”登录第1.2.1节中注册的账户。 在“开发”→“开发设置”中，查看微信小程序的AppID，如图。 .3.1

如何创建项目 创建一个“小程序开发工具的使用”项目，将项目文件存放在“”文件夹中，其他均使用默认配置，如图。 .3.1

如何创建项目点击“新建”按钮创建小程序项目，进入微信开发工具界面，如图。 .3.2

微信开发工具界面 微信开发工具界面可分为菜单栏、工具栏、模拟器、编辑器、调试器五大功能区域，如图所示。 1.3.2

微信开发工具界面 1.菜单栏“项目”菜单：通过“项目”菜单，可以创建新项目、导入项目、打开*近的项目、新建代码片段、导入代码片段、查看所有项目并关闭当前项目，从而管理小程序项目或代码片段并使用。 “文件”菜单：通过“文件”菜单可以创建新文件、保存文件、保存所有文件和关闭文件。 “编辑”菜单：是管理代码的菜单。 通过该菜单，可以对代码进行格式化等操作。 “工具”菜单：用于编译、刷新、预览、清除缓存等。 “界面”菜单：用于显示或隐藏工具栏、模拟器、编辑器、目录树等。调试器区域。 “设置”菜单：通过“设置”菜单可以进行常规设置、外观设置、快捷键设置、编辑设置、代理设置、安全设置、项目设置等。 “微信开发工具”菜单：通过该菜单可以对开发工具进行升级、回滚、退出等操作。 1.3.2

微信开发工具界面2.工具栏显示或隐藏模拟器、编辑器、调试器按钮。 这三个按钮可以控制模拟器、编辑器和调试器区域的显示或隐藏。 “云开发”按钮。 通过“云开发”按钮，您可以进入小程序云开发控制台，进行小程序云开发。 小程序模式。 这里提供两种模式：一种是小程序模式，用于小程序正常开发； 另一种是插件模式，用于开发小程序插件。 1.3.2

微信开发工具接口编译操作。 您可以使用“编译”按钮或“Ctrl+B”组​​合键编译当前代码并自动刷新模拟器。 同时，鉴于开发调试从不同场景值进入特定页面的需要，开发可以添加或选择现有的编译条件进行编译和代码预览，如图所示。 1.3.2

微信开发工具界面预览。点击“预览”按钮上传小程序并生成二维码。 通过扫描二维码，即可在手机上预览小程序，如图

显示。 1.3.2

微信开发工具界面真机调试。 小程序支持真机调试，发布前可以检查小程序在真机上的运行效果。 前后切换。 工具栏中的前后切换按钮可以帮助开发模拟一些客户端环境操作。 1.3.2

清除微信开发工具界面的缓存。清除缓存包括清除数据缓存、清除文件缓存、清除授权数据、清除网络缓存、清除登录状态、清除所有功能，如图

显示。 1.3.2

微信开发工具接口版本管理。 小程序代码可以上传到Git进行版本管理和多人协作开发。 上传。小程序开发，需要上传到腾讯服务器进行测试，如图

显示。 您可以在手机上预览小程序的开发版本。 1.3.2

微信开发工具界面 3.模拟器 模拟器区域用于显示小程序界面。 在小程序开发过程中，小程序界面会随着代码的编写而实时变化，方便小程序的开发和调试； 同时模拟器可以模拟小程序在各种终端设备上的运行效果，并且可以设置小程序运行的终端设备，比如“””等终端设备，可以设置百分比模拟器区域大小，可以模拟设置“Wi-Fi”、“2G”、“3G”等网络条件，如图。 1.3.2

微信开发工具界面 4.编辑器 编辑器区域分为两部分：一是用来显示项目文件目录和文件结构，称为目录树；二是用于显示项目文件目录和文件结构，称为目录树； 另一个是用来编辑代码的区域，如图所示。 1.3.2

在微信开发工具界面中，右键单击项目目录，在弹出的快捷菜单中，可以新建目录，Page、JS、TS、JSON、WXML、WXSS、WXS，将文件目录重命名，并删除目录。 可以在该目录下找到指定的内容，如图。 .3.2

在微信开发工具界面的代码编辑区域编写代码后，可以通过模拟器区域实时预览编辑后的小程序的demo。 修改WXSS和WXML文件会刷新页面，修改JS和JSON文件会重新编译小程序，如图。 .3.2

在微信开发工具界面中，在代码编写过程中，开发工具提供了自动补全功能。 编辑JS文件时，开发工具会帮助开发完成所有API（应用程序编程接口），并给出相关注释和说明； 在编辑WXML文件时，开发工具将帮助开发直接编写相关标签； 在编辑JSON文件时，它会帮助开发完成相关配置并给出实时提示。 .3.2

微信开发工具接口开发工具提供自动保存功能。 编写代码后，该工具会自动帮助用户保存当前代码编辑状态。 直接关闭工具或切换到另一个项目，不会丢失编辑的文件内容。 但需要注意的是，修改的内容在文件保存之前不会丢失。 真正写入硬盘并触发实时预览。 .3.2

微信开发工具界面 5、调试器窗口用于显示小程序的错误信息和调试代码，也可用于代码编写和调试。 .3.2

微信开发工具界面窗口用于显示当前项目的脚本文件。 开发看到的文件就是处理后的脚本文件。 开发的代码会被包装在一个函数中，对于Page代码来说，可以自动调用。 .3.2

微信开发工具界面窗口用于观察发送的请求和调用的文件的信息，包括文件名、路径、大小、调用状态、时间等。 .3.2

微信开发工具界面窗口用于显示使用wx后当前项目的数据存储情况。 或wx。 .3.2

微信开发工具界面窗口用于展示当前时刻当前项目的具体数据，并提供项目数据的实时反馈。 开发可以在这里编辑数据并及时反馈到界面。 .3.2

微信开发工具接口Wxml窗口用于帮助开发开发Wxml转换的接口。 开发可以在这里看到真实的页面结构以及该结构对应的WXSS属性，并可以修改对应的WXSS属性。 .3.3

常用快捷键 1、格式调整组合键 Ctrl+S：保存文件。 Ctrl+[、Ctrl+]：缩进代码行。 Ctrl+Shift+[、Ctrl+Shift+]：折叠打开的代码块。 Ctrl+CCtrl+V：复制粘贴，如果没有选择文本，则复制粘贴一行。 Shift+Alt+F：代码格式化。 Alt+向上、Alt+向下：向上或向下移动一行。 Shift+Alt+向上、Shift+Alt+向下：向上或向下复制行。 Ctrl+Shift+Enter：在当前行上方插入一行。 Ctrl+Shift+F：全局搜索。 Ctrl+B：可以编译当前代码并自动刷新模拟器。 Ctrl+End：移至文件末尾。 Ctrl+Home：移至文件开头。 Ctrl+i：选择当前行。 Shift+End：选择从光标处到行尾的位置。 Shift+Home：选择从行首到光标处。 Ctrl+Shift+L：选择所有匹配项。 Ctrl+D：选择匹配。 Ctrl+U：光标返回。 2、光标相关组合键Ctrl+\：隐藏侧边栏。 Ctrl+m：打开或隐藏模拟器。 3. 界面相关快捷键目录导航 1.1 微信小程序简介 1.2 微信小程序环境搭建 1.3 微信小程序开发工具使用 1.4 项目实践：创建莫凡商城小程序1.5

总结 1.4 项目实践：创建魔凡商城小程序魔凡商城（）小程序是贯穿本书的一个项目案例。 通过学习本书的内容，你完全可以开发一个企业级的小程序。 本章介绍如何创建微信小程序项目以及如何使用微信开发工具。 打开微信开发工具，创建莫凡商城小程序，存放在“”文件夹中。 使用自己在公众平台的AppID作为AppID，如图。 步骤1：1.4项目实践：创建莫凡商城小程序创建莫凡商城小程序项目后，会进入微信开发工具，默认创建一个小程序页面，包括两个方面：一是输出文本；二是输出文本。 获取用户的头像和昵称信息。 在pages/index/index.js文件中，Page data中提供了数据源座右铭，可以将data数据动态绑定到WXML页面，如图。 步骤2：1.4项目实践：在pages/index/index.wxml文件中创建莫凡商城小程序，通过双大括号（{{}}）将motto绑定到页面，motto对应的值为 即可显示页面如图所示。 第三步：1.4项目实战：在pages/index/index.wxss文件中创建莫凡商城小程序，通过class添加样式，使距顶部高度为200px，如图。

步骤4：1.4项目实践：创建魔凡商城小程序，点击“获取头像昵称”按钮，通过触发获取用户信息事件（）来获取用户的相关信息。 微信小程序获取用户的头像和昵称，需要用户授权后才渲染到界面上，如图。 第五步：目录导航 1.1 微信小程序简介 1.2 微信小程序环境搭建 1.3 微信小程序开发工具的使用 1.4 项目实践：创建魔凡商城小程序1.5 小结总结 本章主要介绍什么是微信小程序微信小程序开发的背景，它是什么可以做。 小程序的使用场景和发展历史，让读者对小程序有一个初步的了解； 带领读者搭建小程序开发环境，完成微信小程序创建项目，学习微信小程序相关基础知识； *终完成Mo任意商城小程序项目的创建，体验如何快速创建微信小程序。 **单元 网站创建与制作产品介绍页 HTML5+CSS3 网页设计与制作实用教程 快乐学习！ 第二章 魔凡商城小程序项目任务 微信小程序开发项目教程（MOOC版） 魔凡商城小程序是一个完整的小程序项目，主要实现图书产品的展示和销售功能，非常具有代表性。 小程序应用项目。 小程序分为4个功能模块：“我的”模块、“首页”模块、“购买商品”模块和图书“分类”模块。 “我的”模块用于展示用户的订单，实现密码修改、反馈等功能。

“首页”模块展示海报轮播、“热点科技”图书区、“闪购时刻”图书区、“畅销图书”图书区； “购买商品”模块中的“购物车”就和我们常用的一样。 为了展示您要购买的商品列表，“图书分类”模块将待售图书分为主、次类，并按类别展示图书商品。 本章介绍 ‘目录导航 2.1 “我的”模块功能介绍 2.2

“首页”模块功能介绍2.3

“购买商品”模块功能介绍2.4

“图书分类”模块功能介绍2.5

总结2.1.1

任务1——实现底部标签导航功能。 莫凡商城小程序的底部标签导航包括“首页”、“分类”、“购物车”和“我的”四个标签。 切换底部标签显示对应的导航内容。 设计目的：底部标签导航是大多数小程序使用的设计方式。 其功能的实现对于其他小程序的设计具有参考意义。 2.1.2

任务2 - 实现注册功能。 注册是App和小程序中必不可少的功能。 为了让用户在模范商城创建自己的账户，需要注册功能。 设计目的：注册功能是小程序经常使用的功能。 它可以通过用户的注册来管理用户的账户信息。 通过注册表的设计，我们可以学习如何验证表单、设计注册表以及提交注册表。 2.1.3

任务3——实现登录功能。 魔凡商城小程序提供账号密码登录和手机快速登录两种登录方式。 设计目的：账号密码登录、手机快速登录是现在流行的登录设计方式。 很多app或者小程序都会采用这种设计方式。 其功能的实现对于其他小程序的设计具有参考意义。 2.1.4

任务4——实现“我的”界面的列表式导航功能。 魔凡商城小程序中的“我的”界面采用列表式导航方式展示内容。 这也是很多app使用的方法。 设计目的：列表导航是一种常用的设计方式。 “我的”页面中可能有很多菜单选项。 列表导航可以帮助我们很好的布局。 2.1.5

任务5 - 实现密码更改功能。 魔凡商城小程序用户可以修改密码。 密码修改可通过输入原密码、输入新密码、确认密码三步完成。 设计目的：通过密码修改功能，我们要学会如何布局密码修改界面和表单验证。 2.1.6

任务 6——实现反馈功能。 魔凡商城小程序提供反馈功能，用户可以填写自己的意见或建议。 设计目的：反馈功能用于收集用户对产品使用的意见或建议。 我们可以通过收集这些意见或建议来优化App或小程序。 2.1.7

任务7 - 实现缓存清除功能。 魔凡商城小程序提供了缓存清除功能，可以清除小程序中缓存的数据。 设计目的：小程序可以提供缓存清除功能，用于清除本地缓存数据，释放空间。 2.1.8

任务 8 — 实现“我的订单”功能。 莫凡商城小程序的我的订单功能提供了“待付款”订单列表、“待收货”订单列表、“已完成”订单列表。 如果没有订单，将显示一个空列表。 设计目的：商城APP或者小程序都有订单的概念。 订单可以分为不同类别，例如待支付订单、待接收订单和已完成订单。 每个订单都有不同的操作按钮。 这是设计订单列表时的情况。 需要考虑的事情。 2.1.8

任务8—实现我的订单功能 目录导航 2.1 “我的”模块功能介绍 2.2 “首页”模块功能介绍 2.3

“购买商品”模块功能介绍2.4

“图书分类”模块功能介绍2.5

2.2.1 总结

Task 9— the area and . The top of the is the area and area. The is a very used in apps and 小程序 . It uses the space of the to in the form of . : Home page and are . The is often used for of key or . 2.2.2

Task 10— the book list with and . The Mofan Mall 小程序 a book list on the , a "hot " list, a "flash sale " list, and a "best- books" list. : It is very to the in the form of a list. A of are in the space on the , and an to view more is . Click to enter to view more lists. 2.2.3

Task 11— the book . The Mofan Mall 小程序 a , which a box and a list of tags. : is an of 小程序 . There are many in the mall, and is often the first that users use. 2.2.4

Task 12— the of more books list. The Mofan Mall 小程序 only 3 books in each on the . "View More" will a list of all books in that . : By 制作 more lists of books, you can learn how to the list and the tabs of . 2.1 "My" 2.2 "Home" 2.3 " Goods" 2.4

"Book " 2.5

2.3.1

Task 13 - the page . The page is used to , , , , book , and other . : The page has a lot of and is long. It not only the basic of the , but also have for to the cart and now. When , it is best to fix the at the area and not the page. to the , users to add items to the cart or them . 2.3.2

Task 14 - the of items to the cart. You can add items to the cart, and the of items in the cart will . : The add to cart is a used . This task how to the add to cart . 2.3.3

Task 15— the cart list . The cart the added to the cart in the form of a list, and can the total price of the and . : Many malls will cart . This task will learn the and of cart . 2.3.4

Task 16— the now page . On the now page, you can see the name, and price of the you want to , and you can also the . : The page now is the to the order . On this page, you can the order to . 2.3.5

Task 17— the list . The list is used to the that users can when goods. These are in a list. : The of the list makes it for users to when , so that they do not have to enter every time and users to place . 2.3.6

Task 18— the of and . You can a new the new , and you can also re-edit the . : and are used to . 2.3.7

Task 19— the . The 小程序 only and API. Mofan Mall can on the order page and order page. : The is an for goods. This task how to 小程序 . 2.3.8

Task 20— the page . For the of goods, the 小程序 can only 小程序 . 小程序 . After the is , it will jump to the page. : After the is , 小程序 will give the user a that the is , not only the user that the is , but also the user with an to view the . 2.3.9

Task 21— the order page . After , you can view order- , , and on the order page. : When users goods, they do not pay , or they want to check their order after . The order page is an page. 2.1 "My" 2.2 "Home" 2.3 "Buy Goods" 2.4 "Book " 2.5

2.4.1

Task 22— the book . Book is into first-level and -level , which are -style . : The is used by many malls. For malls with too many , this makes it for users to find . 2.4.2

Task 23— the book list . the first-level and -level of books, you can view all books under this . : to the of goods, you can view the goods under this , so that the for goods is and for users to find the goods they want. 2.1 "My" 2.2 "Home" 2.3 "Buy Goods" 2.4 "Book " 2.5 The Mofan Mall 小程序 four major : "My" ", "" , " Goods" , and "Book " . We split the of these four into 23 tasks to 开发 of the Mofan Mall mini and learn how to use the 小程序 小程序 at the same time. 小程序 and 开发 . Unit 1 Site and 制作 Page HTML5+CSS3 Web and 制作 Happy ! 3 of Mofan Mall 小程序 小程序 开发 (MOOC ) In 1.4, we the Mofan Mall 小程序 , and the and files were by . These files are into There are three : page files, tool files, and files, as shown in 3.1. In this , we the of 小程序 . to this ' 3.1 to the tree 3.2 小程序 layer 3.3 小程序 WXML view layer 3.4 小程序 WXSS style 3.5 小程序 3.6 小程序 list 3.7 : tasks 4— the list of “My” (1) 3.8 3.1.1

框架全局文件一个小程序的框架全局文件有5个：app.js文件、app.json文件、app.wxss文件、..json文件、.json文件，这5个文件必须放在项目的根目录中。 app.js文件是小程序的逻辑文件（定义全局数据、定义函数的文件）；app.json文件是小程序的公共配置文件；app.·wxss文件是小程序的公共样式表文件；..json文件是个性化项目配置文件；.json文件用于配置小程序及其页面是否允许被微信索引，它们对所有页面都有效。 3.1.1

框架全局文件文件是否必填作用app.js是编写小程序逻辑app.json是进行小程序公共配置app.wxss否提供小程序公共样式表app..json是进行小程序项目个性化配置.json是配置小程序及其页面是否允许被微信索引3.1.1

框架全局文件app.js文件用来定义全局数据和函数，它可以指定微信小程序的生命周期函数。生命周期函数可以理解为微信小程序自己定义的函数，如（监听小程序初始化）、（监听小程序显示）、（监听小程序隐藏）等，在不同阶段、不同场景可以使用不同的生命周期函数。 1. app.js小程序逻辑文件3.1.1

框架全局文件在莫凡商城小程序里，配置接口访问域名、微信登录凭证code值、用户ID，需要在对象里配置，代码如下。:{:null,host:':8888',code:null,//微信登录凭证:null//用户ID}3.1.1

框架全局文件pp.json文件用来对微信小程序进行全局配置，文件内容为一个JSON对象，其主要功能为配置页面路径、配置窗口表现、配置标签导航、配置网络超时、配置debug模式。 2. app.json小程序公共配置文件3.1.1

框架全局文件还可以配置是否启用插件功能页，配置分包结构，设置代码放置的目录、需要在后台使用的能力、使用到的插件、分包预下载规则、iPad小程序是否支持屏幕旋转、需要跳转的小程序列表、全局自定义组件、小程序接口权限、.json文件的位置等。文件类型是否必填作用[]是配置页面路径否配置全局的默认窗口表现否配置底部tab栏的表现否配置网络超时否设置是否开启debug模式，默认关闭an否设置是否启用插件功能页，默认关闭[]否进行分包结构配置否设置代码放置的目录[]否声明需要在后台使用的能力，如“音乐播放”否声明使用到的插件否声明分包预下载规则否设置iPad小程序是否支持屏幕旋转，默认关闭[]否声明需要跳转的小程序列表否进行全局自定义组件配置否进行小程序接口权限的相关设置g是指明.json文件的位置3.1.1

框架全局文件它定义一个数组，存放多个页面的访问路径，是进行页面访问的必要条件。如果在这里没有配置页面访问路径，页面被访问时就会报错；如果在这里定义了页面访问路径，框架页面文件中就会建立相应名称的文件夹及文件，不需要再手动添加文件夹和文件了。pages：配置页面路径3.1.1

框架全局文件它用于配置小程序的状态栏、导航条、标题、窗口背景色，可以设置导航条背景色、导航条文字及导航条文字颜色；还可以设置窗口是否可以下拉刷新，设置窗口的背景色和下拉背景字体或者样式。：配置窗口表现3.1.1

框架全局文件标签导航是很多App都会采用的导航方式，微信小程序同样可以实现这样的效果。：配置标签导航3.1.1

框架全局文件怎么制作标签导航呢？需要在app.json文件里配置属性。是一个对象，它可以配置标签导航文字的默认颜色、选中颜色，标签导航背景色及上边框颜色。上边框颜色目前可以配置为黑和白（black/white）两种。"":{"":"#",//选中时文字颜色"":"#",//标签导航背景色"":"white",//标签导航标签颜色"color":"#",//文字默认颜色"list":[{"":"pages/index/index",//标签导航页面路径"text":"首页",//标签导航文字"":"pages//bar/home-1.png",//默认时图标"":"pages//bar/home-0.png"//选中时图标},{"":"pages//","text":"分类",3.1.1

框架全局文件"":"pages//bar/-1.png","":"pages//bar/-0.png"},{"":"pages//","text":"购物车","":"pages//bar/cart-1.png","":"pages//bar/cart-0.png"},{"":"pages/me/me","text":"我的","":"pages//bar/me-1.png","":"pages//bar/me-0.png"}]}3.1.1

框架全局文件它用于配置网络请求、文件上传、文件下载时*大的请求时间，超过这个时间，将不再请求。 ：配置网络超时debug：配置debug模式配置debug模式，以方便微信小程序开发者调试开发程序。如图所示是开启了debug模式和没有开启debug模式的调试信息对比。 3.1.1

框架全局文件插件所有者小程序（指的是与插件AppID相同的小程序）需要设置这一项来启用插件功能页。 ：设置是否启用插件功能页，默认是关闭的进行分包结构配置，启用分包加载时，声明项目分包结构。使用处理多线程任务时，设置代码放置的目录。 des声明需要后台运行的能力，类型为数组，目前支持audio后台音乐播放。 3.1.1

框架全局文件声明小程序需要使用的插件。声明分包预下载的规则。在iPad上运行的小程序可以设置支持屏幕旋转。声明需要跳转的小程序列表。当小程序需要使用wx.m接口跳转到其他小程序时，需要先在配置文件中声明需要跳转的小程序AppId列表，*多允许填写10个。进行全局自定义组件配置。在此处声明的自定义组件将被视为全局自定义组件，在小程序内的页面或自定义组件中可以直接使用而无需再声明。 3.1.1

框架全局文件进行小程序接口权限的相关设置，字段类型为。指明.json文件的位置，默认为“.json”，即在app.json文件同级目录下。 3.1.1

框架全局文件app.wxss文件对CSS样式进行了扩展，它和CSS的使用方式一样，使用类选择器和行内样式的写法，兼容大部分CSS样式（有一些CSS样式不起作用），同时它还扩展了CSS，形成了具有自己风格的样式文件。 app.wxss文件是对所有页面定义全局样式。 3. app.wxss小程序公共样式表文件3.1.1

框架全局文件4． ..json小程序项目个性化配置文件在使用微信小程序开发者工具时，开发者都会根据自己的喜好做一些个性化配置，如界面颜色、编译配置等，当换了另外一台计算机重新安装工具的时候，还要重新配置。基于这个考虑，小程序开发者工具在每个项目的根目录中都会生成一个..json文件，开发者在工具上做的任何配置都会写入这个文件，当重新安装工具或者换计算机工作时，只要载入同一个项目的代码包，开发者工具就自动会恢复到当时开发项目时的个性化配置，其中包括编辑器的颜色、代码上传时自动压缩等一系列选项。 3.1.1

框架全局文件5． .json小程序及其页面是否允许被微信索引的文件小程序根目录下的.json文件用于配置小程序及其页面是否允许被微信索引，文件内容为一个JSON对象，如果没有.json文件，则默认为所有页面都允许被索引。 {"rules":[{"":"allow","page":"path/to/page","":["a","b"],"":"exact"},{"":"","page":"path/to/page"}]}path/to/page?a=1&b=2这个页面路径会被优先索引。 path/to/page这个页面路径不会被索引。 path/to/page?a=1这个页面路径不会被索引。 path/to/page?a=1&b=2&c=3这个页面路径不会被索引。其他页面都会被索引。 3.1.1

框架全局文件匹配规则说明如下。当小程序页面的参数列表等于时，规则命中exact当小程序页面的参数列表包含时，规则命中当小程序页面的参数列表与的交集不为空时，规则命中当小程序页面的参数列表与的交集为空时，规则命中.1.2

项目实战：任务1—实现底部标签导航功能1．任务目标通过实现莫凡商城底部标签导航功能，学会设计小程序的底部标签导航及窗口显示。莫凡商城底部标签导航分为“首页”“分类”“购物车”“我的”4个页面。标签导航选中时文字和图标均呈现为绿色；默认文字和图标均为灰色。 3.1.2

项目实战：任务1—实现底部标签导航功能2．任务实施在app.json文件的pages对象里配置“首页”“分类”“购物车”“我的”页面路径，代码如下。"pages":["pages/index/index","pages//","pages//","pages/me/me"]在app.json文件的pages对象里配置“首页”“分类”“购物车”“我的”页面路径，代码如下。"":{"":"light","":"#","xt":"莫凡商城","le":"white"}3.1.2

项目实战：任务1—实现底部标签导航功能在标签导航里配置导航文字和图标，代码如下。"":{"":"#","":"#","":"black","color":"#","list":[{"":"pages/index/index","text":"首页","":"pages//bar/home-1.png","":"pages//bar/home-0.png"},{"":"pages//","text":"分类","":"pages//bar/-1.png",3.1.2

项目实战：任务1—实现底部标签导航功能"":"pages//bar/-0.png"},{"":"pages//","text":"购物车","":"pages//bar/cart-1.png","":"pages//bar/cart-0.png"},{"":"pages/me/me","text":"我的","":"pages//bar/me-1.png","":"pages//bar/me-0.png"}]}3.1.2

项目实战：任务1—实现底部标签导航功能通过这3个步骤的配置，就可以实现莫凡商城底部标签导航的配置了，效果如图所示。在设计底部标签导航的时候，需要在app.json文件里针对对象进行配置，可以配置导航的标题、导航的标题图、选中的文字颜色和默认的文字颜色。 3.1.3

工具类文件在微信小程序框架目录里有一个utils文件夹，它用来存放工具栏的js函数，如可以放置一些日期格式化、时间格式化的常用函数，定义完这些函数后，通过.将定义的函数名称注册进来，在其他页面才可以使用这些函数。 3.1.4

框架页面文件一个小程序的框架页面文件由5个文件组成，分别是页面逻辑文件（JS）、页面配置文件（JSON）、页面结构文件（WXML）、小程序脚本语言文件（WXS）、页面样式表文件（WXSS）。文件是否必填作用JS是编写页面逻辑JSON否编写页面配置WXML是编写页面结构WXS否编写小程序脚本语言WXSS否编写页面样式表3.1.4

框架页面文件微信小程序的框架页面文件，都是放置在pages文件夹下的。每个页面都有一个独立的文件夹，例如，日志页面logs文件夹下放置了5个文件，logs.js文件进行业务路径处理；logs.json文件进行页面的配置，可以覆盖全局app.json文件配置；logs.wxml文件是页面结构文件，负责渲染页面；logs.wxs文件是小程序脚本语言文件，在创建页面的时候不会自动生成该文件，需要使用的时候创建即可；logs.wxss文件是针对logs.wxml文件页面的样式文件。目录导航3.1项目目录树结构介绍3.2微信小程序逻辑层框架接口3.3微信小程序WXML视图层3.4微信小程序WXSS样式渲染3.5微信小程序条件渲染3.6微信小程序列表渲染3.7项目实战：任务4—实现“我的”界面列表式导航功能（1）3.8小结3.2.1

使用App()函数注册小程序在app.js小程序逻辑文件里，App（）函数是用来注册小程序的，有了这个函数，才能说明这个项目是小程序项目。App({(){//.},(){//.},(){//.},(msg){.log(msg)},(msg){.log(msg)},:''})3.2.1

使用App()函数注册小程序App()中的函数详解如下。 ：生命周期回调函数，监听小程序初始化，在小程序初始化完成时触发，全局只触发一次。 ：生命周期回调函数，监听小程序启动或切到前台，在小程序启动，或从后台进入前台显示时触发。 ：生命周期回调函数，监听小程序切到后台，在小程序从前台进入后台时触发。 ：错误监听函数，在小程序发生脚本错误或API（应用程序接口）调用报错时触发。 ：页面不存在监听函数，在小程序要打开的页面不存在时触发。 3.2.1

使用App()函数注册小程序我们可以通过（）函数获取小程序全局唯一的App实例，然后就可以调用app.js文件里配置的自定义函数和自定义全局数据了，代码如下。 =().log(..host)//获取在全局数据里配置的域名()函数在页面的.js文件里执行就可以获取到小程序全局唯一的App实例，莫凡商城小程序也是采用这样的方式来获取在全局数据中配置的域名的。 3.2.2

使用Page()函数注册页面在app.js文件里使用App()函数可以注册小程序，在框架页面文件里，根据配置的路径，会生成*.js、*.wxml、*.json、*.wxml4个文件（*.wxs文件不会自动生成，需要时才手动创建），我们在*.js文件里需要使用Page()函数来注册一个页面，指定页面的初始数据、生命周期回调、事件处理函数等，代码如下。//index.({data:{text:"."},:(){//.},:(){//eady.},:(){//how.},:(){//ide.},:(){3.2.2

使用Page()函数注册页面//lose.},:(){//own.},:(){//.},:(){//.},:(){//croll},:(){//esize},3.2.2

使用Page()函数注册页面(item){.log(item.index).log(item.).log(item.text)},//.:(){this.({text:'.'},(){//k})},:{hi:'MINA'}})目录导航3.1项目目录树结构介绍3.2微信小程序逻辑层框架接口3.3微信小程序WXML视图层3.4微信小程序WXSS样式渲染3.5微信小程序条件渲染3.6微信小程序列表渲染3.7项目实战：任务4—实现“我的”界面列表式导航功能（1）3.8小结3.3.1WXML标签语言在框架页面文件的*.wxml文件里，可以利用WXML标签语言来构建小程序页面视图，构建视图页面内容就需要用到组件，如在页面里想显示出“你好，微信小程序”，代码如下。你好,微信小程序3.3.2

动态绑定数据在*.wxml文件里，可以使用view组件进行布局设计（将在4.2节中详细讲解）。但在3.3.1小节中，显示的内容是直接写在view组件中的，不是动态数据，如何动态地绑定数据呢？*.wxml文件中使用的动态数据，都来自于*.js文件中Page()函数的data对象。动态数据绑定就是在*.wxml文件中，通过双大括号（{{}}）将在*.js文件中定义的变量包起来，放在view组件中，这样就可以实现数据动态绑定效果了。示例代码如下。{{}}//index.({data:{:'你好,微信小程序'}})3.3.3

组件属性动态绑定数据组件属性动态绑定数据微信小程序开发项目教程（慕课版）全套PPT课件，是将*.js文件data对象里的数据绑定到小程序的组件上，示例代码如下。//index.({data:{id:0}})3.3.4

控制属性动态绑定数据控制属性动态绑定数据是通过条件判断if语句来控制的，如果满足条件判断，则执行该语句，否则不执行，示例代码如下。//index.({data:{flag:true}})3.3.5

关键字动态绑定数据关键字动态绑定数据用于将组件的一些关键字绑定数据，如复选框组件，关键字如果等于true，则代表选中复选框，等于false则代表不选中复选框，示例代码如下。不要直接写="false"，否则其计算结果是一个字符串，转换成类型后代表真值。3.3.6

运算（1）三元运算（2）数学运算{{a+b}}+{{c}}+d//index.({data:{a:1,b:2,c:3}})3.3.6

运算（3）逻辑判断5}}">（4）字符串运算{{"hello"+name}}//index.({data:{name:'MINA'}})3.3.6

运算（5）数据路径运算{{.key}}{{array[0]}}//index.({data:{:{key:'Hello'},array:['MINA']}})目录导航3.1项目目录树结构介绍3.2微信小程序逻辑层框架接口3.3微信小程序WXML视图层3.4微信小程序WXSS样式渲染3.5微信小程序条件渲染3.6微信小程序列表渲染3.7项目实战：任务4—实现“我的”界面列表式导航功能（1）3.8小结3.4.1

尺寸单位WXSS的尺寸单位是rpx（），它可以根据屏幕宽度进行自适应。屏幕宽度规定为。例如，的屏幕宽度为375px，共有750个物理像素，则＝375px＝750个物理像素，1rpx＝0.5px＝1个物理像素。设备rpx换算成px（屏幕宽度/750）px换算成rpx（750/屏幕宽度）=0.=2.=0.==0.=1..4.2

样式导入使用@语句可以导入外联样式表，@后跟需要导入的外联样式表的相对路径，用；表示语句结束，示例代码如下。/**.wxss**/.small-p{:5px;}/**app.wxss**/@".wxss";.-p{:15px;}3.4.3

内联样式用于接收动态的样式，在运行时会进行解析，静态的样式统一写到class中，要尽量避免将静态的样式写进style中，以免影响渲染速度，style属性示例代码如下。//静态的样式写进style,尽量避免使用//动态获取（1）style用于指定样式规则，其属性值是样式规则中类选择器名（样式类名）的集合，样式类名不需要带上“.”，样式类名之间用空格分隔。（2）.4.4

选择器WXSS样式渲染支持用选择器来控制，现在支持的选择器如表所示。选择器样例样例描述.class.intro选择所有拥有class="intro"的组件#id#选择拥有id=""的组件选择所有view组件,,选择所有文档的view组件和所有的组件::::after在view组件后边插入内容::::在view组件前边插入内容3.4.5

常用样式属性（1）（显示）样式属性说明flex多栏多列布局，常和flex-:row/一起使用-block行内块元素此元素会被显示为内联元素，元素前后没有换行符-table作为内联表格来显示（类似），表格前后没有换行符-flex将对象作为内联块级弹性伸缩盒显示none此元素不会被显示lock此元素将显示为块级元素，此元素前后会带有换行符list-item此元素会作为列表显示table会作为块级表格来显示（类似），表格前后带有换行符table-作为一个表格标题显示（类似）table-cell作为一个表格单元格显示（类似和）table-作为一个单元格列显示（类似）3.4.5

常用样式属性属性说明table--group作为一个或多个列的分组来显示（类似）table-row作为一个表格行显示（类似）table-row-group作为一个或多个行的分组来显示（类似）table--group作为一个或多个行的分组来显示（类似）table--group作为一个或多个行的分组来显示（类似）从父元素继承属性的值3.4.5

常用样式属性（2）（定位）样式属性说明生成绝对定位的元素，相对于定位以外的**个父元素进行定位。元素的位置通过left、top、right及属性进行规定生成相对定位的元素，相对于其正常位置进行定位。因此，“left：20”会向元素的LEFT位置添加20像素fixed生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过left、top、right及属性进行规定默认值，没有定位，元素出现在正常的流中（忽略top、、left、right或者z-index声明）-flex将对象作为内联块级弹性伸缩盒显示规定应该从父元素继承属性的值3.4.5

常用样式属性（3）float（浮动）样式属性说明left元素向左浮动right元素向右浮动none默认值，元素不浮动，并会显示其在文本中出现的位置规定应该从父元素继承float属性的值3.4.5

常用样式属性（4）（背景）样式属性说明简写属性，作用是将背景属性设置在一个声明中:;-color指定要使用的背景颜色-指定背景图像的位置-:-size指定背景图像的大小-size：;（宽度、高度）-指定如何重复背景图像,-x,-y,no-,-指定背景图像的定位区域-box。背景图像填充框的相对位置-box背景图像边界框的相对位置-box背景图像相对位置的内容框-clip指定背景图像的绘画区域。属性值，同上-设置背景图像是否固定或者随着页面的其余部分滚动背景图像随页面的其余部分滚动。这是默认属性3.4.5

常用样式属性属性说明fixed背景图像是固定的指定-的设置应该从父元素继承local背景图像随滚动元素滚动-image指定要使用的一个或多个背景图像，使用url（'URL'）提供图像的URL3.4.5

常用样式属性（5）（边框）样式属性说明属性值简写属性，用于把针对4个边的属性设置在一个声明中：;-width用于为元素的所有边框设置宽度，或者单独地为各边框设置宽度thin、、thick、-style设置元素所有边框的样式，或者单独地为各边设置边框样式solid、、、等-color设置元素的所有边框中可见部分的颜色，或为4个边分别设置颜色-color:red;3.4.5

常用样式属性（6）（轮廓）样式属性说明属性值在一个声明中设置所有的外边框属性:-color,-style,--color设置外边框的颜色thin、、thick、-style设置外边框的样式Solid、、、等-width设置外边框的宽度h3.4.5

常用样式属性（7）text（文本）样式属性说明属性值color设置文本颜色设置文本方向ltr：文本方向从左到右rtl：文本方向从右到左-设置字符间距line-设置行高text-align对齐元素中的文本left：把文本排列到左边。默认值，由浏览器决定right：把文本排列到右边：把文本排列到中间：实现两端对齐文本效果：规定应该从父元素继承text-align属性的值text-向文本添加修饰：定义文本下的一条线：定义文本上的一条线line-：定义穿过文本下的一条线blink：定义闪烁的文本3.4.5

常用样式属性属性说明属性值text-缩进元素中文本的首行text-设置文本阴影text-:h--;h-：水平阴影的位置，允许负值v-：垂直阴影的位置，允许负值blur：模糊的距离color：阴影的颜色text-控制元素中的字母：文本中的每个单词都以大写字母开头：定义仅有大写字母：定义无大写字母，仅有小写字母-align设置元素的垂直对齐、sub、super、top、text-top、、、text-、、%、-space设置元素中空白的处理方式、pre、、pre-wrap、pre-line、-设置字间距norma

炫佑科技专注互联网开发小程序开发-app开发-软件开发-网站制作等