美文网首页
【小程序】基础知识

【小程序】基础知识

作者: 灰灰手记 | 来源:发表于2018-11-14 11:39 被阅读41次

【小程序】笔记内容声明及汇总


什么是小程序

小程序是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或者搜一下即可打开应用。也体现了“用完即走”的理念,用户不用关心是否安装太多应用的问题。应用将无处不在,随时可用,但又无须安装卸载。(微信之父张小龙)

小程序有如下特性:

  • 没有“官方的”应用市场。
  • 不能被关注,没有粉丝的概念。
  • 没有群发消息和主动推送消息的能力。
  • 微信中只有一个记录使用记录的【小程序】栏,其中的顺序只与用户使用习惯有关(某度的竞价排名得学学人家),除此之外没有明显的小程序入口。
  • 获取和使用小程序的途径只有这几种:扫描二维码、微信搜索、【小程序】栏。
  • 名称不能和公众号相同。
  • 有一定的分享能力,可以分享给朋友和群聊,但不能分享到朋友圈。
  • 同一个公司的公众号和小程序可以相互发现。公众号里可以看到该公司的小程序,同时,小程序里也可以看到该公司的公众号。

MINA框架与微信小程序

小程序并不是一项技术或者一个框架,而是一个生态,与之对应的应该是iOS生态和Android生态,其中小程序又与iOS生态极为相似,它们都非常封闭,而且审核非常严格(小程序的审核比苹果还要严格)。

MINA是官方小程序的内部开发代号,也是小程序运行框架的别名,它提供了小程序运行所需要的接口、模型和机制。据说MINA有MINA Is Not App的意思。


基本文件结构

按开发工具的引导,新建“普通快速启动模版”,创建好就能看到如下的目录结构,这也就是小程序最基本的文件结构了:

小程序目录结构

注意事项:

  • 根目录下面的3个文件:app.js、app.json、app.wxss是应用程序级别的,文件名和文件位置都不能改变,否则会提示找不到文件。
  • pages 下面的每个目录都是一个页面或者模版的目录,同一个页面的不同文件的名称必须一致,并且墙裂建议与该页面的目录名一致,也就是上面的index/index.*logs/logs.*
  • utils 目录仅作参考建议,不做强制约束;也就是说工具类可以放在其它目录,工具类的名称也可以随便定义。

页面的新建与注册

新建页面

如需要新建页面,比如建一个欢迎页面(welcome),在小程序启动时显示出来,只需要按如下步骤进行:

  1. 只需要在 pages 目录下,新建 welcome目录
  2. welcome目录 下,依次创建 welcome.js、welcome.json、welcome.wxml、welcome.wxss
  3. 按规则补充文件内容:因为这些文件的内容有特定的格式,空白内容会报错。这里 wxmlwxss 是和布局相关的,若初始布局没有内容,也可以不管这两个文件;但 jsjson 文件必须满足如下规则:
/// welcome.js
Page({

})

/// welcome.json
{

}

注册页面

页面创建好之后,要想小程序能正常调用这个页面,还需要在配置文件(app.json)中注册这个页面,注册方法很简单,只需要将页面路径加入pages数组即可,如下:

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

因为我们创建的是欢迎页面,是小程序的第一个页面,要想让小程序最先打开welcome页面,只需要将上面的数组元素顺序调整一下,将welcome放到第一的位置即可。

pages数组中,第一个元素是小程序的首页。
pages数组中,各页面路径不能带文件后缀。

一步到位

可以看到,上面的页面创建方法很繁琐,而且创建完后还要再注册,很容易出错。为了避免这种尴尬,开发工具提供了一种简单快捷的方法。

比如,我们需要创建一个 booklist 页面,只需要在 app.jsonpages 数组中,加入如下代码:

{
    "pages": [
        //......,
        "pages/booklist/booklist"
    ]
}

然后按下 Ctrl+S,开发工具就会按我们要求去创建页面,并为该页面自动生成相应的合法的文件。

一步到位

小程序支持的 CSS 选择器

小程序中的 CSS 只支持如下表所示的6种CSS选择器。

小程序支持的 CSS 选择器

本地资源在wxss中是无法使用的,可以使用网络图片来代替本地图片。


小程序大小限制

小程序的大小不能超过1MB,超过则无法真机运行和发布项目。

因此当项目中需要使用图片、音频、视频等资源时,应当将这些资源都存放在服务器上,让小程序通过网络来加载图片资源。

为了保证数据的安全性,小程序中强制要求使用 https,且所访问的 https 地址必须在小程序的后台账号中被加入到可信域名中。


自适应单位 rpx

在小程序里,长度单位可以使用 rpxpx。 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层的数据变化就不能自动反馈到逻辑层。

相关文章

网友评论

      本文标题:【小程序】基础知识

      本文链接:https://www.haomeiwen.com/subject/buccfqtx.html