uinapp学习日志(2)

路由：

uinapp的路由在pages.json文件中配置，与vue-router不同

uinapp路由跳转API：

uin.navigateTo()	保留当前页面，跳转到路径页面，使用uin.navigateBack可以返回，不可以跳转tabBar页面，有层级限制不可以无限跳转(最多10个页面)。用于打开新页面
uin.redirectTo()	关闭当前页面，跳转到路径页面，不能跳转tabBar页面。用于页面重定向
uin.reLaunch()	关闭所有页面，打开路径页面。用于重加载 提示：H5端调用uin.reLaunch页面栈会销毁，但不会清空浏览器历史记录，此时navigateBack不能返回，可点击浏览器返回按钮或使用history.back返回历史页面
uin.switchTab()	跳转到tabBar页面，关闭所有其他非tabBar页面。用于tab页面切换
uin.navigateBack()	关闭当前页面，返回历史页面，可通过getCurrentPages()获取页面栈。用于页面返回

组件生命周期：

beforeCreate、create、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed 同vue2的生命周期详见，组件中没有页面级的onLoad等生命周期

引入组件：

uinapp的easycom机制优化了组件引入方式，无需页面引入注册，直接使用组件

easycom:

只要组件安装在components目录下，并符合components/组件名/组件名.vue目录结构，就可以不用页面引入注册，直接使用组件。不管components目录下安装了多少组件，easycom打包后会自动剔除没使用的组件

引入js:

// 绝对路径，@指向项目根目录，在cli项目中@指向src目录
import add from '@/common/add.js';
// 相对路径
import add from '../../common/add.js';

 js文件不支持 / 开头方式引入

引入css:

使用@import引入

引入静态资源：

模板内引入静态资源

<!-- 绝对路径，/static指根目录下的static目录，在cli项目中/static指src目录下的static目录 -->
<image class="logo" src="/static/logo.png"></image>
<image class="logo" src="@/static/logo.png"></image>
<!-- 相对路径 -->
<image class="logo" src="../../static/logo.png"></image>

• @开头的绝对路径以及相对路径会经过base64转换规则校验
• 非H5平台不会转为base64
• H5平台小于4kb的资源会被转为base64，其余不会
• 支付宝小程序组件内image标签不可使用相对路径

css引入静态资源

/* 绝对路径 */
@import url('/common/uni.css');
@import url('@/common/uni.css');
/* 相对路径 */
@import url('../../common/uni.css');

/* 绝对路径 */
background-image: url(/static/logo.png);
background-image: url(@/static/logo.png);
/* 相对路径 */
background-image: url(../../static/logo.png);

注意：有些小程序端css文件不允许引用本地文件

css语法：

rpx

uinapp中新增了尺寸单位rpx，rpx就是响应式px，以750px为基准

选择器

uinapp目前支持的选择器：类、id、元素(标签)、分组、::after、::before

微信小程序自定义组件中只支持class选择器

page相当于body节点