您当前位置: 南顺网络>> 官方资讯>> 建站知识

uni-app 入坑指南

什么是 uni-app

  1. uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架,编写一套代码,可编译到iOSAndroidH5、小程序等多个平台。 详情点击 uni-app 官方文档

  2. uni-app在跨端数量、扩展能力、性能体验、周边生态、学习成本、开发成本等6大关键指标上拥有极强的竞争优势 。

  • 跨端数量更多

  • 平台能力不受限

  • 性能体验更优秀

  • 周边生态丰富

  • 学习成本低

  • 开发成本低

使用 uni-app 的前置条件

好多小伙伴可能要问了:哇,一套代码可以编译到那么多平台,那是不是我学习起来很麻烦啊,我只会vue啊,不会小程序,也不会原生开发,能不能学会uni-app呢。

这个问题问的就很棒,那么如果要学会uni-app需要会那些技能呢?答:你如果会vue,基本上就可以解决大多数问题了。 多读几遍文档,你会发现开发起来很顺畅 。

但是为了更好的跨端开发,我们肯定是要统一规范的:

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

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

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

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

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

开发工具

使用官方推出的 HBuilderX 编辑器
可视化的方式比较简单,HBuilderX 内置相关环境,开箱即用,无需配置node 。

使用Vue.js

几乎全支持 Vue官方文档:模板语法
当然,说的是几乎,那肯定有不支持的情况下啊, 下面给大家罗列一下不支持的情况 :

  • 不支持纯HTML

  • 不支持部分复杂的 JavaScript 渲染表达式

  • 不支持过滤器

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

当然如果要开发小程序,不可避免的,我们肯定是要知道不同平台下的小程序规范的 。当然知道了这些规范之后,我们开发起来就比较简单了。 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之外,其他的地方一摸一样,是不是这样开发起来就很一贼了呢 。

App(ios、安卓)

uni-app 不仅可以使用绝大多数的小程序相关的 API,同时也可以使用 5+API 很好的补足了小程序上一些还没有实现的功能,是不是很美好?而且开发方式还是跟上述一样,没有变化,是不是更美好了呢。

H5

h5 就不多说了,基本上跟常规 vue 开发没有什么区别, 需要注意的是,有些 API 是不能在 h5 中使用,主要看文档,看文档,看文档 。

如何实现跨端

当然虽说是跨端,但是肯定是有情况是不支持的,比如遇到有些平台特有的 API 怎么办 ?

不用担心,这些问题 uni-app 都为你想到了 那就是使用条件编译

条件编译

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

条件编译是利用注释实现的,在不同语法里注释写法不一样,js使用 // 注释css 使用 /* 注释 */vue/nvue 模板里使用 <!-- 注释 -->

举个例子:

// #ifdef  %PLATFORM% 平台特有的API实现 // #endif // #ifndef H5 // 表示只有 h5 不使用这个 api uni.createAnimation(OBJECT) // #endif

<!--  #ifdef  %PLATFORM% --> 平台特有的组件 <!--  #endif --> <!--  #ifdef  MP-WEIXIN --> <!--  只在小程序中生效 --> <view>我是微信小程序</view> <!--  #endif --> <!--  #ifdef  APP-PLUS --> <!--  只在 app 中生效 --> <view>我是 app </view> <!--  #endif -->

/*  #ifdef  %PLATFORM%  */ 平台特有样式 /*  #endif  */ /* #ifdef  MP-WEIXIN */ /*  只在小程序中生效  */ .header { color:red } /*  #endif  */ /*  #ifdef  APP-PLUS  */ /*  只在 app 中生效  */ .header { color:blue } <!--  #endif  */

是不是感觉很方便 ? 这样就可以很巧妙的去区分不同的平台了,具体的请详细看文档,看文档,看文档 。

注意事项

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

  • uni-apptag 同小程序的 tag,和 HTMLtag 不一样,比如 div 要改成 viewspan 要改成 texta 要改成 navigator


编辑:--ns868

填写您的服务需求,项目经理一对一为您服务!

众赢彩票官网 128彩票充值中心 江南娱乐官网 满堂彩充值中心 258彩票充值 170彩票官网 众赢彩票充值中心 188彩票充值中心 彩九彩票 大象彩票