微信小程序开发项目教程(慕课版)教案 (12)[11页]
《微信小程序开发项目教程》第四章
视图容器组件在首页中应用
任务9：实现搜索区域布局与海报轮播功能
微信小程序开发项目教程
微信小程序开发项目教程
基础内容组件
主讲人：小刚老师
微信小程序开发项目教程
基础内容组件
（1）icon图标组件； （2）text文本组件； （3）progress进度条组件； （4）rich-text富文本组件； （5）editor富文本编辑器及API；
视图容器组件在首页中应用
主讲人：小刚老师
微信小程序开发项目教程
视图容器组件在首页中应用
视图容器组件
（1）view视图容器组件； （2）scroll-view可滚动视图容器组件； （3）swiper滑块视图容器组件； （4）movable-view可移动视图容器组件； （5）cover-view覆盖原生组件的视图容器组件；
微信小程序开发项目教程
image图片组件及图片API应用
任务10：实现图书列表显示功能静态布局
微信小程序开发项目教程
微信小程序开发项目教程
导航组件和导航API
主讲人：小刚老师
微信小程序开发项目教程
导航组件和导航API
导链接组件； （2）wx.navigateTo保留当前页跳转API； （3）wx.redirectTo关闭当前页跳转API； （4）wx.switchTab跳转到tabBar页面API； （5）wx.navigateBack返回上一页API； （6）wx.reLaunch关闭所有页面，打开某个页面API； （7）导航栏API； （8）Tab Bar标签导航API；
微信小程序开发项目教程
微信小程序开发项目教程
基础内容组件
微信小程序开发项目教程
微信小程序开发项目教程(慕课版)教案 (4)[15页]
![微信小程序开发项目教程(慕课版)教案 (4)[15页]](https://img.taocdn.com/s3/m/939c88c40066f5335b81212a.png)
第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）数学运算，示例代码如下。
微信小程序开发图解案例教程 第1章 认识微信小程序
图1.1
微信小程序入口
（2）在微信主界面下拉，会看到用过的微信小程序。 （3）给好友或者在群里分享小程序。 小程序的界面和使用方法和APP类似，图1.2所示是几个已发布的 常用小用户需要下载、安装才可以使用APP，安装时还会考虑APP占用多 大存储空间，哪些程序应该卸载掉以释放空间。 微信小程序则无需安装，直接使用，不占用存储空间。用户在使 用微信小程序后，可以用完即走。 微信小程序看起来是程序，但它以完全不同于APP的状态出现， 具有更灵活的应用组织形态。
微信小程序从开始研发、正式发布到推广使用，经历了以下发展 时期。 （1）2016年1月9日，微信团队首次提出应用号的概念。 （2）2016年9月22日，微信公众平台对外发送小程序内测邀请，内测 名额200个。 （3）2016年11月3日，微信小程序对外公测，开发完成后可以提交审 核，但公测期间不能发布。
小程序不支持WEBVIEW，大量已被静态化好的HTML页面完全没办法 在小程序上展示。 小程序想取代ANDROID和IOS还要走很长的路，是蓝海还是死海需要 时间来验证。 小程序经过腾讯公司的扶持和发展，已经吸引了很多企业使用，作 为与IOS、ANDROID、公众号、网站并行的流量入口。
1.1.5 微信小程序的发展历程
1.1.2 微信小程序的功能
小程序提供的功能如下。 （1）分享页功能。 （2）分享对话功能。 （3）线下扫码进入微信小程序功能。 （4）挂起状态功能。 （5）消息通知功能。 （6）实时音视频录制播放功能。
（7）硬件连接功能。 （8）小游戏功能。 （9）公众号关联功能。 （10）搜索查找功能。 （11）识别二维码功能。
微信小程序开发图解案例教程
第1章 认识微信小程序
微信小程序介绍 ■ 微信小程序开发准备 ■ 微信小程序开发工具的使用 ■ 沙场大练兵：HELLO WORLD的创建 ■ 小结 ■
《微信小程序开发项目教程》第二章
购买商品功能介绍
任务20——实现订单详情页功能
设计目的： 用户在购买的商品的时候，有时不会立即支付，或者支付后想查看自己的订单信息，订单详情页面就是 必不可少的页面了。
微信小程序开发项目教程
图书分类功能介绍
任务21：实现图书分类功能
设计目的： 手风琴式导航方式是很多商城都会采用的导航方式，对于商品分类过多的商城，这样的设计方便用户查 找商品。
微信小程序开发项目教程
我的模块功能介绍
任务5：实现修改密码功能
设计目的： 通过修改密码功能，我们要学会布局修改密码界面和表单校验的方法。
微信小程序开发项目教程
我的模块功能介绍
任务6：实现意见反馈功能
设计目的： 意见反馈功能用来收集用户对产品使用的意见，我们可以通过收集这些意见或建议来优化App或者小程序。
微信小程序开发项目教程
微信小程序开发项目教程
微信小程序开发项目教程
我的模块功能介绍
任务7：实现清除缓存功能
设计目的： 小程序可以提供清除缓存功能，把缓存到本地的数据清除掉，释放空间。 莫凡商城小程序提供清除缓存功能，可以清理掉缓存在小程序中的数据。
微信小程序开发项目教程
我的模块功能介绍
任务8：实现我的订单功能
设计目的： 商城类App或者小程序都有订单这个概念，订单可以分为待付款订单、待收货订单、已完成订单等不同 类别，每种订单具有不同的操作按钮，这是设计订单列表时要考虑的事情。
微信小程序开发项目教程
我的模块功能介绍
任务3：实现登录功能
设计目的： 账号密码登录和手机快捷登录是现在比较流行的登录设计方式，有很多App或者小程序都会采用这样的设 计方式，在设计其他小程序的时候具有借鉴意义。
小程序开发教程
小程序开发教程小程序开发是一种新兴的应用开发方式，它可以在微信或其他支持小程序的平台上运行。
本教程将为您介绍如何开发小程序，包括工具的安装、项目的创建、页面的编写和接口的调用等。
希望通过本教程，您能够掌握小程序开发的基本技巧，为以后的开发工作打下坚实的基础。
1. 环境准备在开始开发之前，您需要安装和配置相应的开发工具。
首先，请确保您已经下载并安装了微信开发者工具。
接下来，您还需要注册一个微信小程序的开发者账号，以便能够在微信平台上进行开发和发布。
2. 创建项目打开微信开发者工具，并选择“新建小程序项目”选项。
在弹出的窗口中，输入项目的名称和保存的路径，并选择合适的小程序类型。
然后，点击“确定”按钮，即可创建一个新的小程序项目。
3. 编写页面在小程序项目中，每个页面都可以由一个或多个组件构成。
您可以通过编写 WXML、WXSS 和 JavaScript 文件来定义每个页面的结构、样式和逻辑。
在开始编写页面之前，您需要了解一些基本的小程序组件和 API，以便能够正确地构建和使用它们。
4. 页面跳转小程序中的页面跳转可以通过导航组件或 JavaScript 代码来实现。
导航组件主要包括按钮、链接和导航栏等，您可以通过设置它们的属性来指定跳转的目标页面。
另外，您还可以通过JavaScript 代码调用小程序提供的API 来实现页面的动态跳转。
5. 接口调用小程序可以通过接口调用来获取和发送数据。
接口调用主要包括网络请求、文件操作和本地存储等。
您可以通过调用小程序提供的 API 来实现接口的调用，并根据需要进行数据的处理和展示。
6. 发布上线在开发完成后，您可以通过微信开发者工具将小程序上传到微信平台进行审核和发布。
在发布之前，您需要填写相应的小程序信息，并提交审核申请。
审核通过后，您的小程序将可以在微信中正式上线，供用户使用。
总结通过本教程的学习，您应该已经了解了如何开发小程序，并掌握了相应的开发技巧。
《微信小程序企业开发实战》课程教学大纲
《微信小程序企业开发实战》课程教学大纲学分：3学分学时：45学时（其中：讲课学时：30 上机学时：15 ）适用专业：通识选修课、专业拓展课先修课程：计算机基础、计算机网络、HTML5+CSS3+JavaScript一、课程的性质与目标《微信小程序开发实战》是专注于微信小程序开发的Web前端教材，涉及微信小程序框架、文件配置、WXML语法、WXSS布局、WXS语法、页面组件、应用接口API、云开发模式、第三方组件的使用等。
通过本课程的学习，学生能够理解微信小程序的实质，掌握微信小程序开发的基本技能，快速高效的开发微信小程序。
提高学生对计算机科学与技术的兴趣，促进学生能在未来的学习和工作中，使用“计算机思维”来解决实际问题，全面提高学生的综合素质。
二、课程设计理念与思路课程设计理念：高等职业教育不仅注重对专业知识和技能的传授，也注重对学生综合素质的培养，不局限于个人选择的专业，有助于个人潜力能够得到最大限度的发挥。
在全球云计算和移动互联的产业背景下，在高等教育的通识教育中增加有关计算机技术基础知识与能力的课程，有助于非计算机专业大学生综合素质的提高。
课程设计思路：微信小程序企业开发实战作为一门选修课，让学生把一门程序设计语言掌握到实用的程度较有难度。
本课程并非简单介绍微信小程序开发的理论内容，而是将理论讲解与实际操作相结合，其中所涉及的大部分知识点适用于所有编程的基础知识，如变量、运算符、选择语句和标签概念等。
可潜移默化地培养学生程序化、系统化的思维模式，让学生能够使用逻辑思维解决问题。
同时，培养学生的自学能力。
软件技术的发展日新月异，教材不能做到和语言同步，互联网的存在为自学掌握一门技能提供了便捷，可以让学生自己分析问题、动手编程和，在此过程中，学生上网查阅相关资料，能够更新知识，并逐渐具备独立研究的能力。
三、教学条件要求操作系统：Windows 10开发工具：微信开发者工具四、课程的主要内容及基本要求第一章微信小程序简介第二章微信开发者工具第三章微信小程序起步第四章小程序的配置文件第五章 WXML语法基础第六章 WXSS样式处理第七章 WXS语法第八章小程序中的JavaScript第九章微信小程序核心组件第十章微信小程序核心 API第十一章微信小程序开放能力（可选）第十二章微信小程序云开发（可选）第十三章自定义组件与第三方 UI 组件库（可选）第十四章第十五章项目实战：电影之家小程序（可选）项目实战：美妆商城小程序（可选）第十六章五、学时分配注：可选章节未计入合计课时。
微信小程序开发文档
微信小程序开发文档一、概述微信小程序是一种可以在微信内直接使用的应用程序，用户无需下载安装即可使用。
开发者可以利用微信小程序开发框架开发自己的小程序，提供丰富的功能和交互体验。
二、开发环境搭建1. 注册微信小程序开发者账号在微信公众平台注册小程序开发者账号，并完成身份验证。
2. 下载开发工具在微信公众平台下载微信开发者工具，用于开发、调试和预览小程序。
3. 新建小程序项目在微信开发者工具中新建一个小程序项目，填写相关信息，如小程序名称、AppID等。
三、小程序开发流程1. 小程序结构一个小程序由app.json、pages目录、utils目录等文件组成，其中app.json为小程序的全局配置文件，pages目录存放各个页面的目录，utils目录存放工具类文件。
2. 页面开发开发小程序页面需要编写WXML、WXSS和JS文件，分别用于描述页面结构、样式和逻辑代码。
3. 关联页面在app.json中配置页面路径，将页面与小程序进行关联。
4. 页面跳转使用小程序提供的API实现页面之间的跳转，如wx.navigateTo、wx.redirectTo等。
5. 数据交互通过小程序API与后台服务器进行数据交互，实现数据的获取和展示。
四、小程序发布流程1. 审核准备在微信公众平台进行小程序审核前，需要完善小程序的内容、功能和运营等信息。
2. 提交审核将小程序提交审核，并等待微信官方审核通过。
3. 发布上线审核通过后，可以将小程序发布上线，让用户在微信中访问和使用。
五、小程序维护1. 版本更新定期更新小程序版本，修复bug、优化性能和功能，提升用户体验。
2. 数据分析利用小程序提供的数据分析工具对用户行为、使用情况等进行分析，优化小程序运营策略。
3. 反馈与改进及时处理用户反馈，改进小程序功能和体验，不断提升用户满意度。
结语以上是关于微信小程序开发的简要文档，希望能帮助开发者更好地了解和使用微信小程序开发框架，开发出优秀的小程序应用。
微信小程序开发教程
微信小程序开发教程微信小程序是一种基于微信平台开发并在微信内部运行的应用程序，通过微信小程序，用户可以在无需下载和安装的情况下即可使用各种功能和服务。
本教程将为您介绍如何开发微信小程序，包括搭建开发环境、创建小程序、开发页面和功能等方面的内容。
一、搭建开发环境在开始开发微信小程序之前，我们需要搭建好相应的开发环境。
以下是搭建开发环境的步骤：1.下载并安装微信开发者工具微信开发者工具是用于开发和调试微信小程序的工具，您可以在微信官方网站下载并安装最新版本。
2.注册微信开发者账号在使用微信开发者工具之前，您需要拥有一个微信开发者账号。
您可以在微信公众平台注册并进行身份验证，获得开发者权限。
3.登录微信开发者工具安装完成后，打开微信开发者工具并使用您的微信开发者账号登录。
二、创建小程序搭建好开发环境后，我们可以开始创建自己的微信小程序了。
以下是创建小程序的步骤：1.新建项目在微信开发者工具中，点击新建项目按钮，然后填写相应的项目信息，包括小程序的名称、AppID等。
2.选择项目目录选择项目的保存路径，可以选择自己希望保存的目录。
3.选择项目类型在新建项目页面中，选择适合您项目类型的小程序模板，例如空白模板、示例模板等。
4.创建项目点击创建按钮后，微信开发者工具将自动为您生成一个基础的小程序目录结构和必要的文件。
三、开发页面和功能创建好项目后，我们可以开始开发微信小程序的页面和功能了。
以下是开发页面和功能的步骤：1.页面设计在小程序的目录结构中，找到pages文件夹，其中存放着小程序的页面文件。
您可以在该文件夹下创建新的页面文件，用于展示不同的功能和内容。
2.页面逻辑每个小程序页面由一个.wxml、.wxss和.js文件组成，其中.wxml文件用于定义页面的结构，.wxss文件用于定义页面的样式，.js文件用于处理页面的逻辑和事件。
3.功能开发通过使用小程序的API和组件，您可以为页面添加各种功能，例如用户登录、数据展示、数据提交等。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
第6章莫凡商城的注册、登录功能6.6 项目实战：任务3—实现登录功能1．任务目标通过实现莫凡商城的登录功能，学会登录功能要应用到的组件和API接口的使用方法，并能举一反三，实现其他类似的登录功能。
莫凡商城登录功能提供两种登录方式：账号密码登录和手机快捷登录。
通过页签的切换，可以选择使用哪种方式进行登录，如图所示。
账号密码登录手机快捷登录2．任务实施下面我们一起来实现莫凡商城登录功能。
（1）在app.json文件里添加注册页面路径“pages/login/login”。
（2）在login.json文件里配置导航标题，示例代码如下。
{"navigationBarTitleT ext": "登录"}（3）在login.wxml页面文件里进行登录表单布局，需要使用view容器组件、form表单组件、swiper滑块视图容器组件和button按钮组件，示例代码如下。
<form bindsubmit="formSubmit" bindreset="formReset"><view class="content"><view class="loginTitle"><view class="{{currentT ab==0?'select':'default'}}" data-current="0" bindtap="switchNav">账号密码登录</view><view class="{{currentT ab==1?'select':'default'}}" data-current="1" bindtap="switchNav">手机快捷登录</view></view><view class="hr"></view><swiper current="{{currentT ab}}"style="height:{{winHeight}}px"><swiper-item><view class="accountType"><view class="account"><view class="ac">账号</view><view class="ipt"><input name="loginName" focus="false" placeholder="请输入用户名" class= "placeholder-style" value='{{form_info}}'/></view></view><view class="hr"></view><view class="account"><view class="ac">密码</view><view class="ipt"><input name="loginPassword" type="text" placeholder="请输入密码" class= "placeholder-style" value='{{form_info}}'/></view></view><view class="hr"></view><view class="login"><button form-type="submit">登录</button><view class="fp" bindtap='toRegister'>没有账号？注册</view><view class="tip">{{tip}}</view></view></view></swiper-item><swiper-item><view class="mobileType"><view class="account"><view class="ac">手机号</view><view class="ipt"><input name="mobile" type="text" placeholder="仅支持中国大陆手机号" class= "placeholder-style" value='{{form_info}}' bindinput='getMobile'/><button class="btn" bindtap="getcode" wx:if="{{flag==true}}">{{yzmvalue}}</button><button class="btn" wx:else>{{timevalue}}s</button></view></view><view class="hr"></view><view class="account"><view class="ac">验证码</view><view class="ipt"><input name="verifyCode" type="text" placeholder="请输入验证码" class= "placeholder-style" value='{{verifyCode}}'/></view></view><view class="hr"></view><view class="login"><button form-type="submit">登录</button><view class="fp" bindtap='toRegister'>没有账号？注册</view><view class="tip">{{tip}}</view></view></view></swiper-item></swiper></view>（4）在login.wxss样式文件里对登录表单布局进行样式渲染，示例代码如下。
.loginTitle{display: flex;flex-direction: row;width: 100%;font-size: 15px;}.select{color: #009966;width: 50%;text-align: center;height: 48px;line-height: 48px;border-bottom:5rpx solid #009966;font-weight: bold;}.default{margin: 0 auto;padding: 15px;}.hr{height: 1px;width: 100%;background-color: #666666;opacity: 0.2;}.account{display: flex;flex-direction: row;}.ac{padding:15px;font-size:15px;font-weight: bold;color: #666666;}.ipt{padding-top:10px;}.ipt input{text-align: left;width: 200px;color: #000000;}.placeholder-style{font-size: 14px;color: #cccccc;}.login{margin: 0 auto;text-align: center;padding-top:10px;}.login button{width: 96%;color: #ffffff;background: #009966;}.fp{font-size: 13px;color: #3e13da;padding:5px;text-align: right;margin-right:10px;margin-top:10px;}position: absolute;right: 10px;top: 10px;width: 90px;font-size: 12px;color: #666666;background-color: #f2f2f2;}.tip{margin-top:10px;font-size: 12px;color: #D53E37;}（5）在login.js业务逻辑处理文件中，进行登录表单切换、登录表单验证，然后将登录表单提交到后台服务器中进行登录，示例代码如下。