前提,建议先学会前端几大基础:HTML、CSS、JS、Ajax,还有一定要会Vue!(Vue2\Vue3)都要会!!!不然不好懂
一、uniapp项目创建新包放乱杂文件
我们的项目结构里有一个包叫static,他会把页面的资源都打包编译,包括图片、js文件、css文件......那么如果static里有一些垃圾文件或者大量视频音频,那整体的小程序体积就会变大
uniapp对static的解释:工程简介 | uni-app官网
那么就需要创建于一个新的包(目录/文件夹)用来放各种垃圾或者测试文件,叫啥名都无所谓,但是一般来说都叫【common】
二、引入外部css文件
学习HTML和CSS的时候也知道,有的时候css和html写在一个页面确实挺烦的挺难看的
我们通常会在外部来写css文件,然后导入html文件就行
那么怎么uniapp怎么导入外部css文件?就在你要导入的页面的<style>区域这样:
<style>
@import "@/你的css文件目录"
</style>
这里注意:1、我们可以把css文件放在common文件夹下
2、采用根目录方式获取css文件路径,也就是从项目根目录一直到css文件的目录
3、绝不可以漏了"@/",它的意思就是根目录
当然你还可以在css文件去引入外部css文件、在less文件去引入外部less文件、在scss文件去引入外部scss文件,方法是一样的
三、page.json配置页面、小程序窗口、导航栏全局配置
这些是page.json文件的所有配置属性:(来自官方文档pages.json 页面路由 | uni-app官网)
"pages"页面配置
首先,“pages”配置项是把你所有写的pages目录下的页面配置好,配置完了你才能看到你写的页面,排在第一位的是小程序启动的第一个页面
"path":填页面文件的路径
"style":填对应各自页面的头部窗口的样式、顶部大标题......
"globalStyle"顶部窗口配置
然后"globalStyle"是全局的顶部窗口的样式
至于为什么上面图片里globalStyle设置了"navigationBarTitleText"为"uni-app",而窗口显示的是"中国陶瓷历史时间轴"?因为我在"pages"页面配置的时候对它做了局部配置,覆盖了这的全局配置
tabBar导航栏
导航栏就是一直显示在顶部或底部的那一条玩意,点它跳转页面
需要在pages.json里手动添加一个"tabBar"配置项,然后第一个"selectedColor"是指被点击选中时文字的颜色、"list"是就配置的导航栏上每一个页面按钮(最多5个)
"list"里面对应配置每个按钮跳转到那个页面的路径、文字、未点击选中时的图片、点击选中是的图片......(这里给一个免费小图标网址:iconfont-阿里巴巴矢量图标库)
这是官方文档的配置项,自己试吧:
"list"的配置项
四、manifest.json应用配置
manifest.json是应用的配置,类似于“设置”,不用写代码的
就提几点:
在uniapp写的项目转到微信开发者工具,是不能直接上传的,需要回到uniapp的manifest.json找到【微信小程序配置】——>【微信小程序AppID】去把你在微信小程序官网(微信小程序)注册的AppID写上去,注册步骤很简单,自己试一下或者查一下就行了
这里的【上传代码时自动压缩】选上,可以压缩小程序体积,不至于上传时体积过大不给过
然后在【源码视图】这里可以写代码,最下面这几个配置可以了解一下