微信小程序开发图解案例第1章课件.pptx

1、1.2 微信小程序开发准备1.3 微信小程序开发工具的使用1.4 沙场大练兵： Hello World 的创建目录contents1.1 微信小程序介绍1.1 微信小程序介绍2016年1月9日，腾讯公司启动了微信小程序产品的研发，于2017年1月9日正式发布。微信小程序也被称为微信应用号。不同于微信订阅号或公众号，微信小程序被赋予了应用程序的能力，它是一种不无需安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或者搜一下即可打开应用；也体现了“用完即走”的理念，用户不再需要关心是否安装太多应用的问题。应用将无处不在，随时随地可用，无需卸载。1.1.1 初识微信小程序在微信的“发现”

2、界面中，可以找到小程序的入口，如左图所示。小程序的界面和使用方法与App类似，右图所示是几个已发布的常用小程序界面。1.1.1 微信小程序的功能小程序提供的功能如下分享页功能分享对话功能线下扫码进入微信小程序功能挂起状态功能消息通知功能01OPTION02OPTION03OPTION04OPTION05OPTION小程序不提供的功能如下01OPTION02OPTION03OPTION04OPTION小程序没有集中入口，没有应用商店，用户可以通过搜索、扫描二维码、好友分享等多种途径进入微信小程序。小程序没有订阅关系，没有粉丝，只有访问量。小程序不能推送消息。小程序不能做游戏。1.1.3微信小程序

3、能否取代Appu 原生App一般要同时开发iOS和Android两版，而小程序只需要做一版。毫无疑问，这点是小程序最大的优势。从这个角度来看，小程序是“跨平台”的。u 在现阶段，开发一套完整逻辑的应用程序，小程序的开发效率是低于App的。小程序独立出了一个封闭的生态。u 小程序虽是跨平台的，但是缺乏成熟的组件，缺少统计、绘图组件，以前的echarts和hightcharts都无法使用。u 小程序不支持WebView，大量已被静态化好的HTML页面完全没办法在小程序上展示。u 小程序想取代Android和iOS还要走很长的路，是蓝海还是死海需要时间来验证。1.1.4微信小程序的发展历程2016年

4、1月9日 微信团队首次提出应用号的概念。2016年9月22日 微信公众平台对外发送小程序内测邀请，内侧名额200个。2016年11月3日 微信小程序对外公测，开发完成后可以提交审核，但公测期间不能发布。2016年12月28日 张小龙在微信公开课中解答外界对微信小程序的几大疑惑，包括没有应用商店、没有推送消息等。2016年12月30日 微信公众平台对外公告，上线的微信小程序最多可生成10 000个带参数的二维码。2017年1月9日 微信小程序正式上线。1.1.5微信小程序带来的机会微信小程序给很多想做程序员的人员提供了机会，因为它的门槛很低，不需要太难的技术。学习微信小程序开发，就可以成为一名“

5、小程序员”。例如，设计师、学生、创业、待业青年、网虫、策划人员、编辑、草根站长等都可以转做程序员。程序员设计师学生创业待业青年网虫策划人员编辑草根站长1.2 微信小程序开发准备1.3 微信小程序开发工具的使用1.4 沙场大练兵： Hello World 的创建目录contents1.1 微信小程序介绍1.2.1基础技术准备微信小程序自定义了一套语言，称为WXML微信标记语言，它的使用方法类似于HTML语言。另外，微信小程序还定义了自己的样式语言WXSS，它兼容了CSS样式，并做了扩展；使用JavaScript来进行业务处理，兼容了大部分JavaScript功能，但仍有一些功能无法使用，所以有一

6、定HTML、CSS、JavaScript技术功底的人学习微信小程序开发会容易很多。微信小程序WXML使用方法类似于HTML语言WXSS兼容CSS样式并做了扩展JavaScript兼容大部分JavaScript功能1.2.2开发准备Step 1注册微信开发者账号。Step 2下载微信小程序的开发工具。Step 3安装开发工具。1.2 微信小程序开发准备1.3 微信小程序开发工具的使用1.4 沙场大练兵： Hello World 的创建目录contents1.1 微信小程序介绍1.3.1创建项目在开发工具里单击“本地小程序项目”，进入下图所示界面。单击“添加项目”，进入“添加项目”界面，可以添加一

7、个新的项目，在这个界面里需要填写AppID、项目名称、项目目录。1.3.2 编辑进入到开发工具里，在左侧有7个导航模块：编辑、调试、项目、编译、后台、缓存和关闭。编辑模块用来进行微信小程序的开发，右侧是微信小程序的界面、项目的目录和打开的页面1.3.2 编辑在硬盘中打开文件的目录，可以新建4种文件：js、json、wxml、wxss，还可对文件进行重命名、删除和查找。1.3.2 编辑可以通过编辑区左边的模拟器，实时预览编辑的情况。修改 wxss、wxml 文件，会刷新当前page，修改js文件或者json文件，会重新编译小程序。1.3.2 编辑在代码编写过程中，开发工具提供自动补全功能。js

8、文件编辑时，会帮助开发者补全所有的API，并给出相关的注释解释；wxml 文件编辑时，会帮助开发者直接写出相关的标签；json 文件编辑时，会帮助开发者补全相关的配置，并给出实时的提示。1.3.3 常用快捷键lCtrl+S：保存文件lCtrl+， Ctrl+：代码行缩进lCtrl+Shift+， Ctrl+Shift+：折叠打开代码块lCtrl+C Ctrl+V：复制粘贴，如果没有选中任何文字则复制粘贴一行lShift+Alt+F：代码格式化lAlt+Up，Alt+Down：上下移动一行lShift+Alt+Up，Shift+Alt+Down：向上向下复制一行lCtrl+Shift+Enter

9、：在当前行上方插入一行lCtrl+Shift+F：全局搜索1.格式调整快捷键l Ctrl+End：移动到文件结尾l Ctrl+Home：移动到文件开头l Ctrl+i：选中当前行l Shift+End：选择从光标到行尾l Shift+Home：选择从行首到光标处l Ctrl+Shift+L：选中所有匹配l Ctrl+D：选中匹配l Ctrl+U：光标回退2.光标相关快捷键l Ctrl + ：隐藏侧边栏l Ctrl + m：打开或者隐藏模拟器3.界面相关快捷键1.3.4 调试Console窗口用来显示小程序的错误输出信息和调试代码。1.3.4 调试Sources窗口用于显示当前项目的脚本文件，在

10、 Sources中开发者看到的文件是经过处理之后的脚本文件。1.3.4 调试Network窗口用来观察发送的请求和调用文件的信息。1.3.4 调试Storage窗口用于显示当前项目使用 wx.setStorage 或者 wx.setStorageSync 后的数据存储情况。1.3.4 调试AppData窗口用于显示当前项目当前时刻的具体数据，实时地反馈项目的数据情况，可以在此处编辑数据，并将其及时地反馈到界面上。1.3.4 调试Wxml窗口用于帮助开发者开发 Wxml 转化后的界面。在这里可以看到真实的页面结构以及结构对应的 wxss 属性，同时可以修改对应的wxss 属性。1.3.5 项目在

11、项目模块里，可以看到微信小程序项目的相关信息，包括项目名称、AppID、项目文件的路径。有AppID的项目，可以在手机上预览微信小程序。1.3.6 编译编译模块可以对整个项目进行重新编译。1.3.7 前台/后台后台是指微信小程序从前台进入到后台。例如，在操作微信小程序的过程中，突然来电话，如果接电话，小程序就会从前台进入到后台，重新访问小程序时，又会从后台进入到前台。1.3.8 缓存缓存模块用来清除数据存储、文件存储、用户授权数据。1.2 微信小程序开发准备1.3 微信小程序开发工具的使用1.4 沙场大练兵： Hello World 的创建目录contents1.1 微信小程序介绍沙场大练兵/

12、在创建项目之后，开发工具会添加默认的目录和页面，在默认的页面上，可以看到有“Hello World”文字。Hello World 的创建2.9.1底部标签导航设计（1）在pages/index/index.js文件里，Page的data里提供数据源motto，data的数据可以动态地绑定到WXML页面里。1.4 沙场大练兵：Hello World 的创建2.9.1底部标签导航设计（2）在pages/index/index.wxml文件里，通过双大括号的（）方式，将motto绑定到页面里，motto对应的值就可以在页面里显示出来。1.4 沙场大练兵：Hello World 的创建2.9.1底部标签导航设计（3）在pages/index/index.wxss文件里，通过class的方式给Hello World添加样式，距顶部的高度为200px。1.4 沙场大练兵：Hello World 的创建