Weex初学与实践

最新推荐文章于 2022-04-29 13:22:49 发布

铛铛铛铛Huan

最新推荐文章于 2022-04-29 13:22:49 发布

阅读量586

点赞数

分类专栏：前端框架文章标签：前端

本文链接：https://blog.csdn.net/u010046318/article/details/99289274

版权

前端框架专栏收录该内容

1 篇文章 0 订阅

订阅专栏

什么是Weex

Weex是阿里2016年推出的一个跨平台 Web 应用框架，官网上的描述是一个可使用现代化的Web技术开发的高性能原生应用框架

Weex官网
所谓现代化的Web技术其实也就是指的近几点比较火的一些Web开发技术，比如VUE，Webpack打包工具，Node等等。
而高性能指的是 Weex框架做了很多工作是直接调原生组件和模块的，这样可以最大化地利用原生渲染的性能优势。

Weex的优势

Weex的一句口号就是Write once，run everyWhere.即我们写一套代码，就可以分别编译成不同平台的代码，然后在三端（Web端，Andriod端，IOS端）都可以展示出相同的效果，因此，跨平台就是Weex的一个最重要的优势。

可能我们很多前端开发工程师都有想过触及移动端开发的一些东西，也想作出一个APP来，但苦于没有那么多时间和精力去从头学习移动端开发的相关东西，但使用weex就可以作出一款我们想做的APP来，因为它支持Vue和Rax（类似React）语法，我们完全可以当成是利用VUE在写前端应用，这也是我觉得Weex的第二个优势，贴近前端框架生态。

Weex内置组件与模块

Weex提供一些内置的组件和模块，在官网上都有，本文仅对开发中使用过的组件和模块做一些介绍。

div

这是Weex的内置组件，虽然与html中的div名字一样，但其实是不同的东西，Weex中的div是不会自动滚动的，而且里面不能直接加文字，如果要加文字，需要用到text组件。

eg:

<div style="width: 200px; position: relative">
	<image class="back-image" :src=item.src style="width: 200px; height: 200px;"></image>
	<text class="desc">{{item.desc}}</text>
	<div class="view-part">
		<image style="width: 30px; height: 30px;" src="http://localhost:3000/images/view_icon.png"></image>
		<text style="font-size: 20px;color: white;">{{item.viewNum}}</text>
	</div>
</div>

text

在text中直接写文字，是会过滤掉里面的头尾空白的，如果需要保留头尾空白，只能通过数据绑定的方式。

<text style="font-size: 20px;color: white;">{{recommendSongs.viewNum}}</text>

data() {
	return {
		recommendSongs: {
                src: 'http://localhost:3000/images/recommend1.jpeg',
                desc: '[华语速爆新歌]最新华语音乐推荐',
                viewNum: '5.6亿',
                key: 1
        }
	}
}

image

image可以用来展示图片，但是必须指定width和height，否则页面上将不会展示出来。

同时，官网上也有说明：Weex 没有内置的图片库，因为一些开源项目如 SDWebImage 和Picasso已经能很好的解决这个问题，所以在使用之前，请在 native 侧先接入相应的 adapter 或者 handler。参见: Android adapter 和 iOS handler。

开发时，由于只配置了ios开发环境，因此可以看下是否有接入IOS相关的Handler.
注册Handler

在这里插入图片描述
上图就是在PlatForm/IOS里面的关于处理图片下载的一些Handler注册和实现。

目前Weex貌似还不支持本地图片，因此我们加载图片必须是网络上的图片资源。

Scroller

scroller是容纳子组件进行横向或竖向滚动的容器组件。如果你的组件需要进行滚动，可以将当作根元素或者父元素使用，否则页面无法滚动。

scroller需要显式的设置宽高，可使用 position: absolute; 定位或 width、height 设置其宽高值，不然也会出现页面上显示不了的情况。

<scroller class="content" @scroll="scrollHandler">
            <refresh class="refresh" @refresh="onrefresh">
              <text class="indicator">下拉刷新数据</text>
            </refresh> 
            <div class="song-list">
                <div class="song-list-item" v-for="item in recommendSongs" :key="item.key" @click="toMusicDetail(item)">
                    <div style="width: 200px; position: relative">
                        <image class="back-image" :src=item.src style="width: 200px; height: 200px;"></image>
                        <text class="desc">{{item.desc}}</text>
                        <div class="view-part">
                            <image style="width: 30px; height: 30px;" src="http://localhost:3000/images/view_icon.png"></image>
                            <text style="font-size: 20px;color: white;">{{item.viewNum}}</text>
                        </div>
                    </div>
                </div>
            </div>
            <loading @loading="onloading" :display="loadingFlag ? 'show' : 'hide'">
                <text>Loading</text>
            </loading>
</scroller>

如果要实现上拉加载或者下拉刷新的功能，可以在scroller里面嵌套loading和refresh组件，并在其上监听相应的事件即可。

navigator

navigator是Weex内置的一个模块，该模块可以用来实现页面跳转，提供了两个方法，push和pop，push负责将weex页面压入栈中，pop负责将栈顶的Weex页面弹出和显示。当然，也可以在Weex页面的URL后面附带参数，这是一种页面与页面通信的方式。

另外两个页面通信的方式还包括BroadcastChannel 和利用storage模块将参数信息存在本地。

var navigator = weex.requireModule('navigator');

var itemData = JSON.stringify(item);
navigator.push({
	url: 'http://' + this.toUrl + '/views/MusicDetail.html?itemData=' + itemData,
	    animated: "true"
    }, event => {
   		console.log('跳转成功');
   	});

stream

stream 模块提供了基本的网络请求能力，例如 GET 请求、POST 请求等，用于在组件的生命周期内与服务端进行交互。

const stream = weex.requireModule('stream');

stream.fetch({
	method: 'GET',
    url: 'http://localhost:3000/refreshHome',
	type:'json'
}, (ret) => {
	if(ret.status === 200){
		console.log(ret.data);
        this.posters = ret.data.posters;
		this.recommendSongs = ret.data.recommendSongs;
		this.newSongs = ret.data.newSongs;
		this.listenLists = ret.data.listenLists;
	}else{
		console.log("出错");
	}
},function(response){
	console.log('get json in progress:'+response.length);
});

当然，也可以对stream模块的Fetch进行封装，进行更多复杂状态码的处理。