微信小程序开发图解案例教程 第1章 认识微信小程序
微信小程序培训课完整版 ppt课件
1、学习css之前html要熟练，没有墙面（html）的话，我们给墙面怎么刷漆（css装 饰）？对不对？ 2、看视频教程，看书籍，写代码，调试代码，多思考。 3、坚持下去，选择他就要把他学好，不忘初心。
网络在线手册地址：/css/
ppt课件
在这里要感谢微信大神：张小龙。
ppt课件
4
html基础课程
HTML：超文本标记语言 标签：<html></html>闭合标签、<br />自闭标签<img /><hr /> HTML很重要，重要，一定要学好。
HTML标签的熟练使用 如：<div><a><span><b><img><input><table><tr><td><p><ul><ol><li><dl><dt><dd> 等等。
text-indent:24px;
}
也可以这样编写，但是一定要注意结尾有英文的分号.初学者建议采用上面的方式编写
css;
css高级语法 同时定义多个元素多组声明的写法，英文状态下的逗号
p,h1,h2,div,table{
color:red;
font-size:16px;
}
4种css的加载方式 1、行内方式
犀牛课堂小程序培训课
——培训讲师：Tabniu
ppt课件
1
微信小程序开发工具
1、打开浏览器输入 https:///debug/wxadoc/dev/devtools/download.html?t=1475052055364 打开页面 2、查看系统信息 3、选择下载对应的工具 4、安装工具 5、打开工具（需要微信扫描登录） 6、尝试运行微信小程序
《微信小程序开发图解案例教程》教学教案—11仿华为商城微信小程序
第7章综合案例：仿华为商城微信小程序教学过程7.1 需求描述仿华为商城微信小程序需要完成以下主要功能：（1）完成首页显示商品功能设计，首页内容包括搜索区域、海报轮播图片区域、精选商品列表区域、手机列表区域、笔记本电脑列表区域，如图所示。
首页手机笔记本电脑（2）完成分类页面里商品导航和导航对应商品显示设计，动态获取导航内容和导航对应的商品，如图所示。
分类（3）完成我的界面设计，包括账号相关设计和列表式导航设计，如图所示。
我的（4）完成登录设计，包括账号密码登录和手机快捷登录，如图所示。
账号密码登录手机快捷登录（5）完成账号注册功能，来获取用户账号信息，如图所示。
注册7.2 设计思路（1）设计底部标签导航，准备好底部标签导航的图标，并建立3个相应的页面；设置默认时图片和选中时图片，标签名称采用两种颜色，红色为选中颜色，灰色为默认颜色。
（2）设计我的页面，先进行我的页面布局设计，然后实现通过微信授权用户的方式来获取用户头像和昵称，来达到登录的效果，这也是很多小程序会采用的一种设计方式。
（3）除了通过微信授权的方式获取用户，也可以自行设计登录界面，本案例设计账号密码登录和手机快捷登录。
（4）完成登录设计之后，开始设计注册功能来获取用户账号。
（5）设计首页功能，首页功能包括搜索区域、海报轮播区域、宫格导航区域、精选商品区域、手机区域、笔记本电脑区域的布局，然后通过API接口动态的来获取海报轮播图片列表和商品列表。
（6）设计分类页面功能，先进行分类页面布局设计，然后通过API接口动态获取分类导航信息和导航对应商品列表。
7.3 相关知识点（1）在界面布局的时候，会用到微信小程序的组件，包括view视图容器组件、scroll-view可滚动视图区域组件、image图片组件、swiper滑块视图容器组件、icon图标组件、form表单组件、radio单项选择器组件、checkbox多项选择器组件等组件的使用。
（2）scroll-view可滚动视图区域组件用来实现首页精选商品左右滑动效果来查看所有的商品。
微信小程序的开发流程及实践经验
微信小程序的开发流程及实践经验随着互联网的发展，移动端应用在我们的日常生活中扮演着越来越重要的角色，微信作为一款最受欢迎的社交工具，其生态系统已经涉及到支付、公众号、小程序等各个领域。
其中，微信小程序作为一种轻量级应用，逐渐受到了越来越多开发者的关注。
本文将介绍微信小程序的开发流程及实践经验。
一、开发前准备1.注册小程序账号在开始微信小程序的开发之前，我们需要先注册一个小程序的账号。
直接进入微信公众平台，注册时需提供相应材料和证件，完成实名认证之后，即可进入小程序的后台管理页面。
2.下载开发者工具微信小程序开发者工具是进行小程序开发所必须的工具，我们可以直接在官方下载页面中下载对应版本的工具。
开发者工具不仅提供了代码编辑功能、调试功能，还提供了模拟器以及调试工具，相当于是小程序开发的一条龙服务。
3.开发文档研究在进行微信小程序的开发前，我们还需要进行相关的学习和了解。
微信小程序提供了详细的开发文档，我们可以通过阅读该文档来深入了解开发小程序的流程和技能。
二、开发流程1.创建小程序登录微信小程序后台管理页面，选择创建小程序。
需要填写小程序名称、所属分类等基本信息。
需要注意的是，注册名称和小程序名称不能相同，所属分类需要选对应的类型。
2.配置开发环境完成小程序的创建之后，我们需要配置开发环境。
在开发者工具中，需要选择新建项目，然后填写小程序的appid和所属目录，其他配置也可按需设置。
3.编写代码开发者工具中自带代码编辑器，我们可以在其中直接编写代码。
微信小程序采用的是WXML+WXSS+JavaScript的编程模式，其中WXML和WXSS是微信小程序自己定义的标签和样式表，JavaScript则是实现交互和逻辑的核心语言。
4.调试测试完成代码的编写之后，我们需要进行调试测试。
开发者工具提供了模拟器和真机调试功能，可以方便地进行测试和调试。
在进行调试测试之后，可以将代码提交到小程序的后台管理页面进行审核和发布。
微信小程序开发-简易教程
本文档将带你一步步创建完成一个微信小程序，并可以在手机上体验该小程序的实际效果。
这个小程序的首页将会显示欢迎语以及当前用户的微信头像，点击头像，可以在新开的页面中查看当前小程序的启动日志。
下载源码1. 获取微信小程序的AppID首先，我们需要拥有一个帐号，如果你能看到该文档，我们应当已经邀请并为你创建好一个帐号。
注意不可直接使用服务号或订阅号的AppID。
利用提供的帐号，登录https://，就可以在网站的“设置”-“开发者设置”中，查看到微信小程序的AppID了。
注意：如果我们不是用注册时绑定的管理员微信号，在手机上体验该小程序。
那么我们还需要操作“绑定开发者”。
即在“用户身份”-“开发者”模块，绑定上需要体验该小程序的微信号。
本教程默认注册帐号、体验都是使用管理员微信号。
2. 创建项目我们需要通过开发者工具，来完成小程序创建和代码编辑。
开发者工具安装完成后，打开并使用微信扫码登录。
选择创建“项目”，填入上文获取到的AppID，设置一个本地项目的名称（非小程序名称），比如“我的第一个项目”，并选择一个本地的文件夹作为代码存储的目录，点击“新建项目”就可以了。
为方便初学者了解微信小程序的基本代码结构，在创建过程中，如果选择的本地文件夹是个空文件夹，开发者工具会提示，是否需要创建一个quick start项目。
选择“是”，开发者工具会帮助我们在开发目录里生成一个简单的demo。
项目创建成功后，我们就可以点击该项目，进入并看到完整的开发者工具界面，点击左侧导航，在“编辑”里可以查看和编辑我们的代码，在“调试”里可以测试代码并模拟小程序在微信客户端效果，在“项目”里可以发送到手机里预览实际效果。
3. 编写代码创建小程序实例点击开发者工具左侧导航的“编辑”，我们可以看到这个项目，已经初始化并包含了一些简单的代码文件。
最关键也是必不可少的，是app.js、app.json、app.wxss这三个。
其中，.js后缀的是脚本文件，.json后缀的文件是配置文件，.wxss后缀的是样式表文件。
微信小程序的开发流程与思路
微信小程序的开发流程与思路随着微信小程序的普及，越来越多的企业和开发者开始关注微信小程序的开发。
那么微信小程序的开发流程和思路是什么呢？本文将详细介绍微信小程序的开发流程和思路。
一、概述微信小程序是一种基于微信平台的轻量级应用，可以在微信内部直接运行，不需要下载和安装，十分便捷。
微信小程序完全采用前段技术，如HTML5、CSS3和JavaScript等，因此开发起来具有灵活性和可扩展性。
二、准备工作在进行微信小程序的开发之前，我们需要进行一些准备工作。
首先，我们需要注册微信开发者账号，并在微信公众平台申请一个小程序账号。
然后，我们需要创建一个小程序，并获取到小程序的AppID和AppSecret等信息。
接着，我们需要下载安装微信Web开发者工具，这个工具可以让我们在本地进行小程序的开发和调试。
三、小程序开发流程微信小程序的开发流程大致可以分为以下几个步骤：1.确定需求在进行小程序开发之前，我们需要明确小程序的功能和需求。
这样才能确定小程序的主要功能模块和界面。
2.界面设计在确定小程序的功能需求之后，我们需要进行界面设计。
小程序的界面需要尽量简洁明了，设计风格要与小程序的功能和主题相符合。
3.编写代码在完成界面设计之后，我们需要利用HTML、CSS和JavaScript等技术编写小程序的代码。
在编写代码的过程中，我们需要注意小程序的性能和体验，代码质量要得到保障。
4.测试调试在编写完代码之后，我们需要进行测试和调试，确保小程序的功能和性能都能够正常运行。
同时，我们要注意小程序的体验和交互，尽可能地让用户感到舒适和自然。
5.提交审核在测试和调试完成之后，我们就可以将小程序提交审核了。
在提交审核之前，我们需要确保小程序的内容、图标、图片等都符合微信小程序的规范。
同时，我们还要遵守微信小程序的相关法律法规，确保小程序的合法性。
6.发行上线在小程序经过审核后，我们就可以将小程序发行和上线了。
在发行和上线之前，我们需要进行预发布测试，确保小程序能够正常运行和交互。
微信小程序开发图解案例教程第1章 认识微信小程序
图1.10 模拟器区域
1.3.4 编辑器区域
编辑器区域分为两部分：一部分用 来展示项目文件目录和文件结构；另一 部分用来进行代码编辑，如图1.11所示。
图1.11 编辑器区域
（1）在项目目录上单击鼠 标右键可以在硬盘打开文件 目录，对文件目录重新命名， 删除目录，在该目录下查找 指定内容、新建文件等，如 图1.12所示。
（4）2016年12月28日，张小龙在微信公开课中解答外界对微信小程序 的几大疑惑，包括没有应用商店、没有推送消息等。 （5）2016年12月30日，微信公众平台对外发布公告，上线的微信小程 序最多可生成10?000个带参数的二维码。 （6）2017年1月9日，微信小程序正式上线。 （7）2017年3月27日，个人开发者可以申请小程序开发和发布。
图1.19 AppData功能
（6）WXML窗口用于帮助开发者开发WXML转化后的界面。在这里可以 看到真实的页面结构以及结构对应的WXSS属性，同时可以修改对应的 WXSS属性，如图1.20所示。
图1.20 Wxml功能
1.3.6 工具栏区域
1．编译操作 我们可以通过编译按钮或者使用快捷键CTRL+B编译当前小程序的
1.2.2 开发准备
STEP1：在“微信公众平台”注册微信开发者账号。单击“立即注 册”，在“注册”界面选择“小程序”，在“小程序注册”界面根据 提示填写相关信息完成注册。
在微信公众平台中，选择“小程序”→“小程序开发文档”，如 图1.3（A）所示，可以打开帮助文档界面，如图1.3（B）所示。
图1.3（a） 开发文档
图1.3（b） 帮助文档
在帮助文档里有介绍、设计、小程序开发、运营、数据、社区6 个菜单，针对不同角色的用户提供了不同内容的帮助文档。
小程序简介PPT课件
40个工作日39可编辑课件ppt30分钟创建发布你的小程序1分钟24分钟创建小程序5分钟内容编辑授权发布选择行业模板填写小程序名选择行业添加广告等资料添加产品服务添加服务人员授权绑定下载发布完成40可编辑课件ppt创建小程序41可编辑课件ppt授权发布42可编辑课件ppt小程序的方向和目标我们的小程序销售型产品是帮客户解决行业问题的工具43可编辑课件ppt10解决小程序创建问题20解决数据管理人员管理问题70解决行业应用问题我们的方向解决行业问题是产品的核心44可编辑课件ppt我们的目标简单快速搭建小程序从行业层面真正解决问题从行业层面真正解决问题简单快速搭建小程序45可编辑课件ppt46可编辑课件ppt需要付出的成本更低
53
54
三、移动端订餐、配送管理，餐厅移动化运营
商家、店员可通过微信公众号接入管理员入口， 在线接外卖订单、分配送餐员、处理顾客预定订单、 安排餐桌等等。送餐员则可以在线抢单、完成配送任务。移动端管理入口，实现了餐饮O2O高效化、 移动化、智能化运营管理模式。
四、线上场景化精准深度营销及活动方案，强互动、高转化
企业为什么要做小程序？小程序的作用？ 怎样选择关键词名称？ 1.抢先注册关键词，像域名或网络实名一样，谁先注册谁拥有 2、提升企业的品牌形象，抢占入口；入住移动微信端 3、通过微信搜索有更多的流量入口，为企业带来更多用户； 4、连接更多的线下服务与线上用户，拓展O2O行业； 5、用户无须安装、用完即走、无须卸载，降低用户使用门槛； 6、良好的用户体验与性能，与原生APP无差异；企业无需再建设手机APP 7、占位，因为小程序名称的唯一性，关键词名称作为排名的第一标准，对于企 业尤为重要（早申请对企业有利的关键词小程序 越算是企业移动端早布局）
课程设计微信小程序
课程设计微信小程序一、课程目标知识目标：1. 学生能理解微信小程序的基本概念、功能特点及其在生活中的应用。
2. 学生能掌握微信小程序的开发流程，了解前端和后端的基本技术。
3. 学生能运用所学的编程知识，设计并实现一个简单的微信小程序。
技能目标：1. 学生具备使用微信开发者工具进行小程序开发的能力。
2. 学生能够运用编程语言（如JavaScript、WXML、WXSS等）进行小程序的前端设计。
3. 学生能够使用微信小程序API进行数据交互，实现前后端的数据连接。
情感态度价值观目标：1. 学生培养对编程的兴趣，增强对信息技术的热爱和求知欲。
2. 学生通过小组合作，培养团队协作精神和沟通能力。
3. 学生认识到科技对社会发展的作用，激发创新精神，提高社会责任感。
课程性质：本课程为信息技术学科，结合当前热门的微信小程序，旨在培养学生的编程兴趣，提高实践能力。
学生特点：六年级学生具备一定的计算机操作能力，对新事物充满好奇，喜欢挑战性任务。
教学要求：课程要求学生在掌握基础知识的同时，注重实践操作，通过小组合作完成一个小程序的设计与实现。
教学过程中，教师需关注学生的个体差异，提供有针对性的指导。
二、教学内容1. 微信小程序概述- 了解微信小程序的发展历程、应用场景和优势特点。
- 学习微信小程序的架构和开发环境。
2. 微信小程序开发基础- 掌握WXML、WXSS、JavaScript等编程语言的基本语法和应用。
- 学习小程序的组件、API的使用方法。
3. 微信小程序开发流程- 了解小程序的注册、配置和发布流程。
- 学习使用微信开发者工具进行小程序的调试、预览和发布。
4. 小程序项目实践- 分析项目需求，进行功能设计。
- 分组合作，进行前端和后端开发。
- 完成小程序的测试、优化和发布。
5. 教学内容的安排和进度- 微信小程序概述（1课时）- 微信小程序开发基础（4课时）- 微信小程序开发流程（2课时）- 小程序项目实践（5课时）教材章节关联：本教学内容与教材中“第三章 网页设计与制作”和“第四章 程序设计基础”相关，通过学习，学生可以掌握微信小程序的基本知识和开发技能。
微信小程序基础ppt课件
为什么做小程序
未来的应用程序无处不在
PC时代
与外界没有交互
互联网时代
网站提供服务
移动互联网
APP、微信公众号、微博
物联网
入口分散、线下、云端
4
小程序的现状
附近的小程序
用户可在微信内通过“附近的小程序”功 能便捷地获取线下门店所属的小程序，并 使用小程序提供的服务。这种店类似于未 来的门店，这也是一个流量入口，现在是 一个很好的红利期。
公众号模版消息可打开相关小程序
公众号关联小程序时，可选择给粉丝下发通 知消息，粉丝点击该通知消息可以打开小程 序。该消息不占用原有群发条数。
6
小程序的现状 小程序可以好友推荐及群推荐
当你发现一个好玩的或者实用的小程序， 可以将这个小程序，或者它的某一个页面 转发给好友或群聊。但是注意，小程序无 法在朋友圈中发布分享。
商家可将商品归类为促销商 品、畅销热品等进行展示
传众小程序商城版
店铺公告罗列出最新活动， 让消费者一目了然
设置精准搜索，通过输入关 键词来寻找想要的商品
订单状态一目了然，并有详 细记录，方便用户查询
用户可在个人中心设置收货 地址，查看相关信息
10
小程序的申请
小程序 关键词审核
微信公众平台 注册小程序
最有效的营销功能 之一，可以快速聚 拢用户、提升销量
小程序点餐
可利用小程序点餐 让消费者便捷点餐、 就餐，付费、领券
提升用户体验
小程序的出现，让同城服 务更加便捷，快速打开、
订购、预约、上门等
小程序企业
小程序企业可便捷 地展示企业信息产 品及服务信息，并
可快速传播
小程序酒店
基于微信小程序实 现在线预约、订房、 开房、缴费、退房 等，提升酒店服务
ch01微信小程序入门
02 小程序的准备工作
01 注册开发者账号
3. 信息登记 填写完成后在下方管理员身份验证栏 目会自动出现一个二维码。 此时需要管理员用本人微信扫描页面 上提供的二维码来进行身份确认。这 种验证方式是免费的，不会扣取任何 费用。
02 小程序的准备工作
01 注册开发者账号
3. 信息登记 扫码后手机微信会自动跳转到微信验 证页面。 检查微信验证页面上所显示的姓名和 身份证号码，确认无误后点击“确定” 按钮会提示身份验证成功。
02 小程序的准备工作
03 成员管理
2. 成员人数限制 个人类型的小程序允许管理员添加15个开发者，其中5个开发者，10个体验者。 其他类型的小程序开发者数量限制如下： • 未认证未发布组织类型：30人； • 已认证未发布/未认证已发布组织类型：60人； • 已认证已发布组织类型：90人。
02 小程序的准备工作
02 小程序的准备工作
01 注册开发者账号
在当前页面上选择注册的账号类型为“小程序”，即可进入小程序的正式注册页面。
02 小程序的注册页面包含三个填写 步骤：账号信息、邮箱激活、信息登 记。 1. 账号信息填写 在账号信息填写页面需要填写邮箱、 密码、确认密码、验证码以及勾选确 认协议条款。
02 小程序的准备工作
01 注册开发者账号
3. 信息登记 当前可以直接单击“前往小程序”按钮进 入小程序管理页面。
02 小程序的准备工作
01 注册开发者账号
3. 信息登记 此时账号是默认登录后的状态，可以直接进行小程序的后续管理工作。
现在小程序的账号注册就全部完成了，之后可以访问微信公众平台（） 手动输入账号和密码登录进入小程序管理页面。
提交审核与发布 完成小程序后需要进行代码上传，然后由管理员提交代码等待 微信团队审核，审核通过后即可正式发布。
微信小程序开发实战教程 第2章 基本页面和底部导航
添加编译模式
2.1.2 设置启动页面
13
如图所示，在“启动页面”下拉列 表中选择某个页面，这里选择 “pages/p2/p2”页面
选择启动页面
2.1.2 设置启动页面
如图所示，单击“确定”按钮，完 成设置。
自行观察运行结果，这里为p2页面 的内容，再检查一下app.json文件 的内容，发现项目的启动页面仍然 为p1。
2.2.2 设计底部导航
21
保存文件，底部导航运行结果如图所示。注意， 可观察到底部有2个标签，选中“页面1”标签页， 将显示“p1”对应的内容，选中“页面2”标签 页，将显示“p2”对应的内容，并可观察到图标 的变化。
底部导航运行结果
2.2.2 设计底部导航
22
下面介绍微信开发者工具中集成开发环境（Integrated Development Environment，IDE） 的部分功能，如图所示。自行单击“模拟器”“编辑器”“调试器”按钮可打开或关闭对应 窗口。
新建Page
2.1 基本页面
5
如图所示，在“p1”文件夹下将自动生 成4个文件，分别为 “p1.js”“p1.json”“p1.wxml”“p1 .wxss”。
一个页面的4个文件
2.1.1 创建页面
6
如图所示，在目录树中选中 “p1.wxml”文件，查看其内 容，可以看到文件内容为text 标签中包含的一段纯文本 “pages/p1/p1.wxml”，这 段纯文本默认是文件的路径。
微信小程序开发实战教程（PHP+Laravel+MySQL）
第2章 基本页面和底部导航
学习目标
1 熟练掌握创建新页面的方法 2 熟练编写底部导航代码。 3 理解底部导航各属性的含义。 4 进一步熟悉微信开发者工具界面。
微信小程序入门ppt课件
WXSS
26
1
尺寸单位
设备
rpx换算px (屏幕宽度/750) px换算rpx (750/屏幕宽度) 屏幕宽度
iPhone5
1rpx = 0.42px
1px = 2.34rpx
320
iPhone6
1rpx = 0.5px
1px = 2rpx
375
iPhone6 Plus 1rpx = 0.552px
27
2
样式导入
使用@import语句可以导入外联样式表，@import后跟需要导入的外联 样式表的相对路径，用;表示语句结束。
28
3
内联样式
框架组件上支持使用 style、class 属性来控制组件的样式。
style：静态的样式统一写到 class 中。style 接收动态的样式，在运行时会进行解 析，请尽量避免将静态的样式写进 style 中，以免影响渲染速度。 <view style="color:{{color}};" />
0
1
2
3
16
7
View
实现点击效果
hover-class指定按下去的样式类。 当 hover-class="none" 时，没有点击态效果
WXML <view hover-class='hover'>按钮</view>
WXSS
.hover{ background-color: #aaa;
}
178239text\t 空格（ 多个只会显示一个空格） \n 换行
<text>你好！\t七月流火啊！\n我 在下一行</text>
微信小程序开发图解案例教程08“记账本微信”小程序云开发
类型 string string string string string string string string string
说明 主键id，使用系统自动生成的ID，账户id 微信用户身份的唯一标识 账户金额 账户图标 账户名称 账户备注 账户类别：0现金，1支付宝，2微信 创建时间 修改时间
8.4 准备工作
④ 在云开发控制台上新建集合“accountDetail”（账户明细），字段属性如表所示。
字段
类型
说明
_id
string
主键id，使用系统自动生成的ID，账户明细id
_openid
string
微信用户身份的唯一标识
accountId
string
账户id
balance
string
交易金额
totalBalance
目录导航
8.1 需求描述 8.2 设计思路 8.3 相关知识点 8.4 准备工作 8.5 设计流程 8.6 小结
8.5.1 账户列表
账户列表页面显示已经创建的账户列 表。账户类型分为微信、现金、支付宝。 在每个账户里可以记录每一笔的收入和支 出，同时显示所有账户的总金额。如图 8.7所示。
图8.7 “账户”界面效果
27. </view>
添加账户 </view>
④ 在pages/account/ account.wxss文件里进行账户列表样式渲染。代码如下。
1. .stat { 2. background-color: #fff; 3. padding: 10px; 4. } 5. .line { 6. height: 1px; 7. width: 100%; 8. background-color: #666; 9. opacity: 0.2; 10. }
微信小程序开发实战-综合项目——“点餐”微信小程序
任务实现
5. 实现滚动右侧商品列表激活左侧菜单项
先定一个小 目标！
掌握滚动右侧商品列表激活左侧菜单项 的实现，能够完成滚动右侧商品列表激 活左侧菜单项功能的开发
任务实现
5. 实现滚动右侧商品列表激活左侧菜单项
滚动右侧商品列表激活左侧菜单项
在菜单列表中，滚动右侧商品列表时激活左侧菜单项，使左侧菜单项可以根 据右侧列表对应的分类进行变化。
项目模块划分
先定一个小 目标！
熟悉项目的模块划分，能够总结每个模 块的内容
项目模块划分
“点餐”微信小程序包含的模块
用户登录
当“点餐”微信小程序启动后， 会自动进行用户登录。
商家首页
在商家首页点击“开始点餐之 旅”，跳转到菜单列表页进行 点餐。
菜单列表页
用户可以在菜单列表页中根 据自己的需求选择商品，点 击“+”将所选商品加入购 物车。
目录/Contents
01
【任务6-1】项目开发准备
02
【任务6-2】封装网络请求
03
【任务6-3】用户登录
04
【任务6-4】商家首页
05
【任务6-5】菜单列表页
目录/Contents
06
【任务6-6】购物车
07
【任务6-7】订单确认页
08
【任务6-8】订单详情页
09
【任务6-9】订单列表页
10
购物车界面
当购物车中数量不为0时，购物车 图标右上角显示商品数量，购物车 图标可变为点击状态，此时点击购 物车图标可以显示或者隐藏购物车 界面区域。当显示购物车界面区域 时，可以添加或者减少购物车中的 商品数量。
任务实现
6. 实现增加和减少商品数量
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
图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的创建 ■ 小结 ■
1.1
微信小程序介绍
1.1.1 初识微信小程序
微信小程序（简称小程序）是一个基于去中心化而存在的平台，它 没有聚合的入口，有多种进入方式。 （1）在微信中的“发现”界面，可以找到小程序的入口，如图1.1所 示。
1.2
微信小程序开发准备
1.2.1 基础技术准备
微信小程序自定义了一套语言，称为WXML（微信标记语言），它 的使用方法类似于HTML。另外，微信小程序还定义了自己的样式语言 WXSS，兼容了CSS，并做了扩展；使用JAVASCRIPT来进行业务处理， 兼容了大部分JAVASCRIPT功能，但仍有一些功能无法使用，所以有一 定HTML、CSS、JAVASCRIPT技术功底的人学习微信小程序开发会容易 很多。
（14）2018年3月，微信正式宣布小程序广告组件启动内测，内容还 包括第三方可以快速创建并认证小程序、新增小程序插件管理接口和 更新基础能力，开发者可以通过小程序来赚取广告收入。
1.1.6 微信小程序带来的机会
微信小程序给很多想做程序员的人提供了机会，因为它的开发门 槛很低，不需要太难的技术。学习微信小程序开发，就可以成为一名 “小程序员”。例如，设计师、学生、创业者、待业青年、“网虫”、 策划人员、编辑、草根站长等都可以转做程序员。 微信小程序给企业提供了流量入口，企业可以通过小程序推广自 己的产品。经过腾讯公司的大力扶持，小程序已经成为各个企业非常 看重的流量入口。
（8）2017年4月17日，小程序代码包大小限制扩大到2MB。 （9）2017年4月20日，腾讯公司发布公众号关注小程序新规则。 （10）2017年5月12日，腾讯公司发布“小程序数据助手”。 （11）2017年12月28日，微信更新的6.6.1版本开放了小游戏。
（12）2018年1月18日，微信提供了电子化的侵权投诉渠道，用户或者 企业可以在微信公众平台以及微信客户端入口进行投诉。 （13）2018年1月25日，微信团队在“微信公众平台”发布公告称“从 移动应用分享至微信的小程序页面，用户访问时支持打开来源应用”。
小程序不提供的功能如下。 （1）小程序没有集中入口，没有应用商店。 （2）小程序没有订阅关系，没有粉丝，只有访问量。 （3）小程序不能推送消息。
1.1.3 微信小程序的使用场景
从上线开始，各种小程序就如雨后春笋般出现，小程序有哪些适 合的使用场景呢？在发布小程序的时候，要选择服务类目。 通过这些服务类目，我们能知道小程序的使用场景。服务类目分 为个人服务类目和企业服务类目。 个人服务类目针对以个人为开发主体的小程序，服务范围小；企 业服务类目针对以企业为开发主体的小程序，服务范围大，如表 1.1、 表1.2所示。
1.2.2 开发准备
STEP1：在“微信公众平台”注册微信开发者账号。单击“立即注 册”，在“注册”界面选择“小程序”，在“小程序注册”界面根据 提示填写相关信息完成注册。 在微信公众平台中，选择“小程序”→“小程序开发文档”，如 图1.3（A）所示，可以打开帮助文档界面，如图1.3（B）所示。
（4）2016年12月28日，张小龙在微信公开课中解答外界对微信小程序 的几大疑惑，包括没有应用商店、没有推送消息等。 （5）2016年12月30日，微信公众平台对外发布公告，上线的微信小程 序最多可生成10?000个带参数的二维码。 （6）2017年1月9日，微信小程序正式上线。 （7）2017年3月27日，个人开发者可以申请小程序开发和发布。
表1.1
个人服务类目
续表
表1.2
企业服务类目
续表
1.1.4 微信小程序能取代APP吗
原生APP一般要同时开发IOS和ANDROID两版，而小程序只需要做 一版。毫无疑问，这点是小程序最大的优势。从这个角度来看，小程 序是“跨平台”的。 在现阶段，开发一套逻辑完整的应用程序，小程序的开发效率是 低于APP的。小程序独立出了一个封闭的生态。 小程序虽是跨平台的，但是缺乏成熟的组件，缺少统计、绘图组 件，以前的ECHARTS和HIGHTCHARTS都无法使用。