Weex初学与实践

什么是Weex

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

所谓现代化的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:

	
	{{item.desc}}
	

		
		{{item.viewNum}}
	

text

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

{{recommendSongs.viewNum}}

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.

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

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

Scroller

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

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

            
              下拉刷新数据
             
            

                

                    

                        
                        {{item.desc}}
                        

                            
                            {{item.viewNum}}
                        
                    
                
            
            
                Loading
            

如果要实现上拉加载或者下拉刷新的功能，可以在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进行封装，进行更多复杂状态码的处理。

Weex相关生态

目前生产上纯利用Weex的貌似不是很多，而Weex社区也不是特别活跃。目前在开发中出了使用Weex，还有用到Weex-ui这个组件库，比如wxc-searchbar，wxc-tab-bar等等。

本文只是对Weex有了初步的使用和了解，下面可以看下做的Demo，下面的Demo仅仅是对网易云音乐的一个仿照，因为本地只配了IOS的开发环境，因此，这里只展示WEB端和IOS端的效果。