阅读本文需要了解weex和vue，具体点击相应链接，喜欢简单的东西，所以会更新一些系列文章，关于weex的。
你需要node的环境，详细安装请见官网。
工程是以weex提供的weex-tookit为基础的。安装包并查看版本。
npm install -g weex-toolkit weex -v v1.0.5- weex-builder : v0.2.6- weex-devtool : v0.2.79- weex-previewer : v1.3.7
注意: weex-toolkit 在 1.0.1 之后才支持初始化 Vue 项目，使用前请确认版本是否正确。
初始化一个weex的web项目,cd project-name目录，执行npm install
weex init project-name
安装vue-router,执行npm run dev可以进行开发啦。
npm install vue-router
二： 开发阶段
1.在src目录下新建一个router文件夹。然后新建index.js，添加router和路由实例。
//importVue from'vue'importRouter from'vue-router'importTops from'../tops.vue'importLives from'../lives.vue'importRecommend from'../recommend.vue'importCalculator from'../calculator.vue'Vue.use(Router)exportdefaultnew Router({routes:[{path:'/tops',name:'tops',component: Tops},{path:'/live',name:'live',component: Lives},{path:'/recommend',name:'recommend',component: Recommend},{path:'/calculator',name:'calculator',component: Calculator},{path:'/', redirect:'/tops'}]})
1.不要在工程里面引入vue，weex环境已经内置了，这样可以减小bundle包的体积，很赞的功能。
2.设置redirect，确保路由不会出错。
2.app.js添加路由功能。main.router=router添加了路由
importmainfrom'./src/main.vue'importrouterfrom'./src/router/index'main.el ='#root'main.router=router;exportdefaultnewVue(main)
3.现在处理main.vue文件。添加router-view，作为view的根节点。
在view中添加list，
{{item.name}}
script添加处理代码
importrouterfrom'./router/index.js'export default { data: { logoUrl:'https://alibaba.github.io/weex/img/weex_logo_blue@3x.png', target:'World', deviceWidth:"640px", navList : [{ id :"001", name :"要闻", href :"tops"}, { id :"002", name :"直播", href :"live"}, { id :"003", name :"推荐", href :"recommend"},, { id :"006", name :"计算器", href :"calculator"}] }, created:function(){ console.log(weex.config);this.deviceWidth=weex.config.deviceWidth+"px"; router.push('tops'); }, methods: { update:function(e){this.target ='Weex'console.log('target:',this.target) }, goto:function(index){console.log(index);letname=this.navList[index].href;console.log(name);console.log("--------");//console.log(router.history.router.mode);router.push(name); } } }importrouterfrom'./router/index.js'export default { data: { logoUrl:'https://alibaba.github.io/weex/img/weex_logo_blue@3x.png', target:'World', deviceWidth:"640px", navList : [{ id :"001", name :"要闻", href :"tops"}, { id :"002", name :"直播", href :"live"}, { id :"003", name :"推荐", href :"recommend"},, { id :"006", name :"计算器", href :"calculator"}] }, created:function(){ console.log(weex.config);this.deviceWidth=weex.config.deviceWidth+"px"; router.push('tops'); }, methods: { update:function(e){this.target ='Weex'console.log('target:',this.target) }, goto:function(index){console.log(index);letname=this.navList[index].href;console.log(name);console.log("--------");//console.log(router.history.router.mode);router.push(name); } } }importrouterfrom'./router/index.js'export default { data: { logoUrl:'https://alibaba.github.io/weex/img/weex_logo_blue@3x.png', target:'World', deviceWidth:"640px", navList : [{ id :"001", name :"要闻", href :"tops"}, { id :"002", name :"直播", href :"live"}, { id :"003", name :"推荐", href :"recommend"},, { id :"006", name :"计算器", href :"calculator"}] }, created:function(){ console.log(weex.config);this.deviceWidth=weex.config.deviceWidth+"px"; router.push('tops'); }, methods: { update:function(e){this.target ='Weex'console.log('target:',this.target) }, goto:function(index){console.log(index);letname=this.navList[index].href;console.log(name);console.log("--------");//console.log(router.history.router.mode);router.push(name); } } }importrouterfrom'./router/index.js'export default { data: { logoUrl:'https://alibaba.github.io/weex/img/weex_logo_blue@3x.png', target:'World', deviceWidth:"640px", navList : [{ id :"001", name :"要闻", href :"tops"}, { id :"002", name :"直播", href :"live"}, { id :"003", name :"推荐", href :"recommend"},, { id :"006", name :"计算器", href :"calculator"}] }, created:function(){ console.log(weex.config);this.deviceWidth=weex.config.deviceWidth+"px"; router.push('tops'); }, methods: { update:function(e){this.target ='Weex'console.log('target:',this.target) }, goto:function(index){console.log(index);letname=this.navList[index].href;console.log(name);console.log("--------");//console.log(router.history.router.mode);router.push(name); } } }importrouterfrom'./router/index.js'export default { data: { logoUrl:'https://alibaba.github.io/weex/img/weex_logo_blue@3x.png', target:'World', deviceWidth:"640px", navList : [{ id :"001", name :"要闻", href :"tops"}, { id :"002", name :"直播", href :"live"}, { id :"003", name :"推荐", href :"recommend"},, { id :"006", name :"计算器", href :"calculator"}] }, created:function(){ console.log(weex.config);this.deviceWidth=weex.config.deviceWidth+"px"; router.push('tops'); }, methods: { update:function(e){this.target ='Weex'console.log('target:',this.target) }, goto:function(index){console.log(index);letname=this.navList[index].href;console.log(name);console.log("--------");//console.log(router.history.router.mode);router.push(name); } } }importrouterfrom'./router/index.js'export default { data: { logoUrl:'https://alibaba.github.io/weex/img/weex_logo_blue@3x.png', target:'World', deviceWidth:"640px", navList : [{ id :"001", name :"要闻", href :"tops"}, { id :"002", name :"直播", href :"live"}, { id :"003", name :"推荐", href :"recommend"},, { id :"006", name :"计算器", href :"calculator"}] }, created:function(){ console.log(weex.config);this.deviceWidth=weex.config.deviceWidth+"px"; router.push('tops'); }, methods: { update:function(e){this.target ='Weex'console.log('target:',this.target) }, goto:function(index){console.log(index);letname=this.navList[index].href;console.log(name);console.log("--------");//console.log(router.history.router.mode);router.push(name); } } }垃圾简书，不能粘贴代码
importrouterfrom'./router/index.js'export default { data: { logoUrl:'https://alibaba.github.io/weex/img/weex_logo_blue@3x.png', target:'World', deviceWidth:"640px", navList : [{ id :"001", name :"要闻", href :"tops"}, { id :"002", name :"直播", href :"live"}, { id :"003", name :"推荐", href :"recommend"},, { id :"006", name :"计算器", href :"calculator"}] }, created:function(){ console.log(weex.config);this.deviceWidth=weex.config.deviceWidth+"px"; router.push('tops'); }, methods: { update:function(e){this.target ='Weex'console.log('target:',this.target) }, goto:function(index){console.log(index);letname=this.navList[index].href;console.log(name);console.log("--------");//console.log(router.history.router.mode);router.push(name); } } }
importrouterfrom'./router/index.js'export default { data: { logoUrl:'https://alibaba.github.io/weex/img/weex_logo_blue@3x.png', target:'World', deviceWidth:"640px", navList : [{ id :"001", name :"要闻", href :"tops"}, { id :"002", name :"直播", href :"live"}, { id :"003", name :"推荐", href :"recommend"},, { id :"006", name :"计算器", href :"calculator"}] }, created:function(){ console.log(weex.config);this.deviceWidth=weex.config.deviceWidth+"px"; router.push('tops'); }, methods: { update:function(e){this.target ='Weex'console.log('target:',this.target) }, goto:function(index){console.log(index);letname=this.navList[index].href;console.log(name);console.log("--------");//console.log(router.history.router.mode);router.push(name); } } }
1.在工程目录中dist下生成了app.weex.js文件，可以放到web服务器，或则放到native的资源文件中，android放到asset目录下。使用weex的Playground App去预览。本位的web的URLhttp://1.nativeapp.sinaapp.com/weex/app.weex.js
2.后续文章会陆续更新，使用和发掘更多vue和weex的功能。
网友评论