微信小程序基础课件汇总整本书电子教案全套课件完整版ppt最新教学教程最全课件.pptx
《微信小程序基础课件汇总整本书电子教案全套课件完整版ppt最新教学教程最全课件.pptx》由会员分享,可在线阅读,更多相关《微信小程序基础课件汇总整本书电子教案全套课件完整版ppt最新教学教程最全课件.pptx(328页珍藏版)》请在淘文阁 - 分享文档赚钱的网站上搜索。
1、第第1章章微信小程序基微信小程序基础微信小程序开发教程微信小程序开发教程目录1.1 1.1 微信小程序介绍微信小程序介绍1.2 1.2 微信小程序开发工具的使用微信小程序开发工具的使用1.3 1.3 创建一个微信小程序项目创建一个微信小程序项目第1章 微信小程序基础教学目标:教学目标:本章将会介绍微信小程序的基本概念和特征。并针对开发环境的搭建和开发工具的使用详细讲解。1.1.1 什么是微信小程序微信小程序这个词可以分解为“微信”和“小程序”两部分:(1)其中“微信”可以理解为“微信中的”,指的是小程序的执行环境;当然微信在提供执行环境的同时也延长了用户使用微信的时间。(2)“小程序”是说它首
2、先是程序,然后具备轻便的特征。小程序并不像其他应用那样,它不需要安装,而是通过扫描二维码等打开后直接执行;用完以后也不需要卸载。这就是所谓用完即走的原则。总之,微信小程序是一种全新的连接用户与服务的方式,它可以在微信内被便捷地获取和传播,同时具有出色的使用体验。微信微信小程序小程序发展历程微信小程序,简称小程序,英文名MiniProgram,它是由微信之父张小龙在2017年1月9日正式发布的“轻”应用,它不需要下载安装专门的APP,只需要通过微信的载体,就可以轻松实现APP的功能。全面开放申请后,主体类型为企业、政府、媒体、其他组织或个人的开发者,均可申请注册小程序。小程序、订阅号、服务号、企
3、业号是并行的体系。2016年1月9日,微信团队内部提出“应用号”设想;2016年1月11日,张小龙在微信公开课上阐述微信的四大价值观,并首次提出“以服务为主”开发一个新的形态应用号;2016年9月22日,微信公众平台对外发送“小程序”内测邀请,首批内测名额200个;2016年11月3日,微信小程序对外开放公测,开发者可以登录微信公众平台申请,开发完成后可以提交审核,但公测期间不能发布;2016年12月28日,张小龙在微信公开课上第一次完整阐述了小程序,并明确小程序在微信没有入口、没有小程序商店、没有订阅关系、不能推送消息、可以分享到聊天和群等业界关心的问题;2016年12月30日,微信公众平台
4、对外公告,上线的微信小程序最多可以生成10000个带参数的二维码;2017年1月9日,微信小程序正式上线。1.1.1 什么是微信小程序微信小程序拥有大量的微信用户群体。小程序和公众号一样背靠微信,本身自带流量,而且微信小程序的入口多;在微信中通过搜索关键字、扫描二维码、群分享、好友分享等途径来实现打开一个微信小程序。微信小程序可以开发游戏,即微信小游戏,它是微信小程序的一个类目,使用相同的开发工具开发。1.1.2 注册开发者账号在创建自己的微信小程序之前,需要注册小程序账号,这样才能进行代码开发和提交工作。其注册步骤如下:(1)使用浏览器打开微信公众平台网站https:/,如图1-1所示,单击
5、右上角“立即注册”链接进行注册。微信公众平台微信公众平台是腾讯在微信APP内推出的针对个人、企业和组织提供业务服务与用户管理能力的全新服务平台,微信公众平台的应用类型包括:服务号订阅号小程序企业微信微信公众号是应用者在微信公众平台注册的一个账号,账号开通后,就可以在微信公众号里发视频、图片、文字等推销商品或分享生活经验等。通常所说的微信公众号包括服务号和订阅号。微信公众平台1订阅号订阅号是公众平台的一种账号类型,旨在为媒体和个人提供一种新的信息传播方式,主要偏向为用户提供资讯、消息(类似报纸杂志)。订阅号适用于个人、媒体、企业、政府或其他组织,认证前后每天可群发1条消息。其展现效果如图所示。发
6、给订阅用户(粉丝)的消息,将会显示在对方的“订阅号消息”文件夹中。如果想用公众平台简单发发消息,做宣传推广服务,建议选择订阅号。微信公众平台2服务号服务号是公众平台的一种账号类型,旨在为企业和组织提供更强大的业务服务与用户管理能力,大多为用户提供服务类交互(功能类似12315、114,提供服务查询)。服务号适用于媒体、企业、政府或其他组织,认证前后每个月内都可以发送4条消息。其展现效果如图所示。发给订阅用户(粉丝)的消息,会显示在对方的聊天列表中。如果想用公众平台进行商品销售,建议选择服务号,后续可认证再申请微信支付商户。微信公众平台3企业微信企业微信是一个全平台企业办公工具,它提供与微信一致
7、的沟通体验,为企业员工提供最基础和最实用的办公服务,并加入贴合办公场景的特色功能、轻OA工具,合理化区分工作与生活,提升工作效率。2018年6月29日企业微信2.0版本发布,正式与企业号合并。其展现效果如图所示微信公众平台4小程序小程序是一种不需要下载安装即可运行在微信环境中的应用,它实现了应用“触手可及”的梦想,用户扫一扫或者搜一下即可。简单说,就是把手机上的APP搬到微信里面,不需要下载安装就可以直接使用。用户可以在微信的“发现”栏找到“小程序”的入口,从该入口可以打开需要的小程序1.1.2 注册开发者账号(2)根据图1-2中页面提示,在选择注册微信公众平台的账号类型为“小程序”,即可开始
8、账号注册。(3)小程序注册页面包含3个填写页面,即帐号信息,邮箱激活、信息登记。如图1-3所示,完成注册后可以使用刚才的注册账号登录进入小程序管理页面,如图1-4所示,可以进行小程序信息完善和管理工作。例如填写小程序基本信息,包括名称、头像、介绍及服务范围等。1.2 微信小程序开发工具的使用获取微信小程序获取微信小程序AppIDAppID登录https:/,就可以在微信小程序管理页面的“开发”“开发设置”中,查看到微信小程序的AppID,如图1-4所示。注意不可直接使用服务号或订阅号的AppID。安装微信开发者工具安装微信开发者工具1.2 微信小程序开发工具的使用获取微信小程序获取微信小程序A
9、ppIDAppID微信开发者工具官方下载地址:https:/ 微信小程序开发工具的使用创建小程序项目成功后,进入如图1.16所示的微信开发者工具主界面。开发者工具主界面,从上到下,从左到右,分别为包含菜单栏、工具栏、模拟器窗口、编辑器窗口(含目录结构窗口和代码窗口)和调试器窗口。1.2 微信小程序开发工具的使用微信小程序发布流程微信小程序发布流程完成小程序开发后,提交代码至微信团队审核,审核通过后即可发布(公测期间不能发布)。(1)预览单击开发者工具顶部操作栏的预览按钮,会在界面上显示一个二维码。使用当前小程序开发者的微信扫码即可看到小程序在手机客户端上的真实表现。(2)上传代码单击开发者工具
10、菜单的“工具”“上传”命令,填写版本号以及项目备注,上传成功之后,登录小程序管理后台,在“管理”“版本管理”就可以找到刚提交上传的版本了。(3)可以将这个版本设置“体验版”或者“提交审核”。(4)发布审核通过之后,管理员的微信中会收到小程序通过审核的通知,此时登录小程序管理后台,在“开发管理”“审核版本”中可以看到通过审核的版本。选择单击发布,即可发布小程序。(5)运营数据登录小程序管理后台“统计”,单击相应的tab选项卡可以看到相关的数据。1.3 创建一个微信小程序项目启动微信开发者工具创建一个微信小程序项目,单击菜单界面“项目”“新建项目”,如图1-8中选择小程序项目类型为“小程序”,同时
11、填写项目名称(如井字棋)、项目文件存放的路径和APPID。其中APPID就是用户注册时的小程序ID,见1.2.1节。如果没有APPID,可以使用测试号。但发布时需要使用正式的小程序ID。小程序项目类型为“小程序小程序”“小游小游戏”“代代码片段片段”1.3 创建一个微信小程序项目小程序项目类型为“小程序小程序”“小游小游戏”“代代码片段片段”其中“代码片段”是一种可分享的小项目,可用于分享小程序和小游戏的开发经验、展示组件和API的使用、复现开发问题等等。分享代码片段会得到一个链接,所有拥有此分享链接的人可以在工具中导入此代码片段。他们和普通“小程序”项目一样可以直接运行,主要区别在于代码片段
12、体积小且可以被分享。“小游戏”是小程序的一个类目,小游戏是微信开放给小程序的更多的能力,让小程序开发者有了开发游戏的能力。“小游戏”开发将在第8章学习。初学者这里选择小程序项目类型为“小程序”。1.3 创建一个微信小程序项目官方默认的小程序项目的目录结构及文件如图所示,根目录下app.js、app,json、app.wxss和project.config.json四个文件的作用分别是用于处理小程序的业务逻辑、对小程序的页面路径等相关属性进行全局配置、定义小程序页面的全局样式和保存小程序项目的配置信息。本章小结本章介绍了微信平台的订阅号、服务号、企业微信和小程序的应用场景,详细阐述了小程序的基本
13、架构和特性,介绍了小程序开发工具的安装使用方法和创建小程序的步骤,为读者后续的微信小程序开发打下了基础。第2章 JAVASCRIPT语法基础微信小程序开发教程微信小程序开发教程目录2.1 2.1 在在HTMLHTML中使用中使用JavaScriptJavaScript语言语言2.2 2.2 基本语法基本语法2.3 2.3 常用控制语句常用控制语句2.3.1 2.3.1 选择结构语句选择结构语句2.3.2 2.3.2 循环结构语句循环结构语句2.4 2.4 函数函数2.5 JavaScript2.5 JavaScript面向对象程序设计面向对象程序设计2.6 JavaScript2.6 Java
14、Script内置对象内置对象2.7 ES62.7 ES6简介简介第2章 JAVASCRIPT语法基础教学目标:教学目标:本章将会介绍JavaScript的核心语法。掌握JavaScript的面向对象编程思想以及有关对象的基本概念初步掌握创建和使用自定义的类和对象。了解ES6的语法。2.1 JAVASCRIPT语言概述JavaScript主要用于以下三个领域:浏览器:得到所有浏览器的支持,只要有网页的地方就有JavaScript。服务器:借助node.js运行环境,JavaScript已经成为很多开发者进行后端开发的选择之一。微信小程序:小程序逻辑开发的语言。小程序逻辑开发的语言。标准ECMAS
15、cript通常缩写为ES。在微信小程序中通常使用ES5和ES6版本。微信微信小程序小程序2.1.2 运行JAVASCRIPT语言1在浏览器中运行在浏览器中运行在HTML文件中使用JavaScript脚本时,JavaScript代码需要出现在和和之间。【例2-1】一个简单的在HTML文件中使用JavaScript脚本实例。另外一种插入JavaScript程序的方法是把JavaScript代码写到一个.js文件当中,然后在HTML文件中引用该js文件,方法如下:2.1.2 运行JAVASCRIPT语言JavaScript是一种解释性编程语言,其源代码在发往客户端执行之前不需经过编译,而是将文本格式
16、的字符代码发送给客户端由浏览器解释执行。注意与Java的区别,Java的源代码在传递到客户端执行之前,必须经过编译,因而客户端上必须具有相应平台上的解释器,它可以通过解释器实现独立于某个特定的平台编译代码的束缚。2.1.2 运行JAVASCRIPT语言2在服务器中运行在服务器中运行搭建node运行环境后,通过命令行执行JS文件。例如:nodeoutput.js3在微信小程序中运行在微信小程序中运行在微信小程序中,JavaScript需要单独保存在JS文件中,即外联式。小程序框架对此进行了优化,只要按目录规范保证JS文件与WXML文件同名,则无须使用引入即可使用。在微信开发工具中,单击conso
17、le选项卡可以查看JS代码文件中console.log()输出的调试信息。例如:variNum=10;iNum*=2;console.log(iNum);CONSOLE选项卡例如:variNum=10;iNum*=2;console.log(iNum);2.2 基本语法2.2.1 数据类型数据类型JavaScript包含下面5种原始数据类型。p1Undefined :即为未定义类型,用于不存在或者没有被赋初始值的变量或对象的属性p2Null:作用是表明数据空缺的值。一般将Undefined型和Null型等同对待。p3Boolean :取值为ture或false,分别表示逻辑真和假p4Strin
18、g:字符型数据。JavaScript不区分单个字符和字符串。用双引号或单引号引起来。varnameA=Tom;varnameB=Tom;p5Number:即为数值型数据,包括整数型和浮点型。varmyDataA=8;varmyDataB=6.3;pJavaScript脚本语言除了支持上述基本数据类型外,也支持组合类型,如数组Array和对象Object等。2.2 基本语法2.2.2 2.2.2 常量和变量常量和变量1常量常量是内存中用于保存固定值的单元,在程序中常量的值不能发生改变。2变量变量是内存中命名的存储位置,可以在程序中设置和修改变量的值。在JavaScript中,可以使用var关键字
19、声明变量。2.2.3 注释注释JavaScript支持2种类型的注释字符。1/2/*.*/2.2 基本语法2.2.4 运算符和表达式运算符和表达式1算术运算符算术运算符算术运算符可以实现数学运行,包括加(+)、减(-)、乘(*)、除(/)和求余(%)。2赋值运算符赋值运算符JavaScript脚本语言的赋值运算符包含“=”、“+=”、“=”、“*=”、“/=”、“%=”、“&=”、“=”等,如表2-1所示。3关系运算符关系运算符JavaScript脚本语言中用于比较两个数据的运算符称为比较运算符,包括“=”、“!=”、“”、“”、“=”等,其具体作用见表2-2所示。4逻辑运算符逻辑运算符Jav
20、aScript脚本语言的逻辑运算符包括“&”、“|”和“!”等,用于两个逻辑型数据之间的操作,返回值的数据类型为布尔型。逻辑运算符的功能如表2-3所示。2.2 基本语法2.2.4 运算符和表达式运算符和表达式5位运算符位运算符位移运算符用于将目标数据(二进制形式)往指定方向移动指定的位数。JavaScript脚本语言支持“”和“”等位移运算符,其具体作用如见表2-4:6条件运算符条件运算符在JavaScript脚本语言中,“?:”运算符用于创建条件分支。ab?a:b7逗号运算符逗号运算符使用逗号运算符可以在一条语句中执行多个运算,例如:variNum1=1,iNum=2,iNum3=3;8ty
21、peof运算符运算符typeof运算符用于表明操作数的数据类型,返回数值类型为一个字符串。2.3 常用控制语句2.3.1 选择结构语句选择结构语句 1if语句语句 2if.else.语句语句2.3 常用控制语句3if.else ifelse语句语句【例【例2-3】下面是一个显示当前系统日期的】下面是一个显示当前系统日期的JavaScript代码,其中使用到代码,其中使用到if.else ifelse语句。语句。下面是一个显示当前系统日期的JAVASCRIPT代码/显示当前系统日期显示当前系统日期 d=new Date();console.log(今天是今天是);if(d.getDay()=1)
22、console.log(星期一星期一);else if(d.getDay()=2)console.log(星期二星期二);else if(d.getDay()=3)console.log(星期三星期三);else if(d.getDay()=4)console.log(星期四星期四);else if(d.getDay()=5)console.log(星期五星期五);else if(d.getDay()=6)console.log(星期六星期六);else console.log(星期日星期日);2.3 常用控制语句4switch语句语句 switch(表达式表达式)case 值值1:语句块语句
23、块1 break;case 值值2:语句块语句块2 break;case 值值n:语句块语句块n break;default:语句块语句块n+1 【例2-5】将例2-4的按分数输出其等级使用switch语句实现。按分数输出其等级/使用使用switch语句实现按分数输出其等级语句实现按分数输出其等级 var MyScore=89;/请输入成绩请输入成绩 score=parseInt(MyScore/10)/parseInt取整取整 switch(score/10)case 10:case 9:console.log(优优);break;case 8:console.log(良良);break;c
24、ase 7:console.log(中中);break;case 6:console.log(及格及格);break;default:console.log(不及格不及格);if.else ifelse语句实现按分数输出其等级语句实现按分数输出其等级var score=89;/请输入成绩请输入成绩 if(score=90)console.log(优优);else if(score=80&score=70)console.log(中中);else if(score=60)console.log(及格及格);else console.log(不及格不及格);2.3 常用控制语句2.3.2 循环结构
25、语句循环结构语句1 while语句语句 while语句的语法格式为:语句的语法格式为:while(表达式表达式)循环体语句循环体语句【例【例2-6】用】用while循环来计算循环来计算1+2+3.+98+99+100的值。的值。/计算1+2+3.+98+99+100的值vartotal=0;vari=1;while(i=100)total+=i;i+;console.log(total);2.3 常用控制语句2.3.2 循环结构语句循环结构语句2dowhile语句语句do-while语句的语法格式如下:语句的语法格式如下:do 循环体语句循环体语句 while(表达式表达式);【例【例2-7】
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 微信小 程序 基础 课件 汇总 电子 教案 全套 完整版 ppt 最新 教学 教程
限制150内