uni-app学习笔记二（第3章平台配置，项目文件介绍，tabbar，sass简单使用）

本文链接：https://blog.csdn.net/wangrunhuan/article/details/111762703

onLaunch如注释所言。onShow是后台转前台时候被调用。onHide是前台转后台。配置项目底部选项卡

如何使用sass

平台配置

微信小程序，APP真机和模拟器，H5

微信小程序

设置如下，这样hbuilder那边才能拉起微信小程序的模拟器

Hbuilder侧：工具设置打开如下：

运行方法：点击 “运行”，选择微信开发者工具即可。
这时候会拉起微信开发者工具，里面是uniapp编译后的微信小程序格式的代码，这种代码是很少修改的，
我们只关注hbuilder这边的代码修改即可。小程序工具仅仅是看运行效果。

app真机

手机连接电脑，打开安卓手机的USB调试选项，如下运行即可。会在手机中安装调试基座。基座理解为调试APP用的环境，方便调试。正式打包apk是不用的。

项目文件介绍

onLaunch如注释所言。onShow是后台转前台时候被调用。onHide是前台转后台。

配置项目底部选项卡

下面这个是配置各种应用的，这样可以不同平台应用不同的风格。暂时我还不知道里面填写什么。
只知道是这样划分开的。

下面是tabbar配置，可以看到她是和各个页面对应的，这几个页面是自己创建的。还有图标什么的。
顺便提一下，图标下载网站可以试一试阿里的一个图标网站。iconfront.cn
在每个页面里面加上下面这个，onTabItemTap在点击tabbar的时候会被调用。可以在这里做数据重新渲染的事情。onShow里面也可以做同样的事情。
因为在uniapp是没有页面重新刷新的说法，所以这样做。

打印的内容如下：

如何使用sass

默认的hbuilder是不带sass的，

这时候会有报错。点击工具->插件安装，来安装sass。如下：

如何将下面内容改写为sass:

sass的好处就是可以如下嵌套的写，把原先零散的css放入对应的大括号{}里面就行了。
移动后
sass另一个特性是变量。如下图
批量修改，很方便。
下面给标签增加一个box属性，

样式增加，写在图框里面也是可以的。注意的是&代表父级。
注意左边这种写法有错误，去掉空格改成右边这种。
尽管用的时候是content box这样带空格的。但是写样式的时候是.content.box{}是这样写的。所以不要加空格。