什么是小程序
小程序是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或者搜一下即可打开应用。也体现了“用完即走”的理念,用户不用关心是否安装太多应用的问题。应用将无处不在,随时可用,但又无须安装卸载。(微信之父张小龙)
小程序有如下特性:
- 没有“官方的”应用市场。
- 不能被关注,没有粉丝的概念。
- 没有群发消息和主动推送消息的能力。
- 微信中只有一个记录使用记录的【小程序】栏,其中的顺序只与用户使用习惯有关(某度的竞价排名得学学人家),除此之外没有明显的小程序入口。
- 获取和使用小程序的途径只有这几种:扫描二维码、微信搜索、【小程序】栏。
- 名称不能和公众号相同。
- 有一定的分享能力,可以分享给朋友和群聊,但不能分享到朋友圈。
- 同一个公司的公众号和小程序可以相互发现。公众号里可以看到该公司的小程序,同时,小程序里也可以看到该公司的公众号。
MINA框架与微信小程序
小程序并不是一项技术或者一个框架,而是一个生态,与之对应的应该是iOS生态和Android生态,其中小程序又与iOS生态极为相似,它们都非常封闭,而且审核非常严格(小程序的审核比苹果还要严格)。
MINA是官方小程序的内部开发代号,也是小程序运行框架的别名,它提供了小程序运行所需要的接口、模型和机制。据说MINA有MINA Is Not App的意思。
基本文件结构
按开发工具的引导,新建“普通快速启动模版”,创建好就能看到如下的目录结构,这也就是小程序最基本的文件结构了:
注意事项:
- 根目录下面的3个文件:app.js、app.json、app.wxss是应用程序级别的,文件名和文件位置都不能改变,否则会提示找不到文件。
- pages 下面的每个目录都是一个页面或者模版的目录,同一个页面的不同文件的名称必须一致,并且墙裂建议与该页面的目录名一致,也就是上面的
index/index.*
,logs/logs.*
。 - utils 目录仅作参考建议,不做强制约束;也就是说工具类可以放在其它目录,工具类的名称也可以随便定义。
页面的新建与注册
新建页面
如需要新建页面,比如建一个欢迎页面(welcome),在小程序启动时显示出来,只需要按如下步骤进行:
- 只需要在
pages
目录下,新建welcome目录
。 - 在
welcome目录
下,依次创建welcome.js、welcome.json、welcome.wxml、welcome.wxss
。 - 按规则补充文件内容:因为这些文件的内容有特定的格式,空白内容会报错。这里
wxml
和wxss
是和布局相关的,若初始布局没有内容,也可以不管这两个文件;但js
和json
文件必须满足如下规则:
/// welcome.js
Page({
})
/// welcome.json
{
}
注册页面
页面创建好之后,要想小程序能正常调用这个页面,还需要在配置文件(app.json)中注册这个页面,注册方法很简单,只需要将页面路径加入pages数组即可,如下:
{
"pages": [
"pages/index/index",
"pages/logs/logs",
"pages/welcome/welcome"
]
}
因为我们创建的是欢迎页面,是小程序的第一个页面,要想让小程序最先打开welcome页面,只需要将上面的数组元素顺序调整一下,将welcome放到第一的位置即可。
pages数组中,第一个元素是小程序的首页。
pages数组中,各页面路径不能带文件后缀。
一步到位
可以看到,上面的页面创建方法很繁琐,而且创建完后还要再注册,很容易出错。为了避免这种尴尬,开发工具提供了一种简单快捷的方法。
比如,我们需要创建一个 booklist
页面,只需要在 app.json
的 pages 数组
中,加入如下代码:
{
"pages": [
//......,
"pages/booklist/booklist"
]
}
然后按下 Ctrl+S
,开发工具就会按我们要求去创建页面,并为该页面自动生成相应的合法的文件。
小程序支持的 CSS 选择器
小程序中的 CSS 只支持如下表所示的6种CSS选择器。
小程序支持的 CSS 选择器本地资源在wxss中是无法使用的,可以使用网络图片来代替本地图片。
小程序大小限制
小程序的大小不能超过1MB
,超过则无法真机运行和发布项目。
因此当项目中需要使用图片、音频、视频等资源时,应当将这些资源都存放在服务器上,让小程序通过网络来加载图片资源。
为了保证数据的安全性,小程序中强制要求使用 https
,且所访问的 https 地址必须在小程序的后台账号中被加入到可信域名
中。
自适应单位 rpx
在小程序里,长度单位可以使用 rpx
和 px
。 rpx 可以使组件自适应屏幕的高度和宽度,但使用 px 不会。
在做 UI 设计时,建议以 iPhone 6 的宽度 750个物理像素
作为标准,因为只有在 iPhone 6 的尺寸下,设计图里的 1个像素
才满足下面的转换关系::
1物理像素 = 1rpx = 0.5px
要强调的是,这里的分辨率指的是逻辑分辨率pt,而非物理分辨率。以iPhone 6为例,模拟器里给出的分辨率是:375×667;Dpr:2
它的意思是:iPhone 6的水平方向有375个逻辑像素点,而竖直方向有667个逻辑像素点,每个逻辑像素点包含2个物理像素点。我们通常在PS里做的设计图,它的像素可以简单理解为物理像素。
单向数据绑定
著名的 MVVM 框架 AngularJS 可以双向数据绑定,就是说当UI上的某个属性值时更改时,JS中被绑定的变量也会同样被更新,可以说非常方便了,但它的缺点就是性能较差。
而小程序的设计初衷就是“即来即用,用完就走”,为了达到这种效果,小程序依附在了微信,这种特性导致小程序的性能无法与原生APP相提并论。因此为了保证性能,小程序被设计成单向数据绑定,即逻辑层(js)的数据变化能反应到UI层(wxml);但UI层的数据变化就不能自动反馈到逻辑层。
网友评论