vlambda博客
学习文章列表

Weex开发采坑记录(一)

当使用计算属性的时候,如何需要传递参数, 不能如下方式


computed:{ realNameStates(status){ return (status===1)?'已实名':'未实名'  }}

这样的话


 <text class="child_item">{{realNameStates(item.status)}}</text>

发现取值无效:

正确做法:

应该以JavaScript闭包的形式

computed:{ realNameStates(){ return function(status){ return (status===1)?'已实名':'未实名' } }},

2.vue路由懒加载

vue来做一个单页面应用,当我们的项目越来越大,组件越来越多的时候,首次启动项目会特别慢,就算做一个加载框,蒙层之类的,体验也不会好,这个时候就需要按需加载(懒加载)

所谓按需加载(懒加载),顾名思义,就是当我需要的时候再给我。

常用的懒加载有2种:

(1)路由懒加载

用起来很简单,原来定义路由如下:


import RealNameQuery from '@/components/RealNameQuery'component:RealNameQuery

按需加载的写法就是


 component: resolve=> require(['@/components/RealNameQuery'],resolve)

(2)组件按需加载


3.weex调用native,并且native端给出回调

(1)native端定义方法被weex端调用

被JSMethod注解的方法将会被weex调用,通过jscallback回调给weex

 jsC4allback.invokeAndKeepAlive(jsonStr);

(2)weex中的写法


const realNameQueryModule =weex.requireModule('RealNameQueryModule')
realNameQueryModule.findDetailByMailNo(mailNo,function(result){ })

4.路由带参数跳转

在Vue.js中路由传参有2种方式,使用param的方式和使用query的方式,其中,使用query的方式传递时参数会显示到URL后面,如下所示:

//父组件传递参数

this.$router.push({ path:'/describe',      query:{       id:id      }})

//子组件接受参数

this.$route.query.id

使用query的方式时,父组件使用push来匹配路由,然后通过qurey将参数传递进去。子组件接收到传递过来的参数后,可以使用this.$route.query来获取传递的参数值。


与query相比,使用params传递的参数不会显示到URL中,并且在大多数情况下都使用params:

//父组件传递参数

this.$router.push({ name:'Describe', params :{ id:id }})

//子组件接收参数

this.$route.params.id

使用上面的两种方式进行参数传递时,传参使用的是this.$router.push()函数,接收参数使用的是this.$route.query及this.$route.params


不过,在组件中直接使用$route会使路由和逻辑代码形成高度耦合,从而增加了代码的复杂度,针对这一问题,vue-router提供了props来实现组件和路由的解耦,如下所示:

const User={  props:['id'],  template:'<div>User {{id}} </div>'}const router=new VueRouter({ routes:[    {path:'/user/:id',componet:Usr,props:true} ]})


参考:https://www.cnblogs.com/love314159/p/9284727.html