蓝河应用程序包基础知识

├── scripts                   工具脚本文件
├── src
│   ├── assets                # 公用资源
│   │   ├── images            图片资源
│   │   └── styles            应用样式
│   ├── pages                 页面目录
│   │   ├── Demo              应用首页
│   │   └── DemoDetail        应用详情页
│   ├── app.ux                app.ux文件。
│   └── manifest.json         项目配置文件，配置应用图标、页面路由等
└── jsconfig.json             js 配置文件，用于语法校验
└── package.json              定义项目需要的各种模块及配置信息

<script>
/**
 * 应用级别的配置，供所有页面公用
 */

export default {
  onCreate() {},
  
  onDestroy(){}
}
</script>

{
  "package": "com.jianguo.demo",
}

{
   "name": "坚果手表",
}

{
  "icon": "/assets/images/logo.png"
}

{
  "versionName": "1.0.0",
  "versionCode": 1,
}

  "features": [
    {
      "name": "blueos.app.appmanager.router"
      
    },
    { "name": "blueos.communication.network.fetch" }
  ],

  "deviceTypeList": [
    "watch",
    "watch-square"
  ],

└── src
    └── Demo                  页面目录，存放各自页面私有的资源文件和组件文件
        └── index.ux          页面文件，文件名不必与父文件夹相同（推荐index.ux）

{
  "router": {
    "entry": "Demo"
  }
}

└── src
 └── pages
    |── Demo                  页面目录，存放各自页面私有的资源文件和组件文件
    |   └── index.ux          页面文件，文件名不必与父文件夹相同（推荐index.ux）
    └─── DemoDetail           页面目录，存放各自页面私有的资源文件和组件文件
            └── index.ux      页面文件，文件名不必与父文件夹相同（推荐index.ux）

  "router": {
    "entry": "pages/Demo",
    "pages": {
      "pages/Demo": {
        "component": "index"
      },
      "pages/DemoDetail": {
        "component": "index"
      }
    }
  },

<template>
  <!-- template里只能有一个根节点 -->
  <div class="demo-page">
    <text class="title">欢迎打开{{title}}</text>
    <!-- 点击跳转详情页 -->
    <input class="btn" type="button" value="跳转到详情页" onclick="routeDetail" />
  </div>
</template>

<style>
  .demo-page {
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .title {
    font-size: 40px;
    text-align: center;
  }

  .btn {
    width: 550px;
    height: 86px;
    margin-top: 75px;
    border-radius: 43px;
    background-color: #09ba07;
    font-size: 30px;
    color: #ffffff;
  }
</style>

<script>
  import router from '@blueos.app.router'

  export default {
    // 页面级组件的数据模型，影响传入数据的覆盖机制：private内定义的属性不允许被覆盖
    data: {
      title: '示例页面',
    },
    routeDetail() {
      // 跳转到应用内的某个页面，router用法详见：文档->接口->页面路由
      router.push({
        uri: '/DemoDetail',
      })
    },
  }
</script>

<!-- 导入外部文件, 代替style内部样式 -->
<style src="./style.css"></style>

<!-- 合并外部文件 -->
<style>
  @import './style.css';
  .a {
  }
</style>

<!-- 内联inline -->
<div style="color: #f00; margin: 10px;" />
<!-- class声明 -->
<div class="normal append" />

// 首先在 `manifest.json` 中配置 `fetch` 接口

// require引入
const fetch = require('@blueos.communication.network.fetch')

// import引入
import fetch from '@blueos.communication.network.fetch'

import utils from '../Common/utils.js'

<script>
  /**
   * 应用级别的配置，供所有页面公用
   */
  import util from './util'

  export default {
    showMenu: util.showMenu,
    createShortcut: util.createShortcut,
    util,
  }
</script>