《（本科）第2单元-微信小程序开发基础ppt课件.ppt》由会员分享，可在线阅读，更多相关《（本科）第2单元-微信小程序开发基础ppt课件.ppt（84页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、课程主讲人：第2单元-微信小程序开发基础教学资源可联系作者：实现技能目标实现技能目标：设置微信小程序参数微信小城程序生命周期制作微信小程序导航菜单微信小程序页面跳转调试微信小程序微信小程序页面数据绑定 前面学习了微信小程序应用、创建了一个微信小程序项目，了解微信小程序的基本结构，本单元对小程序目录、项目设置进行详细介绍，重点学习微信小程序开发必备基础知识和基本技能。 一般应用程序软件的应用架构包括数据层、业务逻辑层、服务层、控制层、展示层、用户等多个层次。但微信小程序只是一套软件系统的展示层(软件开发中所说的前端程序)，主要用来展示系统的信息。微信小程序在实际应用中通常需要有数据层、业务逻辑层
2、、服务层、控制层等这些常说的后端程序为它提供支持，才能实现传统应用软件系统所需要功能服务。 一个微信小程序项目的主体部分有5个文件app.js、app.json、app.wxss、sitemap.json，他们文件名也是固定的。app.js是微信小程序的主逻辑文件，主要用于注册小程序；app.json是微信小程序的主配置文件，用来对小程序进行全局配置；app.wxss是微信小程序的主样式配置文件，与传统网页制作css文件作用相同，用来配置页面样式；是项目配置文件，在工具上做的任何配置都会写入到这个文件，开发项目时的个性化配置，其中会包括编辑器的颜色、代码上传时自动压缩等配置都会写入到这个文件；
3、sitemap.json配置小程序及其页面是否允许被微信索引，微信现已开放小程序内搜索，小程序页面将可能展示在微信搜索等多个公开场景中，当开发者允许微信索引时，微信会通过爬虫的形式，为小程序的页面内容建立索引，若小程序中存在不适合展示信息如用户个人信息、商业秘密等内容，不想被微信索引到，可以关闭页面收录。主体文件如图2-A所示。图2-A 微信小程序每个页面文件一般由4个文件构成，这4文件的主文件名相同，并以4种不同拓展名来区分，比如index.js、index.wxml、index.wxss、index.json。.js文件是页面的逻辑文件，每个页面必须有个.js文件，在里面编写javaScr
4、ipt代码控制页面的逻辑；.wxml文件是页面的描述文件，每个页面也必须有一个.wxml文件，在里面用户设计页面的布局，进行数据绑定等操作；.wxss是页面样式控制文件，如果页面样式在app.wxss全局样式定义了，在页面样式中就可以省略重复定义；.json是页面配置文件。页面文件如图2-B所示。图2-B 小程序最近很热门，越来越受欢迎，小明同学了解到很多之前PC端的应用现在都可以搬到手机、平板等移动端完成，认识到学好小程序应用与开发很有必要。要学好小程序，首先认识小程序框架与小程序参数设置。下面创建一个微信小程序，设置启动页面、文本的输出以及设置页面的样式，并认识全局样式设置与局部页面样式设
5、置的异同点，效果如图2-1-1所示。图2-1-1 步骤1、新建一个项目，输入项目的信息，项目名称等，如图2-1-2所示。图2-1-2步骤2、调试运行新建的微信小程序,显示用户的头像、Hello World等信息，如图2-1-3所示。图2-1-3步骤3、打开微信小程序全局配置文件app.json，将小程序启动页面修改为Pages/logs/logs，点击快捷键Ctrl+S保存，项目会把logs页面放在最前面显示，如图2-1-4所示。图2-1-4图2-1-5步骤4、在pages目录下新建一个目录命名为me，接着再新建一个文件me.wxml，如图2-1-5所示。步骤5、在me.wxml页面中输入如下
6、内容，如图2-1-6所示。图2-1-6 me.wxml页面内容如下：这是我的页面姓名：张三性别：男电话：22336699步骤6、若要执行me.wxml页面，打开微信小程序全局配置文件app.json，将小程序启动页面设置为Pages/me/me，把me放在最前面，并点击Ctrl+S快捷键保存项目；项目并且会自动生成了me.js、me.json、me.wxss三个文件，如图2-1-7所示。图2-1-7图2-1-7步骤7、设置页面的背景颜色。打开全局样式设置文件app.wxss，修改此文件对所有页面的样式起作用，设置pagebackground-color:aquamarine;，如图2-1-8所
7、示。图2-1-8步骤8、也可以在me页面的样式文件me.wxss进行设置，me.wxss样式设置只对me.wxml起作用，在此文件中设置pagebackground-color:blanchedalmond;，保存项目之后，接着预览me.wxml页面效果时，可知道me.wxss的背景颜色设置覆盖了app.wxss设置的效果，如图2-1-9所示。图2-1-9步骤9、保存项目。1小程序开发框架的目标是通过尽可能简单、高效的方式让开发者可以在微信中开发出具有原生 APP 体验与功能的服务。整个小程序框架系统分为两部分：逻辑层（App Service）和 视图层（View）。小程序提供了自己的视图层描
8、述语言 WXML 和 WXSS，以及基于 JavaScript 的逻辑层框架，并在视图层与逻辑层间提供了数据传输和事件系统，让开发者能够专注于数据与逻辑。2. 页面管理。框架管理了整个小程序的页面路由，可以做到页面间的无缝切换，并给以页面完整的生命周期。开发者需要做的只是将页面的数据、方法、生命周期函数编写到框架中，其他的一切复杂的操作都交由框架处理。3.基础组件。框架提供了一套基础的组件，这些组件自带微信风格的样式以及特殊的逻辑，开发者可以通过组合基础组件，创建出功能强大的微信小程序 。4.丰富的API。框架提供丰富的微信原生 API，通过API可以方便地调起微信提供的功能，如获取用户信息，
9、本地存储，支付功能，与后台系统交互等。5.页面设置。app.wxsss、app.json是全局配置，对所有页面起作用，me.wxss是局部页面配置，只对本页面起作用，如图2-1-10所示。图2-1-101、创建一个微信小程序，新建一个页面me.wxml，编辑此页面，使得其调试运行时显示效果如图2-1-11所示。图2-1-11me.wxml主要代码如下：个人介绍姓名：李小明学号：XXX手机：13923266XXXQQ：617282XXX微信：gdzzpingme.wxss文件代码如下：page background-color:rgb(148, 151, 199);2、新建一个小程序项目，显示“
10、德意电器”公司信息，包括公司名称、联系人、联系电话、公司地址等信息，字体颜色属性color为白色、页面背景黑色，如图2-1-12所示。图2-1-12me.wxml主要代码如下：公司介绍公司名称：德意电器有限公司联系人：陈经理联系电话：26268866公司地址：广东省广州市人民中路me.wxss文件代码如下：page background-color:rgb(55, 55, 55); color:white;3、新建一个小程序项目，显示培训机构“七天英语”的信息。（1）显示联系老师、联系电话、学校地址等信息。字体颜色、页面背景颜色自定，搭配适当即可，如图2-1-13所示。图2-1-13（2）将素
11、材文件“english.bmp”放置到项目中页面文件夹，接着在页面中使用组件，并设置组件的src属性指引图片的路径以显示图像，如图2-1-14所示。图2-1-14about.wxml主要代码如下：学校介绍联系老师：Miss Lili联系电话：139232288XX学校地址：文明西路100号about.wxss文件代码如下：page background-color:rgba(131, 122, 122, 0.178); color:chocolate; 目前很多微信小程序底部都有导航栏“菜单”，根据导航栏“菜单”可以实现功能模块切换或页面跳转。所谓tabBar，是指在微信小程序底部有一个可以切
12、换页面的tab栏。本案例的小程序底部可以有1个tabBar，此tabBar目前有2个tab，其中一个图标颜色显示比较显眼的是当前激活状态的“菜单”，另外一个图标比较暗淡是未激活状态“菜单”；单击其中一个tab，可以激活对应tab，并激活显示相应的页面。小明根据微信小程序开发手册以学习制作tabBar导航栏“菜单”，制作效果如图2-2-1所示。图2-2-1index.png、index_sel.png、log.png、log_sel.png。步骤1、新建一个项目，输入项目的信息，项目名称，如图2-2-2所示。图2-2-2步骤2、打开新建的项目文件，接着查看小程序公共设置文件app.json，如图
13、2-2-3所示。图2-2-3步骤3、打开浏览器，输入地址，打开微信公众平台网站，找到“小程序/小程序开发文档”，如图2-2-4所示。图2-2-4步骤4、打开小程序开发文档，找到开发文档里“全局配置/小程序配置/配置示例”，如图2-2-5所示。图2-2-5步骤5、接着在图2-2-5中点击“小程序全局配置”，打开app.json全局配置项中关于tabBar说明，如图2-3-2所示。图2-2-6步骤6、在图2-2-6中，点击tabBar，打开关于tabBar详细说明，其中list属性是设置导航栏菜单的列表，从开发文档可知菜单列表最少2个，最多5个，如图2-2-7所示。图2-2-7步骤7、接着往下查看
14、tabBar组件，关于list属性设置，list属性可以设置pagePath菜单项调用页面路径、text设置菜单项显示文字，iconPath菜单项图标路径，selectedIconPath设置选中菜单项时显示图标途径，如图2-2-8所示。图2-2-8步骤8、再接着往下查看app.json配置示例，示例中查看关于tabBar的设置，选中且复制示例中关于tabBar设置的示例代码，如图2-2-9所示。图2-2-9代码如下：tabBar: list: pagePath: pages/index/index, text: 首页 , pagePath: pages/logs/logs, text: 日志
15、 步骤9、将开发文档中配置示例中关于tabBar代码复制、粘贴到本项目app.json文件中，保存项目后，小程序底部tabBar导航栏菜单效果则显示出来，如图2-2-10所示。图2-2-10步骤10、设置导航栏菜单项选中时颜色。根据图2-2-7显示，tabBar除了有list属性项，还有color、selectedColor等属性项，下面设置tabBar菜单项的字体颜色color属性值为“#000000”、选中菜单项时字体颜色selectedColor属性值为“#00BFFF” 、导航栏背景颜色backgroundColor的属性值为“#EEEEEE”，如图2-2-11所示。图2-2-11步骤
16、11、设置导航栏“首页”、“日志”菜单项选中、未选中时图标（1）将项目需要使用到的素材放置到项目文件夹pages下，如图2-2-12所示。图2-2-12（2）在app.json设置菜单列表中，各个菜单项的未选中、选中时的图标iconPath、selectedIconPath，如图2-2-13所示。图2-2-13图2-2-131.在tabBar中有7个属性可以设置。color设置tab未选中时字体颜色，使用十六进制的颜色值，比如#FFFFFF;selectedColor设置tab选中时字体颜色；borderStyle设置tabBar上边框的颜色，目前支持设置为“black或white”；back
17、groundColor设置tab的背景颜色；list设置tab列表项的数组，最少2个tab “菜单项”，最多5个tab“菜单项”；position设置tabBar的位置；custom属性自定义tabBar。2. 在设置tabBar中，list数组属性，每一个项又是一个对象，list数组有4个属性值分别是显示文字text、菜单项对应的页面路径pagePath、未选中菜单项时显示的图标iconPath、选中菜单项时显示的图标selectedIconPath。其中iconPath、selectedIconPath图片大小限制为40KB。3.导航栏tabBar属性、list选项中主要属性表示含义如图2
18、-2-14所示图2-2-144.如何快速搜索、下载、定制小程序图标方法。（1）可以登录阿里巴巴矢量图标库搜索所需要的图标，点击下载即可,如图2-2-15所示。图2-2-15（2）还可以定制矢量图标，如图2-2-16所示。图2-2-161、参照案例，创建一个微信小程序，使用tabBar制作包含3个菜单“首页”、“订单”、“我”的导航栏，使得其调试运行时显示效果如图2-2-17所示。图2-1-172、创建一个微信小程序，使用tabBar制作包含4个菜单项“首页”、“通知公告”、“通讯录”、“我”的导航栏；图标利用教材中提供的素材或者在阿里巴巴矢量图库下载，制作小程序完成后显示的效果如图2-2-18
19、所示。图2-2-183、创建一个微信小程序，从阿里巴巴矢量图库下载菜单图标，制作“顺丰速运”小程序的导航菜单效果。并设置color未选中菜单项时字体颜色为“#F00”、设置selectedColor选中菜单项时字体颜色为“#FFF”。如图2-2-19所示。图2-2-194、创建一个微信小程序，从阿里巴巴矢量图库下载菜单图标，制作“小打卡”小程序的导航菜单效果。并设置color未选中菜单项时字体颜色为“#EEE”、设置selectedColor选中菜单项时字体颜色为“#FFF”。如图2-2-20所示。图2-2-20 小明同学最近在学习小程序，可是所编写的小程序经常不是这里出问题就是那里出问题，每
20、当碰到小程序达不到老师要求制作的效果时就懵了，小程序开发高手告诉他要熟悉小程序项目运行过程，掌握小程序的生命周期。下面小明同学，创建一个微信小程序，研究小程序的生命周期，熟悉微信小程序的运行过程，效果如图2-3-1所示。图2-3-1步骤1、新建一个项目，输入项目的信息，项目名称，如图2-3-2所示。图2-3-2步骤2、打开新建的项目文件，接着调试、运行初始项目效果，可以看到Console面板显示输出的调试信息为空，如图2-3-3所示。图2-3-3步骤3、打开页面index.js，清空此文件附带的代码，以便下面实验，如图2-3-4所示。图2-3-4步骤4、在index.js页面，使用page方法
21、初始化页面，如图2-3-5所示。图2-3-5步骤5、使用page函数初始化index.js页面，则会自动生成页面生命周期函数控制代码，如图2-3-6所示。图2-3-6步骤6、在onload方法中，输入页面加载时执行的代码console.log，如图2-3-7所示。图2-3-7步骤7、保存，调试执行程序，在Console调试面板上可以看到，当页面加载时首先会执行onload函数，并执行onload函数里面的代码，如图2-3-8所示。图2-3-8步骤8、同理，在onReady、onShow、onHide、onUnload输入相应的代码，如图2-3-9所示。图2-3-9步骤9、按下快捷键Ctrl+S
22、保存调试运行小程序，在console面板输出运行的结果，可以看到小程序在打开index.wxml页面时，在index.js页面中首先执行onload加载函数、接着执行onShow显示函数、再直接onReady程序就绪函数，如图2-3-10所示。图2-3-10步骤10、当点击微信小程序界面右上角关闭图标 时，小程序就切换到“后台”运行，当页面切换到后台模式运行时，则会执行OnHide函数，如图2-3-11所示。图2-3-11步骤11、当点击工具栏中“切前台”按钮时，即当页面切换到前台模式运行，则会执行OnShow函数，如图2-3-12所示。图2-3-12步骤12、在app.json文件中加入下面
23、关于导航栏代码，如图2-3-13所示。图2-3-13在app.json文件中加上导航代码如下： tabBar: list: pagePath: pages/index/index, text: 首页 , pagePath: pages/logs/logs, text: 日志 ,步骤13、调试运行小程序，在小程序底部点击“首页”、“日志”菜单项切换页面时可以观察在Console面板中输出信息内容的变化，如图2-3-14所示。图2-3-141.小程序页面生命周期（1）小程序注册完成后，加载页面，触发onLoad方法。（2）页面载入后触发onShow方法，显示页面。（3）首次显示页面，会触发onRe
24、ady方法，渲染页面元素和样式，一个页面只会调用一次。（4）当小程序后台运行或跳转到其他页面时，触发onHide方法。（5）当小程序有后台进入到前台运行或重新进入页面时，触发onShow方法。（6）关于page生命周期详细信息可以在微信小程序官网查阅开发文档。2.各种面板，主要面板有：Console、Sources、Network、Storage、AppData、Wxml等,如图2-3-15所示。图2-3-15(1) console面板，是控制台，用于开发者直接在此输入代码并调试，显示小程序的执行结果，或错误输出等。(2) Sources面板，源文件调试信息页用于显示当前项目的脚本文件。(3)
25、 Network面板，网络调试信息页用于观察和显示每个元素请求信息和套接字（socket）状态等网络相关的详细信息。(4) Storage面板，数据存储信息页用于显示当前项目使用存储API（wx.setStorage、wx.setStorageSync）接口的数据存储情况。 (5) AppData面板，用于调试显示当前小程序项目此时此刻的应用具体数据，实时的回显项目数据的调整情况。(6)Wxml面板，用于帮助开发者调试WXML转化后的界面1、参照案例，创建一个微信小程序，打开页面index.js，清空此文件附带的代码，使用page函数初始化页面，设置index.js页面的生命周期onLoad、
26、Onready、OnShow、OnHide函数，当执行相应生命周期函数时输入对应的提示信息，使得其调试运行时显示效果如图2-3-16所示。图2-1-16Index.js主要代码如下：Page( /* * 生命周期函数-监听页面加载 */ onLoad: function (options) console.log(index加载); , /* * 生命周期函数-监听页面初次渲染完成 */ onReady: function () console.log(index渲染完成); , /* * 生命周期函数-监听页面显示 */ onShow: function () console.log(ind
27、ex显示); , /* * 生命周期函数-监听页面隐藏 */ onHide: function () console.log(index隐藏); )2、参照案例，创建一个微信小程序，按下面要求做页面生命周期实验。（1）在index.js文件中找到onLoad函数，加一行调试输出信息命令“console.log(index已加载);”，使得其调试运行时显示效果如图2-3-17所示。图2-3-17（2）在logs.js文件中找到onLoad函数，加一行调试输出信息命令“console.log(logs已加载);”，使得其调试运行时显示效果如图2-3-18所示。(3) 在app.json文件中加入下面导航栏菜单的代码，实现页面切换。图2-3-18 通过本单元学习，主要了学习微信小程序的框架、应用项目参数设置、页面生命周期、导航菜单设置、页面跳转、调试与排除编写小程序过程中的故障、以及学习了如何去查看微信小程序官方开发手册等。为初学者学好微信小程序应用与开发打下坚实的基础。 谢谢大家谢谢大家