uni-app 交友app混合开发

这个项目是我自己独立开发，包括 UI 前端 后端，为了更加好的去学习，并且使用uniapp。以前并没有开发过混合app，这个项目的主要兼容app端，另外要兼容微信小程序，和支付宝小程序。只为熟悉代码，适合入门。

项目前端:uniapp -- 后端thinkphp
项目只会贴部分代码，菜鸟一枚，如有误错，请键盘多担待。如有兴趣相同的朋友，可以一起学习

01--uniapp引入官方css库

创建项目就不说了，可以去官网自行理解，
全局样式在App.vue中，可以一些定义全局通用样式，例如需要加一个通用的背景色，首屏页面渲染的动画等都可以写在App.vue中。所以，我们就可以把官方全局css引用过来。

准备工作：创建官方实例

image.png

• 01创建一个common
• 02将官方实例中common中的uni.css 复制到我们项目下的common
• 03在我们app.vue中引用uni.css

/* 官方css  */
@import "./common/uni.css";

• 04 将官方实例中 static uni.ttf 复制到我们项目下 static

02--uniapp引入图标（阿里图标）

准备工作：下载图标
官网
uniapp如何引入iconfont图标

image.png

• 01创建一个common icon.css
• 02复制下载 iconfont.css 内容 （删除多余的url在上面的链接中有详细介绍）
• 03在我们app.vue中引用 icon.css

/* 阿里图标 css */
@import "./common/icon.css";

• 04在我们的页面中使用

<text class="iconfont icon-xianshiqi"> 我的图标 </text>

03--uniapp引入动画库animate.css

准备工作：下载动画库animate.css 下载

• 01复制common animate.css
• 02在我们app.vue中引用 icon.css

/* 动画css 库 */
@import "./common/animate.css";

-03 使用动画效果 教程

<view class="text-fler">
   <view class="animated pulse"> 内容 </view>
</view>
<!-- animated animated标记类   pulse动画效果   -->
<view class="text-fler">
   <view class="animated " hover-class="pulse"> 内容 </view>
</view>

uniapp官网
hover-class 指定按下去的样式类。当 hover-class="none" 时，没有点击态效果

首页开发

• 底部导航
• 头部导航
• 首页内容