uni-app

时间:2021-08-28
本文章向大家介绍uni-app,主要包括uni-app使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

什么是 uni-app

uni-app 是一个使用vue的语法 + 微信小程序的标签和API的跨平台前端框架,开发者编写一套代码,可编译到iOS、Android、H5、小程序等多个平台,几乎覆盖所有流量端。

uni-app 具有跨端数量更多、性能体验更优秀、学习成本低、开发成本低等几大关键优势。

使用 uni-app 的前置条件

不要认为uni-app 可以跨多端,就感觉开发难度会直线上升。如果说,你开发过小程序,恰好又会vue, 那么你的学习成本会非常的低。如果你原生小程序与vue 都没有接触过的话,我建议你花一些时间,看一看他们的官方文档。再回来学习uni-app。

为了更好的跨端开发, 参考uni-app 统一规范:

页面组件我们要遵循Vue 单文件组件 (SFC) 规范

组件标签靠近微信小程序规范

接口能力(JS API)靠近微信小程序规范

数据绑定及事件处理靠近Vue.js 规范,同时补充了App及页面的生命周期

为兼容多端运行,建议使用flex布局进行开发

开发工具

毫无疑问,首选使用官方推出的HBuilderX 编辑器

可视化的方式比较简单,HBuilderX 内置相关环境,开箱即用,无需配置node 。

框架目录见下:

┌─components                   uni-app组件目录

│  └─comp-a.vue                可复用的a组件

├─hybrid                             存放本地网页的目录,详见

├─platforms                        存放各平台专用页面的目录,详见

├─pages                              业务页面文件存放的目录

│  ├─index

│  │  └─index.vue                index页面

│  └─list

│    └─list.vue                       list页面

├─static                                存放应用引用静态资源(如图片、视频等)的地方,注意:静态资源只能存放于此

├─main.js                              Vue初始化入口文件

├─App.vue                            应用配置,用来配置App全局样式以及监听

├─manifest.json                    配置应用名称、appid、logo、版本等打包信息

└─pages.json                        配置页面路由、导航条、选项卡等页面类信息

小程序(微信、支付宝、百度、头条、QQ、360)

如果要开发小程序,我们需要知道不同平台下的小程序规范的 。规范了解之后,我们开发起来就相对来说比较简单一些。uni-app 帮我们把不同平台的小程序API 几乎都封装了 ,只需要将前缀替换为uni 即可  例如: 

我们调用微信小程序的request 请求

wx.request({

    url: 'https://www.example.com/request', //仅为示例,并非真实接口地址

    data: {

        text: 'uni.request'

    },

    header: {

        'custom-header': 'hello' //自定义请求头信息

    },

    success: (res) => {

        console.log(res.data);

        this.text = 'request success';

    }

});

我们使用uni-app 的request 请求

uni.request({

    url: 'https://www.example.com/request', //仅为示例,并非真实接口地址

    data: {

        text: 'uni.request'

    },

    header: {

        'custom-header': 'hello' //自定义请求头信息

    },

    success: (res) => {

        console.log(res.data);

        this.text = 'request success';

    }

});

除了前缀wx 替换为uni之外,其他与原规范机会保持一致。uni-app 会最大程度的抹平不同小程序平台之间的差异。

App(ios、安卓)

uni-app 在App 端不仅可以使用绝大多数的小程序相关的API,同时也可以使用5+API 很好的补足了小程序上一些还没有实现的功能。同时,App 端内置weex 引擎,提供了原生渲染能力。让你 App 性能更好。

H5

h5 基本上跟常规vue 开发没有什么区别, 唯一需要注意的是,有些API 是不能在h5 中使用,注意文档中标注的平台差异说明。

如何实现跨端

虽说是跨端,但是肯定是有情况是不支持的,比如遇到有些平台特有的API 怎么办 ?不用担心,这些问题uni-app 都为你想到了,那就是使用条件编译。

条件编译

在C 语言中,通过#ifdef、#ifndef 的方式,为windows、mac 等不同os 编译不同的代码,uni-app 参考这个思路,为uni-app 提供了条件编译手段,在一个工程里优雅的完成了平台个性化实现 。

条件编译是利用注释实现的,在不同语法里注释写法不一样,js使用// 注释、css 使用、vue/nvue 模板里使用 ``。

举个例子:

// #ifdef %PLATFORM%

平台特有的API实现

// #endif

// #ifndef H5

// 表示只有 h5 不使用这个 api

uni.createAnimation(OBJECT)

// #endif

注意事项

非H5 端,不能使用浏览器自带对象,比如document、window、localstorage、cookie 等,更不能使用jquery 等依赖这些浏览器对象的框架。因为各家小程序快应用都不支持这些对象。没有这些浏览器自带对象并不影响业务开发,uni 提供的api 足够完成业务。

uni-app 的tag 同小程序的tag,和HTML 的tag 不一样,比如div 要改成view,span 要改成text、a 要改成navigator。

原文地址:https://www.cnblogs.com/wenkangIT/p/15201142.html