微信小程序培训课完整版-ppt课件.ppt

1、犀牛课堂小程序培训课犀牛课堂小程序培训课 培训讲师：Tabniu 1ppt课件微信小程序开发工具微信小程序开发工具1、打开浏览器输入https:/ 电脑打开和手机浏览器打开是不同的风格,该案例用html + css + javascript + php + 淘宝客api开发怎么做？怎么做？通过教学，学会基础的知识，亲自动手，不懂先百度，再不懂问网友。周而复始，锻炼自己的一套学习方法和学习技巧。就像你一开始玩lol一样，拿出那样的游戏精神，大不了坑了队友呗，坑一次两次就够了，关键要学会思考，能做什么？先做什么？再做什么？不用一年，你一定会成为高手。网络视频的合理利用优酷视频：电脑打开优酷视频，搜

2、索关键字“html基础教程”选择适合自己的视频观看。3ppt课件学习小程序所需的技能学习小程序所需的技能1、软件的使用（代码的辅助工具）浏览器：浏览器很多，有谷歌浏览器，火狐浏览器，ie浏览器，qq浏览器等，这里我们统一使用火狐浏览器调试。（没有火狐没关系，只要你有浏览器就行。只不过火狐好一点，不影响开发）编辑器：编辑器也有很多，有自带的文编编辑器，dreamweaver，eclipse，android studio都行，这里我们统一使用Dreamweaver编写代码。（没有dreamweaver也没关系，只要你的系统是windows，有记事本就ok）不要纠结细节。掌握方法才是学习的目的不要纠

3、结细节。掌握方法才是学习的目的2、HTML：超文本标记语言（与浏览器沟通的一种方式，最基础）3、CSS：层叠样式表（就想人的衣服一样，装饰的，但很重要！）4、JavaScript：2016最火的网络脚本语言，往后几年会一直火下去（必须会！）。在这里要感谢微信大神：张小龙。4ppt课件html基础课程基础课程HTML：超文本标记语言标签：闭合标签、自闭标签HTML很重要，重要，一定要学好。HTML标签的熟练使用如：等等。演示常用的标签，并在浏览器打开，查看效果html代码分：块级元素/行内元素html在线手册地址：http:/ 多看5ppt课件为什么要学习为什么要学习css？怎么学？怎么学？在学

4、习之前我们要明白学习在学习之前我们要明白学习css是为了什么？是为了什么？1、前面我们提到、前面我们提到css是一种是一种“装饰装饰”语言。是人的衣服，是多彩的，是多样化的，是灵活语言。是人的衣服，是多彩的，是多样化的，是灵活的。的。2、学习、学习css我们能够把网页或者小程序（产品）打扮漂亮，我们能够把网页或者小程序（产品）打扮漂亮，为了让用户看起来为了让用户看起来舒服舒服，用，用起来起来爽爽，专业点就叫用户体验佳，专业点就叫用户体验佳，css就起到关键的作用。就起到关键的作用。怎么学？怎么学？1、学习、学习css之前之前html要熟练，没有墙面（要熟练，没有墙面（html）的话，我们给墙面

5、怎么刷漆（）的话，我们给墙面怎么刷漆（css装装饰）？对不对？饰）？对不对？2、看视频教程，看书籍，写代码，调试代码，多思考看视频教程，看书籍，写代码，调试代码，多思考。3、坚持下去，选择他就要把他学好，不忘初心。、坚持下去，选择他就要把他学好，不忘初心。网络在线手册地址：网络在线手册地址：http:/ : 在值的后面用英文的在值的后面用英文的 分号结束分号结束 ;一条声明：例如pcolor:red; p color : red ; 也可以多条声明：例如pcolor:red; text-align:center;多条声明用;隔开,可以写在一行;注意：英文状态下的分号注意：英文状态下的分号7pp

6、t课件pcolor:red; text-align:center;text-indent:24px;也可以这样编写，但是一定要注意结尾有英文的分号结尾有英文的分号.初学者建议采用上面的方式编写初学者建议采用上面的方式编写css;css高级语法高级语法同时定义多个元素多组声明的写法，英文状态下的逗号同时定义多个元素多组声明的写法，英文状态下的逗号p,h1,h2,div,tablecolor:red;font-size:16px;4种种css的加载方式的加载方式1、行内方式、行内方式一段文本一段文本这里我们定义了段落的字体为红色，字体大小为这里我们定义了段落的字体为红色，字体大小为14像素，行高为

7、像素，行高为30px2、内嵌方式、内嵌方式pcolor:red; font-size:12px;text-indent:24px;3、连接方式（最常用）、连接方式（最常用）4、导入样式（不常用）、导入样式（不常用）import url(my.css)8ppt课件布局：clear、float、clip、overflow、overflow-x、overflow-y、display、visibility定位：position、z-index、top、right、bottom、left边界：margin、margin-top、mairgin-right、margin-bottom、margin-lef

8、t补白：padding、padding-left、padding-right、padding-bottom、padding-left尺寸：height、max-height、min-height、width、max-width、min-width背景：background、background-color、background-image、background-repeat轮廓：outline、outline-color、outline-style、outline-width列表：list-style、list-style-image、list-style-position、list-styl

9、e-type表格：border-collapse、border-spacing文本：text-indent、text-align、direction、word-wrap、text-jusitify字体：font、color、font-family、font-size、font-style、font-weight、line-height、letter-spacing、word-spacing滚动条:scrollbar-3dlight-color、scrollbar-shadow-color、scrollbar-base-color、scrollbar-face-color、scrollbar-t

10、rack-color 以上包含css最常用到的属性，特别是用颜色注明的一定要熟练掌握最常见的定宽居中显示图片在div中水平垂直居中3列排版 left middel right9ppt课件你知道吗你知道吗?1、如何让图片居中显示？2、如何让文字显示在图片之上？3、如何给元素加上背景颜色，背景图片？4、如何让一个html元素显示在固定的位置？10ppt课件什么是盒子模型？什么是盒子模型？网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)， CSS盒子模式都具备这些属性。这些属性我们可以用日常生活中的常见事物盒子作一个比喻来理解，所以叫

11、它盒子模式。CSS盒子模型就是在网页设计中经常用到的CSS技术技术所使用的一种思维模型思维模型。想象一个盒子，它有：外边距（margin）、边框（border）、内边距（padding）、内容（content）四个属性；让我们俯视这个盒子，它有上下左右四条边，所以每个属性都包括四个部分四个部分：上下左右上下左右；这四部分可同时设置，也可分别设置可同时设置，也可分别设置；内边距可以理解为盒子里装的东西和边框的距离，而边框有厚薄和颜色之分，内容就是盒子中间装的东西，外边距就是边框外面自动留出的一段空白。11ppt课件为什么要学为什么要学javascript？怎么学？怎么学1、学习javascrip

12、t之前得大概的知道他是什么？前面我们讲他是2016年最火的网络脚本语言。javascript是用来改进设计、验证表单检查浏览器、创建cookies，完成交互，以及更多的应用，如：小程序。JavaScript 是一种轻量级的编程语言编程语言。JavaScript 是可插入 HTML 页面的编程代码。JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。JavaScript 很容易学习。javascript我们通常简称我们通常简称 js文件的格式如：文件的格式如：my.js 回顾回顾 html的格式：的格式： demo001.html css的格式的格式: my.css2、学习j

13、avascript之前，首先对html和css有所了解，通过javascript我们可以对html进行操作，能动态的改变html的css，可以任意操作网页的元素，用户输入的数据，通过js能发送到服务器，服务器再返回数据给js，js对数据进行处理呈现给用户。js起到承上启下起到承上启下的效果。很重要，必选学。的效果。很重要，必选学。重点讲解重点讲解对象对象的使用的使用(小程序提供的小程序提供的api的属性和方法的属性和方法)网络在线手册：网络在线手册：http:/ 打开参考学习打开参考学习12ppt课件JavaScript基础课程基础课程1、变量 var a; var b,c,d; var d=

14、0;2、数据类型 字符串，数字，布尔，数组，对象对象，Null，Undefined3、对象 JavaScript 中的所有事物都是对象：字符串、数字、数组、日期，等等。对象有属性和方法属性是与对象相关的值。方法是能够在对象上执行的动作。举例：汽车就是现实生活中的对象。汽车的属性：car.name=Fiatcar.model=500car.weight=850kgcar.color=white 汽车的方法：car.start()car.drive()car.brake()汽车的属性包括名称、型号、重量、颜色等。13ppt课件所有汽车都有这些属性，但是每款车的属性都不尽相同。汽车的方法可以是启动、

15、驾驶、刹车等。所有汽车都拥有这些方法，但是它们被执行的时间都不尽相同。创建 JavaScript 对象JavaScript 中的几乎所有都是对象：字符串、数字、数组、日期、函数，等等。你也可以创建自己的对象。本例创建名为 person 的对象，并为其添加了四个属性：实例person=new Object();person.firstname=Bill;person.lastname=Gates;person.age=56;person.eyecolor=blue;4、函数JavaScript 函数语法函数就是包裹在花括号中的代码块，前面使用了关键词 function：function func

16、tionname() 普通的函数这里是要执行的代码function myFunction(a) 带一个参数的函数return a;function myFunction(a,b,c) 带多个参数和返回结果的函数return a*b+c;14ppt课件5、运算符运算符 = 用于赋值。运算符 + 用于加值。var y=5;var z=2;var x;x=y+z; 在以上语句执行后，x 的值是 7。+ - * / % + - 问题： 8/3= 8%3=15ppt课件16ppt课件17ppt课件18ppt课件19ppt课件20ppt课件21ppt课件22ppt课件尝试查看和执行对象的属性和方法重点讲解

17、对象的使用重点讲解对象的使用(小程序提供的小程序提供的api的属性和方法的属性和方法)为下节课做铺垫23ppt课件微信小程序框架简易教程微信小程序框架简易教程1、什么是框架？详细介绍百度百科，引导学生方法他本是建筑学的概念他本是建筑学的概念框架（framework）是一个基本概念上的结构，用于去解决去解决或者处理复杂的问处理复杂的问题。这个广泛的定义使用的十分流行，尤其在软件概念尤其在软件概念。框架也能用于机械结构。2、为什么要用框架？因为软件系统发展到今天已经很复杂了，特别是服务器端软件，涉及到的知识，内容，问题太多。在某些方面使用别人成熟的框架，就相当于让别人帮你完成一些基础工作别人帮你完

18、成一些基础工作，你只需要集中精力完成系统的业务逻辑设计集中精力完成系统的业务逻辑设计。而且框架一般是成熟，稳健的框架一般是成熟，稳健的，他可以处理系统很多细节问题，比如，事物处理，安全性，数据流控制等问题。还有框架一般都经过很多人使用，所以结构很好，所以扩展性也很好，而且它是不断升级的，你可以直结构很好，所以扩展性也很好，而且它是不断升级的，你可以直接享受别人升级代码带来的好处接享受别人升级代码带来的好处。软件为什么要分层？ 为了实现“高内聚、低耦合高内聚、低耦合”。把问题划分开来各个解决，易于控制，易于延展，易于分配资源总之好处很多啦！总之好处很多啦！）。感谢外星人提供录频软件哦，么么哒24

19、ppt课件用一张图讲解微信小程序框架构成 结合微信官网、脑图、打开开发工具演示。加深印象。地址https:/ WXML 与 WXSS 编写，由组件组件来进行展示。将逻辑层的数据逻辑层的数据反应成视图视图，同时将视图层的事件事件发送给逻辑层逻辑层。WXML(WeiXin Markup language)用于描述页面的结构。类似前面我们学到的HTMLWXSS(WeiXin Style Sheet)用于描述页面的样式。类似CSS,语法大同小异组件组件(Component)是视图的基本组成单元是视图的基本组成单元。框架为开发者提供了一系列基础组件，开发者可以通过组合这些基础组件进行快速开发。33ppt

20、课件WXMLWXML（WeiXin Markup Language）是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。用以下一些简单的例子来看看 WXML 具有什么能力：34ppt课件 35ppt课件 36ppt课件 37ppt课件 38ppt课件 39ppt课件 40ppt课件 41ppt课件 42ppt课件 43ppt课件 44ppt课件 45ppt课件 46ppt课件 47ppt课件 48ppt课件 基础组件基础组件框架为开发者提供了一系列基础组件组件，开发者可以通过组合这些基础组件进行快速开发。什么是组件： 组件是视图层的基本组成单元。 组件自带一些功能与微信风格

21、的样式组件自带一些功能与微信风格的样式。 一个组件通常包括开始标签和结束标签，属性用来修饰这个组件，内容在两个标签之内。 Content goes here . 注意：所有组件与属性都是小写，以连字符所有组件与属性都是小写，以连字符-连接连接 如：如：action-sheet打开打开https:/ Service)小程序开发框架的逻辑层是由JavaScript编写。逻辑层将数据进行处理后发送给视图层，同时接受视图层的事件反馈。 在 JavaScript 的基础上，微信团队做了一些修改，以方便地开发小程序。增加 App 和 Page 方法，进行程序和页面的注册。提供丰富的 API，如扫一扫，支付

22、等微信特有能力。每个页面有独立的作用域，并提供模块化能力。由于框架并非运行在浏览器中，所以 JavaScript 在 web 中一些能力都无法使用，如 document，window 等。开发者写的所有代码最终将会打包成一份 JavaScript，并在小程序启动的时候运行，直到小程序销毁。类似 ServiceWorker，所以逻辑层也称之为 App Service。官方文档https:/ 函数用来注册一个小程序。接受一个 object 参数，其指定小程序的生命周期函数等。2、注册页面Page() 函数用来注册一个页面。接受一个 object 参数，其指定页面的初始数据、生命周期函数、事件处理函

23、数等。3、模块化在 JavaScript 文件中声明的变量和函数只在该文件中有效；不同的文件中可以声明相同名字的变量和函数，不会互相影响。通过全局函数 getApp() 可以获取全局的应用实例，如果需要全局的数据可以在 App() 中设置4、API（核心）小程序开发框架提供丰富的微信原生 API，可以方便的调起微信提供的能力，如获取用户信息，本地存储，支付功能等。重点讲解页面的生命周期重点讲解页面的生命周期分别介绍每个api的功能51ppt课件52ppt课件53ppt课件微信小程序实战篇微信小程序实战篇案例介绍：1、案例名称：微信淘宝2、采用的技术：wxml + wxss + javascri

24、pt + php3、案例功能：主功能分4个区域3.1 首页3.2 搜索3.3 设置3.4 我首页页首页页，默认展示商品列表，点击导航的任一组件可以展示该关键字的商品列表，底部有上一页下一页分页功能，导航的关键字学者可以自己定义，点击任一列表进入商品详细页，详细页有3个按钮，对应了3个功能。搜索页搜索页，通过输入关键字，点击搜索按钮，展示结果列表设置页设置页，通过设置淘宝用户名称，使分享的链接变成设定用户的淘金链我页我页，数据的展示功能本案例涉及的知识点比较多，学生们可以通过学习修改该案例提升自己的技能。本案例扩展性强本案例扩展性强，每条代码后面都有注释代码注释代码，让初学者一目了然，让大家明白小程序功能的制作流程和如何调试代码调试代码。54ppt课件案例截图：55ppt课件总结总结掌握学习技巧，确定学习的方向，多看视频，书籍，多动手尝试敲代码，多修改别人的代码，再总结自己的经验，做自己想做的功能。56ppt课件