uni-app

uni-app的优势
跨平台更多,真正做到一套代码多端发行,支持原生代码混写和原生sdk集成。

运行体验更好。组件、api与微信小程序一致,兼容weex原生渲染。

通用技术栈,学习成本更低。Vue的语法,微信小程序的api,对于前端开发人员来说更容易上手。

开放生态,组件更丰富。支持通过npm安装第三方包;支持微信小程序自定义组件及sdk;兼容mpvue组件及项目;app端支持与原生混合
 

应用的生命周期

onlaunch 当uni-app初始化完成时触发

onshow 当uni-app启动时

onhide 当uni-app进入后台时

onerror 当uni-app报错时

onUniNViewMessage 对 nvue 页面发送的数据进行监听

onUnhandledRejection  对未处理的 Promise 拒绝事件监听函数

onPageNotFound页面不存在监听函数

onThemeChange监听系统主题变化

页面的生命周期

oninit 监听页面初始化

onload 监听页面加载

onshow 监听页面显示

onready 监听页面初次渲染完成

onhide 监听页面隐藏

onunload 监听页面卸载

onresize  监听窗口尺寸变化

onPullDownRefresh  下拉刷新

onReachBottom  触底加载更多

onTabItemTap 点击tab时触发

onShareAppMessage  分享

onPageScroll 监听页面滚动

组件的生命周期 (和vue一样)

beforecreate  created  beforemount  mounted  beforeupdate  updated  beforedestroy  destroyed

事件定义和传参
定于  v-on 简化@ 

列子

    <button type="default" @click="handleEvent">点击事件</button>

export default {
        data() {
            return {
                title: 'Hello tledu'

 }

      },

       onLoad() {
  },

        methods: {
            handleEvent(e) {
                console.log("点击了按钮")

                console.log(e)

            }

        }

 }

配置tabbar
在 pages.json 中配置跟小程序的基本一样
color           tab 上的文字默认颜色     
selectedColor           tab 上的文字选中时的颜色     
backgroundColor           tab 的背景色     
borderStyle        black    tabbar 上边框的颜色,可选值 black/white   
blurEffect      none    iOS 高斯模糊效果,可选值 dark/extralight/light/none(
list    Array        tab 的列表,详见 list 属性说明,最少2个、最多5个 tab     
position        bottom    可选值 bottom、top    top 值仅微信小程序支持
fontSize        10px    文字默认大小    
iconWidth        24px    图标默认宽度(高度等比例缩放)  
spacing       3px    图标和文字的间距    
height        50px    tabBar 默认高度    
midButton             中间按钮 仅在 list 项为偶数时有效  
 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值