uni-app教程二（微信开发者工具运行项目，icon字体使用，组件）

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

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

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

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

3. 修改 manifest.json配置文件，添加自己的小程序AppId:

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

5. 运行效果

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. 字体库的引入

1、拷贝common目录到项目中，icon.css在common中，并修改引入的字体路径
2、拷贝static目录到项目中，字体文件在static目录中。

在App.vue中引入icon.css

在组件中页面中使用：

<text class="iconfont icon-jinru"></text>

3. 自定义组件

根目录下创建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>

2. 父组件我的页面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>

最终效果：

3. uni-ui的使用

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

1. 初始化项目

在 HBuilderX 中新建 uni-app 项目，进入项目目录，执行：

npm init -y

2. 安装 uni-ui

npm install @dcloudio/uni-ui

3. 使用 uni-ui

index.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"

4.运行报错后引入Hbuilderx没有安装编译sass插件

点击 工具 —> 插件安装

安装新插件---->前往插件市场安装


最终效果：