上一篇文章已经运行起了一个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
下次分享。。。
