uni-app
运行到微信开发者工具需要注意
- 小程序路径需要配置，
- 小程序端口需要开启
目录结构
js
pages // 存放页面
static // 静态资源
uni_modules // 文件夹：用于存放 uniapp 项目的各种依赖文件。
unpackage // 打包文件目录
App.vue // 根组件
main.js // 入口文件
manifest.js // 应用配置文件
pages.json // 页面配置文件
uni.scss // 内置样式文件开发规范
遵循vue和小程序混合
全局配置样式
全局 pages.json
"globalStyle": {
}
局部的样式会覆盖全局的样式
https://uniapp.dcloud.net.cn/collocation/pages#style
js
{
"path": "pages/message/message",
"style": {
"navigationBarTitleText": "message",
"navigationBarBackgroundColor": "#00ff00",
"h5": {
"titleNView": {
"backgroundColor": "#aa0000"
}
}
}
} 可以单独设置h5的样式
tabBar
- tabBar 中的 list 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序。
condition启动模式
启动模式配置，仅开发期间生效，用于模拟直达页面的场景，如：小程序转发后，用户点击所打开的页面。
js
"condition": { //模式配置，仅开发期间生效
"current": 0, //当前激活的模式（list 的索引项）
"list": [{
"name": "detail", //模式名称
"path": "pages/detail/detail", //启动页面，必选
"query": "interval=400" //启动参数，在页面的onLoad函数里面得到。
}]
},text组件
是否可选selectable
space 连续空格
view
hover-class 按下去激活的样式
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| hover-class | String | none | 指定按下去的样式类。当 hover-class="none" 时，没有点击态效果 |
| hover-stop-propagation | Boolean | false | 指定是否阻止本节点的祖先节点出现点击态，App、H5、支付宝小程序、百度小程序不支持（支付宝小程序、百度小程序文档中都有此属性，实测未支持） |
| hover-start-time | Number | 50 | 按住后多久出现点击态，单位毫秒 |
| hover-stay-time | Number | 400 | 手指松开后点击态保留时间，单位毫秒 |
button
常用
size
type
pain
disabled
hover-class
属性说明
| 属性名 | 类型 | 默认值 | 说明 | 生效时机 | 平台差异说明 |
|---|---|---|---|---|---|
| size | String | default | 按钮的大小 | ||
| type | String | default | 按钮的样式类型 | ||
| plain | Boolean | false | 按钮是否镂空，背景色透明 | ||
| disabled | Boolean | false | 是否禁用 | ||
| loading | Boolean | false | 名称前是否带 loading 图标 | H5、App(App-nvue 平台，在 ios 上为雪花，Android上为圆圈) | |
| form-type | String | 用于 <form> 组件，点击分别会触发 <form> 组件的 submit/reset 事件 |
|||
| open-type | String | 开放能力 | |||
| hover-class | String | button-hover | 指定按钮按下去的样式类。当 hover-class="none" 时，没有点击态效果 | App-nvue 平台暂不支持 | |
| hover-start-time | Number | 20 | 按住后多久出现点击态，单位毫秒 | ||
| hover-stay-time | Number | 70 | 手指松开后点击态保留时间，单位毫秒 | ||
| app-parameter | String | 打开 APP 时，向 APP 传递的参数，open-type=launchApp时有效 | 微信小程序、QQ小程序 | ||
| hover-stop-propagation | boolean | false | 指定是否阻止本节点的祖先节点出现点击态 | 微信小程序 | |
| lang | string | 'en' | 指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文。 | 微信小程序 | |
| session-from | string | 会话来源，open-type="contact"时有效 | 微信小程序 | ||
| send-message-title | string | 当前标题 | 会话内消息卡片标题，open-type="contact"时有效 | 微信小程序 | |
| send-message-path | string | 当前分享路径 | 会话内消息卡片点击跳转小程序路径，open-type="contact"时有效 | 微信小程序 | |
| send-message-img | string | 截图 | 会话内消息卡片图片，open-type="contact"时有效 | 微信小程序 | |
| show-message-card | boolean | false | 是否显示会话内消息卡片，设置此参数为 true，用户进入客服会话会在右下角显示"可能要发送的小程序"提示，用户点击后可以快速发送小程序消息，open-type="contact"时有效 | 微信小程序 | |
| group-id | String | 打开群资料卡时，传递的群号 | open-type="openGroupProfile" | QQ小程序 | |
| guild-id | String | 打开频道页面时，传递的频道号 | open-type="openGuildProfile" | QQ小程序 | |
| public-id | String | 打开公众号资料卡时，传递的号码 | open-type="openPublicProfile" | QQ小程序 | |
| data-im-id | String | 客服的抖音号 | open-type="im" | 抖音小程序2.68.0版本+ | |
| data-im-type | String | IM卡片类型 | open-type="im" | 抖音小程序2.80.0版本+ | |
| data-goods-id | String | 商品的id，仅支持泛知识课程库和生活服务商品库中的商品 | open-type="im" | 抖音小程序2.80.0版本+ | |
| data-order-id | String | 订单的id，仅支持交易2.0订单 | open-type="im" | 抖音小程序2.80.0版本+ | |
| data-biz-line | String | 商品类型，"1"代表生活服务，"2"代表泛知识。 | open-type="im" | 抖音小程序2.80.0版本+ | |
| @getphonenumber | Handler | 获取用户手机号回调 | open-type="getPhoneNumber" | 微信、支付宝、百度、抖音、快手、京东小程序 | |
| @getuserinfo | Handler | 用户点击该按钮时，会返回获取到的用户信息，从返回参数的detail中获取到的值同uni.getUserInfo | open-type="getUserInfo" | 微信、QQ、百度、快手、京东小程序 | |
| @error | Handler | 当使用开放能力时，发生错误的回调 | open-type="launchApp" | 微信、QQ、快手、京东小程序 | |
| @opensetting | Handler | 在打开授权设置页并关闭后回调 | open-type="openSetting" | 微信、QQ、百度、快手、京东小程序 | |
| @launchapp | Handler | 从小程序打开 App 成功的回调 | open-type="launchApp" | 微信、QQ、快手、京东小程序 | |
| @contact | Handler | 客服消息回调 | open-type="contact" | 微信、QQ、百度、快手小程序 | |
| @chooseavatar | Handler | 获取用户头像回调 | open-type="chooseAvatar" | 微信小程序 | |
| @agreeprivacyauthorization | Handler | 用户同意隐私协议事件回调，open-type="agreePrivacyAuthorization"时有效 | open-type="agreeprivacyauthorization" | 微信小程序2.33.0 | |
| @addgroupapp | Handler | 添加群应用的回调 | open-type="addGroupApp" | QQ小程序 | |
| @chooseaddress | Handler | 调起用户编辑并选择收货地址的回调 | open-type="chooseAddress" | 百度小程序 | |
| @chooseinvoicetitle | Handler | 用户选择发票抬头的回调 | open-type="chooseInvoiceTitle" | 百度小程序 | |
| @subscribe | Handler | 订阅消息授权回调 | open-type="subscribe" | 百度小程序 | |
| @login | Handler | 登录回调 | open-type="login" | 百度小程序 | |
| @im | Handler | 监听跳转IM的成功回调 | open-type="im" | 抖音小程序2.68.0版本+ |
image
有默认的宽高 320px 240px
mode的属于
scaleToFill
不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
aspectFit
保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。
aspectFill
保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。
样式问题
注意在 uni-app 中不能使用 * 选择器。
目前支持的选择器有：
选择器
| 选择器 | 样例 | 样例描述 |
|---|---|---|
| .class | .intro | 选择所有拥有 class="intro" 的组件 |
| #id | #firstname | 选择拥有 id="firstname" 的组件 |
| element | view | 选择所有 view 组件 |
| element, element | view, checkbox | 选择所有文档的 view 组件和所有的 checkbox 组件 |
| ::after | view::after | 在 view 组件后边插入内容，仅 vue 页面生效 |
| ::before | view::before | 在 view 组件前边插入内容，仅 vue 页面生效 |
uni-app 提供内置 CSS 变量
| CSS 变量 | 描述 | App | 小程序 | H5 |
|---|---|---|---|---|
| --status-bar-height | 系统状态栏高度 | 系统状态栏高度、nvue 注意见下 | 25px | 0 |
| --window-top | 内容区域距离顶部的距离 | 0 | 0 | NavigationBar 的高度 |
| --window-bottom | 内容区域距离底部的距离 | 0 | 0 | TabBar 的高度 |
字体图标
阿里矢量图标库
字体文件的引用路径推荐使用以 ~@ 开头的绝对路径
css
@font-face {
font-family: test1-icon;
src: url('~@/static/iconfont.ttf');
}
css
<style>
@import url("~@/static/fonts/iconfont.css");
/*每个页面公共css */
.c-rpx {
background: #aa0000;
}
</style>scss
要使用先安装插件scss
uni.scss里面是变量可以全局使用
引用示例
css
.text {
color: $uni-color-primary;
}事件
可以的传递事件 和 自定义参数
@click($event,params)