上一篇文章已经运行起了一个uni-app项目的小demo，但是运行在Chrome浏览器的H5页面，那在微信开发者工具中如何实时模拟查看该项目呢？
2. 开启小程序IDE服务端口的设置—>安全设置—>安全 （开启）
3. 修改 manifest.json配置文件，添加自己的小程序AppId: 4. 进入test项目，点击工具栏的运行 -> 运行到小程序模拟器 -> 微信开发者工具，生成对应的微信小程序项目，即可在微信开发者工具里面体验了。 5. 运行效果
1）基础组件，与微信小程序相同; 2）自定义组件，根据需要通过基础组件进行组合； 3）uni-ui，是DCloud提供的基于vue组件的、flex布局的、无dom的跨全端扩展ui框架； 4）插件市场，提供了更多扩展组件、模板，包括前端组件和原生扩展组件，具体见插件市场;
1、拷贝common目录到项目中，icon.css在common中，并修改引入的字体路径 2、拷贝static目录到项目中，字体文件在static目录中。
在mainjs中引入iconfont.css
// 引入全局css import './static/2002icon/iconfont.css'在组件中页面中使用：
<text class="iconfont icon-jinru"></text>根目录下创建components目录，创建list.vue组件
<template> <view class="container"> <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> <text class="iconfont icon-jinru"></text> </view> </view> </view> </template> <script> export default { name: "list", data(){ return{ } }, //属性 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; line-height: 112rpx; } .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); } </style> 父组件我的页面my.vue，引入自定义组件list.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:require("../../static/tabbar/paper.png"), path: '/pages/myRecommend/myRecommend' }, { title: '推广同盟', imgSrc:require("../../static/tabbar/news.png"), path: '/pages/promote/promote' }, { title: '资金明细', imgSrc:require("../../static/tabbar/home.png"), path: '/pages/capital/capital' }, { title: '设置', imgSrc:require("../../static/tabbar/index.png"), path: '/pages/setting/setting' }, ], } }, methods: { } } </script> <style> .person-ctn { padding: 0 32rpx; } </style>最终效果：
1）uni-ui 是全端兼容的基于flex布局的ui库； 2）可以使用 npm 的安装使用方式，也可下载相关组件直接使用； 3）uni-ui 不支持使用 Vue.use() 的方式安装 4）uni-ui 依赖 scss，若是 HBuilderX 中创建的 uni-app 项目，需要在 HBuilderX 中安装 scss 插件；如果是使用 cli 创建的 uni-app 项目，需要在项目下npm安装node-sass 和 sass-loader
在 HBuilderX 中新建 uni-app 项目，进入项目目录，执行：
npm init -yindex.vue引入组件，在template中使用
<template> <view class="homework-ctn"> <uni-card :title='title' :isFull="isFull" :note="note" :thumbnail="thumbnail" :extra="extra"> helloword </uni-card> <uni-pagination show-icon=false total=100 pageSize=10 current=2 prev-text="上一页" next-text="下一页" ></uni-pagination> </view> </template> <script> import {uniCard, uniPagination} from '@dcloudio/uni-ui' // 也可使用此方式引入组件 import uniBadge from '@dcloudio/uni-ui/lib/uni-badge/uni-badge.vue' export default { components: { uniCard, uniPagination }, data() { return { title: '聊天', extra: '快快学习uniapp', note: '1910a班', thumbnail: require('../../static/tabbar/index.png'), isFull: true } } } </script> <style> .content { display: flex; flex-direction: column; align-items: center; justify-content: center; } .logo { height: 200rpx; width: 200rpx; margin-top: 200rpx; margin-left: auto; margin-right: auto; margin-bottom: 50rpx; } .text-area { display: flex; justify-content: center; } .title { font-size: 36rpx; color: #8f8f94; } </style>按需引入
import uniCard from "../../uni-ui/uni-card/uni-card.vue" import uniPagination from "@/uni-ui/uni-pagination/uni-pagination.vue"点击 工具 —> 插件安装 安装新插件---->前往插件市场安装 最终效果：
