# Uniapp

# Uniapp 是什么?

uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码可以发布到 IOS,Android,Web,以及各种小程序,快应用

# Uni-App 框架接口

使用@Vue/Cli

vue create -p dcloudio/uni-preset-vue [your project name]

# 条件编译

#ifdef APP-PLUS
// 仅APP
// Nvue Native Vue - Weex
// HTML5+
#endif

#ifdef H5
// 仅H5
#endif

#ifdef H5 || MP-WEIXIN
// H5或微信小程序
#endif

# 生命周期

# 应用生命周期

函数名 说明
onLaunch 初始化完成
onShow 启动,从后台进入前台
onHide 从前台进入后台
onError 报错时触发

注意,应用生命周期仅可在 App.vue 中监听

# 页面生命周期

函数名 说明
onLoad 页面加载
onShow 页面显示
onReady 页面渲染完成
onHide 前台进入后台
onUnload 页面卸载(离开)
onResize 窗口尺寸变化
onPullDownRefresh 监听用户下拉动作
onReachBottom 页面滚动到底部

# 目录结构

common 公用
components 组件
pages 页面
utils 工具方法
static 静态文件
app.vue app.js
pages.json  页面配置
main.js 应用入口
mainfest.json 配置文件
uni.scss 基本scss变量 全局注册

pages.json

{
  "tabBar": {
    "color": "#666",
    "selectedColor": "#f07373",
    "backgroundColor": "#fff",
    "list": [
      {
        "pagePath": "pages/tabbar/index/index",
        "iconPath": "static/home.png",
        "selectedIconPath": "static/home-active.png",
        "text": "首页"
      },
      {
        "pagePath": "pages/tabbar/follow/follow",
        "iconPath": "static/follow.png",
        "selectedIconPath": "static/follow-active.png",
        "text": "关注"
      },
      {
        "pagePath": "pages/tabbar/my/my",
        "iconPath": "static/my.png",
        "selectedIconPath": "static/my-active.png",
        "text": "我的"
      }
    ]
  }
}