编辑推荐
?真正零基础
无需HTML、CSS、JavaScript等技术基础,即可跟随本书学习。保证让你在学会小程序开发的同时,前端开发技能也达到中等水平。
?增一分太长,减一分太短
本书力求覆盖开发所需的全部知识点,保证够用又杜绝浪费,杜绝介绍不重要的内容凑页数,以免耽误读者时间。
?讲明白,多练习
技术的意义是让事情简单化,而不是造出一堆晦涩的名词让人困惑。对于CSS或JavaScript的个别难点(如flex布局、闭包等),皆以通俗语言重点说明,保证“一看就懂”。在介绍知识点的时候,没有通篇的概念原理,只有简明扼要的说明和易懂的示例,做到“通俗易懂,即能上手”。
?少些主义,多些干货
本书是面向开发者的,不对小程序的运营及商业发展进行过多讨论,而是竭作者之所能,为读者奉上满满的技术干货,提供两个翔实的实战案例:实时公交小程序和电商平台小程序。
内容简介
“一条主线”,以小程序开发框架为主线。第1~3章从小程序概述及开发流程讲起,介绍了小程序开发框架的基础知识,并使其贯穿全书。
“两个重点”,以框架中的视图层和逻辑层为重点。第4~6章从页面的组件、CSS样式及布局共三个层面讲解如何开发小程序页面。第7~8章从基础的JavaScript语法到小程序API接口,深入浅出地介绍了代码逻辑的实现。
“两个案例”,以实时公交和电商平台综合案例结尾。第9~10章对前面的知识进行了回顾和实践,并简单介绍了程序设计和开发的思路。
本书面向零基础的微信小程序爱好者、有一定基础的前端工程师以及计算机相关专业的学生。
目录
第1章认识小程序1
1.1概述1
1.1.1小程序是什么1
1.1.2小程序的使命1
1.2打开小程序2
1.2.1二维码2
1.2.2微信搜索2
1.2.3微信公众号2
1.2.4微信会话窗口3
1.2.5附近的小程序4
1.2.6历史记录5
1.3小程序特性6
1.3.1改进6
1.3.2对比6
1.3.3工具8
1.4常见问题9
第2章开发过程11
2.1注册11
2.2完善信息13
2.3开发14
2.3.1准备环境14
2.3.2扫码启动14
2.3.3第一个小程序17
2.3.4编辑视图18
2.3.5调试视图19
2.3.6项目视图24◆微信小程序入门目录2.4审核上架25
第3章开发基础26
3.1概述26
3.2结构28
3.3配置29
3.3.1应用级配置29
3.3.2页面级配置33
3.4逻辑层33
3.4.1应用级注册34
3.4.2页面级注册36
3.4.3页面路由40
3.4.4模块化41
3.4.5生命周期43
3.5视图层43
3.5.1数据绑定43
3.5.2条件渲染48
3.5.3循环渲染49
3.5.4模板52
3.5.5事件54
3.5.6引用58
第4章页面组件60
4.1概述60
4.2视图容器61
4.2.1基础容器61
4.2.2滚动容器63
4.2.3滑动块容器67
4.3基础内容70
4.3.1图标组件70
4.3.2文本组件73
4.3.3进度条组件75
4.4表单组件78
4.4.1按钮组件78
4.4.2复选框组件81
4.4.3输入框组件84
4.4.4标签组件88
4.4.5选择器组件92
4.4.6单选框组件96
4.4.7滑动选择器组件98
4.4.8开关组件100
4.4.9多行输入框组件102
4.4.10表单组件105
4.5导航109
4.6媒体组件111
4.6.1音频组件111
4.6.2图片组件114
4.6.3视频组件118
4.7地图组件122
4.8客服会话126
第5章页面样式128
5.1WXSS概述128
5.1.1定义样式128
5.1.2使用样式129
5.1.3优先原则130
5.2选择器131
5.2.1分类131
5.2.2权重134
5.3基础样式135
5.3.1文本135
5.3.2背景137
5.3.3轮廓139
5.3.4内容生成140
5.4样式值140
5.4.1长度值140
5.4.2颜色值141
5.5动态样式142
第6章页面布局143
6.1元素类别143
6.1.1块级元素143
6.1.2内联元素143
6.1.3内联块级144
6.2box模型144
6.2.1基础概念144
6.2.2基础样式145
6.2.3圆角矩形152
6.2.4盒子阴影154
6.2.5代码缩写155
6.3传统布局156
6.3.1概述156
6.3.2flow布局157
6.3.3float布局157
6.3.4layer布局158
6.4flex布局162
6.4.1概述162
6.4.2基础概念163
6.4.3相关属性163
6.4.4伸缩规则166
6.5布局实战168
6.5.1导航栏169
6.5.2宫格式169
6.5.3列表式170
6.5.4转盘式172
6.5.5多面板174
6.5.6标签177
第7章JavaScript基础179
7.1概述179
7.1.1概念179
7.1.2运行181
7.1.3调试182
7.2语法183
7.2.1结构183
7.2.2变量184
7.2.3数据类型185
7.2.4表达式和运算符187
7.2.5语句191
7.2.6JSON195
7.3函数196
7.3.1定义196
7.3.2调用197
7.3.3参数200
7.3.4函数类型201
7.3.5立即执行函数202
7.3.6闭包206
7.4面向对象207
7.4.1基础概念207
7.4.2创建对象211
7.4.3实现继承215
7.5ES6核心221
7.5.1变量相关221
7.5.2类和继承222
7.5.3箭头函数223
7.5.4字符串模板224
精彩书摘
第5章Chapter5
页面样式5.1WXSS概述
CSS(CascadingStyleSheets)是一套样式语言,用于描述HTML组件的样式,决定HTML组件如何显示。微信小程序的WXSS(WeiXinStyleSheets)也是一套样式语言,用于描述小程序的组件样式,决定小程序组件如何显示。WXSS在很大程度上借鉴了CSS的语法。
WXSS保留了绝大部分CSS的特性,小程序官方并未给出专门文档。本章以CSS为主线展开,以介绍原理为主,不涉及过多细节,实践中可以通过查阅CSS手册掌握细节。同时,对WXSS与CSS的区别进行重点说明。
5.1.1定义样式〖*2〗1.角色在微信小程序中,WXML负责页面结构(类似HTML),WXSS负责页面样式和布局(类似CSS),而JavaScript负责页面交互及逻辑实现。WXSS在小程序中扮演的角色和CSS在前端开发中的角色类似。
2.语法
WXSS对大小写敏感,书写规则由两部分构成:选择器+声明,如图5��1所示。
图5��1WXSS的书写规则
�r选择器:要使某个样式应用于特定的页面元素,首先要找到该元素,负责达成这一任务的规则称为选择器,详见第5.2节。
�r声明:用于设定样式属性值,在英文大括号{}中的就是声明,属性和值之间用英文冒号:分隔。当有多条声明时,中间可以用英文分号;分隔。◆微信小程序入门第◆5章页面样式下面的示例中的p就是选择器,声明中设置了color和text�瞐lign两个属性值,如下所示:p{
color:red;
text-align:center;
}
3.注释
CSS注释以/*开始,以*/结束,示例如下:/�澄募�头注释,适用于文件头部
�砤uthor:Jason.Lee
�砫es:页面基础样式
�砫ate:2017-5-1
��/
/��
多行注释,适用于某个模块
这是第二行
��/
p{
text-align:center;/�车バ凶⑹�,适用于要点说明��/
color:black;
font-family:arial;
}
5.1.2使用样式〖*2〗1.内联样式页面中可使用style直接设定组件的样式,示例如下。虽然语法支持,但开发中应尽量避免这种将静态样式写入style的操作,以免影响渲染速度。内联样式常用于设置动态样式,详见第5.5节。我是内容
2.外部样式
最为常用的做法是将样式独立定义在WXSS文件中,然后引入WXSS文件。下面的示例将外部样式定义在app.wxss文件中。
示例代码如下:/�唱砤pp.wxss�唱�/
page{
background-color:#fbf9fe;
height:100%;
}
在使用WXSS的样式时,有以下两种引用方式。
(1)自动引用
小程序定义了自己的工程结构及文件关联规则,符合要求的WXSS文件会自动引入。定义在app.wxss中的样式为全局样式,作用于每一个页面。在page的wxss文件中定义的样式为局部样式,只作用在对应的页面,并且会覆盖app.wxss中相同的选择器。
(2)import引用
使用import命令可以将一个WXSS文件引入到另一个WXSS文件中。@import后连接需要导入的外联样式表的相对路径,用;表示语句结束。
示例代码如下:/�唱潮皇褂谜�:common.wxss�唱�/
.small-p{
padding:5px;
}
/�唱呈褂谜�:app.wxss�唱�/
@import"common.wxss";
.middle-p{
padding:15px;
}
3.嵌入样式
在Web网页开发中,CSS可以通过
……
前言/序言
用“小而美”形容微信小程序再合适不过了:微信小程序是一个轻量级的前端技术,对代码体积、页面层级都有明确限制,是为“小”;同时,其语法简洁、框架优雅、用户体验流畅,是为“美”。
我们正处在一个知识爆炸的时代,表面上获取信息的成本越来越低,百度、知乎、分答等,都可以帮助人们方便快捷地获取信息,但构建知识体系的成本却在增大。有效“信号”增加的同时,“噪音”增加得更多,人们不得不花费大量精力去伪存真。本书并不创造新知识,只是把作者的多年实践经验结合微信小程序梳理成册,分享给读者。希望这是一本有用的书,是一本节约读者时间的书,希望能够和读者一起见证小程序的成长,一起领略“小而美”。
本书涵盖了小程序开发所需要的全部内容,内容翔实,通俗易懂,不仅适合有一定基础的读者,也适合零基础的读者。
本书首先介绍了小程序是什么,为何而生,有什么特性,随后讨论了小程序的开发过程及开发框架。在此基础上,对开发框架所涉及的视图层及逻辑层分别展开介绍。页面组件、页面样式及页面布局,共同构成了视图层三部曲,掌握了这些就掌握了页面开发方法。随后,对框架的逻辑层所涉及的JavaScript语言以及微信小程序所提供的接口进行详细介绍。最后,以两个综合案例,对前面的内容进行实践和回顾。
本书共10章,各章内容简介如下。
第1章介绍了小程序是什么、如何使用、有何特性,并从业务和技术角度分别与公众号和App、H5进行对比,并对读者比较关心的常见问题进行解答。
第2章介绍了小程序的开发流程,注册、完善信息、开发和上架,并对开发工具的使用进行重点介绍,让读者快速建立自己的第一个小程序。
第3章介绍了小程序开发框架,包括项目结构、配置文件、逻辑层、视图层,这些是小程序开发的基础,其中涉及微信自创的WXML及WXSS。第4章介绍了页面组件,详细介绍了从容器组件到内容组件、表单、导航、媒体组件、地图组件及客服组件的使用方法。
第5章介绍了页面样式,以CSS为线索介绍了WXSS的定义方法、选择器、基础样式定义及动态样式定义,并对CSS与WXSS的差异点加以说明。
第6章介绍了页面的布局,其内容基于第4、5章,也是界面开发的重点及难点,书中对传统页面布局及当下流行的flex布局进行了详细介绍,最后对常见App的典型布局加以实战。
第7章介绍了JavaScript的基础知识,除了最基础的语法知识外,对较难理解的立即执行函数、闭包、原型、继承都进行了透彻的讲解,初学者只要认真阅读,也一定能够理解,最后补充了最新JavaScript规范ES6的主要用法。
第8章介绍了微信小程序API接口,有了JavaScript基础就可以使用微信特有的接口,文中介绍了网络操作、媒体操作、数据缓存、位置操作,还有与设备相关的操作,以及微信用户授权、模板消息、微信支付等接口的使用方法。
第9章以实时公交为例,介绍了小程序开发过程中的需求分析、视图层设计、逻辑层设计以及程序开发等步骤,并简单介绍了小程序设计和开发的思路。
第10章以更为实用的电商平台为例,介绍了一个界面种类较多、操作较丰富的小程序应用的实现过程,并对实现中的页面细节进行了详细介绍。
本书由互联网老兵厉业崧、哈尔滨工程大学的王向辉老师、黑龙江大学的杨国燕老师负责主要编写工作。其中,厉业崧编写第1~3及6~7章,王向辉编写第4~5章,杨国燕编写第8~10章。同时参与本书编写工作的还有彭永成、杨春艳,在这里对他们的辛苦工作表示衷心感谢。
为了完成本书,我经常加班到深夜,在此要感谢我的家人对我的理解和支持,我爱他们。
厉业崧
2017年8月◆微信小程序入门
微信小程序入门 epub pdf mobi txt 电子书 下载 2024
微信小程序入门 下载 epub mobi pdf txt 电子书 2024