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目录中。

在这里插入图片描述
在mainjs中引入iconfont.css

// 引入全局css
import './static/2002icon/iconfont.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>
  1. 父组件我的页面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插件

点击 工具 —> 插件安装
在这里插入图片描述
安装新插件---->前往插件市场安装
在这里插入图片描述
在这里插入图片描述
最终效果:
在这里插入图片描述

相关推荐
©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页