微信小程序开发Day01 概述、小程序开发准备，如何调试，页面Demo

目录

0x00 概述

小程序对开发者的影响：

0x01 小程序开发准备

0x02 微信小程序如何调试

0x03 小程序页面Demo

---

0x00 概述

前端驱动服务端开发：前端先设计好页面，填充假的数据，然后让前端可以自运行，然后前端向服务端提出api 需求，后端再去编写对应的api，这样开发出来的api比较合理。如果后端驱动前端开发，可能后端闭门造车设计出来的一些api 不是那么合理。

张小龙对微信小程序的定义：

1. 不需要下载安装既可使用，其实还是需要下载，只是因为安装包的体积<2MB(以前是1MB),所以用户体验不到下载安装的过程
2. 用户"用完即走"，不用关心是否安装太多应用，适合于使用频率较低的，用户用完之后并不需要关心一个应用是否还在自己手机中（这两年这种情况发生了一些变化，小程序的业务范围拓宽，出现了咨询类、视频类的小程序，"用完即走"的理念正在发生变化）
3. 应用将无处不在，随时可用

一定程度上来说，互联网的本质在于“连接”：

B2C （人与商品的连接）：京东 淘宝

P2P （人与人的连接）: 微信 QQ

而小程序想实现是 人与服务 的连接 C2P ，让服务无处不在，当我们想使用任何服务的时候，只需要打开微信，搜索一下，就可立即使用该服务。

小程序实现 可以说是一种 应用 的折叠，将其他小应用折叠 到 微信中

所以一般来讲，小程序适合：

1. 业务逻辑简单
2. 使用频率低
3. 性能要求低

的应用，但是随着微信小程序不断更新，这些都处于变化之中。

例如：社区型应用 知乎 用户停留时间长，不适合用小程序来开发，不符合小程序用完即走的理念，每次让用户主动的打开微信 然后 去打开知乎，这种用户体验是不太好的。知乎 以及 其他的咨询类客户端 很依赖于系统的推送。做成app 比较合适一点，有很好的推送机制。

斗鱼的视频直播类也不适合小程序，虽然小程序有专门的视频直播组件，并附带弹幕功能，但是如果刷起来海量弹幕，性能方面小程序无法满足。

而订餐、订票、打车这类的程序都适合于小程序来开发。

而豆瓣、美团等涉及众多服务类型的应用，则可以将自己某个单点功能拆分出来做成一个小程序的入口

小程序的缺点：

入口太深，所以适合使用频率低的应用

折叠到微信中，性能不高

支付宝的小应用 和 微信小程序 之间的本质区别：

支付宝提供的小应用：例如校园生活，手机充值 这些，都是支付宝自己开发的app 折叠到支付宝中

而微信小程序则是 提供了一个平台，可以让开发者 将应用折叠到微信中。微信有野心 将自己做成一个操作系统，格局和发展的眼光远高于国内其他公司。

小程序对开发者的影响：

1. 短期内提升市场对javascript程序员的需求量，对js基本功的要求更高
2. 小程序是0基础开发者很好的入门平台
3. 小程序不可以使用现在已经存在的javascript组件库，这就意味着jQuery Echarts HightCharts 都不能用，小程序的组件库有待于开发者去完善，同时，开发者目前也不需要学习众多组件库才能入手开发。

0x01 小程序开发准备

1.申请小程序账号（appid)

2.下载并安装微信开发者工具
 

查看快捷键 选中编辑区域，按F1

0x02 微信小程序如何调试

方法一：console.log()输出

方法二： 选择source下的对应文件

点击行号即可打上断点，然后点击编译，脚本就会在断点处停止。

需要看哪个变量的值，只需要将鼠标悬停在该变量上即可。

 

0x03 小程序页面Demo

#小程序文件类型与目录结构：

小程序的目录结构是非常自由的，以下分析的小程序提供的种子项目的目录结构：

page:一个页面对应一个文件夹，一个文件夹由四个文件组成： js json wxml wxss 分别类比web开发中js 配置文件 html css

app.js 应用程序级别的逻辑

app.json 应用程序级别的配置

app.wxss 应用程序级别的全局样式

project.config.json 自动生成的配置文件 ，一般不需要修改。主要用于在多台电脑上开发小程序的场景。例如你在A电脑配置很多配置，你在B电脑上开发时也想用这些配置，就可以将project.config.json文件拷贝到B电脑上。

utils文件夹：工具类，封装了一些通用化函数

就近原则：

页面级别的css 样式 将 覆盖应用程序级别的css样式

页面级别的json配置 将覆盖 应用程序级别的json配置

##app.json详解：

pages：

用于指定小程序由哪些页面组成，每一项都对应一个页面的 路径（含文件名） 信息。文件名不需要写文件后缀，框架会自动去寻找对应位置的 .json, .js, .wxml, .wxss 四个文件进行处理。

数组的第一项代表小程序的初始页面（首页）。小程序中新增/减少页面，都需要对 pages 数组进行修改。

{
  "pages": [
        "pages/index/index",
        "pages/logs/logs"
  ]
}

pages代表的是pages文件夹

第一个index代表文件夹名

第二个index代表文件名，对应四个文件

可以先写该配置文件，然后保存后，小程序会自动创建对应的页面文件夹。

页面级别的json文件不是必须的，但是如果创建了该json文件，就必须有内容（至少有个{}）,否则将报错

 

#注册小程序页面，view，image，text等组件的基本用法

view 标签相当于 div标签，是一个容器盒子，用于分隔文档的

image 相当于 img标签, src='图片路径'  以/开头的路径是绝对路径 /表示小程序的根目录。如果没有设置图片样式，将采用小程序图片的默认样式：width:300px height:225px;

text 相当于 p标签,除了text组件中包含的文本，小程序中的其他文本都无法长按选中。

注意：text中的\n 会被解析为换行符。

rpx单位：响应式单位，rpx 和px的换算关系 和 机型有关 ， 在iphone6下 1rpx = 0.5px

为什么模拟器下ip6的分辨率是375 而UI设计师给的设计图一般给750？

这是因为小程序模拟器下的375的单位是pt ，而设计师给你的750的单位是px。在iphone6下，1pt包含2px，所以UI设计稿中的长度都要*0.5才能模拟器中正常显示。

上图中pt（逻辑分辨率） 是长度单位（视觉单位），px（物理分辨率） 则是 像素个数单位。

1pt 可以由若干个px构成。（注意：小程序开发中 我们写的px 其实是pt）

iphone 4 为什么 看起来比 iphone 3更加清楚呢？就是因为 iphone4  1pt 中包含 2px个像素点 ，而iphone3 1pt单位的长度中只有1px。

但是为什么iphone 6 1pt 包含 3px像素点，清晰度却没有提升多少呢？这是因为1pt 包含2px个像素点已经 到了人眼能识别的极限。

如何做不同设备的自适应？

使用rpx ，iphon6下 1px = 1rpx = 0.5pt，这样你只要确保在一个设备下能正确显示，那么换成其他机型也能正确显示。

注意：不是所有的情况下都适合用rpx，有时候我们并不需要做自适应调整。

#如何修改小程序上导航栏的颜色

app.json文件中添加上：

  "window":{
      "navigationBarBackgroundColor":"#b3d4db"
  }

 

flex弹性盒子模型

移动端分辨率以及小程序自适应单位rpx