uni-app总结

当我第一次尝试使用uni.app这个移动跨平台开发工具时，它带给了我一种新的开发体验和感悟。通过这个工具，我深入了解到移动应用开发的跨平台技术和实现方式，同时也体验到了跨平台开发的便捷性和高效性。

首先，我发现uni.app非常易于上手，它不需要我具备太高的编程技能，即可快速实现跨平台的应用开发。它提供了许多优秀的组件和现成的模板，代码规范和语法也十分清晰明了，这使得我可以轻松地开发出健壮、一致性强、易于维护的应用程序。

其次，uni.app开发工具面向全球开发者，提供多种语言支持和多种平台的构建。使用它，我可以一次编码，构建多个平台的应用程序，如Android和IOS平台等。跨平台开发不仅可以节省时间和开发成本，同时可以更快地推出产品，以满足用户的需求和市场竞争。

最后，更需一提的是，通过使用uni.app，我加深了对移动跨平台开发技术和市场的认识，如深入了解React Native，Flutter和Vue.js等技术的优缺点，这对于未来持续学习和开发移动应用程序是非常有益的。

总之，uni.app是一个充满活力，快速，高效，强大的移动跨平台开发工具，让我更了解这个领域的技术和市场，激发了我对移动应用开发多平台化的热情。

在移动应用开发的学习中我学到了很多宝贵的知识其中就包括：

uni-app项目的创建

h5和安卓app发布

使用git和gitee进行代码的版本控制

使用gimp测量图片大小与距离以编写css

---

pages.json页面路由的配置

pages.json是uni-app中的配置文件，用于配置页面路由和全局样式等。其中，页面路由配置是通过"pages"字段来进行的。

在pages.json文件中，每个数组元素描述一个页面。例如：

"pages": [
        {
            "path": "pages/index/index",
            "style": {
                "navigationBarTitleText": "首页"
            }
        },
        {
            "path": "pages/about/about",
            "style": {
                "navigationBarTitleText": "关于我们"
            }
        }
    ]

"pages"中的每个元素都必须包含"path"属性和"style"属性。其中，

• "path"定义页面路径，即页面的相对路径，以"pages"目录作为根目录来计算。
• "style"定义页面样式，包括标题栏、导航栏、主题颜色等。

可以在pages.json中配置多个页面路径，同时也可以配置子页面路径。例如：

"pages": [
        {
            "path": "pages/index/index",
            "style": {
                "navigationBarTitleText": "首页"
            }
        },
        {
            "path": "pages/about/about",
            "style": {
                "navigationBarTitleText": "关于我们"
            }
        },
        {
            "path": "pages/about/contact",
            "style": {
                "navigationBarTitleText": "联系我们"
            }
        }
    ]

其中，"pages/about/about"是父页面路径，"pages/about/contact"是子页面路径。在父页面中可以通过uni-app提供的页面传参方法将数据传递给子页面。

需要注意的是，pages.json配置文件中，路径和名称大小写敏感，需要和实际文件名严格一致，否则会导致页面无法正常跳转。

---

使用阿里云智能logo设计网站设计应用logo

安装与使用微信小程序开发工具

---

在uni-app中使用静态资源

在uni-app中，可以将静态资源（如图片、音频、视频等）放置在项目的static目录下，然后通过相对路径来引用这些资源。

例如，在static目录下有一张名为test.png的图片，可以在vue文件中通过以下代码来引用：

<template>
  <img src="../static/test.png" alt="test">
</template>

其中，"../"表示回到上一级目录，然后进入static目录。如果需要引用其他类型的静态资源，也是同样的方式。

需要注意的是，在使用uni-app编译打包时，静态资源会被直接复制到各个平台的输出目录下。因此，在使用uni-app开发跨平台应用时，建议将静态资源放在static目录下，方便跨平台的使用。

---

iconfont的下载与使用

认识uniapp应用生命周期和页面生命周期

uni-app基础组件的使用view、scrollview、text、list、rich-text等

安装、使用第三方组件-循环骨架m-for-skeleton

自定义组件开发-uamhead及使用向组件props传值

使用apifox调用、测试webapi

使用uni.request发起对api的网络请求并处理响应结果

在模板中声明事件及在代码中定义响应方法

---

uni-app中进行数据绑定、使用v-属性

在uni-app中，数据绑定可以通过使用{{}}双花括号语法或者使用v-bind指令来完成。

例如，在vue中可以这样写：

<template>
  <div>
    <p>{{message}}</p>
    <input v-bind:value="message" v-on:input="updateMessage">
  </div>
</template>
<script>
  export default {
    data() {
      return {
        message: 'Hello World!'
      }
    },
    methods: {
      updateMessage: function(event) {
        this.message = event.target.value
      }
    }
  }
</script>

在uni-app中同样可以使用上述方式进行数据绑定，例如：

<template>
  <view>
    <text>{{ message }}</text>
    <input v-bind:value="message" v-on:input="updateMessage" />
  </view>
</template>

<script>
  export default {
    data() {
      return {
        message: 'Hello World!'
      }
    },
    methods: {
      updateMessage(event) {
        this.message = event.detail.value
      }
    }
  }
</script>

其中，v-bind指令在uni-app中可以简写为冒号(:)。

除了使用v-bind指令进行数据绑定外，v-on指令也是很常用的，比如上述例子中的v-on:input用于监听输入框的输入事件。在uni-app中，v-on指令也可以简写为@符号。

需要注意的是，uni-app中使用v-bind和{{}}时，需要将属性值用双引号括起来，比如：

<image :src="'/static/img/' + imgName + '.png'"></image>

而在vue中可以使用单引号，也可以不加引号。

---

使用uni.navigate进行页面间的跳转及传递参数

使用uni.createInnerAudioContext()创建音频对象并控制音频的播放

使用css3的animation实现音乐唱盘的动画效果

使用css的动态绑定技术实现动画启动-停止的控制

使用正则表达式对字符串进行搜索、替换

使用css的tranform配合js的setInterval同步歌曲的播放进度显示相应歌词

安装和使用uni-app的扩展组件uni-ui优化应用开发