探索小程序实现

更新日期: 2020-01-06阅读: 2.1k标签: 小程序

随着小程序的发展与功能的逐步完善,越来越多的产品需要小程序与 APP 的功能能有一些共性,社区跨平台的解决方案越来越多,比如 taro 等为代表的把一套代码编译成多端运行的机制,本文会使用 Swift 作为原生语言,在 iOS 应用上运行一个小程序 Demo, 使用 Android && react Native 也可以采用同样的思路实现。

相关代码仓库: https://github.com/taixw2/rmini


编译层

编译的目的是为了抹平小程序的与 H5 的差异,利用 vue 实现数据绑定,利用 Web Component 实现小程序的组件功能。

从官网文档中可以看出来,运行一个小程序需要框架(数据绑定渲染)、组件(小程序渲染单元)、api(与原始交互的能力)。



框架实现

转换成单页应用(一种可行的方案)

把所有页面打包成一个 js, 再由 js 管理所有的路由和状态,这种方案适合在 web 端运行,并且是单引擎的方案,在模拟原生的右滑返回等效果也会不尽人意。


转换成多页面

众所周知,小程序是一个双引擎的框架,上面的方案显然不能达到要求, 双引擎的特点是在运行 javascript 的黑盒子中,无法访问到 dom && BOM 等。将所有的逻辑代码在原生的 JavascriptCore 中运行,WebView 中的 Javascript 引擎负责数据绑定,需要解决的难点是 JavascriptCore 中的 setData 怎么通知 WebView 渲染, WebView 的事件怎么执行 JavascriptCore,接着往下看。



抹平WXML

wxml 是一种类 html 标记语言,他负责所有的渲染规则,包括条件渲染、列表渲染、数据绑定等,与其再实现一种框架,还不如直接利用 Vue 实现同样的功能,再利用各种转换库将 wxml 中的事件转换成 Vue 能够识别的事件,如利用 post-html 可以做到如下的转换:


每一个事件绑定的方法全都在原生的 JSContext 中运行,所以此时的事件只需要传递给 JSContext 的作用。


抹平WXSS

wxss 作为小程序的样式语言,其余 css 的主要区别就是多了一个 rpx 单位,以下是官网的换算表:


根据上表可得知, rpx = (750 / 屏幕宽度) * px ;

在传统的移动端页面,我们的高清方案,一般需要获取 dpr, 然后修改动态修改 viewport 和 html 上的 font-size,但是小程序的代码因为是放在了设备本地,所以可以在下载小程序页面之后,我们还有一次编译机会,这时就可以把 rpx 根据当前设备的屏幕宽度替换成对应的 px。

还有一个 @import ,则利用 scss 或 less 就可以合并到同一个 css 文件中,

而全局样式则可以在构建 WXML 的时候再植入进入


抹平组件

组件具有独特的功能和自己的渲染规则,比如 scroll-view 具有 scroll-x 和 scroll-y 等属性控制滚动条。在 HTML5 中有一个重大的功能 web-component ,它能够自定义 html 元素,并且能够监控属性的变化,非常适合实现小程序组件。如:(使用了 lit-element 框架)


这里用了 lit-element 这个框架,能够简化一些操作。


抹平 Page 和 App

App 负责整个应用的生命周期以及存一些全局的数据, getApp 能获取到 app 的信息。 所以类似的结构可能是这样的:


getApp 能够直接访问到内部对象,并且在最顶层声明,这样每一个的地方都能访问到 getApp。

初始化一个页面都需要是实例化 PageClass, 即使再次进入(不是返回到这个页面)这个页面页需要再次重新实例化,每次实例化都需要关联一个 webviewId, 这个 ID 与原始的 webview 关联,这样每个 PageClass 中的 setData 都能找到对应的 webview 进行再次渲染,所以对应的代码可能是这样的:



抹平 API

通过 API 能够直接调用原生的功能,比如 wx.request , 如果直接在 webview 中的 JSContext 中运行的话,则可能存在跨域,但是放在原生就不会存在这个问题。

实现JSContext 调用原生代码的功能,需要给 JSContext 中植入一个 JSBridge,如: JSBridge.invoke 和 JSBridge.on , invoke 负责同步任务,on 负责异步任务,原生再利用反射(原生的反射真麻烦)调用对应的原生方法,原生可以利用 while(true) 挂起 JSContext,既可以达到同步和异步的方法。



打包 Javascript

Javascript 代码打包后被放在 JavascriptCore 中运行,唯一与 Webview 中的 JSContext 打交道的只有 setData , 先看一下打包流程:

  1. 利用 App.json 构建入口文件
  2. 利用 rollup 等工具将所有 Javascript 打包成一个文件(目前没有分包)

打包流程及其简单,接下来看一下两个 Javascript 引擎的交互过程。


打通 JSContext 到 WebView JavascriptCore

每次进入一个页面的时候都需要为这个页面的 webview 分配一个 id, 这个 id 至关重要,作为 native 与 JSContext (原生运行 javascript 的上下文对象) 与 webview 交互的唯一标识,JSContext 中需要实例化一个新的 PageClass 关联这个 id, native 中通过 id 保留 webview 的引用。在 JSContext 中植入一个 JSBridge 用于与原生交互,如: JSBridge.setData(webviewId, appId, data), 当 JSBridge 的 setData 被调用后,通过 appId + webviewId 就能找到对应的 webview, 再将 setData 传入 webview 中,在 Vue 接收到 data 后进行渲染, 整个过程如图:



打通 Webview JavascriptCore 到 JSContext

有了前面的铺垫,接下来再看 webview 如何调用 JSContext 的方法, Webview 唯一能与 JSContext 交互的方式只有事件,事件触发后,需要通过某种方式触发 JSContext 中的方法,最后调用 setData 再返回来重新渲染 webview。

webview 中绑定的方法名众多,如: bindtap="a", bindtap="b", bindtap="c" 等,但是可以通过 “抹平 WXML” 的时候最终只保留一个出口,如:

v-on:click="callClick('a', $event)" 等,这样 vue 中的 method 只需要实现对应的几个事件便可:



结尾

利用原生作为桥梁,在两个引擎之间通信,webview 中的 JSContext 负责接收渲染通知,以及发送事件到 Native 的 JSContext 中,JSContext 独立运行,所以既访问不到 window 对象,也访问不到 document 对象。

原文 http://www.cnblogs.com/Amy-so/p/12152225.html

链接: https://www.fly63.com/article/detial/7192

微信小程序开发中遇到的坑

开发小程序的过程中踩的坑不可谓不多,而有些坑也实在是让人郁闷,不扒一扒难以平我心头之愤呐。

微信小程序更新机制_微信小程序的2种更新方式

小程序的启动方式:冷启动和热启动,小程序冷启动时,会检查小程序是否有最新版本。如果有则将异步下载最新版本,但是仍将运行当前版本等到下一次冷启动时再运行最新版本。

微信小程序报错Do not have xx handler in current page的解决方法总汇

最近在做小程序开发的时候,发现小程序老是报Do not have xxx handler in current page... 惊不惊喜,意不意外,这是什么原因引起的呢?下面就整排查错误的解决办法。

微信小程序-自动定位并将经纬度解析为具体地址

微信小程序-微信小程序可以通过API获取当前位置的经纬度,在微信小程序开发文档中可以找到这个API的使用示例,但是需要获取具体地址就需要使用到外部的API(此处用到的是腾讯的位置服务)

微信小程序框架推荐_分享好用的小程序前端开发框架

选择优秀的框架,能帮助我们节省开发时间,提高代码重用性,让开发变得更简单。下面就整理关于微信小程序的前端框架,推荐给大家。

微信小程序UI组件、实用库、开发工具、服务端、Demo整理分享

小程序开放至今,许多公司企业已经开发出了自己的小程序。这篇文章主要整理分享:微信小程序UI组件、开发框架、实用库、开发工具、服务端、Demo等

微信小程序实现右侧菜单的功能效果

这篇文章主要讲解微信小程序如何实现 侧边栏滑动 功能 ,首先实现的思路为:wxml页面结构分为2层:侧边栏菜单、正文部分;正文部分监听touchstart、touchmove、touchend触摸事件

微信小程序之程序、页面注册及生命周期

微信小程序生命周期函数:onLoad: 页面加载。onShow: 页面显示每次打开页面都会调用一次。onReady: 页面初次渲染完成,onHide: 页面隐藏,onUnload: 页面卸载。在小程序中所有页面的路由全部由框架进行管理

微信小程序_实现动画旋转的多种方式

三种办法实现小程序的动画效果: 每帧setData()、使用Animation实现旋转效果、使用keyfreams。在wxss中通过控制transform组件的属性,来实现旋转效果,我也是采用的这种方式,性能上面提示非常多

微信小程序Socket的实现_基于socket-io

在小程序进行socket链接的时候发现:在1.7.0版本之前,一个微信小程序同时只能有一个 WebSocket 连接,而且在连接socket的时候,发现在还没有进行subscribe的情况下,就直接进行了广播,并且自动关闭了socket连接。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!