uniapp笔记
注意事项
- 需要下载 HBuildX 和微信开发工具
- 可运行在浏览器（H5）,微信开发工具（小程序），手机或模拟器（app）
- 新建 uniapp 项目后，点击运行在微信编辑器的时候，若是第一次，会弹窗输入微信编辑器安装包所在的文件目录
- 如果在微信编辑器运行失败，需要编辑器——设置——安全设置——开启服务器端口
- 运行在手机，需要连接手机，点击项目选中状态在运行，运行后会在手机安装调试工具，点击手机上的工具即可打开
基础语法
- 单位 750rpx
- 全局样式引入：app.vue文件style标签中加入 @import url(相对路径) 或 @import “相对路径”
- 根目录文件 /static 或者@/static
- js文件引入：绝对或相对路径，例如：import add from ‘@/common/add.js’
- js文件不支持使用/开头的方式引入
- css引入绝对和相对均可 @import url(’/common/uni.css’); 或 @import url(’@/common/uni.css’);
- 小程序背景图不支持本地图片
- 可以使用less或sass，插件安装即可
- less声明变量 @color:red; sass 声明变量 $color:red;
重要语法
- data，methods，computed,components语法都和vue相同![生命周期和路由和小程序相同]
- 全局组件注册使用以及父子组件传值和vue相同
- 动态类 :class="{ active: isActive }"
- 动态样式 :style="{ color: activeColor, fontSize: fontSize + ‘px’ }"
app自定义头部右边内容
//
{
"path": "pages/home/mem-detail",
"style": {
"navigationBarTitleText": "会员详情",
"app-plus": {
"titleNView": {
"buttons": [ //原生标题栏按钮配置,
{
"text": "保存", //
"color":"#0072FF",
"fontSize":"14px",
"width":"40px"
}
]
} //禁用原生导航栏
}
}
},
//vue页面
methods:{
onLoad(options){
this.id = options.id;
},
},
onNavigationBarButtonTap(){ //与methods平级
console.log(this.id);
}
自定义navbar
- 状态栏占位
<!-- #ifdef APP-PLUS -->
<view class="status_bar">
<view class="top_view"></view>
</view>
<!-- #endif -->
.status_bar {
height: var(--status-bar-height);
width: 100%;
background-color: #F8F8F8;
}
.top_view {
height: var(--status-bar-height);
width: 100%;
position: fixed;
background-color: #F8F8F8;
top: 0;
z-index: 999;
}
- 原生导航栏自定义按钮带红点和角标
{
"path" : "nav-dot/nav-dot",
"style" : {
"navigationBarTitleText" : "导航栏带红点和角标",
"app-plus" : {
"titleNView" : {
"buttons" : [
{
"text" : "消息",
"fontSize" : "14",
"redDot" : true
},
{
"text" : "关注",
"fontSize" : "14",
"badgeText" : "12"
}
]
}
}
}
}
目录结构
┌─components uni-app组件目录
│ └─comp-a.vue 可复用的a组件
├─hybrid 存放本地网页的目录，详见
├─platforms 存放各平台专用页面的目录，详见
├─pages 业务页面文件存放的目录
│ ├─index
│ │ └─index.vue index页面
│ └─list
│ └─list.vue list页面
├─static 存放应用引用静态资源（如图片、视频等）的目录，注意：静态资源只能存放于此
├─wxcomponents 存放小程序组件的目录，详见
├─main.js Vue初始化入口文件
├─App.vue 应用配置，用来配置App全局样式以及监听 应用生命周期
├─manifest.json 配置应用名称、appid、logo、版本等打包信息，详见
└─pages.json 配置页面路由、导航条、选项卡等页面类信息，详见
common 公共的css、js文件
自定义组件
- 可以在根目录的components文件夹中创建全局组件，在main.js中全局注册
- 可以在每一个模块建一个components文件夹，创建局部组件，然后在页面中引入并注册
- 父子组件传值和vue相同，使用props和this.$emit
- 兄弟组件传值，使用全局方法uni. e m i t 和 u n i . emit 和 uni. emit和uni.on,也可用于页面间传值
在需要接受的组件的created函数中，定义方法
uni.$on('方法名',(参数)=>{
处理函数
})
在需要触发的组件中，在合适的时机去触发
uni.$emit('方法名',参数)
开发环境和开发平台
// 开发环境
if(process.env.NODE_ENV === 'development'){
console.log('开发环境')
}else{
console.log('生产环境')
}
// 开发平台
switch(uni.getSystemInfoSync().platform){
case 'android':
console.log('运行Android上')
break;
case 'ios':
console.log('运行iOS上')
break;
default:
console.log('运行在开发者工具上')
break;
}
引入UI库uview
- npm安装或下载zip放在项目根目录
// 如果您的项目是HX创建的，根目录又没有package.json文件的话，请先执行如下命令：
npm init -y
// 安装
npm install uview-ui
// 更新
npm update uview-ui
- 安装sass
==uView依赖SASS==
如果您的项目HBuilder X创建的，工具->插件安装中找到"scss/sass编译"插件进行安装， 如不生效，重启HX即可
如果您的项目是由vue-cli创建的，
// 安装node-sass
npm i node-sass -D
// 安装sass-loader
npm i sass-loader -D
- 配置
// main.js
import uView from "uview-ui";
Vue.use(uView);
/* uni.scss */
@import 'uview-ui/theme.scss';
//app.vue
<style lang="scss">
/* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
@import "uview-ui/index.scss";
</style>
// pages.json
{
"easycom": {
"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
},
// 此为本身已有的内容
"pages": [
// ......
]
}
配置完后，您需要重启HX或者重新编译项目才能正常使用uView的功能。
请确保您的pages.json中只有一个easycom字段，否则请自行合并多个引入规则。
生命周期
== 建议使用onLoad代替created 调接口；使用onReady代替mounted ==
- 支持vue什么周期，在任何页面有效
- 页面生命周期，在pages中有效，组件中无效
- 应用生命周期，在app.vue中使用
- 组件中生命周期和vue相同，页面中推荐小程序的生命周期
执行顺序如下
App.vue 页面周期
onLaunch:function(){//当uni-app 初始化完成时触发（全局只触发一次）
console.log('App onLaunch')
}
onShow: function() {//当 uni-app 启动，或从后台进入前台显示
console.log('App Show')
},
页面中的生命周期函数:
created() {//vue生命周期 页面创建时调用
console.log('created');
},
onLoad() {//监听页面加载，其参数为上个页面传递的数据，参数类型为Object（用于页面传参
console.log('onLoad');
},
onShow(){//监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面
console.log('onShow');
},
mounted() {//vue 生命周期 ,html挂载的时候 调用
console.log('mounted');
},
onReady(){//监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发
console.log('onReady');
},
应用生命周期（app.vue中）
| onLaunch | 当uni-app 初始化完成时触发（全局只触发一次） |
|---|---|
| onShow | 当 uni-app 启动，或从后台进入前台显示 |
| onHide | 当 uni-app 从前台进入后台 |
| onError | 当 uni-app 报错时触发 |
| onUniNViewMessage | 对 nvue 页面发送的数据进行监听，可参考 nvue 向 vue 通讯 |
| onUnhandledRejection | 对未处理的 Promise 拒绝事件监听函数（暂时只支持 CLI 创建的项目使用 CLI 工程，更新 uni 相关版本到 2.0.0-alpha-28020200701003 即可支持 onShareTimeline） |
应用生命周期仅可在App.vue中监听
页面生命周期
| onLoad | 监听页面加载，参数类型为Object（用于页面传参option） |
|---|---|
| onShow | 监听页面显示，页面返回 |
| onHide | 监听页面隐藏 |
| onUnload | 监听页面卸载 |
| onReady | 页面初次渲染完成 |
| onError | 当 uni-app 报错时触发 |
| onUniNViewMessage | 对 nvue 页面发送的数据进行监听，可参考 nvue 向 vue 通讯 |
| onUnhandledRejection | 对未处理的 Promise 拒绝事件监听函数（暂时只支持 CLI 创建的项目使用 CLI 工程，更新 uni 相关版本到 2.0.0-alpha-28020200701003 即可支持 onShareTimeline） |
路由（小程序一样）
uni-app已支持代码块
tag
- uButton
- uCheckbox
- uGrid
- uList
- uListMedia
- uRadio
- uSwiper
js
- uRequest
- uGetLocation
- uShowToast
- uShowLoading
- uHideLoading
- uShowModal
- uShowActionSheet
- uNavigateTo
- uNavigateBack
- uRedirectTo
- uStartPullDownRefresh
- uStopPullDownRefresh
- uLogin
- uShare
- uPay