本文共 2257 字,大约阅读时间需要 7 分钟。
如图:惬意
传送门:,或阅读原文。
http://mp.weixin.qq.com/s/0IqO5voR74eEV2VXtT58yw?utm_source=tuicool&utm_medium=referral
这个项目的背景还要从“移动企业门户”说起,这是我厂的一个小项目,现也开源在Github上,其目的是为了给企业开发自己的企业门户提供参考和模板,可以快速的用起来,或者参考一下我们是如何来实现移动企业门户的。
Demo 效果如图:
这个项目,主要使用了Vue2.0和Vue-router,其实Vue-router不是必须的,因为这只有一个页面,但是也应用到了Vue的方方面面。在创建项目时,用了vue-cil来初始化这个项目,不过我也为它修改了一些自己想要的东西,没错就是weex相关的构建与入口,具体如何用同一个Vue2.0项目既可以跑Web也可以跑Native,你可以参考一下我这个项目中的weex分支。
既然用到了vue-router,那还是简单的贴一下代码,非常简单:
import Vue from 'vue' import Router from 'vue-router' import Home from 'pages/home/index.vue' Vue.use(Router); const routes = [ { path: '/', name: 'home', component: Home }]; export default new Router({ routes: routes});
import Vue from 'vue'; import App from './App'; import router from './router'; new Vue({ el: '#app', router, template: '', components: { App }});
router的配置可以看的出来,非常的简单,一个对象用来描述一个path的所有,也是如此,你可以顺手的描述其它的规则,有path,component,等等。
整体的组件也是非常简单的,因为只需要引用即可。实际上稍微复杂一点的地方,主要在page/home/index.vue文件中,因为在这个文件里做了一些其它的事情,比如获取userid实现免登,那么只有当获取到userid之后才能去获取用户信息,也就是界面 下午好,管理员,icepy的变更。我用了$watch来处理这个问题,比较简单,:
this.$watch('userId',function(){ this.getUserInfo();});
getUserInfo定义在methods中:
getUserInfo: function(){ // 根据userid获取用户详细信息 const self = this; const getUserInfoRequest = { url: OPENAPIHOST + '/api/get', params: { userid: this.userId } }; dingWISDK.getUserInfo(getUserInfoRequest).then(function(response){ const data = response.data; self.meta.userInfo = data; }).catch(function(error){ alert('获取用户信息 error:' + JSON.stringify(error)); });}
当userid有变化时,立即调用getUserInfo来更新用户界面。
其实从源代码中可以看见,界面都是一个个单独的组件,通过数据的传递来渲染,单组件文件系统,没什么好说的,大家有兴趣可以多看一看官网的文档。当你不需要加入vuex时,对于驱动界面还是比较简单的,书写下来,只是有一些地方需要注意,特别是React开发者转过来的:
props传递,需要用v-bind:,并且在子组件中用props:[]来声明
监听事件时不需要bind,v-on:click="microAppsOpenLink(item,$event)"
建议很多东西都写全,不要写简写,比如:xxx这种,如果不是长期应用vue的开发者,看起来还要思考很久
因为dom变成了模板,模板有编译的过程,处理类似比如自动触发一个事件这样的需求时需要想一想,ref的处理,看起来没那么直观
引用组件的时候,需要显示的声明,比如:
components: { banner: banner, applist: applist, item: item, admin: admin, userlist: userlist, appmanager: appmanager},
也许还有很多需要注意的细微之处,待你慢慢挖掘了。
比较好的消息是WebStorm开始原生支持Vue了,可见其火热的趋势,回过头来可以看到我们做事情时的一些反思:贵在坚持。
你身边如果有朋友对混合领域(跨技术栈)或全栈,编程感悟感兴趣,可以转发给他们看哦,^_^先谢过啦。
转载地址:http://dseni.baihongyu.com/