uni-app入门

1.运行

1.  如果开发H5  运行->运行到浏览器(or 运行到内置浏览器)注:内置浏览器可解决跨越问题
2. 如果开发小程序  运行->运行小程序模拟器(选择对应的平台)注:运行小程序需要配置开发者工具路径
3. 运行->运行到小程序模拟器->运行配置->小程序运行配置 -> 对应的运行工具安装路径

2.生命周期(常用)

1. onLoad 监听页面加载，其参数为上个页面传递的数据，参数类型为 Object（用于页面传参）

2. onShow 监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面

3. onHide 监听页面隐藏

4. onUnload 监听页面卸载

5. onShareAppMessage 用户点击右上角分享

6. onReachBottom 页面滚动到底部的事件（不是scroll-view滚到底），常用于下拉下一页数据。具体见下方注意事项

7. onPullDownRefresh 监听用户下拉动作，一般用于下拉刷新

8. 其他API同vue一样使用  如 methods watch computed components

3.路由与页面跳转

1. uni.navigateTo(OBJECT),保留当前页面，跳转到应用内的某个页面,可以返回到原页面

2. uni.redirecTo(OBJECT),关闭当前页面，跳转到应用内的某个页面。

3. uni.reLaunch(OBJECT) 关闭所有页面，打开到应用内的某个页面

4. uni.switchTab(OBJECT)跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。

5. uni.navigateBack关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层。

4. 数据存储

1. uni.setStorage({key:’key’,data:data})  异步设置

2. uni.setStorageSync(KEY,DATA) 同步设置

3. uni.getStorage({key:’key’,data:data})  异步获取

4. uni.getStorageSync(KEY,DATA) 同步获取

5. 7.5 uni.removeStorage({key:’key’,data:data})  异步删除指定key

6. 7.6 uni.removeStorageSync(KEY,DATA) 同步删除指定key

5. 打包

1. 打包H5 发行-> 网站-PC Web或手机H5 即可生成打包后静态资源

2. 打包小程序  发行-> 小程序-(对应的平台)

6. uni.app 相关技术

1. 条件编译

2. 内置css环境变量(如.status-bar { height:var(--status-bar-height)})

3. 传统vue组件，需要安装、引用、注册，三个步骤后才能使用组件。easycom将其精简为一步。 只要组件安装在项目的components目录下，并符合components/组件名称/组件名称.vue目录结构。就可以不用引用、注册，直接在页面中使用。 如下：

7.遇到的问题汇总

1. 所有事件绑定需用@  用on会触发不了事件

2. 跳转到支付宝域的讨论区,基金页面需引入一个封装的urlHander.js,部分跳转不了的,需要编码一下用 encodeURIComponent (‘’),然后 alipayFinanceApi:type=

3. h5Page&url=’编码后的地址’

4. 支付宝小程序测试版分享出去,被分享人打开也是体验版,需要在右上角->联调设置->联调扫码版本开关打开