当前位置：首页 > 建站教程 >

客户端动态化系列之——Weex(Js和VUE分别实现跑马灯效果的具体代码)

GG网络技术分享 2025-03-18 16:14 0

客户端动态化系列之——Weex

本文将从个人开发实践项目出发，发表一些对于Weex的看法和在项目中的实战经历。不涉及具体原理和概念性的东西，读者可以自行去Weex官网查阅。

Weex原理

大体上和React Native一致，都是一个“放大版”的JSBrdige。其核心无非就是自定义了一套DSL(.we)，配合vue实现数据绑定、vdom等等功能。再通过native端与JS端的数据、API交互使得最终体现为native的调用过程。

而在这过程中，iOS用了自带的引擎JavaScriptCore & Android则是Google V8。在这过程中有个坑，iOS版本Weex有内存泄漏的情况（Android没有），原因是JS Framework（Weex JS端的主程）并没有像V8一样hidden class的行为，GC回收不是很及时。Weex开发团队的同事发现了此bug，并在后续的版本中修复。

OK，我认为对于“应用框架者”来说，不用去care具体实现的原理。只需要了解怎么使用即可，毕竟这只是一个工具。如果是为了学习，可以去阅读，而对于“使用者”来说，快速地入门则是王道。

而Weex的使用，对于native来说，无非就是针对具体的业务场景实现Handler、Module、Component。

Handler

我们可以把Weex看做是一个提供了基础套件的UI渲染库。核心功能还是需要开发者自己来实现，比如：图片下载逻辑、网络请求、导航跳转等等。

所以开发者首先要关注的就是需要静态分析自己当前工程所需的功能，看看Weex需要你实现的handler中有哪些你要用到的，并实现它们。比如在我的项目中，就需要实现图片下载逻辑，于是实现并注册。

[WXSDKEngine registerHandler:[CNCWeexImageLoaderImplement new] withProtocol:@protocol(WXImgLoaderProtocol)];

Module

Module可以理解为JS端需要调用native才能处理的逻辑，并且在JSnative进行交互。这么说有点抽象，举个具体的例子：比如在JS端想访问native端的数据库（coredata、realm等），就需要实现一个module来满足JS调用native写好的module以实现native的逻辑。

在我的实战项目中，选择用module的方式实现网络请求与导航跳转。

[WXSDKEngine registerModule:@\"urlRoute\" withClass:[CNCWeexURLRouteModule class]];

[WXSDKEngine registerModule:@\"networkRequest\" withClass:[CNCWeexURLRouteModule class]];

Component

Component很好理解，要实现一个跑马灯UI的效果，在native端实现，并且注册到JS。JS端调用，即可展示出跑马灯。这就是Component，在JS满足不了或者实现成本很高的时候，则可以在native端实现Component供JS调用。

由于第一次试水Weex，并没有采取很复杂的UI，就没有用Component。

踩过的坑

JS中this关键字的用法与Objc不同，this的作用域仅在当前对象。而在JS中函数也算一个对象。如果在函数中套一个函数，此时用this，只能代表外层函数。而非Objc一样代表整个最外层对象，需要注意！

业务中碰到一个场景，需要在某个场景，native端主动调用JS。而Weex提供给外部的API并没有提供这样的能力，仅仅是在JS主动调native方法时传一个callback，并且在native方法执行完成时，callback销毁。而业务场景却需要在将来执行回传下来的callback。翻看源码，只能自己实现了。这里给个思路：

其实在Weex的实现中（不贴源码了），会判断native实现的方法（即给JS调用的方法，比如module实现的方法）的入参类型。如果是声明成WXModuleCallback，则Weex内部会进行处理，并转成block给iOS（Android同理）。而如果不是WXModuleCallback，则会透传一个String（weex标记的方法ID）下来，这很关键。于是我们可以投机取巧地把入参改成String，记录下这个String。在后期想调这个JS方法时，写如下代码即可

[[WXSDKManager bridgeMgr] callBack:weexInstance.instanceId funcId:aliveCallBackID params:params keepAlive:YES];

看法

Weex相比React Native，坑还是比较多的。但是从“使用者”角度来说，Weex方便很多。但是对于存在很多复杂业务场景的开发者来说，必然会去学习其原理，而此时Weex相比RN就没那么友善了。

因为在阿里，我更加支持Weex，也希望它变得越来越好。

无论采用哪种方式，两者都能实现客户端的动态化。而这对于一些多变的页面来说，是一种新的选择方式。

这是客户端动态化系列的第二篇文章，读者可以看前篇客户端动态化系列之——URLRoute，相信你对动态化有更深的理解。

Js和VUE分别实现跑马灯效果的具体代码

本文实例为大家分享了Js和VUE分别实现跑马灯效果的具体代码，供大家参考，具体内容如下

一、js实现跑马灯

1.效果图

2. 设计思路

使用截取字符串的方法，首先获取文本的值，再分别截取文本的第一个字符串和剩余的字符串，然后重新拼接一个新的字符串，最后把这个新字符串赋值给文本，代码如下：

var value=cont.innerHTML;

var start=value.substring(0,1);//截取第一个字符串

var end=value.substring(1);//截取剩余的字符串

var result=end+start;//拼接一个新的字符串

cont.innerHTML=result;//把新字符串赋值给p标签

setInterval( )返回一个整数类型的数，然后把这个数赋值给clearInterval( )让计时器停止

clearInterval(t);

然后点击开始按钮，跑马灯走起；点击停止按钮，跑马灯停止

start.onclick=function(){

clearInterval(t);//防止多次点击，而创建多个计时器

t=setInterval(function(){

var value=cont.innerHTML;

var start=value.substring(0,1);//截取第一个字符串

var end=value.substring(1);//截取剩余的字符串

var result=end+start;//拼接一个新的字符串

cont.innerHTML=result;//把新字符串赋值给p标签

},500);

}

stop.onclick=function(){

clearInterval(t);

}

3. 整体代码

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

margin:0px;

padding:0px;

}

.box{

width:300px;

margin:50px auto;

}

.content{

margin-bottom:20px;

}

</style>

</head>

<body>

<p class=\"content\">生命永无止境~~~</p>

<button class=\"start\">跑马灯走起</button>

<button class=\"stop\">跑马灯停止</button>

</div>

var cont=document.querySelector(\".content\");

var start=document.querySelector(\".start\");

var stop=document.querySelector(\".stop\");

var t;

start.onclick=function(){

clearInterval(t);//防止多次点击，而创建多个计时器

t=setInterval(function(){

var value=cont.innerHTML;

var start=value.substring(0,1);//截取第一个字符串

var end=value.substring(1);//截取剩余的字符串

var result=end+start;//拼接一个新的字符串

cont.innerHTML=result;//把新字符串赋值给p标签

},500);

}

stop.onclick=function(){

clearInterval(t);

}

</script>

</body>

</html>

二. vue实现跑马灯

话不多说，直接上代码了：

<div>

<p>{{message}}</p>

<button @click=\"start\" class=\"start\">跑马灯走起</button>

<button @click=\"stop\" class=\"stop\">跑马灯停止</button>

</div>

</template>

export default {

data(){

return{

message:\"生命永无止境~~~~\",

t:null

}

methods:{

start(){

clearInterval(this.t);//防止多次点击而创建多个计时器

this.t=setInterval(()=>{

var start=this.message.substring(0,1);//截取第一个字符串

var end=this.message.substring(1);//截取剩余的字符串

this.message=end+start;

},500)

stop(){

clearInterval(this.t);

}

</script>

</style>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

Js和VUE分别实现跑马灯效果的具体代码 (https://www.wpmee.com/) javascript教程第1张

标签：

建站教程

客户端动态化系列之——Weex(Js和VUE分别实现跑马灯效果的具体代码)