《微信小程序开发案例教程》全套教学课件.pptx

微信小程序

开发案例教程;全书目录;项目一

微信小程序

开发入门;项目导读;知识目标;;;你常用哪些微信小程序？;微信小程序简称小程序，不需要下载安装即可使用。微信小程序不同于App，它依赖于微信平台。;常见的微信小程序页面;例如，顾客去餐馆吃饭，并不需要下载该餐馆的App，只需要用微信扫一扫餐馆提供的二维码就可以在小程序中点餐、付款，之后也不需要卸载，直接关闭小程序即可。;微信小程序与手机原生App的区别是什么？;微信小程序与手机原生App的区别;微信小程序与手机原生App的区别（续表）;;开发微信小程序的流程是怎样的？;任务实施：了解微信小程序的开发流程;本任务实施通过介绍微信小程序的开发流程，开启微信小程序开发之旅。;任务实施：了解微信小程序的开发流程;;;;小程序的版本;;微信开发者工具提供了一个可视化的界面，方便开发者进行代码编写、调试和预览。那么微信开发者界面分为几个区域，包括什么？;小程序项目创建成功后，会进入微信开发者工具界面。;微信开发者工具界面;一、微信开发者工具界面;;微信小程序官方文档;工具栏：提供了常用功能的快捷按钮

;常用按钮操作;模拟器;编辑器;调试器：包含多种调试工具

;;通常情况下，相同类型的文件用来实现同一类功能。;;通过样例小程序可以了解微信小程序项目的目录结构。打开样例小程序，在资源管理器中可以看到其目录结构;在pages属性中添加页面路径，编译或保存代码后会自动生成相关的页面文件，页面中默认显示的是什么路径？;;;;;;;;;;;;;;;;;课堂小结;谢谢！;微信小程序

开发案例教程;全书目录;项目二

微信小程序

的视图;项目导读;知识目标;;;;任务描述;WXML的基本语法格式;;小贴士;例如，具有class属性的text组件的示例代码;;一个组件可以有多个属性，也可以没有属性。WXML中所有组件都支持的属性称为共同属性。;动态改变界面的功能可以通过数据绑定和事件绑定实现。;1．简单绑定

（1）文本内容绑定。该绑定是将数据动态绑定到组件的文本内容中。

例如，在WXML文件中输入如下代码。;;;;;小贴士;在WXML文件中，为什么只能使用!--……--格式的注释，不能使用“//”??式的注释？;;;;;;;小贴士;;;;;;;（一）条件渲染

在WXML文件中，使用wx:if控制属性判断是否渲染组件。由于wx:if是一个控制属性，因此可以将其添加到组件中。示例代码如下。;小贴士;;;小贴士;wx:if控制属性与hidden控制属性的区别？

怎样在对象数组中唯一标识一个对象？;;小贴士;;;小贴士;;;;;小贴士;;;;;;;;;;;开发微信小程序的流程是怎样的？;;;;;;;任务描述;;小贴士;;;;;;小贴士;;;;;小贴士;;;;;;;;小贴士;;;;;;小贴士;;;;拓展阅读;软件开发人员应具备怎样的工作作风？;;;;;;;;;;;;;;;;课堂小结;谢谢！;微信小程序

开发案例教程;全书目录;项目三

微信小程序的配置和逻辑;项目导读;知识目标;;;任务描述;JSON（JavaScriptobjectnotation）是一种轻量级的数据交换格式，采用完全独立于编程语言的文本格式存储和表示数据，通常用于客户端和服务器之间的数据传输。;;;;;小贴士;（一）pages属性

pages属性是一个数组，用于配置小程序的页面路径，即指定小程序由哪些页面组成，它是全局配置文件中一个必填的属性。;为什么在pages属性中定义页面时无须加上扩展名？;小贴士;（二）window属性

window属性是一个JSON对象，用于配置小程序的导航栏、标题、窗口背景色等窗口表现。;小贴士;在全局配置文件中设置的window属性对每个页面都有效，当没有对window属性的某个配置项进行设置时，该配置项会自动取默认值。若全局配置文件中不包含window属性，则window属性的所有配置项都自动取默认值。;（三）tabBar属性

tabBar属性也是一个JSON对象，用于配置小程序底部或顶部的tab栏（通常是固定的选项卡形式）。如果小程序是一个多tab应用，利用tab栏可以切换页面。;list本质上是一个数组，数组中的每个元素都是一个JSON对象。;【例3-1】为样例小程序添加一个底部导航栏，导航栏包含“首页”和“日志”两个导航标签，可以通过以下两步实现。

第一步：在小程序项目的根目录下新建一个icons文件夹，并放入导航栏需要用到的图片。;{

pages:[

pages/index/index,

pages/logs/logs“

],

window:{

},

tabBar:{

backgroundColor:#ffffff,

color:#a9a9a9,