又来霍霍uni-app了,初识uni-app

首先，各种介绍不介绍了，开始使用吧！

开发工具HBuilderx ，

image.png
image.png

运行，在开发的菜单中有，点击去各个平台运行即可。

运行微信小程序的时候需要注意：

image.png

除此之外还需要先打开小程序，然后找到设置，安全设置开启端口即可。

image.png

native.js 可以调用原生得拨打电话得接口

HBuilder快捷键

• ctrl+n 创建项目
• 按1 选择创建项目
• alt+u 选择uni-app
• alt +n 创建完成

当运行到小程序得时候，如果正在写的是详情页面，每次更改重新启动都是从首页开始。
这个时候需要在pages.json中配置

"condition": { //模式配置，仅开发期间生效
        "current": 0, //当前激活的模式（list 的索引项）
        "list": [{
                "name": "info", //模式名称
                "path": "pages/info/info", //启动页面，必选
                "query": "infoId=121375" //启动参数，在页面的onLoad函数里面得到。
            }，
{
                "name": "info1", //模式名称
                "path": "pages/info/info", //启动页面，必选
                "query": "infoId=121375" //启动参数，在页面的onLoad函数里面得到。
            }
        ]
    },

然后保存，打开小程序工具-》编译配置》info 即可

自定义组件中的销毁生命周期，如何销毁组件，可以通过v-if true false,动态变化

<test v-if="showTab"></test>
showTab :true

this.showTab:false

组件间的通讯

父子组件间的传递同vue
兄弟间的传值
a组件

<template>
<view>
我是a组件，{{num}}
</view>
</template>
<script>
export defatult {
  data(){
      num:0
  },
created(){
  uni.$on("updateNum",(num)=>{
      this.num+=num
  })
},
  methods:{

  }
}
</script>

b组件

<template>
<view>
我是b组件，我要修改a组件中的数据
<button @click="updateNums"></button>
</view>
</template>
<script>
export defatult {
  data(){
     
  }，
  methods:{
      updateNums(){
        uni.$emit('updateNum',10)
    }
   }
}