本文是针对《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,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') format('woff2'),
format('woff')
;}
app.vue
引入css
@import "./common/iconfont.css"; /*自定义图标库*/
处理
index.vue
【pages>index>index.vue
】 删除和
包含的代码
最终得到的格式如下:
<template>
<view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
}
}
</script>
<style>
</style>
[4.3]–引入css动画库
animate下载
animate.css
,放入common文件夹
app.vue引入css
@import "./common/animate.css"; /*动画库*/
pages.json
了![5.1]–设置全局属性globalStyle
写在
pages.json
里,globalStyle说明,跟着官方文档走不会错的
举例:
"globalStyle": {
"navigationBarTextStyle": "black",//导航栏标题颜色及状态栏前景颜色,仅支持 black/white
"navigationBarTitleText": "uni-app",// 标题
"navigationBarBackgroundColor": "#F8F8F8",//状态栏颜色
"backgroundColor": "#F8F8F8"//下拉显示出来的窗口的背景色
}
[6.1]–底部导航开发【tabBar】
这一部分视频教程是拼凑的,非常乱
一定要先在
pages
下新建页面的目录和vue文件
别忘了给pages.json
添加页面路径
"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/index/index",//主页
"style": {
}
}
,{
"path": "pages/Homepage/Homepage",//个人页
"style": {
}
}
],
然后底部导航栏写在
pages.json
"tabBar":{
"color":"#007AFF",//颜色
"selectedColor":"#FF3333",//被选中颜色
"backgroundColor":"#FFFFFF",//背景色
"borderStyle":"white",//tabbar上边框的颜色
"list":[{
"pagePath":"pages/index/index",//页面路径
"text":"123",//tab 上按钮文字
"iconPath":"static/logo.png",//图片路径
"selectedIconPath":"static/logo.png"//选中时的图片路径
}]
}
css
库pages.json
的规范写法