小程序的雏形及原理

·  阅读 471
小程序的雏形及原理

小程序雏形

一开始微信为内部人员提供一系列的原生 JS API,以实现一系列功能的目的.一开始只是内部使用,后来很多外部开发者也陆续使用,逐渐成为微信中网页的事实标准。

微信内嵌浏览器定义了一个私有 JavaScript 对象:WeixinJSBridge,通过操作这个对象的相关方法可以实现分享到微信朋友圈,和判断一个微信号的关注状态以及实现关注指定微信号等功能。

以下就是通过WeixinJSBridge方法实现在浏览器中预览图片的功能:

WeixinJSBridge.invoke('imagePreview', {
    current: 'http://inews.gtimg.com/newsapp_bt/0/1693121381/641',
    urls: [ // 所有图片的URL列表,数组格式
        'https://img1.gtimg.com/10/1048/104857/10485731_980x1200_0.jpg',
        'https://img1.gtimg.com/10/1048/104857/10485726_980x1200_0.jpg',
        'https://img1.gtimg.com/10/1048/104857/10485729_980x1200_0.jpg'
    ]
}, function(res) {
    console.log(res.err_msg)
})

后来微信观察到使用内置方法的开发者很多,所以干脆在2015年初,微信发布了一整套网页开发工具包,称之为 JS-SDK,开放了拍摄、录音、语音识别、二维码、地图、支付、分享、卡券等几十个API。给所有的 Web 开发者打开了一扇全新的窗户,让所有开发者都可以使用到微信的原生能力,去完成一些之前做不到或者难以做到的事情。

以下就是用JSSDK方法实现预览图片

wx.previewImage({
  current: 'https://img1.gtimg.com/10/1048/104857/10485726_980x1200_0.jpg',
  urls: [ // 所有图片的URL列表,数组格式
    'https://img1.gtimg.com/10/1048/104857/10485731_980x1200_0.jpg',
    'https://img1.gtimg.com/10/1048/104857/10485726_980x1200_0.jpg',
    'https://img1.gtimg.com/10/1048/104857/10485729_980x1200_0.jpg'
  ],
  success: function(res) {
    console.log(res)
  }
})

效果: 但是虽然提供这些原生方法,也仍然会存在一些体验不好的情况就像:用户在访问网页的时候,在浏览器开始显示之前都会有一个白屏的过程,在移动端,受限于设备性能和网络速度,白屏会更加明显。

因此需要设计一个:

对开发者来说能够获取微信原生系统的权限,能够使开发更高效且简单的系统

对用户来说能够使打开页面时间更短,体验更好的系统

这就是小程序的由来

小程序是什么

小程序是内置于微信的云端应用程序,不需安装下载,用完即走

也可理解为"镶嵌在微信(支付宝,京东,百度)里的 app"

用户通过扫一扫和搜一下就可以打开小程序页面

特点:

  • 占用空间小可以忽略不计
  • 开发周期短
  • 用户体验接近原生 app...

小程序与普通H5开发的区别

运行环境

  • H5

在浏览器中开发网页时,在 JS 引擎运行脚本期间,GUI 渲染线程都是处于挂起状态的,他们俩处于同一线程中,渲染线程和 js 脚本线程是互斥的.开发者可以使用到各种浏览器暴露出来的 DOM API操控 DOM 元素

  • 小程序

小程序的渲染层和逻辑层是分开的,分成不同的线程.逻辑层运行在 JSCore 引擎中,并没有一个完整的浏览器对象,缺少相关的 DOM API

开发成本

小程序的开发成本比以往的 HTML5 开发的 web 成本低很多

  • H5:

开发一个 H5,需要从开发工具、前端框架、模块管理工具、任务管理工具,还有 UI 库选择、接口调用工具、浏览器兼容性等等都要考虑

  • 小程序:

微信提供了统一的开发工具,并且规范了开发标准,可以随意调用微信开发里的 API,不用担心浏览器的兼容性

系统权限

  • 小程序:

微信作为原生 app 能获取到更多的系统权限,如网络通信状态、数据缓存能力等,因此小程序也能因此获取到系统级权限

  • H5:

H5 应用则相对少了很多 所以微信小程序介于 web 端和原生 App 之间,能够丰富调用功能接口,同时又跨平台。

用户体验

  • H5:

我们在打开一个 HTML5 页面的时候,实际上就是打开一个 web 网页,而网页在浏览的时候,需要在浏览器中进行渲染,这个过程叫做加载,无论加载的时间的长短,都会给用户一种「卡」或者「不灵敏」的感觉。

  • 小程序:

小程序是微信内的云端应用,通过 WebSocket 双向通信(保证无需刷新即时通信)、本地缓存(图片与 UI 本地缓存降低与服务器交互延时)以及微信底层技术优化实现了小程序接近原生 APP 的体验。所以在使用小程序的时候,同等网络条件下几乎不用等待,可以像操作普通 app 一样流畅。

小程序原理

小程序的渲染层和逻辑层分别由2个线程管理:

  • 渲染层:小程序提供了自己的视图层描述语言WXML和WXSS,界面渲染相关的任务全都在 WebView 线程里执行。一个小程序存在多个界面,所以渲染层存在多个 WebView 线程。
  • 逻辑层:采用 JsCore 线程运行JS脚本。

视图层和逻辑层通过系统层的JSBridage进行通信,逻辑层把数据变化通知到视图层,触发视图层页面更新,视图层把触发的事件通知到逻辑层进行业务处理 , 如下图 :

逻辑层在 JavaScript 的基础上,还增加了一些功能,以方便小程序的开发:

  • 增加 App 和 Page 方法,进行程序注册和页面注册。
  • 增加 getApp 和 getCurrentPages 方法,分别用来获取 App 实例和当前页面栈。
  • 提供丰富的 API,如微信用户数据,扫一扫,支付等微信特有能力。
  • 提供模块化能力,每个页面有独立的作用域。

举个栗子:

<!-- This is our View -->
<view> Hello {{name}}! </view>
<button bindtap="changeName"> Click me! </button>

// This is our App Service.
// This is our data.
var helloData = {
  name: 'Weixin'
}

// Register a Page.
Page({
  data: helloData,
  changeName: function(e) {
    // sent data change to view
    this.setData({
      name: 'MINA'
    })
  }
})
  • 开发者通过框架将逻辑层数据中的 name 与视图层的 name 进行了绑定,所以在页面一打开的时候会显示 Hello Weixin!;
  • 当点击按钮的时候,视图层会发送 changeName 的事件给逻辑层,逻辑层找到并执行对应的事件处理函数;
  • 回调函数触发后,逻辑层执行 setData 的操作,将 data 中的 name 从 Weixin 变为 MINA,因为该数据和视图层已经绑定了,从而视图层会自动改变为 Hello MINA!。

小程序分别会在IOS和安卓的微信客户端及开发者工具中运行,但是运行环境解析的内核有所区别:

运行环境逻辑层渲染层
iOSJavaScriptCoreWKWebView
安卓V8chromium 定制内核
小程序开发者工具NWJSChrome WebView

小程序代码构成

​ 我们通过开发者工具快速创建了一个 QuickStart 项目。你可以留意到这个项目里边生成了不同类型的文件:

  1. .json 后缀的 JSON 配置文件
  2. .wxml 后缀的 WXML 模板文件
  3. .wxss 后缀的 WXSS 样式文件
  4. .js 后缀的 JS 脚本逻辑文件

JSON 配置

根目录下有一个 app.json 和 project.config.json,pages/index 下有个 index.json 文件

  • app.json 是当前小程序的全局配置,包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。
{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle":"black"
  }
}
  • 小程序开发者工具在每个项目的根目录都会生成一个 project.config.json,你在工具上做的任何配置都会写入到这个文件,当你重新安装工具或者换电脑工作时,你只要载入同一个项目的代码包,开发者工具就自动会帮你恢复到当时你开发项目时的个性化配置

  • pages/index 下的 index.json 则定义了每个页面下的一些属性,例如顶部颜色,是否允许下拉刷新等等

WXML 模板

WXML 和 HTML 非常类似,由标签属性等构成,但是也有不同点:

  1. 标签名字不一样
  • html 中常用的一些标签是 div,p,span.开发者根据这些标签组合成不同的组件
  • wxml 中用的标签则是已经封装好基本能力的标签像 view, button,text,image,button 等,在不影响开发者源代码情况下为后续做性能优化,以及约束开发者写出性能与体验不低于基线的代码
  1. 多了一些 wx:if 这样的属性以及 {{ }} 这样的表达式
  • html 中可以通过 js 来操作 dom.js 通过记录一些状态在变量中,通过 dom api 来操控 dom 的属性和行为
  • 在小程序中渲染层和逻辑层是分开的,因此 js 也就获取不到 dom,wxml 中通过模板语法来描述状态和界面结构的关系,通过 {{ }} 的语法把一个变量绑定到界面上,还有一些 wx:开头的指令来控制在界面的展示

WXSS 样式

WXSS 具有 CSS 大部分的特性,小程序在 WXSS 也做了一些扩充和修改。

  1. 新增了尺寸单位 rpx。rpx 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素。

  2. 样式导入:提供全局样式和局部样式,以写一个 app.wxss 作为全局样式,会作用于当前小程序的所有页面,局部页面样式 page.wxss 仅对当前页面生效。

js 逻辑交互

和网页开发的 js 脚本文件作用相同,小程序会提供自己的 api 供开发者使用

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改