uni-app实战社区交友

前言

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


2021.2.16更新


提示:着重说明比较的部分,比较简单的教程不详述

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

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


uni-app实战社区交友_第1张图片

开发环境的搭建和调试

[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.cssiconfont.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,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') format('woff2'),
  format('woff')
  ;}

app.vue引入css

@import "./common/iconfont.css";    /*自定义图标库*/

处理index.vue【pages>index>index.vue】 删除