Uni-app与Vue、微信小程序开发的区别，以及Uni-app实现多端开发的基本原理

一条爱学习的咸鱼

已于 2023-05-11 19:39:20 修改

阅读量2.2k

点赞数 1

文章标签： uni-app 微信小程序小程序

于 2023-05-04 22:29:36 首次发布

本文链接：https://blog.csdn.net/weixin_52641692/article/details/130495749

版权

uniapp基本介绍
uni-app的优缺点
- 小程序组件和API有哪些
- Uni-app并不支持某些平台上的高级特性
weex引擎
nvue
uniapp与vue和微信小程序的异同点
uniapp怎么实现多端开发的
- 条件编译指令
uniapp跨域
分别写出jQuery、vue、小程序、uni-app中的本地存储数据和接受数据是什么？
vue,小程序,uni-app的生命周期
vue , 微信小程序 , uni-app绑定变量属性
jQuery、Vue、Uni-app、小程序的页面传参方式

uniapp基本介绍

官网：https://uniapp.dcloud.net.cn/
官方介绍：
uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。

DCloud公司拥有900万开发者、数百万应用、12亿手机端月活用户、数千款uni-app插件、70+微信/qq群。阿里小程序工具官方内置uni-app（详见），腾讯课堂官方为uni-app录制培训课程（详见），开发者可以放心选择。

uni-app在手，做啥都不愁。即使不跨端，uni-app也是更好的小程序开发框架（详见）、更好的App跨平台框架、更方便的H5开发框架。不管领导安排什么样的项目，你都可以快速交付，不需要转换开发思维、不需要更改开发习惯。

uni-app的优缺点

Uni-app是一个基于Vue.js构建的跨平台移动应用开发框架，它的优缺点如下：

优点：

一份代码，多端共享，可以实现快速的跨平台开发。
提供了完整的开发工具链，支持自动生成项目模板、自动生成多端代码和构建打包等功能，提升了开发效率。
采用了优秀的模块化设计和组件化开发思路，可以提高代码重用率和可维护性。
Uni-app采用了微信小程序框架开发模式，支持小程序组件和API，可在H5、App、小程序等多个平台上运行，为多端开发提供了更加便捷的解决方式。

缺点：

因为要考虑跨平台兼容性，Uni-app并不支持某些平台上的高级特性，导致应用在某些平台上的性能和效果可能有所损失。
由于框架封装了很多底层的操作，开发者如果需要自定义或扩展某些功能，会面临相对较难的挑战。
尽管Uni-app提供了很多高级API和第三方插件，但对于某些非常规的开发需求，Uni-app可能不能完全满足开发者的需要。
目前，Uni-app相对于其它跨平台框架，市场占有率较低，可能在社区支持度和生态方面存在一些不足。

小程序组件和API有哪些

小程序组件和API具有很多功能和用途，这里列举一些比较常见的：

基础组件：例如view、text、image、button等，用于页面布局和基本交互操作。
表单组件：例如input、radio、checkbox、picker等，实现表单输入和选择等基本功能。
消息提示组件：例如toast、modal、loading等，用于消息提示和各种弹窗操作。
媒体组件：例如audio、video、camera等，用于媒体播放、录制和处理等功能。
地图和定位组件：例如map、location等，用于展示地图和获取用户位置信息。
网络请求API：例如request、uploadFile、downloadFile等，用于处理网络请求和上传下载等数据操作。
生命周期API：例如onLoad、onShow、onHide等，用于处理小程序各个生命周期的回调函数。
数据存储API：例如setStorageSync、getStorageSync等，用于本地数据存储和读取。

这些组件和API涵盖了小程序开发中的许多核心功能，开发者可以根据自己的需求选择合适的组件和API进行使用。

Uni-app并不支持某些平台上的高级特性

Uni-app并不支持某些平台上的高级特性，以下是一些例子：

3D渲染：Uni-app并不支持在部分平台上的3D渲染功能，在实现3D场景渲染时需要进行组件或扩展封装。
桌面应用：Uni-app没有对桌面应用提供官方支持。
VR和AR技术支持：在VR和AR技术领域，可能因为硬件和软件的限制，在部分平台上不被支持。某些平台上无法使用原生的 AR/VR SDK。
某些平台上无法使用原生的 NFC 功能。
某些平台上无法直接使用原生的硬件加速和高级图形渲染技术。

虽然Uni-app不能支持所有技术功能，但在WebApp跨端开发领域上已经拥有了很高的能力，同时也在不断扩展其生态和功能的支持。

weex引擎

Weex是一个基于Vue.js构建的移动端跨平台解决方案。它采用了外层采用语言无关的运行环境，内层运用原生渲染引擎来渲染页面，同时提供了各种开发调试工具。Weex可以实现一份代码多端使用，同时也提供了丰富的组件和API，可以支持移动端应用的各种功能和交互操作。Weex的开发过程相对简单、高效，并且也提供了良好的文档和社区支持。与Uni-app类似，Weex也在将Vue.js运用于跨平台开发方面大有作为。

nvue

nvue是uni-app提供的一种类似于Vue.js的扩展语法，主要用于更加高效的uni-app页面开发。与普通的Vue.js语法相比，nvue具有更好的性能和体验，可以更好地满足移动端App开发的需求。

nvue具有以下特点：

采用了Native渲染技术，可以直接在原生渲染引擎中渲染页面，提高了性能和体验。
提供了更加丰富的组件和API，支持原生控件和功能，可以实现更加灵活和高效的开发。
支持多种事件和交互操作，可以实现更加丰富和复杂的交互体验。
支持动态页面渲染和加载，可以根据需求动态生成页面和组件。

在实际开发中，nvue可以大幅度提高uni-app应用的性能和响应速度，同时也减少了开发者的工作量和成本。

详细请看：nvue介绍

uniapp与vue和微信小程序的异同点

uni-app简单来说是 vue的语法 + 小程序的api。

uniapp怎么实现多端开发的

Uniapp是一个跨平台的开发框架，允许开发人员使用一套代码来构建多个平台的应用程序，包括iOS、Android、H5和小程序等。

以下是Uniapp实现多端开发的一些特点和方法：

跨平台组件：

Uniapp提供了一组跨平台的组件和API，可以使用相同的语法和样式在不同平台上构建应用程序。例如，可以使用<uni-list>组件在H5和小程序中渲染相同的用户列表。

条件编译：

Uniapp支持条件编译指令，允许开发人员编写特定平台的代码。例如，可以只在小程序中使用wx.showToast() API，并在其他平台中使用其他API。

小程序转换：

Uniapp通过将代码转换为小程序原生代码来支持小程序平台。开发人员可以使用小程序特定的API和组件，并在跨平台应用程序中共享逻辑代码。Uniapp已经实现了H5、小程序和App平台之间的代码转换。

平台差异性：

虽然Uniapp支持多种平台，但不同平台之间仍然存在一些差异。可能需要编写特定平台的代码来解决这些问题。例如，在小程序中使用背景音乐播放时，需要注意循环播放时的限制。

条件编译指令

在Javascript中，条件编译指令允许根据条件编写不同的代码。这在解决不同平台之间的API或功能差异性时非常有用。
在这里插入图片描述

在Uniapp中，可以使用条件编译指令来编写跨平台的代码。

以下是常见的条件编译指令：

#ifdef：

当指定的标识符已定义时执行代码块。例如：

#ifdef H5
console.log('This is running on H5 platform');
#endif

在上述代码中，如果在构建应用程序时定义了H5标识符，则console.log()将执行。

#ifndef：

当指定的标识符未定义时执行代码块。例如：

#ifndef H5
console.log('This is not running on H5 platform');
#endif

在上述代码中，如果在构建应用程序时未定义H5标识符，则console.log()将执行。

#endif：

标记条件编译块的结束位置。例如：

#ifdef H5
console.log('This is running on H5 platform');
#endif

如果在构建应用程序时未定义H5标识符，则console.log()将不执行。

#else：

在已经定义标识符时执行else块。例如：

#ifdef H5
console.log('This is running on H5 platform');
#else
console.log('This is not running on H5 platform');
#endif

在上述代码中，如果在构建应用程序时定义了H5标识符，则执行第一行代码。否则执行else块中的代码。

需要注意的是，条件编译指令在构建应用程序时进行解析，不会影响代码的执行效率，因此可以安全使用。

uniapp跨域

uniapp和微信小程序都提供了网络请求API（uni.request(OBJECT) 和 wx.request(object)），但 uniapp 为了实现跨端兼容，需要注意网络请求跨域问题，微信小程序不用考虑多端兼容，也不会出现跨域问题。

uniapp中的跨域问题依然可以通过在 vue.config.js 中配置Proxy代理解决；

// vue.config.js for less-loader@6.0.0
module.exports = {
    devServer: {
        proxy: {
        	//👇 代理的名称，一般以这种格式命名，当然你也可以随便起
            '/xxx-api': {
                target: 'http://1.111.xx.123:3000',  // 后台接口的协议、域名、端口号
                changeOrigin: true,  //是否跨域
                pathRewrite: {
                    '^/xxx-api': ''//路径重写
                    //如果不重写，则请求时的路径中会带有这个/xxx-api
                }
            },
        }
    }
};

分别写出jQuery、vue、小程序、uni-app中的本地存储数据和接受数据是什么？

以下是jQuery、Vue、小程序和Uni-app中的本地存储和数据接收方式：

jQuery:

本地存储数据：

使用localStorage.setItem()来进行本地存储，并使用localStorage.getItem()来读取本地存储的数据。例如：

localStorage.setItem('key', 'value');
const data = localStorage.getItem('key');

数据接收：

使用jQuery.ajax()来发送数据请求，并使用success回调函数来接收数据。例如：

$.ajax({
  url: 'example.com/api',
  success: function(data) {
    console.log(data);
  }
});

Vue:

本地存储数据：

使用Vue.set()来进行响应式地本地存储数据。例如：

Vue.set(this.$data, 'key', 'value');

数据接收：

在Vue中，数据接收通常是通过组件方法或computed属性进行获取的。例如：

<template>
  <div>{{data}}</div>
</template>

<script>
export default {
  data() {
    return {
      data: ''
    }
  },
  created() {
    axios.get('example.com/api').then(res => {
      this.data = res.data;
    })
  }
}
</script>

小程序:

本地存储数据：

使用wx.setStorageSync()来进行本地存储数据，并使用wx.getStorageSync()来读取本地存储的数据。例如：

wx.setStorageSync('key', 'value');
const data = wx.getStorageSync('key');

数据接收：

在小程序中，使用wx.request()来发送数据请求，并使用success回调函数来接收数据。例如：

wx.request({
  url: 'example.com/api',
  success(res) {
    console.log(res.data);
  }
})

Uni-app:

本地存储数据：

使用uni.setStorageSync()来进行本地存储数据，并使用uni.getStorageSync()来读取本地存储的数据。例如：

uni.setStorageSync('key', 'value');
const data = uni.getStorageSync('key');

数据接收：

在Uni-app中，使用uni.request()来发送数据请求，并使用success回调函数来接收数据。例如：

uni.request({
  url: 'example.com/api',
  success(res) {
    console.log(res.data);
  }
})

需要注意的是，在使用以上方法进行数据存储和接收时，需要根据实际情况进行调整，并考虑到跨平台开发的差异性。

vue,小程序,uni-app的生命周期

以下是Vue、小程序和Uni-app中的生命周期函数：

Vue：

Vue的生命周期分为八个阶段，分别是：

beforeCreate：实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
created：实例已经完全创建，还没有渲染页面和$el生成之前调用。
beforeMount：在挂载之前调用，相关的render函数首次被调用，此时页面还未渲染出来。
mounted：el被新创建的vm.$el替换，并挂载到实例上去之后调用该钩子函数，此时页面已经渲染出来了。
beforeUpdate：在数据更新之前调用，发生在虚拟DOM重新渲染和打补丁之前。
updated：在数据更新之后调用，发生在虚拟DOM重新渲染和打补丁之后。
beforeDestroy：实例销毁之前调用。此时实例还未被销毁，可以在该钩子函数中进行一些清理工作。
destroyed：实例销毁之后调用。此时实例已经被销毁，无法再进行数据绑定、计算等操作。

小程序：

微信小程序的生命周期分为八个阶段，分别是：

onLoad：页面加载时触发，只会触发一次。
onShow：页面显示时触发，可能会触发多次。
onReady：页面初次渲染完成时触发，只会触发一次。
onHide：页面隐藏时触发。
onUnload：页面卸载时触发。
onPullDownRefresh：下拉刷新时触发，需页面配置enablePullDownRefresh。
onReachBottom：页面滚动到底部时触发，需页面配置onReachBottomDistance。
onShareAppMessage：点击分享按钮时触发，并返回分享相关信息，需页面配置。

Uni-app：

Uni-app的生命周期与Vue基本相同，但还添加了许多页面生命周期，举两个例子：

onLaunch：应用程序启动时触发，只会触发一次。
onShow：应用程序从后台切换到前台时触发。
详细的可以看：https://uniapp.dcloud.net.cn/tutorial/page.html#lifecycle
这些生命周期函数的意义和触发时机与Vue的生命周期函数类似，但在使用时仍需要根据实际情况进行调整。

vue , 微信小程序 , uni-app绑定变量属性

在Vue、微信小程序和Uni-app中，绑定变量属性的方法略有不同：

Vue、uniapp：

在Vue、uniapp中，可以使用v-bind指令或者简写方式冒号来将组件的属性与Vue实例中的数据进行绑定。例如：

<template>
  <div>
    <input type="text" v-model="name">
    <MyComponent :message="name"></MyComponent>
  </div>
</template>

<script>
  import MyComponent from './MyComponent.vue';

  export default {
    components: {
      MyComponent,
    },
    data() {
      return {
        name: '',
      };
    },
  };
</script>

在上述代码中，MyComponent组件的message属性被绑定到了Vue实例中的name属性。

微信小程序：

在微信小程序中，可以使用{{}}语法或者属性绑定方式来将组件的属性与Page中的数据进行绑定。例如：

<view>
  <input type="text" value="{{name}}" bindinput="onInput">
  <MyComponent message="{{name}}"></MyComponent>
</view>

Page({
  data: {
    name: '',
  },
  onInput(e) {
    this.setData({
      name: e.detail.value,
    });
  },
});

在上述代码中，MyComponent组件的message属性被绑定到了Page中的name属性。

需要注意的是，在使用属性绑定方式时，可能需要考虑不同平台之间的差异性，并根据需要进行调整。

jQuery、Vue、Uni-app、小程序的页面传参方式

在jQuery、Vue、Uni-app和小程序中，页面传参的方式略有不同：

jQuery：

在jQuery中，页面传参可以使用URL参数或者Cookies来实现。例如：

// URL参数
window.location.href = 'example.com/page?param1=value&param2=value';

// Cookies
$.cookie('param1', 'value');
const param1 = $.cookie('param1');

Vue：

在Vue中，页面传参可以使用$route.params来获取路由参数。例如：

// 路由定义
const router = new VueRouter({
  routes: [
    {
      path: '/page/:param1/:param2',
      component: Page,
    },
  ],
});

// Page组件中获取参数
export default {
  created() {
    const param1 = this.$route.params.param1;
    const param2 = this.$route.params.param2;
  },
};

Uni-app：

在Uni-app中，页面传参可以使用uni.navigateTo或uni.redirectTo的第二个参数options来进行传参。例如：

// navigateTo的options中传参
uni.navigateTo({
  url: 'example.vue',
  options: {
    param1: value,
    param2: value,
  },
});

// Page组件中获取参数
export default {
  onLoad(options) {
    const param1 = options.param1;
    const param2 = options.param2;
  },
};

小程序：

在小程序中，页面传参可以使用wx.navigateTo或wx.redirectTo的第一个参数url中携带参数来实现。例如：

// navigateTo的url中携带参数
wx.navigateTo({
  url: 'example?page=param1&param2=value',
});

// Page组件中获取参数
Page({
  onLoad(options) {
    const param1 = options.page;
    const param2 = options.param2;
  },
});

需要注意的是，在使用以上方法传递参数时，需要根据实际情况进行调整，并考虑到跨平台开发的差异性。

一条爱学习的咸鱼

关注

1
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
Uni-app与Vue、微信小程序开发的区别，以及Uni-app实现多端开发的基本原理

官方介绍：uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。DCloud公司拥有900万开发者、数百万应用、12亿手机端月活用户、数千款uni-app插件、70+微信/qq群。阿里小程序工具官方内置uni-app（详见），腾讯课堂官方为uni-app录制培训课程（详见），开发者可以放心选择。uni-app在手，做啥都不愁。
复制链接

扫一扫