uni-app 在微信开发者工具中运行及组件的使用

上一篇文章已经运行起了一个uni-app项目的小demo，但是运行在Chrome浏览器的H5页面，那在微信开发者工具中如何实时模拟查看该项目呢？

1.在微信开发者工具中运行

1）配置小程序IDE相关路径
说明：只有配置了才能在微信小程序运开发者工具中运行成功！

运行设置
配置IDE路径

2）开启小程序IDE服务端口的安全设置

server port security

3）进入test项目，点击工具栏的运行 -> 运行到小程序模拟器 -> 微信开发者工具，生成对应的微信小程序项目，即可在微信开发者工具里面体验了。

运行到小程序模拟器

4）运行效果

运行效果

2. 组件

1）基础组件，与微信小程序相同;
2）自定义组件，根据需要通过基础组件进行组合；
3）uni-ui，是DCloud提供的基于vue组件的、flex布局的、无dom的跨全端扩展ui框架；
4）插件市场，提供了更多扩展组件、模板，包括前端组件和原生扩展组件，具体见插件市场;

1）基础组件

<view>
  <icon type="success" size="26"/>
  <button type="primary">页面主操作 Normal</button>
  <progress percent="20" show-info stroke-width="3" />
</view>

基础组件

2）自定义组件

// list.vue
<template>
    <view v-for="(item, index) in list" :key="index" class='list'>
      <view class='title-icon'>
        <image src='{{item.imgSrc}}'></image>
      </view>
      <view  class='right bottom'>
        <text>{{item.title}}</text>
        <image src='/static/rightNewArrow.png'></image>
      </view>
    </view>
</template>

<script>
    export default {
    name: "list",
    //属性
    props: {
        list: {
            type: Array,
            value: ""
        }
    },
    created() {
        console.log(999, this.list)
    }
}
</script>

<style>
    .list {
  display: flex;
  height: 112rpx;
  line-height: 112rpx;
}
.list .title-icon {
  width: 48rpx;
  flex-grow: 0;
  margin-right: 24rpx;
  position: relative;
}
.list .title-icon image {
  width: 48rpx;
  height: 48rpx;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.list .right {
  display: flex;
  flex-grow: 1;
  justify-content: space-between;
  position: relative;
}
.list .bottom::after {
  content: '';
  height: 1px;
  width: 100%;
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  background-color: #E8ECED;
  transform: scaleY(0.5);
}
.list .right text {
  font-size: 34rpx;
  color: rgba(53,53,54,1);
}
.list .right image{
  width: 12rpx;
  height: 20rpx;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
</style>

引用并使用组件

// personal.vue
<template>
    <view class="person-ctn">
        <list v-bind:list="list"></list>
    </view>
</template>

<script>
import list from "../../components/list.vue";
export default {
    components: {
        list,
    },
    data() {
        return {
            list: [
              { title: '我的推荐', imgSrc: '/static/myRecommend.png', path: '/pages/myRecommend/myRecommend' },
              { title: '推广同盟', imgSrc: '/static/recommendAlliance.png', path: '/pages/promote/promote' },
              { title: '资金明细', imgSrc: '/static/capitalDetail.png', path: '/pages/capital/capital' },
              { title: '设置', imgSrc: '/static/setting.png', path: '/pages/setting/setting' },
            ],
        }
    },
    methods: {
        
    }
}
</script>

<style>
    .person-ctn {
        padding: 0 32rpx;
    }
</style>

效果图

list列表

3）uni-ui

下次分享。。。