閱讀本文需要了解weex和vue，具體點(diǎn)擊相應(yīng)鏈接，喜歡簡(jiǎn)單的東西，所以會(huì)更新一些系列文章，關(guān)于weex的。
你需要node的環(huán)境，詳細(xì)安裝請(qǐng)見(jiàn)官網(wǎng)。
工程是以weex提供的weex-tookit為基礎(chǔ)的。安裝包并查看版本。
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 項(xiàng)目，使用前請(qǐng)確認(rèn)版本是否正確。
初始化一個(gè)weex的web項(xiàng)目,cd project-name目錄，執(zhí)行npm install
weex init project-name
安裝vue-router,執(zhí)行npm run dev可以進(jìn)行開(kāi)發(fā)啦。
npm install vue-router
二： 開(kāi)發(fā)階段
1.在src目錄下新建一個(gè)router文件夾。然后新建index.js，添加router和路由實(shí)例。
//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環(huán)境已經(jīng)內(nèi)置了，這樣可以減小bundle包的體積，很贊的功能。
2.設(shè)置redirect，確保路由不會(huì)出錯(cuò)。
2.app.js添加路由功能。main.router=router添加了路由
importmainfrom'./src/main.vue'importrouterfrom'./src/router/index'main.el ='#root'main.router=router;exportdefaultnewVue(main)
3.現(xiàn)在處理main.vue文件。添加router-view，作為view的根節(jié)點(diǎn)。
在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 :"計(jì)算器", 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 :"計(jì)算器", 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 :"計(jì)算器", 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 :"計(jì)算器", 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 :"計(jì)算器", 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 :"計(jì)算器", 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); } } }垃圾簡(jiǎn)書(shū)，不能粘貼代碼
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 :"計(jì)算器",? ? ? ? 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 :"計(jì)算器",? ? ? ? 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服務(wù)器，或則放到native的資源文件中，android放到asset目錄下。使用weex的Playground App去預(yù)覽。本位的web的URLhttp://1.nativeapp.sinaapp.com/weex/app.weex.js
2.后續(xù)文章會(huì)陸續(xù)更新，使用和發(fā)掘更多vue和weex的功能。
