小程序开发 vs 网页开发
- 网页开发中的渲染线程和脚本线程是互斥的,长时间的脚本运行可能会导致页面失去响应
- 网页开发者可以使用各种浏览器暴露出来的DOM API,进行DOM选中和操作
- 在小程序中,页面渲染和业务逻辑是分离的,分别运行在不同的线程中
(1)逻辑层运行在JSCore中,并没有一个完整浏览器对象,因此缺少相关的DOM API和BOM API
(2)在网页开发中非常熟悉的一些库,例如jQuery、Zepto等,在小程序中无法运行的
(3)SCore的环境同NodeJS环境也是不完全相同的,所以一些NPM的包在小程序中也是无法使用的 - 小程序的性能介于纯网页开发与原生(native)开发之间
小程序的运行环境
运行环境 | 逻辑层 | 渲染层 |
---|---|---|
IOS | JavascriptCore | WKWebView |
Android | V8 | chromium定制内核 |
微信开发者工具 | NWJS | Chrome WebView |
什么是微信小程序
- 简称小程序:Mini Program:是一种不需要下载安装即可使用的应用,于2017年1月9日正式上线
- 有点像是镶嵌在微信中的“APP”
- 小程序的4大特性:无需安装、触手可及、用完即走、无需卸载
- 实际上小程序使用之前还是需要下载安装的:下载–>安装–>使用:只不过微信官方对小程序的安装包(release包) 有大小限制,比如目前限制的是不能超过2M:所以用户感觉不到小程序的下载过程:因为小,所以快,所以感觉不到下载的过程
- 由于要是用户感觉
无需安装
的特性,所以必须对小程序大小进行限制:例如目前限制的大小为2M:因此,开发中用到的资源(大图片、音频、视频等)也尽量放在服务器端 - 目前小程序的主要入口:扫码、微信内搜索、点击聊天中分享的小程序、点击公众号菜单
- 目前是无法分享到盆友圈
- 小程序的一些应用场景:不经常使用、但是刚需、不会停留太久的简单工具: 例如:天气预报、买票(车票、机票、门票、电影票)、出行、住宿、话费、缴费、外卖、快递等
小程序 vs APP
- 安装使用
(1)小程序:无需安装、无需卸载、简单易用、占用内存较小
(2)APP:需要主动联网下载安装APP、不想用了需要主动下载 - 开发
(1)小程序:跨平台、开发门槛低、开发周期短、开发成本低(对初创企业来说是个很好的选择)
(2)APP:开发成本高、每一个平台都要维护一套代码(目前也有ReactiveNative、Flutter等跨平台方案) - 发布上线
(1)小程序:提交到微信公众平台审核
(2) APP:提交到应用商店审核(Apple的App Store常有审核不通过的情况,审核周期也较长) - 其他:小程序用户体验、功能丰富度、开发性不如APP
小程序开发的目录结构
- 小程序主要包括1个描述整体程序的app和多个描述各自页面的page
- app部分由3个文件组成,必须放在项目的根目录:文件名固定
(1)app.js:必须存在
(2)app.json:必须存在
(3)app.wxss:可以没有 - 1个页面由4个文件组成:这4个文件必须具有相同的路径和文件名:不要求目录名与文件名相同
(1) js:必须存在
(2)wxml:必须存在
(3)json:可以没有
(4)wxss:可以没有
小程序中的flex布局
- flex布局(Flexible布局,弹性布局)是在小程序开发经常使用的布局方式
- 开启了flex布局的元素叫:
flex container
:设置元素的display属性为flex或inline-flex
display: flex; /* flex container以block-level形式存在:块级元素 */
display: inline-flex; /* flex container以inline-level形式存在:行内元素 */
- flex container里面的
直接子元素
称之为:flex items
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>flex布局</title>
<style>
.container {
border: 1px solid red;
width: 600px;
height: 400px;
display: flex; /*开启了display属性为flex元素称之为flex container*/
}
.items {
width: 150px;
height: 150px;
}
.item1 {
background-color: red;
}
.item2 {
background-color: green;
}
.item3 {
background-color: blue;
}
.sub {
width: 100px;
height: 50px;
margin: 10px;
background: yellow;
}
</style>
</head>
<body>
<div class="container"> <!--flex container-->
<div class="items item1">
<div class='sub'>
</div>
</div>
<div class="items item2"></div>
<div class="items item3"></div>
</div>
</body>
</html>
-
flex container容器存在两个轴:主轴(main axis)与交叉轴(cross axis):主轴是可以设置为水平的还是垂直的,交叉轴是一直垂直于主轴的
-
flex-direction属性决定了main axis的方向:有4个取值:
(1)row:默认值:主轴从左到右,交叉轴从上到下
(2)row-reverse:主轴从右到左,交叉轴从上到下
(3)column:主轴从上到下,交叉中从左到右
(4)column-reverse:主轴从下到上,交叉轴从左到右
-
flex item默认都是沿着main axis(主轴)从main start开始往main end方向排布
-
flex container上的css属性
属性名 | 说明 |
---|---|
flex-direction | 该属性加在flex container元素身上: |
justify-content | 该属性加在flex container元素身上:解决flex item在主轴上的对齐方式 |
flex-flow | |
flex-wrap | |
align-items | |
align-content |
justity-content
- 取值:flex-start:flex item与main start对齐
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>flex布局</title>
<style>
.container {
border: 1px solid red;
width: 600px;
height: 400px;
display: flex; /*开启了display属性为flex元素称之为flex container*/
justify-content: flex-start; /*flex-start是justify-content属性的默认值*/
/* flex item在main axis方向上从main start到main end方向排布 */
}
.items {
width: 150px;
height: 150px;
}
.item1 {
background-color: red;
}
.item2 {
background-color: green;
}
.item3 {
background-color: blue;
}
.sub {
width: 100px;
height: 50px;
margin: 10px;
background: yellow;
}
</style>
</head>
<body>
<div class="container"> <!--flex container-->
<div class="items item1">
<div class='sub'>
</div>
</div>
<div class="items item2"></div>
<div class="items item3"></div>
</div>
</body>
</html>
- 取值:flex -end:与main end对齐
- 取值:center
- 取值:space-between
(1)flex item之间的间距相等
(2)与main start、main end两端对齐
- 取值:space-evenly
(1)flex item之间等距离
(2)flex item与main start、main end之间的距离等于flex item之前的距离
- 取值:space-around
(1)flex item之间等距离
(2)flex item与main start、main end之间的距离是flex item距离的一半