专栏首页web秀Vue.js 一套代码,发布到iOS、Android、H5、以及各种小程序

Vue.js 一套代码,发布到iOS、Android、H5、以及各种小程序

了解 Uni-App

uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、H5、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉)等多个平台。

即使不跨端,uni-app同时也是更好的小程序开发框架。

uni-app 是由 DCloud 公司打造的,DCloud公司拥有340万开发者用户,旗下uni-app有5万+案例、600+插件、50+微信/qq群、更高的百度指数,可以放心选择。

为什么要用 Uni-App

uni-app在开发者数量、案例、跨端抹平度、扩展灵活性、性能体验、周边生态、学习成本、开发成本等8大关键指标上拥有更强的优势。

1、开发者/案例数量更多: 5万+案例、600+插件、50+微信/qq群、更高的百度指数,跨端完善度更高,真正落地的提高生产力

2、平台能力不受限: 在跨端的同时,通过条件编译+平台特有API调用,可以优雅的为某平台写个性化代码,调用专有能力而不影响其他平台。支持原生代码混写和原生sdk集成。

3、性能体验优秀:体验更好的Hybrid框架,加载新页面速度更快。App端支持weex原生渲染,可支撑更流畅的用户体验。小程序端的性能优于市场其他框架。

4、周边生态丰富:丰富的插件市场,各种模板拿来即用。支持NPM、支持小程序组件和SDK、兼容mpvue组件和项目、兼容weex组件。微信生态的各种sdk可直接用于跨平台App。

5、学习成本低: 基于通用的前端技术栈,采用vue语法+微信小程序api,无额外学习成本。

快速开始

一、HBuilderX 下载安装

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

开始之前,开发者需先下载安装如下工具:

HBuilderX:官方IDE下载地址

HBuilderX是通用的前端开发工具,但为uni-app做了特别强化。

二、创建项目

在点击工具栏里的文件 -> 新建 -> 项目:

选择uni-app,输入工程名,并且你可以从模板里的 你喜欢的模板 即可体验官方示例。最后点击创建,即可成功创建 uni-app 项目。

官方模板地址:DCloud 插件市场

我这里选择“电商模板min-amll”创建项目

三、运行uni-app项目

1、浏览器运行:进入项目,点击工具栏的运行 -> 运行到浏览器 -> 选择浏览器,即可在浏览器里面体验uni-app 的 H5 版。

预览图:

2、真机运行:连接手机,开启USB调试,进入项目,点击工具栏的运行 -> 真机运行 -> 选择运行的设备,即可在该设备里面体验uni-app。

(1)、android手机,USB连接后,打开开发者模式

(2)、ios 手机,电脑先下载 iTunes ,然后USB连接电脑,添加信任设备即可。

这里我们以ios为例。

3、手机上面已经安装了一个名叫“HBuilder”的APP了,这时候点击是打不开的,需要我们ios手机 -> 设置 -> 通用 -> 设备管理 -> 添加信任。为什么要这样?因为ios必须要证书,正在发布的时候,就需要去apple申请证书,上线后,就不需要这样操作了。

4、我们可以打开手机上面的APP了

这就是手机上面打开的样子,是不是感觉非常nice了?

体验原生功能

扫码

通过上图,我们看到左上角有一个扫描,但是模板只写了事件,并没有实现,所以我们添加功能进去。 pages/index/index.vue

//点击导航栏 buttons 时触发
onNavigationBarButtonTap(e) {
    const index = e.index;
    if (index === 0) {
        this.$api.msg('点击了扫描');
    } else if (index === 1) {
        // #ifdef APP-PLUS
        const pages = getCurrentPages();
        const page = pages[pages.length - 1];
        const currentWebview = page.$getAppWebview();
        currentWebview.hideTitleNViewButtonRedDot({
            index
        });
        // #endif
        uni.navigateTo({
            url: '/pages/notice/notice'
        })
    }
}

阅读:uni-app api,设备 - 扫码 文档。操作很简单

uni.scanCode(OBJECT)
// 调起客户端扫码界面,扫码成功后返回对应的结果。

OBJECT:

(1)、onlyFromCamera Boolean 否 是否只能从相机扫码,不允许从相册选择图片 头条小程序不支持

(2)、scanType Array 否 扫码类型,参数类型是数组,二维码是'qrCode',一维码是'barCode',DataMatrix是‘datamatrix’,pdf417是‘pdf417’。 头条小程序不支持

(3)、success Function 否 接口调用成功的回调,返回内容详见返回参数说明。

(4)、fail Function 否 接口调用失败的回调函数(识别失败、用户取消等情况下触发)

(5)、complete Function 否 接口调用结束的回调函数(调用成功、失败都会执行)

onNavigationBarButtonTap(e) {
    const index = e.index;
    if (index === 0) {
        this.$api.msg('点击了扫描');
        uni.scanCode({
            success: (result) => {
                this.$api.msg('扫描成功' + result);
            },
            fail: (res) => {
                this.$api.msg('扫描成功' + res);
            }
        })
    } else if (index === 1) {
        ...
    }
}

这样就能调起扫描功能了。

是不是很简单了?想尝试的小伙伴可以去试试。

总结

Dcloud公司下面的产品也是非常多,uni-app、wap2app(m站快速转app)、 mui(前端UI框架)、5+Runtime(原生40万API随意调用)等等,感觉还是很强大的。

现今,移动端混合开发框架也是非常多,Flutter、React Native、Weex、Wex5等等,如何从中选择最优的框架?主要还是看看你的需求,已经他们的生态,还有周边,如果遇到问题,网络上或者官方能不能及时帮助你解决问题。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Uni-App项目搭建以及准备工作

    Uni-App项目开发,需要“定制化IDE”,也就是“HBuilderX”工具,主要是因为模拟运行调试一块,其他IDE不具备,其他功能和VS code、Subm...

    Javanx
  • UniApp实战:动态数据(uni.request封装、uni.getLocation获取定位等)

    有人肯定会问,人家uni.request()已经挺好的了,为什么非的在封装一次了?

    Javanx
  • 你不知道的高性能实现深拷贝的方式

    JS 中有个重要的类型叫做引用类型。这种类型在使用的过程中,因为传递的值是引用,所以很容易发生一些副作用,比如:

    Javanx
  • 详解:如何在uni-app中选择一个合适的UI组件库

    uni-app框架转眼已经发布了一年多,使用uni-app的开发者也是与日俱增。因为uni-app是一个跨端框架,所以我们大多使用它就是为了同时一套代码跨多端,...

    极乐君
  • 细说RESTful API安全之概述

    目前许多前后端应用都采取REST架构风格,前端应用和后端服务通过API进行数据交换。 通过REST API在网络中进行数据交换时很容易被网络抓包,然后进行恶意批...

    2Simple
  • 关于 uni-app 使用 web-view 页面之间互相跳转、通信等问题的解决方案

    最近开发小程序的时候、需要嵌入一个第三方网站、并且和第三方网站有些交互。这个第三方页面本身就是一个 HTML 页面、想着把它给嵌入到 uni-app 中,结果没...

    hedeqiang
  • Connection 对象简介 方法解读 JDBC简介(四)

    通过驱动管理器DriverManager的getConnection方法,可以创建到指定URL的连接

    noteless
  • Java中对于unsigned byte类型的转换处理问题由来Java中unsigned byte 的转换测试程序小结

    阅读到上述源代码时,对于int luminance = row[x] & 0xFF;最初不是很理解。查询之后,发现原来Java中是没有unsigned byte...

    desperate633
  • 西瓜书笔记-模型评估与选择

    将数据拆分为训练数据和验证数据,可以减小过拟合的可能性。但这样就必须拆分出和训练集数据分布几乎一致的验证数据。

    Ewdager
  • Java开发环境系列:全文搜索引擎elasticsearch(kibana插件)

    Kibana是一个开源的分析和可视化平台,设计用于和Elasticsearch一起工作。

    架构师小跟班

扫码关注云+社区

领取腾讯云代金券