小程序技术 ｜ 青训营笔记

Trust会长
35 阅读2分钟

这是我参与「第四届青训营 」笔记创作活动的第5天

小程序技术全解

发展历程

业务价值

与传统WEB的区别：

  • 有着固定的语法以及统一的版本管理，平台可以方便进行审核和管控。
  • 平台能够控制各个入口，如二维码，文章内嵌，端内分享，入口上也能带来更好的用户体验。
  • 小程序基于特殊的架构，在流畅度上比WEB更好，更有优秀的跳转体验。

三大价值：

  • 渠道价值：由于小程序的轻便性。依托于超级平台，小程序能够充分为很多场景导流。
  • 业务探索价值：相比原生APP来说，小程序的开发难度和成本都降低很多，这就创造了很多场景开发者能够用小程序来快速试错，不断探索新的价值。
  • 数字升级价值：小程序为许多线下场景展示了良好的容错空间，线下场景的小程序覆盖范围很广。

技术解析

小程序设计的三个目标：

  • 开发门槛低 => 采用 HTML + CSS + JS 开发
  • 接近原生的使用体验 => 资源加载 + 渲染 + 页面切换，多Webview，一个页面就是一个Webview
  • 安全的管控 => 不能让开发者通过JS来操作DOM，独立JS沙箱

模板语法：

<view 
    tt:for="{{list}}" 
    tt:if="{{isOpen}}"
    bindtap="onTap"
/>

样式：

view {
    background-color: "green";
    width: 750rpx;
}

逻辑交互：

Page({
    data: {
        list: ["a", "b", "c"],
        isOpen: true
    },
    onTap: function() {
        console.log("******Tap******");
    }
});

跨端框架

介绍：

  • 复杂应用构建
  • 一次开发可以跨多端
框架remaxtaromegalompvueuni-app
语法ReactReact/VueVueVueVue
厂家蚂蚁金服京东网易美团Hbuilder

原理：

  • 编译时：
    • 在编译时将框架语法转换成小程序语法
    • 语法分析，重新整合
    • 缺陷：无法完全抹平差异
  • 运行时：
    • 在运行时将框架语法转换成小程序语法
    • 使用虚拟DOM和Template组件
    • React/Vue在逻辑层操作虚拟DOM和JS代码，在渲染层生成实际要渲染的元素树，组合Template
avatar
文章
阅读
粉丝