[TOC] ## 应用生命周期 ### 应用生命周期 只能在`App.vue` 中使用 ``` export default { onLaunch: function() { let userInfo = uni.getStorageSync('userInfo') || ''; if(userInfo.id){ //更新登陆状态 uni.getStorage({ key: 'userInfo', success: (res) => { this.login(res.data); } }); } }, onShow: function() { console.log('App Show') }, onHide: function() { console.log('App Hide') }, } ``` ### 页面生命周期 - onLoad 监听页面显示。页面每次出现在屏幕上都触发, onShow 监听页面显示。页面每次出现在屏幕上都触发,包括从下级页面点返回露出当前页面 onReady 监听页面初次渲染完成。注意如果渲染速度快, onPulDownRefresh 监听用户下拉动作,一般用于下拉刷新 onReachBottom 页面上拉触底事件的处理函数 onTabltemTap 点击ab时触发,参数为0bject onShareAppMessage 用户点击右上角分享 onPageScroll 监听页面滚动,参数为Object ## 路由 `page.json` 统一交给 `page.json` 不支持 vue.Router 1. pages节点的第一项为应用入口页(即首页) 2. 文件名**不需要写后缀** ``` { "pages": [ { "path": "pages/index/index", "style": { ... } }, { "path": "pages/login/login", "style": { ... } } ] } ``` style 详情 [style](https://uniapp.dcloud.io/collocation/pages?id=style),会覆盖globeStyle | 属性 | 类型 | 默认值 | 描述 | 平台差异说明 | | --- | --- | --- | --- | --- | | navigationBarBackgroundColor | HexColor | #000000 | 导航栏背景颜色,如"#000000" | | | navigationBarTextStyle | String | white | 导航栏标题颜色,仅支持 black/white | | | navigationBarTitleText | String | | 导航栏标题文字内容 | | | navigationBarShadow | Object | | 导航栏阴影,配置参考下方[导航栏阴影](https://uniapp.dcloud.io/collocation/pages?id=navigationbarshadow) | | | navigationStyle | String | default | 导航栏样式,仅支持 default/custom。custom即取消默认的原生导航栏 | 微信小程序7.0+、百度小程序、H5。App平台需通过app-plus扩展节点取消原生导航 | | disableScroll | Boolean | false | 设置为 true 则页面整体不能上下滚动(bounce效果),只在页面配置中有效,在globalStyle中设置无效 | 微信小程序(iOS)、百度小程序(iOS) | | backgroundColor | HexColor | #ffffff | 窗口的背景色 | 微信小程序、百度小程序、头条小程序 | | backgroundTextStyle | String | dark | 下拉 loading 的样式,仅支持 dark/light | | | enablePullDownRefresh | Boolean | false | 是否开启下拉刷新,详见[页面生命周期](https://uniapp.dcloud.io/use?id=%e9%a1%b5%e9%9d%a2%e7%94%9f%e5%91%bd%e5%91%a8%e6%9c%9f)。 | | | onReachBottomDistance | Number | 50 | 页面上拉触底事件触发时距页面底部距离,单位只支持px,详见[页面生命周期](https://uniapp.dcloud.io/use?id=%e9%a1%b5%e9%9d%a2%e7%94%9f%e5%91%bd%e5%91%a8%e6%9c%9f) | | | backgroundColorTop | HexColor | #ffffff | 顶部窗口的背景色。 | 仅 iOS 平台 | | backgroundColorBottom | HexColor | #ffffff | 底部窗口的背景色。 | 仅 iOS 平台 | | app-plus | Object | | 设置编译到 App 平台的特定样式,配置项参考下方[app-plus](https://uniapp.dcloud.io/collocation/pages?id=app-plus) | App | | h5 | Object | | 设置编译到 H5 平台的特定样式,配置项参考下方[H5](https://uniapp.dcloud.io/collocation/pages?id=h5) | H5 | | usingComponents | Object | | 引用小程序组件,参考[小程序组件](https://uniapp.dcloud.io/frame?id=%e5%b0%8f%e7%a8%8b%e5%ba%8f%e7%bb%84%e4%bb%b6%e6%94%af%e6%8c%81) | 5+App、微信小程序、支付宝小程序、百度小程序 | ## 路由跳转 ### navigator 主键跳转 ``` <navigator url="/pages/demo/demo" open-type="switchTab" hover-class="navigator-hover"> <button type="default">跳转到新页面1</button> </navigator> <navigator url="/pages/index/demo2" hover-class="other-navigator-hover"> <button type="default">在当前页打开1</button> </navigator> ``` | 属性名 | 类型 | 默认值 | 说明 | 平台支持度 | | --- | --- | --- | --- | --- | | url | String | | 应用内的跳转链接,值为相对路径或绝对路径,如:"../first/first","/pages/first/first",注意不能加`.vue`后缀 | | | open-type | String | navigate | 跳转方式 | open-type 的参数 | 值 | 说明 | 平台支持度 | | --- | --- | --- | | navigate | 对应 uni.navigateTo 的功能 | | | redirect | 对应 uni.redirectTo 的功能 | | | switchTab | 对应 uni.switchTab 的功能 | | | reLaunch | 对应 uni.reLaunch 的功能 | 头条小程序不支持 | | navigateBack | 对应 uni.navigateBack 的功能 |   | > * 跳转到 tabBar 页面只能使用 switchTab 跳转 ### api调用 #### uni.navigateTo 保留当前页面,跳转到应用内的某个页面,使用`uni.navigateBack`可以返回到原页面。 ``` uni.navigateTo({ url: 'test?id=1&name=uniapp' }); // test.vue export default { onLoad: function (option) { //option为object类型,会序列化上个页面传递的参数 console.log(option.id); //打印出上个页面传递的参数。 console.log(option.name); //打印出上个页面传递的参数。 } } ``` #### uni.redirectTo 关闭当前页面,跳转到应用内的某个页面 #### uni.reLaunch 关闭所有页面,打开到应用内的某个页面 #### uni.switchTab 跳转到 tabBar 页面 #### uni.navigateBack 返回上一页 ### 提示 * `navigateTo`,`redirectTo`只能打开非 tabBar 页面。 * `switchTab`只能打开`tabBar`页面。 * `reLaunch`可以打开任意页面。 * 页面底部的`tabBar`由页面决定,即只要是定义为`tabBar`的页面,底部都有`tabBar`。 * 不能在`App.vue`里面进行页面跳转 ### 判断平台/条件编译 ``` //仅出现在 5+App 平台下的代码 #ifdef APP-PLUS 需条件编译的代码 #endif //除了 H5 平台,其它平台均存在的代码 #ifndef H5 需条件编译的代码 #endif //仅在 H5 平台或微信小程序平台存在的代码 #ifdef H5 || MP-WEIXIN 需条件编译的代码 #endif ``` `%PLATFORM%` 的值 | 值 | 平台 | 参考文档 | | --- | --- | --- | | APP-PLUS | 5+App | [HTML5+ 规范](http://www.html5plus.org/doc/) | | APP-PLUS-NVUE | 5+App nvue | [Weex 规范](https://weex.apache.org/cn/guide/) | | H5 | H5 | | | MP-WEIXIN | 微信小程序 | [微信小程序](https://developers.weixin.qq.com/miniprogram/dev/api/) | | MP-ALIPAY | 支付宝小程序 | [支付宝小程序](https://docs.alipay.com/mini/developer/getting-started) | | MP-BAIDU | 百度小程序 | [百度小程序](https://smartprogram.baidu.com/docs/develop/tutorial/codedir/) | | MP-TOUTIAO | 头条小程序 | [头条小程序](https://developer.toutiao.com/docs/framework/) | | MP-QQ | QQ小程序 | (目前仅cli版支持) | | MP | 微信小程序/支付宝小程序/百度小程序/头条小程序/QQ小程序 |   | **支持的文件** * .vue * .js * .css * pages.json * 各预编译语言文件,如:.scss、.less、.stylus、.ts、.pug **注意:**条件编译是利用注释实现的,在不同语法里注释写法不一样,js使用`// 注释`、css 使用`/* 注释 */`、vue/nvue 模板里使用`<!-- 注释 -->`; ### static 目录的条件编译 ``` ┌─static │ ├─mp-weixin │ │ └─a.png │ └─b.png ``` ### 整体目录条件编译 如果想把各平台的页面文件更彻底的分开,也可以在uni-app项目根目录创建platforms目录,然后在下面进一步创建APP-PLUS、MP-WEIXIN等子目录,存放不同平台的文件 ## 尺寸单位 > [参考](https://uniapp.dcloud.io/frame?id=%e5%b0%ba%e5%af%b8%e5%8d%95%e4%bd%8d) upx :是uni-app提供的一种根据屏幕宽度自适应的动态单位。以750宽的屏幕为基准,屏幕变宽,upx实际显示效果会等比放 upx = 设计稿基准宽度除以750 在浏览器调试时候,调整页面后,需要刷新页面 动态绑定不生效时候的方法 ``` <template> <view> <view class="half-width" :style="{width: halfWidth}"> 半屏宽度 </view> </view> </template> <script> export default { computed: { halfWidth() { return uni.upx2px(750 / 2) + 'px'; } } } </script> ``` ## 样式 在`App.vue`中的为全局样式 page的元素与 body 相同 ### CSS变量 | CSS变量 | 描述 | 5+App | 小程序 | H5 | | --- | --- | --- | --- | --- | | \--status-bar-height | 系统状态栏高度 | [系统状态栏高度](http://www.html5plus.org/doc/zh_cn/navigator.html#plus.navigator.getStatusbarHeight) | 25px | 0 | | \--window-top | 内容区域距离顶部的距离 | 0 | 0 | NavigationBar 的高度 | | \--window-bottom | 内容区域距离底部的距离 | 0 | 0 | TabBar 的高度 | `height: var(--status-bar-height);` ``` <view class="toTop"> <!-- 这里可以放一个向上箭头,它距离底部tabbar上浮10px--> </view> .toTop { bottom: calc(var(--window-bottom) + 10px) } ``` ## NPM支持 ``` npm init -y ``` ## 小程序组件支持 | 平台 | 支持情况 | 小程序组件存放目录 | | --- | --- | --- | | H5 | 不支持 | | | 5+ App | 支持微信小程序组件 | wxcomponents | | 微信小程序 | 支持微信小程序组件 | wxcomponents | | 支付宝小程序 | 支持支付宝小程序组件 | mycomponents | | 百度小程序 | 支持百度小程序组件 | swancomponents | | 头条小程序 | 支持头条小程序组件 | ttcomponents | ### demo 创建支持 微信小程序与 app 1. 创建文件 ``` ┌─wxcomponents 微信小程序自定义组件存放目录 │ └──custom 微信小程序自定义组件 │ ├─index.js │ ├─index.wxml │ ├─index.json │ └─index.wxss ``` 2. 创建组件 微信模板创建 [跳转查看](https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/) > 注意: xxx.json 不能不能少 3. 注册模板 ``` "style": { "navigationBarTitleText": "登录模板", "usingComponents":{ // #ifdef APP-PLUS || MP-WEIXIN "custom": "/wxcomponents/custom/index" // #endif } } ``` 4. 直接使用组件 `<custom inner-text="Some text222"></custom>`