uniapp移动端跨平台开发框架心得体会

uniapp是我接触的第一个跨平台前端框架，它是基于vue.js的，支持安卓与IOS及web平台的开发，还有各类平台的小程序。

uniapp也节省了许多的学习成本，因为在这之前我们都学过了vue.js，学习uniapp可谓是水到渠成，多熟悉熟悉官方文档，也可以开发出像样的程序。

以下是我真实的开发感受：

在刚接触的时候，我通常都是用于写一些H5的demo，因为uniapp内置有tabbar与navbar，在开发的过程中可以直接开始页面的开发，不用再自己手搓，大大的节省了练习的时间。

并且uniapp里封装有大量的api，就比如在开发一个商城类型的小程序的时候我要做一个创建收货地址的页面，它uniapp就内置有不需要我再自己写各个省市的数据，只需要使用uni-data-picker组件再创建与关联一个uniCloud的服务空间，创建对应名字的表，即uni-data-picker组件的指定的表名即可。

众所周知页面的跳转与页面间的通信是前端开发的重中之重，所以我接下来讲一下，我都是如何使用uniapp封装好的各种路由API

例如：uni.navigateTo页面跳转的api的使用方式

除了基本的使用方法，uni.navigateTo 还包含一些其他的用法和注意事项：

1. 参数传递

在进行页面跳转时，可以通过 query 参数传递一些数据。例如：

uni.navigateTo({
  url: '/pages/about/about.vue?name=张三&age=18'
});

在被跳转的页面（onLoad）中，可以通过 该函数 来获取传递的参数：

export default {
  onLoad(e) {
    console.log(e.name); // 输出：张三
    console.log(e.age); // 输出：18
  }
}

需要注意的是，从onLoad获取参数只适用于uni.navigateTo ，其他路由API无效。

2. 跳转带参

uni.navigateTo 还支持直接传递参数，而不是通过 query 参数传递。例如：

uni.navigateTo({
  url: '/pages/about/about.vue?name=张三&age=18',
  name: '张三',
  age: 18
});

在被跳转的页面中，可以通过 $options 获取传递的参数：

export default {
  mounted() {
    console.log(this.$options.name); // 输出：张三
    console.log(this.$options.age); // 输出：18
  }
}

需要注意的是，这种方式传递的参数只对当前跳转的页面生效，无法在之后的页面中获取。

3. 生命周期

由于 uni.navigateTo 打开的是新页面，因此在应用中可以同时存在多个页面。在这种情况下，组件的生命周期会发生一些变化。

在打开新页面时，旧页面的 onHide 生命周期函数会被触发。而在关闭新页面时，新页面的 onUnload 生命周期函数会被触发，旧页面的 onShow 生命周期函数会被重新触发。

因此，在编写应用时需要注意组件的生命周期函数的触发时机。

4. 监听返回事件

在新页面中，可以通过 uni.navigateBack 监听返回事件，并进行一些处理。例如：

export default {
  mounted() {
    uni.navigateBack({
      delta: 1,
      success: function () {
        // 返回成功后的回调函数
      },
      fail: function () {
        // 返回失败后的回调函数
      }
    });
  }
}

其中，delta 参数指定了返回的页面层数，默认为 1。如果需要返回前面的几个页面，可以增加 delta 的值。

需要注意的是，成功返回后，旧页面的 onShow 生命周期函数会被重新触发。如果不希望触发 onShow，可以将 uni.reLaunch 和 uni.redirectTo 等其他的 API 来完成页面跳转。

uniapp选择图片及上传图片体验与步骤

在 uni-app 中，可以使用 uni.chooseImage API 来选择并上传图片。以下是上传图片的步骤：

1. 选择图片：

uni.chooseImage({
  count: 1, // 可选择的图片数量，默认为 9
  sizeType: ['original', 'compressed'], // 可选择的图片类型，原图或压缩图，默认为 ['original', 'compressed']
  sourceType: ['album', 'camera'], // 可选择的图片来源，从相册或相机获取，默认为 ['album', 'camera']
  success: function (res) {
    // 选择图片成功后的回调函数
    const tempFilePaths = res.tempFilePaths; // 选择的图片临时文件路径数组
    // 调用上传方法
    uploadImage(tempFilePaths[0]);
  },
  fail: function () {
    // 选择图片失败后的回调函数
  }
});

在成功回调函数中，我们可以通过 res.tempFilePaths 获取选择的图片的临时文件路径。

1. 上传图片：

根据选择的图片临时文件路径，可以使用 uni.uploadFile API 来上传图片。

function uploadImage(filePath) {
  uni.uploadFile({
    url: 'https://example.com/upload', // 上传图片的接口地址
    filePath: filePath, // 要上传的图片的临时文件路径
    name: 'file', // 上传图片时的参数名，根据实际接口定义进行修改
    success: function (res) {
      // 上传图片成功后的回调函数
      const data = res.data; // 服务器返回的数据
      // 处理上传成功后的逻辑
    },
    fail: function () {
      // 上传图片失败后的回调函数
    }
  });
}

在成功回调函数中，我们可以通过 res.data 获取服务器返回的数据，可以根据实际情况进行处理。

需要注意的是，上传图片时需要根据实际接口定义将上传参数名和接口地址进行修改。

uniapp地图的使用与体验

在做一个商城的小demo里需要用到uniapp地图

在 uni-app 中，可以使用 uni.createMapContext API 来实现地图功能。以下是实现地图功能的基本步骤：

1. 在页面中添加地图组件：

在你的页面组件中，使用  标签来添加地图组件。例如：

在上面的例子中，使用了 :longitude、:latitude 和 :scale 来绑定地图的经度、纬度和缩放级别。你可以根据需求自行修改这些值。

1. 获取地图实例：

在页面的 onReady 生命周期函数中，可以使用 uni.createMapContext API 来获取地图实例，以便后续的操作。

export default {
  data() {
    return {
      mapContext: null // 地图实例
    };
  },
  onReady() {
    // 获取地图实例
    this.mapContext = uni.createMapContext('map');
  }
}

在上面的例子中，使用 uni.createMapContext('map') 获取地图实例，并将其保存在 mapContext 变量中。

1. 地图操作：

通过地图实例 mapContext，可以进行一些常见的地图操作，例如平移、缩放等。

export default {
  // ...

  methods: {
    // 平移地图
    moveMap() {
      // 平移地图到经度 113.324520、纬度 23.10229
      this.mapContext.moveToLocation({
        longitude: 113.324520,
        latitude: 23.10229
      });
    },

    // 缩放地图
    zoomMap() {
      // 缩放地图到缩放级别 18
      this.mapContext.includePoints({
        points: [{
          longitude: 113.324520,
          latitude: 23.10229
        }],
        padding: [50]
      });
    }
  }
}

在上面的例子中，使用 moveToLocation 方法将地图平移至指定的经纬度，使用 includePoints 方法将地图缩放至指定的区域。

以上就是在 uni-app 中上传图片的基本步骤。根据实际需求，可能还需要进行压缩、裁剪等图片处理操作。

以下是 uni-app 的一些特点以及在开发中的一些体验：

1. 跨平台开发：uni-app 是一款真正实现了多端应用开发的框架，可以用一份代码进行开发多个平台的应用，这大大减少了开发成本和提高了开发效率，同时还保持了应用程序的稳定性和一致性。

2. 基于 Vue.js：与 Vue.js 核心团队合作开发的 uni-app，基于 Vue.js 开发，Vue.js 作为一款受欢迎的前端框架，在开发过程中，可以更简单方便地操作多种 DOM，将 HTML、CSS 和 JavaScript 都融合在一起，并且使用数据绑定和组件化开发，使得应用程序清晰易懂，易于维护。

3. 丰富的组件库：uni-app 提供了大量的组件库，可以快捷高效的实现各种界面效果。其中组件之间的配合协作很紧密，开发者可以更方便地选择和使用，提高开发效率并且提供一定的组件复用性。

4. 自由度高：uni-app 开发者可以随意创造和封装组件，而且也可以直接使用原生的 API。在开发中，可以通过 uni-app 的 API 来调用各个平台的原生能力。

5. 社区庞大：uni-app 有庞大的开发者社区，如果遇到问题可以通过 uni-app 官方论坛、GitHub 上的开源代码、技术文章和其他开发者的经验分享等来解决问题。

总的来说，uni-app 是一款非常优秀的跨平台开发框架，不仅具有高可扩展性、易学习、开发效率高等优点，还提供了非常丰富的组件库和插件库，可以方便地进行应用程序的开发和发布。作为要做前端开发者的同学，学习并积极使用 uni-app，能够为个人职业生涯提供更为广泛和可持续的发展空间。