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

《微信小程序开发图解案例第1章课件.pptx》由会员分享，可在线阅读，更多相关《微信小程序开发图解案例第1章课件.pptx（32页珍藏版）》请在三一办公上搜索。

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

2、在微信的“发现”界面中，可以找到小程序的入口，如左图所示。小程序的界面和使用方法与App类似，右图所示是几个已发布的常用小程序界面。,1.1.1 微信小程序的功能,小程序提供的功能如下分享页功能分享对话功能线下扫码进入微信小程序功能挂起状态功能消息通知功能,小程序不提供的功能如下,小程序没有集中入口，没有应用商店，用户可以通过搜索、扫描二维码、好友分享等多种途径进入微信小程序。小程序没有订阅关系，没有粉丝，只有访问量。小程序不能推送消息。小程序不能做游戏。,1.1.3微信小程序能否取代App,原生App一般要同时开发iOS和Android两版，而小程序只需要做一版。毫无疑问，这点是小程序最大的

3、优势。从这个角度来看，小程序是“跨平台”的。在现阶段，开发一套完整逻辑的应用程序，小程序的开发效率是低于App的。小程序独立出了一个封闭的生态。小程序虽是跨平台的，但是缺乏成熟的组件，缺少统计、绘图组件，以前的echarts和hightcharts都无法使用。小程序不支持WebView，大量已被静态化好的HTML页面完全没办法在小程序上展示。小程序想取代Android和iOS还要走很长的路，是蓝海还是死海需要时间来验证。,1.1.4微信小程序的发展历程,1.1.5微信小程序带来的机会,微信小程序给很多想做程序员的人员提供了机会，因为它的门槛很低，不需要太难的技术。学习微信小程序开发，就可以成为

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

5、ript技术功底的人学习微信小程序开发会容易很多。,1.2.2开发准备,Step 1,注册微信开发者账号。,Step 2,下载微信小程序的开发工具。,Step 3,安装开发工具。,1.2 微信小程序开发准备,1.3 微信小程序开发工具的使用,1.4 沙场大练兵：Hello World 的创建,目录,contents,1.1 微信小程序介绍,1.3.1创建项目,在开发工具里单击“本地小程序项目”，进入下图所示界面。,单击“添加项目”，进入“添加项目”界面，可以添加一个新的项目，在这个界面里需要填写AppID、项目名称、项目目录。,1.3.2 编辑,进入到开发工具里，在左侧有7个导航模块：编辑、调

6、试、项目、编译、后台、缓存和关闭。编辑模块用来进行微信小程序的开发，右侧是微信小程序的界面、项目的目录和打开的页面,1.3.2 编辑,在硬盘中打开文件的目录，可以新建4种文件：js、json、wxml、wxss，还可对文件进行重命名、删除和查找。,1.3.2 编辑,可以通过编辑区左边的模拟器，实时预览编辑的情况。修改 wxss、wxml 文件，会刷新当前page，修改js文件或者json文件，会重新编译小程序。,1.3.2 编辑,在代码编写过程中，开发工具提供自动补全功能。js 文件编辑时，会帮助开发者补全所有的API，并给出相关的注释解释；wxml 文件编辑时，会帮助开发者直接写出相关的标签

7、；json 文件编辑时，会帮助开发者补全相关的配置，并给出实时的提示。,1.3.3 常用快捷键,Ctrl+S：保存文件Ctrl+，Ctrl+：代码行缩进Ctrl+Shift+，Ctrl+Shift+：折叠打开代码块Ctrl+C Ctrl+V：复制粘贴，如果没有选中任何文字则复制粘贴一行Shift+Alt+F：代码格式化Alt+Up，Alt+Down：上下移动一行Shift+Alt+Up，Shift+Alt+Down：向上向下复制一行Ctrl+Shift+Enter：在当前行上方插入一行Ctrl+Shift+F：全局搜索,1.格式调整快捷键,Ctrl+End：移动到文件结尾Ctrl+Home：移

8、动到文件开头Ctrl+i：选中当前行Shift+End：选择从光标到行尾Shift+Home：选择从行首到光标处Ctrl+Shift+L：选中所有匹配Ctrl+D：选中匹配Ctrl+U：光标回退,2.光标相关快捷键,Ctrl+：隐藏侧边栏Ctrl+m：打开或者隐藏模拟器,3.界面相关快捷键,1.3.4 调试,Console窗口用来显示小程序的错误输出信息和调试代码。,1.3.4 调试,Sources窗口用于显示当前项目的脚本文件，在 Sources中开发者看到的文件是经过处理之后的脚本文件。,1.3.4 调试,Network窗口用来观察发送的请求和调用文件的信息。,1.3.4 调试,Stora

9、ge窗口用于显示当前项目使用 wx.setStorage 或者 wx.setStorageSync 后的数据存储情况。,1.3.4 调试,AppData窗口用于显示当前项目当前时刻的具体数据，实时地反馈项目的数据情况，可以在此处编辑数据，并将其及时地反馈到界面上。,1.3.4 调试,Wxml窗口用于帮助开发者开发 Wxml 转化后的界面。在这里可以看到真实的页面结构以及结构对应的 wxss 属性，同时可以修改对应的wxss 属性。,1.3.5 项目,在项目模块里，可以看到微信小程序项目的相关信息，包括项目名称、AppID、项目文件的路径。有AppID的项目，可以在手机上预览微信小程序。,1.3

10、.6 编译,编译模块可以对整个项目进行重新编译。,1.3.7 前台/后台,后台是指微信小程序从前台进入到后台。例如，在操作微信小程序的过程中，突然来电话，如果接电话，小程序就会从前台进入到后台，重新访问小程序时，又会从后台进入到前台。,1.3.8 缓存,缓存模块用来清除数据存储、文件存储、用户授权数据。,1.2 微信小程序开发准备,1.3 微信小程序开发工具的使用,1.4 沙场大练兵：Hello World 的创建,目录,contents,1.1 微信小程序介绍,沙场大练兵/,在创建项目之后，开发工具会添加默认的目录和页面，在默认的页面上，可以看到有“Hello World”文字。,Hello

11、 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 的创建,