微信小程序公开课

第3章莫凡商城小程序的项目结构示例代码如下。

<!--index.wxml--><view> {{ message }} </view>//index.jsPage({data: {message: '你好, 微信小程序'}})3.3.3 组件属性动态绑定数据组件属性动态绑定数据，是将*.js文件data对象里的数据绑定到小程序的组件上，示例代码如下。

<!--index.wxml--><view id="{{id}}"> </view>//index.jsPage({data: {id: 0}})3.3.4 控制属性动态绑定数据控制属性动态绑定数据是通过条件判断if语句来控制的，如果满足条件判断，则执行该语句，否则不执行，示例代码如下。

<!--index.wxml--><view wx:if="{{flag}}"> </view>//index.jsPage({data: {flag: true}})3.3.5 关键字动态绑定数据关键字动态绑定数据用于将组件的一些关键字绑定数据，如复选框组件，checked关键字如果等于true，则代表选中复选框，等于false则代表不选中复选框，示例代码如下。

<checkbox checked="{{false}}"> </checkbox>不要直接写checked="false"，否则其计算结果是一个字符串，转换成boolean类型后代表真值。

3.3.6 运算可以在{{}}内进行简单的运算，小程序支持以下几种方式的运算。

（1）三元运算，示例代码如下。

<view hidden="{{flag ? true : false}}"> Hidden </view>（2）数学运算，示例代码如下。

风口上的猪：微信小程序微信小程序，简称小程序，缩写XCX，英文名mini program，是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用。

张小龙在2017微信公开课Pro上发布的小程序于1月9日正式上线用户可以体验到各种各样小程序提供的服务.小程序是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或者搜一下即可打开应用。

也体现了“用完即走”的理念，用户不用关心是否安装太多应用的问题。

应用将无处不在，随时可用，但又无需安装卸载。

兄弟连IT教育的大牛讲师团们，根据市场需求设置课程，实时更新课程体系，最终开发出一套系统完整的微信小程序全栈就业班课程。

并且由明星讲师亲自操刀，课程案例更是真正商业级案例教授混合APP开发。

让你第一时间掌握最新技能。

课程介绍本课程共800课时，涉及到全栈开发和微信小程序必备的技术。

课程内容大体上包括动态网站开发的四个方面：前台用户界面布局和交互（HTML5+CSS3+JavaScript）；服务器业务处理（PHP）程序开发；存储网站内容的数据库设计（MySQL）和微信小程序开发。

课程中的每个知识点都是全栈和小程序开发人员必不可少的内容，而且每个技术点的内容都非常全面，深度到位，课上实例不仅丰富而且实用。

另外，每个知识点都是以目前最新版本的技术设计，并经过多家软件公司的技术专家参与修订，以达到真正实用的目的，能够与软件开发公司所需要的开发技术相吻合。

兄弟连作为全国培训机构中第一批上线的微信小程序这门学科的，小编表示自信满满！实力超强！因为目前其他培训机构也都在做，但他们没有一款产品上线，我们已经由陈玉龙老师开发出了一个新的微信小程序上线版了，并且我们上线功能也是实战性的，在之后的课程中我们也会将上线微信小程序功能作为案例来讲，这样会增强我们的互动性，与其他培训机构相比我们是全栈，前端+后端+微信小程序开发实战，其他培训机构的全栈是H5+手机发布，不是真正意义的全栈，80%的培训机构的全栈都是他们培训机构的H5内容，加上H5打包成APP。

第1章认识微信小程序教学过程1.1微信小程序介绍1.1.1初识微信小程序微信小程序是一个基于去中心化而存在的平台，它没有聚合的入口，有多种进入方式。

（1）在微信中的“发现”界面，可以找到小程序的入口，如图所示。

微信小程序入口（2）在微信主界面下拉，会看到用过的微信小程序。

（3）给好友或者在群里分享小程序。

小程序的界面和使用方法和App类似，下图所示是几个已发布的常用小程序界面。

常用微信小程序界面1.1.2微信小程序的功能（1）分享页功能。

（2）分享对话功能。

（3）线下扫码进入微信小程序功能。

（4）挂起状态功能。

（5）消息通知功能。

（6）实时音视频录制播放功能。

（7）硬件连接功能。

（8）小游戏功能。

（9）公众号关联功能。

（10）搜索查找功能。

（11）识别二维码功能。

1.1.3微信小程序的使用场景在发布小程序的时候，要选择服务类目。

通过这些服务类目，我们能知道小程序的使用场景。

服务类目分为个人服务类目和企业服务类目。

个人服务类目针对以个人为开发主体的小程序，服务范围小；企业服务类目针对以企业为开发主体的小程序，服务范围大。

1.2微信小程序开发准备1.2.1基础技术准备微信小程序自定义了一套语言，称为WXML（微信标记语言），它的使用方法类似于HTML。

另外，微信小程序还定义了自己的样式语言WXSS，兼容了CSS，并做了扩展；使用JavaScript来进行业务处理，兼容了大部分JavaScript功能，但仍有一些功能无法使用，所以有一定HTML、CSS、JavaScript技术功底的人学习微信小程序开发会容易很多。

1.2.2开发准备Step1：在“微信公众平台”注册微信开发者账号。

单击“立即注册”，在“注册”界面选择“小程序”，在“小程序注册”界面根据提示填写相关信息完成注册。

在微信公众平台中，选择“小程序”→“小程序开发文档”，可以打开帮助文档界面，如图所示。

开发文档帮助文档在帮助文档里有介绍、设计、小程序开发、运营、数据、社区6个菜单，针对不同角色的用户提供了不同内容的帮助文档。

第3章用微信小程序组件构建UI界面教学过程view布局具体代码如下：<view class="section"><view class="section title">flex-direction: row</view><view class="flex-wrp" style="display:flex;flex-direction:row;"><view c lass="flex-item b c_green" s tyle="width:100px;height:100px;background-color:green;color:#ffffff;text- align:center;line-height:100px;">1</view><view class="flex-item bc_red" style="width:100px;height:100px;background-color:red;color:#ffffff;text- align:center;line-height:100px;">2</view><v i e w c l ass="f l e x-i t e m b c_b l ue"s t y l e="wi d th:100px;he i ght:100px;b a ck gro un d-co l o r:b l ue;co l o r:#ffffff;te xt- align:center;line-height:100px;">3</view></view></view><view class="section"><view class="section title">flex-direction: column</view><view class="flex-wrp" style="display:flex;height: 300px;flex-direction:column;"><view c lass="flex-item b c_green" s tyle="width:100px;height:100px;background-color:green;color:#ffffff;text- align:center;line-height:100px;">1</view><view class="flex-item bc_red" style="width:100px;height:100px;background-color:red;color:#ffffff;text- align:center;line-height:100px;">2</view><v i e w c l ass="f l e x-i t e m b c_b l ue"s t y l e="wi d th:100px;he i ght:100px;b a ck gro un d-co l o r:b l ue;co l o r:#ffffff;te xt- align:center;line-height:100px;">3</view></view></view>3.1.2 scroll-view可滚动视图区域scroll-view可滚动视图区域允许视图区域内容横向滚动或者纵向滚动，类似于浏览器的横向滚动条和垂直滚动条，scroll-view拥有自己的属性和事件，如表所示。

《微信小程序开发》教学大纲01.课程说明02.课程描述“微信小程序开发”是工科类本科教学中的一门重要实践课，让想从事微信平台、微信小程序开发的同学能更快地掌握开发语言和开发项目的具体实施内容，让每个参与课程的学生都能开发自己想做的内容，以微信小程序的形式展现出来，课程通过丰富的案例教学，让学生轻松依托新浪云建立基于云服务的在线实践平台，培养同学独立开发微信小程序加云平台的在线信息处理能力。

03.教学目标通过本课程的理论教学和相关实验训练，使学生具备如下能力，并对应三个教学目标。

1. 认知能力：通过本课程的学习，使学生了解小程序的诞生的特点、应用方式和应用前景；了解微信生态的强大性；理解小程序项目结构，HTML、JavaScript、css与小程序的关系；理解小程序的框架结构；理解小程序组件的概念；理解小程序页面样式的概念；理解小程序布局方法；了解小程序常用的接口分类，掌握常见的接口；理解小程序前端、后端以及数据库之间的配合联动方式；理解云开发的意义。

2. 开发能力：通过本课程的学习，使学生掌握微信小程序开发工具的使用方式，将一个项目按模块从头开始完整复刻，最后进行自主修改并能把自己的成果发布到微信平台；熟练掌握小程序生命周期函数、数据绑定和渲染等基础技术；能灵活使用小程序组件；能在wxss中设计页面样式；能在页面布局中使用box模型、传统布局和flex布局；能使用JavaScript技术来实现事件操作和常见的交互；掌握使用wx.request网络接口调用第三方接口和自编接口的能力；掌握本地开发和云端开发能力；掌握基于云平台的网络应用搭建流程，使用微信小程序提供的编译开发环境开发整体项目的基础能力；掌握常见的交互和开放接口；掌握云开发中云存储、云函数和云数据库；能独立完成中小型小程序项目。

3. 综合能力：通过本课程的学习，使学生在掌握小程序项目开发基本流程和技术的同时，也能了解设计开发模式，项目分工、团队合作及创业竞赛等概念，为学生后期团队合作进行真实项目开发做出很好的铺垫。

课程名称：计算机应用基础授课对象：计算机科学与技术专业本科生授课时间：2课时教学目标：1. 知识目标：- 了解小程序的基本概念和开发流程。

- 掌握微信小程序的基本框架和开发工具。

- 熟悉小程序的页面布局、数据绑定和事件处理。

2. 能力目标：- 能够独立设计并实现一个小程序的基本功能。

- 提高学生的编程能力和团队协作能力。

3. 情感目标：- 培养学生对计算机编程的兴趣和热情。

- 增强学生的创新意识和实践能力。

教学内容：1. 小程序简介2. 微信小程序开发环境搭建3. 小程序页面布局4. 小程序数据绑定5. 小程序事件处理6. 小程序发布与测试教学过程：一、导入1. 提问：同学们，什么是小程序？为什么现在越来越多的人使用小程序？2. 回答并讲解：小程序是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的理念，用户扫一扫或者搜一下即可打开应用。

二、小程序简介1. 介绍小程序的概念、特点和优势。

2. 演示微信小程序的使用场景。

三、微信小程序开发环境搭建1. 介绍微信小程序的开发工具——微信开发者工具。

2. 指导学生下载并安装微信开发者工具。

3. 演示如何使用微信开发者工具创建小程序项目。

四、小程序页面布局1. 介绍小程序的页面布局规则和常用组件。

2. 指导学生使用微信开发者工具设计小程序页面。

3. 举例说明页面布局在实际应用中的运用。

五、小程序数据绑定1. 介绍小程序的数据绑定机制。

2. 指导学生使用数据绑定实现页面与数据的交互。

3. 举例说明数据绑定在实际应用中的运用。

六、小程序事件处理1. 介绍小程序的事件处理机制。

2. 指导学生使用事件处理实现页面与用户的交互。

3. 举例说明事件处理在实际应用中的运用。

七、小程序发布与测试1. 介绍小程序的发布流程。

2. 指导学生使用微信小程序管理后台发布小程序。

3. 演示如何在小程序后台进行测试。

八、总结与作业1. 总结本节课所学内容。

2. 布置作业：根据所学知识，设计并实现一个小程序的基本功能。