title: Uniapp教程
date: 2020-10-21 16:51:18
categories: 前端
tags: Vue
框架基础
MVC模式
- Model 模型层, 数据的增删改查
- View视图层,前端页面
- Controller控制层, 处理业务
MVVM模式
项目目录结构
components存放自定义组件
pages存放页面文件
static存放静态文件
pages.json为项目的配置文件(配置项参考https://uniapp.dcloud.io/collocation/pages)
unpackage打包文件存放的目录
App.vue 可以在style标签内定义全局样式
main.js项目的入口文件
manifest.json是一个打包配置文件
生命周期
应用生命周期函数,在App.vue内
export default {
/**
* 应用初始化后调用,只会触发一次
*/
onLaunch: function() {
console.log('App Launch')
},
/**
* 应用展示的时候就会触发,从后台进入到前台
*/
onShow: function() {
console.log('App Show')
},
/**
* 应用隐藏的时候就会触发,从前台进入到后台
*/
onHide: function() {
console.log('App Hide')
},
/**
* 应用报错时候触发
*/
onError: function(){
console.error('error')
}
}
页面生命周期
https://uniapp.dcloud.io/frame?id=%e9%a1%b5%e9%9d%a2%e7%94%9f%e5%91%bd%e5%91%a8%e6%9c%9f
尺寸单位
Uni-app使用rpx作为默认单位
页面元素宽度在 uni-app
中的宽度计算公式:
750 * 元素在设计稿中的宽度 / 设计稿基准宽度
- 如果设计稿不是750px,HBuilderX提供了自动换算的工具,详见:https://ask.dcloud.net.cn/article/35445。
事件处理器
// 事件映射表,左侧为 WEB 事件,右侧为 ``uni-app`` 对应事件
{
click: 'tap',
touchstart: 'touchstart',
touchmove: 'touchmove',
touchcancel: 'touchcancel',
touchend: 'touchend',
tap: 'tap',
longtap: 'longtap', //推荐使用longpress代替
input: 'input',
change: 'change',
submit: 'submit',
blur: 'blur',
focus: 'focus',
reset: 'reset',
confirm: 'confirm',
columnchange: 'columnchange',
linechange: 'linechange', // 换行后行数变化后触发
error: 'error',
scrolltoupper: 'scrolltoupper',
scrolltolower: 'scrolltolower',
scroll: 'scroll'
}
路由管理
uni-app
有两种页面路由跳转方式:使用navigator组件跳转、调用API跳转。
<navigator url="../home/home" open-type="navigate">
<text>到home</text>
</navigator>
uni.navigateTo({
url: '../home/home'
})
open-type 有效值
值 | 说明 | 平台差异说明 |
---|---|---|
navigate | 对应 uni.navigateTo 的功能 | |
redirect | 对应 uni.redirectTo 的功能 | |
switchTab | 对应 uni.switchTab 的功能 | |
reLaunch | 对应 uni.reLaunch 的功能 | 字节跳动小程序不支持 |
navigateBack | 对应 uni.navigateBack 的功能 | |
exit | 退出小程序,target="miniProgram"时生效 | 微信2.1.0+、百度2.5.2+、QQ1.4.7+ |
跨端兼容
使用条件编译来实现
条件编译是用特殊的注释作为标记,在编译时根据这些特殊的注释,将注释里面的代码编译到不同平台。
**写法:**以 #ifdef 或 #ifndef 加 %PLATFORM% 开头,以 #endif 结尾。
- #ifdef:if defined 仅在某平台存在
- #ifndef:if not defined 除了某平台均存在
- %PLATFORM%:平台名称
例如:
<scroll-view :scroll-y="true" style="height: 1500rpx;">
<text class="green">
{{count}}
</text>
<!-- #ifdef APP-PLUS -->
{{count + 1}}
<!-- #endif -->
<!-- #ifdef H5 -->
{{count + 2}}
<!-- #endif -->
</scroll-view>
支持的文件
- .vue
- .js
- .css
- pages.json
- 各预编译语言文件,如:.scss、.less、.stylus、.ts、.pug
注意: 条件编译是利用注释实现的,在不同语法里注释写法不一样,js使用 // 注释
、css 使用 /* 注释 */
、vue/nvue 模板里使用 ``;
参考https://uniapp.dcloud.io/platform
问题总结
运行到微信开发者工具一定要启用微信开发者工具端