uniapp 常用
1. uniapp 的生命周期
应用生命周期 页面生命周期 组件生命周期
应用生命周期
onLauch: 应用程序启动时触发,仅在应用程序第一次启动时触发
onShow:应用程序进入前台时触发,可以获取应用程序被打开的方式和场景值
onHide: 应用程序进入后台时触发
onError: 应用程序发生错误时触发,可以用来捕获和处理错误信息页面生命周期
onLoad: 页面被加载时触发,可进行数据初始化和网络请求操作
onReady:页面渲染时完成时触发,可进行dom 操作,页面动画和交互等操作
onShow:页面被展示时触发,可以处理页面的显示效果和动画操作
onHide:页面被隐藏时触发,可以处理页面的隐藏和动画效果
onUnload:页面被销毁时触发,可进行资源释放和清理操作组件生命周期
setup() : 开始创建组件,在 beforeCreate 和 created 之前执行,创建的是 data 和 method
onBeforeMount() : 组件挂载到节点上之前执行的函数;
onMounted() : 组件挂载完成后执行的函数;
onBeforeUpdate(): 组件更新之前执行的函数;
onUpdated(): 组件更新完成之后执行的函数;
onBeforeUnmount(): 组件卸载之前执行的函数;
onUnmounted(): 组件卸载完成后执行的函数;
onActivated(): 被包含在 <keep-alive> 中的组件,会多出两个生命周期钩子函数,被激活时执行;
onDeactivated(): 比如从 A 组件,切换到 B 组件,A 组件消失时执行;
onErrorCaptured(): 当捕获一个来自子孙组件的异常时激活钩子函数
2. 页面的下拉刷新和上拉加载
onReachBottom
onPullDownRefresh
3. uniapp 中微信登录操作流程
1.在微信开放平台注册小程序并获取 appid。
2.在 uni-app 项目中使用 uni.login() 方法获取 code。
3.通过 code 换取 openid 和 session_key。
4.将 openid 和 session_key 作为参数传递给后台服务器,由后台服务器完成登录操作。
5.可以使用 uni.request() 或者其他网络库向后台服务器发送请求,请求参数包括 openid 和 session_key。
6.在 uni-app 项目中使用 uni.getUserInfo() 方法获取用户信息
4. uniapp条件注释的语法
<!-- #ifdef APP --><web-view src="/hybrid/html/MapComponent.html" @message="receiveData"></web-view>
<!-- #endif -->
<!-- #ifdef H5 --><iframe ref="mapIframe" style="width: 100%; height: 100%; border: none;"></iframe>
<!-- #endif -->
5. uniapp 小程序分包
1.在项目的 pages.json 文件中配置分包信息。在 "subPackages" 字段下添加一个或多个分包对象,每个分包对象包含以下属性:
"root":分包根目录的路径,相对于项目根目录。
"pages":分包内的页面路径列表。
示例:json
{"subPackages": [{"root": "subpackage1","pages": ["page1","page2"]},{"root": "subpackage2","pages": ["page3","page4"]}]
}
2.在项目根目录下创建分包目录。按照上一步中配置的分包根目录路径,在项目根目录下创建对应的分包目录。
示例:├─ pages
├─ subpackage1
│ ├─ page1.vue
│ └─ page2.vue
└─ subpackage2├─ page3.vue└─ page4.vue
3.在各个分包目录下创建对应的页面文件。根据上一步中配置的分包页面路径,在对应的分包目录下创建对应的页面文件。4.在应用启动时加载分包。可以在主包的首页或其他需要加载分包的页面中使用 uni.requireSubPackage 方法来动态加载分包。示例:javascript
// 在主包的首页或其他页面中加载分包
uni.requireSubPackage('subpackage1', () => {// 分包加载成功后的回调函数console.log('subpackage1 loaded');
}, (error) => {// 分包加载失败时的回调函数console.error(error);
});