小尘前端

# uniapp应用生命周期

  • onLaunch 当uni-app 初始化完成时触发（全局只触发一次）
  • onShow 当 uni-app 启动，或从后台进入前台显示（显示页面的时候触发）
  • onHide 当 uni-app 从前台进入后台（隐藏/退出页面的时候触发）
  • onError 当 uni-app 报错时触发
  • onUniNViewMessage 对 nvue 页面发送的数据进行监听
  • onUnhandledRejection 对未处理的 Promise 拒绝事件监听函数
  • onPageNotFound 页面不存在监听函数
  • onThemeChange 监听系统主题变化

# uniapp页面生命周期

  • onInit 监听页面初始化，其参数同 onLoad 参数，触发时机早于 onLoad
  • onLoad 监听页面加载，其参数为上个页面传递的数据，参数类型为 Object（用于页面传参）
  • onShow 监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回当前页面
  • onReady 监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发
  • onHide 监听页面隐藏
  • onUnload 监听页面卸载
  • onResize 监听窗口尺寸变化
  • onPullDownRefresh 监听用户下拉动作，一般用于下拉刷新
  • onReachBottom 页面滚动到底部的事件（不是scroll-view滚到底），常用于下拉下一页数据
  • onTabItemTap 点击 tab 时触发，参数为Object
  • onShareAppMessage 用户点击右上角分享
  • onPageScroll 监听页面滚动，参数为Object
  • onNavigationBarButtonTap 监听原生标题栏按钮点击事件，参数为Object
  • onBackPress 监听页面返回
  • onNavigationBarSearchInputChanged 监听原生标题栏搜索输入框输入内容变化事件
  • onNavigationBarSearchInputConfirmed 监听原生标题栏搜索输入框搜索事件，用户点击软键盘上的“搜索”按钮时触发
  • onNavigationBarSearchInputClicked 监听原生标题栏搜索输入框点击事件（pages.json 中的 searchInput 配置 disabled 为 true 时才会触发）
  • onShareTimeline 监听用户点击右上角转发到朋友圈
  • onAddToFavorites 监听用户点击右上角收藏

# uniapp优缺点

  • 优点:
    • a. 一套代码可以生成多端
    • b. 学习成本低,语法是vue的,组件是小程序的
    • c. 拓展能力强
    • d. 使用HBuilderX开发,支持vue语法
    • e. 突破了系统对H5调用原生能力的限制
  • 缺点:
    • a. 问世时间短,很多地方不完善
    • b. 社区不大
    • c. 官方对问题的反馈不及时
    • d. 在Android平台上比微信小程序和iOS差
    • e. 文件命名受限

# vue , 微信小程序 , uni-app属性的绑定

  • vue和uni-app动态绑定一个变量的值为元素的某个属性的时候，会在属性前面加上冒号":";
  • 小程序绑定某个变量的值为元素属性时，会用两个大括号{{}}括起来，如果不加括号，为被认为是字符串。

# jQuery、vue、小程序、uni-app中的本地数据存储和接收

  • jQuery：

    • 存：$.cookie('key','value')

    • 取：$.cookie('key')

    • vue：

    • 存储：localstorage.setItem（‘key’，‘value’）

    • 接收：localstorage.getItem（‘key’）

    • 微信小程序：

    • 存储：通过wx.setStorage/wx.setStorageSync写数据到缓存

    • 接收：通过wx.getStorage/wx.getStorageSync读取本地缓存，

    • uni-app：

    • 存储：uni.setStorage({key:“属性名”，data:“值”}) //异步

      • uni.setStorageSync(KEY,DATA) //同步

    • 接收：uni.getStorage({key:“属性名”,success(res){res.data}}) //异步

      • uni.getStorageSync(KEY) //同步

    • 移除：uni.removeStorage(OBJECT) //从本地缓存中异步移除指定 key。

      • uni.removeStorageSync(KEY) //从本地缓存中同步移除指定 key。

    • 清除：uni.clearStorage() //清理本地数据缓存。

      • uni.clearStorageSync() //同步清理本地数据缓存。

# 跨端适配—条件编译

  • 开发者按照 uni-app 规范开发即可保证多平台兼容，大部分业务均可直接满足。但每个平台有自己的一些特性，因此会存在一些无法跨平台的情况。因此就有了条件编译这个模式，不仅是js逻辑代码，template和css样式都可以设置成在某个环境中生效，在其他环境不生效
//template
<!--  #ifdef  MP-WEIXIN -->
<!--  只在小程序中生效 -->
<view>我是微信小程序</view>
<!--  #endif -->

<!--  #ifdef  APP-PLUS -->
<!--  只在 app 中生效 -->
<view>我是 app </view>
<!--  #endif -->

//js
// #ifndef H5
// 表示只有 h5 不使用这个 api
uni.createAnimation(OBJECT)
// #endif

//css
/* #ifdef  MP-WEIXIN */
/*  只在小程序中生效  */
.header {
	color:red
}
/*  #endif  */

←