Weex开发采坑记录

Posted 2021-04-29 码上就好

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

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