uni-app实战社区交友

原创

已于 2022-03-07 23:46:03 修改 · 4.2k 阅读

标签

#vue #uni-app #小程序 #json #css3

于 2021-02-16 19:00:33 首次发布

本文是uni-app实战社区交友系列教程的笔记，包括开发环境搭建、项目创建、多平台小程序调试配置、引入官方及自定义样式库、图标库、动画库的使用，以及全局属性和导航栏开发。提供了免费的视频教程资源链接。

前言

本文是针对《uni-app实战社区交友》系列视频教程的笔记和补充说明，
帮助编程新手快速找到捷径

2021.2.16更新

提示：着重说明比较难的部分，比较简单的教程不详述

免费资源在百度云盘，原视频是收费的。
https://pan.baidu.com/s/1dUQsUZsEsZ_nI78w-9i3Pw
提取码：nwzx

大概率会动了同行的利益，网盘随时可能会被和谐。如果你们有类似的资源，欢迎在评论区共享！

在这里插入图片描述

开发环境的搭建和调试

[2.1]–开发环境搭建

下载HBuilderX，安装必须的插件，新版本的HBuilderX把插件单独区分开了，需要去社区下载

[2.2]–创建uni-app项目

创建项目，多查看官方文档，不要依赖教程

[3]–安卓真机、支付宝小程序、字节跳动小程序、微信小程序、QQ小程序调试配置

视频教程有详细说明

[4.1]–引入官方css样式库

复制hello uni-app演示项目的uni.css 新建文件夹common>把uni.css粘贴进去
在app.vue引入css

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

[4.2]–引入自定义图标库

阿里巴巴图标库下载图标，得到iconfont.css和iconfont.ttf文件
common>粘贴iconfont.css 删除 url(.ttf) url(.svg)格式代码，仅保留 src:url和
format('woff')格式

@font-face {
   
   font-family: "iconfont";
  src:url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAuUAAsAAAAAFTwAAAtFAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCFIgqZRJQ8ATYCJANECyQABCAFhG0HgicbxxFRlHFWBNnPA9t2sRYUjqZW+DWQ4u1csnDpG8lPPNDv9+1c+appRfHmlvEomhgiVbxBIpNFQ2Gn45W+WsL7edzW+0x7jDCujOFhFB6oV2k1XBQn4sB5uHFjyLySi6zcRFsNFhPumris3TVekUEYFU+cEbRBG/oiSTOuzCa+JqR552UdznAEZUjyveE2tdayS3cP5enE8GJrcPuHmC1iXiFZ9mymmaHRICRCJGYshpsHVsCynwXOzOMJqJuSAJ3KyDOAj0zAgBJ3aasJfGK8XGIWVAPLOdtmCK/BUzWOkpwF8Mr9+bABuuADolICcaKzd9LLoe0y9nIf5hbd0CO5wd1eBMYLkbADyGPyLzfqB2A+2OGiel55D28BTJDzuzaXsefe

最低0.47元/天解锁文章