uni-app开发小程序的经验总结

1. uni-app简介

uni-app 是一个基于 Vue.js 开发跨平台应用的前端框架，支持多端开发（微信小程序、H5、App、支付宝、百度、头条等），无需重复编写代码即可同时发布到各个平台。

2. uni-app开发小程序的经验总结

（1）组件

uni-app里预设了许多组件，使用起来非常方便，如按钮、图标、消息提示、进度条、导航栏、tab栏等等。其中还有自定义组件的编写方法，可根据需求进行扩展。下面是按钮组件的示例代码。

<template>
  <view class="content">
    <button class="btn" @click="submit">点击提交</button>
  </view>
</template>

<script>
export default {
  methods: {
    submit() {
      uni.showToast({
        title: '提交成功',
        icon: 'success',
        duration: 2000
      })
    }
  }
}
</script>

<style lang="scss">
.content {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  .btn {
    background-color: #f60;
    color: #fff;
    border-radius: 10px;
    padding: 10px 20px;
  }
}
</style>

（2）API

uni-app已经封装了许多常用的API，包括路由、网络、媒体、地理位置等等。使用API也非常简单，如下面这个获取用户信息的示例。

<template>
  <view class="content">
    <button class="btn" @click="getUserInfo">获取用户信息</button>
    <view v-if="userInfo">
      <image :src="userInfo.avatarUrl" class="avatar"></image>
      <view>{{ userInfo.nickName }}</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      userInfo: null
    }
  },
  methods: {
    getUserInfo() {
      uni.getUserProfile({
        desc: '用于完善会员资料',
        success: (res) => {
          this.userInfo = res.userInfo
        }
      })
    }
  }
}
</script>

<style lang="scss">
.content {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 100vh;
  .btn {
    background-color: #f60;
    color: #fff;
    border-radius: 10px;
    padding: 10px 20px;
    margin-bottom: 20px;
  }
  .avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin-bottom: 10px;
  }
}
</style>