weex 写html 项目注意事项

1.  顶层div必须设置宽、高

.cRoot{
  width: 100%;
  height: 100vh;
}

2. 计算属性传递参数：利用发射的机制

<image class="icon" :src="getSrc(index)"></image>

computed:{
  getSrc(){
     return function( index ) {
       if(index == this.activeTab){
         return this.tabs[index].selectIcon
       }else{
         return this.tabs[index].icon
       }
     }
  }
},

3. prop属性需要动态修改时，不要直接在组件内修改，通过外部暴露方法修改

组件内点击操作时，修改属性，暴露方法到外部
methods:{
  onTabClick(index){
    this.$emit('onTabClick',{index:index})
  }
}

onTabClick(params){
  this.activeTab = params.index;
}

4. 定义全局的组件

   a. 首先按正常的组件写法，写一个组件

  b.  定义一个js component_regist.js 然后把需要注册的组件放入

import Vue from 'vue'
import TabbarBottom from '@/publics/components/tabbar-bottom.vue'
import Search from '@/publics/components/search-bar.vue'


var ComponentRegist = {
  
  init(){
    Vue.component('tabbar_bottom', TabbarBottom)
    Vue.component('search', Search)
  }
}

export default ComponentRegist

  c. 在entry.js中引入该组件

/** 注册自定义的全局组件 **/
import publicComponent from '@/component_regist'
publicComponent.init()

5. 网络接口

   如果是做html5的开发，首先需要服务器支持跨越的请求，

   头部定义：

httpReqHead:{
  "Content-type": "application/x-www-form-urlencoded;charset=utf-8",
}

然后post的body定义，不能用json的格式，需要用json的字符串

stream.fetch( {
    method:'POST',
    url:baseURL + path,
    type:'json',
    headers:header,
    body:JSON.stringify(params),
  },

6. slot的问题

基本的用法参考链接

https://cn.vuejs.org/v2/api/#slot

主要的作用是定一个模板的时候，可以通过定义slot把外部的组件嵌入

通过slot-scope做数据的传输

7. 如果子组件定义了props的参数 type:Number时

cols:{
  type:Number,
  default:2,
},

外部调用的时候，需要用“:“来指定，否则编译器提示传入过来的是字符串

<grid class="cList"
         :cols="3"
         :items="contents">

8. 父组件调用子组件: ref 在引用，注意如果要调用子组件的方法，一定要在mouted中调用，否则不生效，因为组件还没有加载完成

    https://cn.vuejs.org/v2/guide/components-edge-cases.html#%E8%AE%BF%E9%97%AE%E5%AD%90%E7%BB%84%E4%BB%B6%E5%AE%9E%E4%BE%8B%E6%88%96%E5%AD%90%E5%85%83%E7%B4%A0

<grid_scroll_v class="cList"
               :cols="2"
               ref="list"
               :items="goods">

</grid_scroll_v>

mounted(){
  this.$refs.list.loadData()
},

9. 小程序webview调用支付

https://www.cnblogs.com/slim/p/8920841.html

11. 引入全局的less

https://blog.csdn.net/sinat_19327991/article/details/72884523

12. 子组件如果要继承父的宽、高

一定要设置宽、高为100%

13. Vue components Cannot read property '__ob__' of undefined 错误

https://blog.csdn.net/qq_29629949/article/details/81746925