小程序开发策略：架构｜View – WXML、View – WXSS、View – Component

小程序架构

微信小程序的框架由两部分组成：View视图层和App Service逻辑层。 View层用于渲染页面结构，AppService层用于逻辑处理、数据请求、接口调用。

它们进入两根线。

它们进入两根线。

它们进入两根线。

显示层和逻辑层通过JSBridage与系统层通信。逻辑层将数据变化通知显示层，触发显示层页面更新。显示层将触发的事件通知给业务处理逻辑层。

补充

视图层使用WebView进行渲染，iOS使用内置的WKWebView，Android使用腾讯的x5核心（基于Blink）运行。

逻辑层在iOS中使用嵌入式JSCore运行，在Android中使用腾讯的x5核心（基于Blink）。

开发工具使用nw.js为显示层和逻辑层提供运行环境。

Mac 上使用 js-beautify 批量格式化微信开发工具@v1.02.1808080 代码：

cd /Applications/wechatwebdevtools.app/Contents/Resources/package.nw
find . -type f -name '*.js' -not -path "./node_modules/*" -not -path -exec js-beautify -r -s 2 -p -f '{}' \;
复制代码

发现于js/extensions/appservice/index.js❓ 发现于 js /扩展/ gamenaiveview /index.js 发现于：

  299: function(a, b, c) {
    'use strict';
    Object.defineProperty(b, '__esModule', {
      value: !0
    });
    var d = c(242),
      e = c(241),
      f = c(243),
      g = c(244);
    window.WeixinJSBridge = {
      on: d.a,
      invoke: e.a,
      publish: f.a,
      subscribe: g.a
    }
  },
复制代码

发现于 js/extensions/pageframe/index.js❓ 我们♿ 大家都看过 WeixinJSBridge 的定义。有on、调用、发布❿❿这里有一些重要的方法。

以invoke为例，此代码位于js/extensions/appservice/index.js❓中js/extensions/pageframe/index 。这段代码可以在JS段中找到：

g[d] = c, e.a.send({
    command: 'WEBVIEW_INVOKE',
    data: {
        api: a,
        args: b,
        callbackID: d
    }
})

复制代码

简单分析一下就知道：FieldCommand用于分隔行，用于调用。不同的来源使用不同的前缀。 data 包含 API 名称和参数。另外，callbackID指定接受回调的方法句柄。 Appservice和Webview使用的通信协议是一致的。

我们不能在代码中使用BOM和DOM，因为它们不存在。另一方面，我们不希望 JS 代码直接为视图提供服务。

在开发工具remote-helper.js中找到了这段代码：

const vm = require("vm");

const vmGlobal = {
    require: undefined,
    eval: undefined,
    process: undefined,
    setTimeout(...args) {
        //...省略代码
        return timerCount;
    },
    clearTimeout(id) {
        const timer = timers[id];
        if (timer) {
            clearTimeout(timer);
            delete timers[id];
        }
    },
    setInterval(...args) {
        //...省略代码
        return timerCount;
    },
    clearInterval(id) {
        const timer = timers[id];
        if (timer) {
            clearInterval(timer);
            delete timers[id];
        }
    },
    console: (() => {
        //...省略代码
        return consoleClone;
    })()
};
const jsVm = vm.createContext(vmGlobal);
// 省略大量代码...
function loadCode(filePath, sourceURL, content) {
    let ret;
    try {
        const script = typeof content === 'string' ? content : fs.readFileSync(filePath, 'utf-8').toString();
        ret = vm.runInContext(script, jsVm, {
            filename: sourceURL,
        });
    }
    catch (e) {
        // something went wrong in user code
        console.error(e);
    }
    return ret;
}
复制代码

这样的分层设计显然是有意为之的，而且其正在执行的中间层也可以通过程序的接口完全监控到。与正在传输的数据和响应时间相同的时间。一方面，程序的行为受到严格限制，另一方面，微信可以确保他们对小程序的内容和体验拥有绝对的控制权。

这样的结构也说明了小程序的动画和绘图API被设计为生成最终的对象而不是一步步执行它。原因是，与原生 API 相比，Json 格式的数据传输和解析成本较高。 ，如果频繁调用，很可能会消耗过多的性能，从而影响用户体验。

下载小程序完整包

应用服务-生命周期

面试题

1.动画必须与数据绑定，但绘图则不然。你认为这是为什么？ ？从功能上来说，它就是Webkit自带的

小程序。是按照appetch API规范实现的吗？答案显然是否定的。因为什么都没有 Promise

View - WXML

WXML（微信标记语言）

• 支持数据绑定 支持 模板和参考
• 支持添加事件（绑定丢失）

  Wxml -编译器：Wcc 将 Wxml 文件转换为 JS

  执行方法：Wcc index.wxml

  使用 Virtual DOM 进行部分更新

  查看 - WXSS-Shen (WXSS)

  wxss-编译器：wcsc 转换 wxss- js文件

  执行方式：wcsc index.wxss

  支持大部分CSS功能

  个人测试包括但❝不限于以下：

  动画

  • 关键帧

• 边框-半径
• calc()
• Selector，除了官方文档列出的之外，实际上还支持 elementelement> element elements element:last-of-type
• element:only- of -type
• 元素：唯一子元素
• 元素：第n个子元素（n）
• 元素：第n个最后一个子元素（）
• 元素：第n个类型（n）
• 元素:nth-last-of-type(n)
• :root
• element:empty):not iconfont

建议您尝试Css3的所有功能。

尺寸单位rpx

rpx（响应像素）：可根据屏幕宽度进行调整。指定的屏幕宽度为750rpx。公式：

const dsWidth = 750

export const screenHeightOfRpx = function () {
  return 750 / env.screenWidth * env.screenHeight
}

export const rpxToPx = function (rpx) {
  return env.screenWidth / 750 * rpx
}

export const pxToRpx = function (px) {
  return 750 / env.screenWidth * px
}

复制代码

设备	rpx 转换为 px（屏幕宽度/750）	px 转换为 rpx（750/屏幕宽度）
iPhone5x❝p 1px = 2.34rpx
iPhone6	1rpx = 0.5px	1px = 2rpx
iPhone6 Plus	xpx2 = rpx2 = rpx2 1.81rpx 您可以了解pr2rpx 加载器库。 样式导入 使用@import语句导入外部样式表，♿@import 后跟要导入的相对❝样式表，使用 ; 表示句子的结束。 内联样式 静态样式在类中均匀编写。 style 接收动态样式并在运行时解析它们。 style中尽量避免写静态样式，以免影响渲染速度。 全局样式和局部样式 app.wxss中定义的样式是全局样式，适用于每个页面。页面的wxss文件中定义的样式是本地样式，仅适用于相应的页面，并且会覆盖app.wxss中相同的选择器。 iconfont 截至20180810 小程序计划未来支持字体。参见微信公开课。 小程序开发与常规网页开发类似。也可以使用字体图标，但是src:url()无论本地还是远程地址都不起作用，并且可以显示base64值。 将 ttf 文件转换为 base64。打开这个平台transfonter.org/。单击“添加字体”按钮以加载 ttf 格式的文件。将下面的base64代码更改为on。点击转换按钮进行转换，转换后点击下载。 将下载的压缩文件中stylesheet.css的内容复制到font.wxss中，并将icomoon中style.css中除@font-face之外的所有代码复制到font.wxss中，并将i选择器替换为. iconfont，最后： <text class="iconfont icon-home" style="font-size:50px;color:red"></text> 复制代码 视图 - 组件 该小程序包含许多用于开发业务功能的组件。按功能与 HTML5 标签的对比如下： 小程序的组件基于 Web Component 标准 使用 Polymer 框架实现 Web Component View - Native Component 目前Native实现的是 cavnas video map textarea 原生组件层在上面的WebView层。目前这会导致一些问题： 本机实现的组件会阻塞其他组件 当 WebView 渲染的视图滚动时，本机实现的组件必须更新其位置，这将导致 Android 机器上的性能问题。比较明显的是，小部件原生组件 cover-view可以覆盖cavnas视频等，但也有缺点。比如你在cavnas上覆盖cover-view，你会发现坐标系不一样。顺利处理问题。