uniapp简单使用

一、路由

• 在pages.json文件的pages数组里面定义， 注意：修改配置文件后最好重启应用
• 使用 uni.navigateTo / uni.switchTab 或者其他的路由API跳转
• 如： uni.redirectTo({ url: ‘…/mime/index’ }) 或者使用 uni.redirectTo({ url: ‘/pages/mime/index’ })

二、路由传参

1. 传递参数

uni.navigateTo({
	url: '/pages/payment/index?commodityId=' + 6
});

2. 接收参数

onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
	this.commodityId = option.commodityId
},

注意：接收只能使用onLoad这个生命周期钩子，不能使用mounted
onLoad：监听页面加载，其参数为上个页面传递的数据，参数类型为Object（用于页面传参）
页面生命周期

navigateto文档说明

三、uniapp中使用scss

菜单命令: 工具 => 插件安装 => scss/sass编译，安装好scss后，在 style 节点上加上 lang=“scss”
文档地址

配置好scss后，可直接使用uni.scss里面定义的变量，无需引入；

如果有自定义的全局变量文件，也可以在 uni.scss 文件中进行全局引入，避免在每个文件中都引入

// 引入公共scss变量文件，因为uni.scss该文件已注入到全局，在此处引入可直接使用
@import '@/styles/variables.scss';
/* 颜色变量 */

/* 行为相关颜色 */
$uni-color-primary: #007aff;
$uni-color-success: #4cd964;
$uni-color-warning: #f0ad4e;
$uni-color-error: #dd524d;
// ... todo

四、使用vuex

由于uni-app已经内置了vuex，所以只要正确引入就好了(vue也是内置的，无需安装)
参考文章

五、使用插件

在插件市场找到想要的插件，并下载。解压后将其放置components中，按照插件对应的文档使用即可

六、uni-app中的alias

• @指向项目根目录，在cli项目中@指向src目录
• 绝对路径，/static指根目录下的static目录，在cli项目中/static指src目录下的static目录

<!-- 绝对路径，/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>

• 本地背景图片的引用路径推荐使用以 ~@ 开头的绝对路径
• 字体文件的引用路径推荐使用以 ~@ 开头的绝对路径
• 文档说明

文章仅为本人学习过程的一个记录，仅供参考，如有问题，欢迎指出！