uniapp学习

uni-app框架介绍

介绍

uni-app 是一个跨端开发框架，一套代码运行多个平台，并可以使用条件编译实现不同平台的特性编码

快速入门

uni-app支持通过可视化界面，HBuilderX内置相关环境，开箱即用

HBuilderX是通用的前端开发工具，但为uni-app做了特别强化。

uni-app 使用vue的语法+小程序的标签和API。

目录结构

 一个uni-app工程，默认包含如下目录及文件：

│─components            符合vue组件规范的uni-app组件目录
│  └─comp-a.vue         可复用的a组件
├─hybrid                App端存放本地html文件的目录，详见
├─platforms             存放各平台专用页面的目录，详见
├─pages                 业务页面文件存放的目录
│  ├─index
│  │  └─index.vue       index页面
│  └─list
│     └─list.vue        list页面
├─static                存放应用引用的本地静态资源（如图片、视频等）的目录，注意：静态资源只能存放于此
├─common                自建的通用目录，可以存放一些公用css\less\scss、js等文件
├─store                 数据state共享store目录，通常我们引入vuex使用的目录
│  ├─index.js
├─api                   自建的api目录，可以存放封装服务端API接口、通用网络请求的js等文件
├─uni_modules           存放[uni_module](/uni_modules)规范的插件。
├─node_modules          存放npm导入的第三方包
├─wxcomponents          存放小程序组件的目录，详见
├─main.js               Vue初始化入口文件
├─App.vue               应用配置，用来配置App全局样式以及监听 应用生命周期
├─manifest.json         配置应用名称、appid、logo、版本等打包信息，详见
└─pages.json            配置页面路由、导航条、选项卡等页面类信息，详见

Tips

• 编译到任意平台时，static 目录下的文件均会被完整打包进去，且不会编译。非 static 目录下的文件（vue、js、css 等）只有被引用到才会被打包编译进去。
• static 目录下的 js 文件不会被编译，如果里面有 es6 的代码，不经过转换直接运行，在手机设备上会报错。

详细参考：​​​​​​uni-app官网 (dcloud.net.cn)

单页面程序

uni-app 约定页面文件遵循Vue 单文件组件 (SFC) 规范 ，采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统

<template>
    <view class="container">
        {
  {message}}
    </view>
</template>

<script>
    export default {
        data() {