精华内容
下载资源
问答
  • 跨平台App开发方式介绍与比较.zip Ionic AppCan APICloud Dcloud uni-app React Native
  • 几款移动跨平台APP开发框架比较
  • uni-app跨平台APP开发

    千次阅读 2019-01-02 15:29:46
    uni-app跨平台APP开发uni-app 介绍开发开发工具HBuilderX模拟器连接框架介绍目录结构生命周期路由页面样式与布局配置pages.jsonmanifest.json组件、接口 uni-app 介绍 uni-app 是一个使用 Vue.js 开发跨平台应用的...

    uni-app 介绍

    uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架。
    适用平台:Android、iOS、微信小程序。实现了一套代码,同时发布到Android、iOS、微信小程序。
    官方:https://uniapp.dcloud.io/

    开发

    开发工具

    (1)HBuilderX
    下载地址:http://www.dcloud.io/hbuilderx.html
    (2)微信开发者工具
    下载地址:https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

    HBuilderX模拟器连接

    夜神模拟器 下载地址:https://www.yeshen.com/
    (1)打开夜神模拟器
    (2)找到模拟器安装目录,执行以下命令

    nox_adb connect 127.0.0.1:62001
    nox_adb devices
    

    在这里插入图片描述
    (3)找到hbuilder的adb.exe路径
    在这里插入图片描述
    (3)设置端口号
    在这里插入图片描述
    (4)选择项目运行-模拟器
    在这里插入图片描述

    框架介绍

    官方:https://uniapp.dcloud.io/frame

    目录结构

    ┌─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            配置页面路由、导航条、选项卡等页面类信息,详见
    

    生命周期

    参考官方:https://uniapp.dcloud.io/frame?id=应用生命周期

    路由

    参考官方:https://uniapp.dcloud.io/frame?id=路由

    页面样式与布局

    参考官方:https://uniapp.dcloud.io/frame?id=页面样式与布局

    配置

    pages.json

    参考官方:https://uniapp.dcloud.io/collocation/pages

    manifest.json

    参考官方:https://uniapp.dcloud.io/collocation/manifest

    组件、接口

    参考官方:
    https://uniapp.dcloud.io/component/README
    https://uniapp.dcloud.io/api/README
    参考官方提供示例模板
    在这里插入图片描述

    全局变量、方法

    (1)定义
    在App.vue的script标签中定义,如:

    global.root = '全局的值';
    global.isAuth = function(){
    	return false;
    }
    

    (2)使用

    在需要使用的页面中使用
    变量:root
    方法:isAuth()
    
    展开全文
  • 所谓的跨平台APP开发,就是在编写了一套代码之后,可以在多端的各种平台上发布和运行它们,即,它不依赖于操作系统或硬件环境。 APP跨平台开发目前是一个相对流行的方向。 Web框架用于开发,Web开发经验用于快速构建...

    所谓的跨平台APP开发,就是在编写了一套代码之后,可以在多端的各种平台上发布和运行它们,即,它不依赖于操作系统或硬件环境。 APP跨平台开发目前是一个相对流行的方向。 Web框架用于开发,Web开发经验用于快速构建应用程序,从而提高了APP开发的效率。 因此在通过郑州APP开发公司开发APP时,跨平台APP的开发值得我们选择吗? 让我们首先看一下跨平台APP开发的优势。

    c578f6ea8e6305f17dea29c2d17a6b09.png

    郑州APP开发公司

    1、易于营销

    在多个平台上同时开发应用程序时,无需创建单独的消息即可满足特定人群。 在所有平台上,营销策略可能都相同。 我们可以设置适用于多个平台的营销策略,并使用相同的营销策略来满足所有平台的营销需求。 因此,可以通过相同的努力实现跨平台开发。

    2、维护和部署变得容易

    在使用APP期间,不可避免地会进行某些维护和部署工作,并且如果您使用APP的跨平台开发,则无论何时进行任何更改或添加了新功能,更新都会在所有平台上同步 无需分别配置。 维护和部署变得非常容易。

    3、外观相同

    跨平台应用程序具有可在所有平台上运行的代码,因此应用程序的外观可以轻松保持一致。 本机APP开发可能会针对不同的操作系统使用不同的版本,从而难以获得准确的外观,从而影响用户体验。

    4、降低开发成本和开发周期

    与原生APP开发相比,跨平台开发是一次在所有平台上进行APP开发。 一次在所有平台上进行开发可以大大降低APP开发的成本和开发周期。

    7b887d5699f6149586bdb03765d7aff1.png

    郑州APP开发公司

    以上是APP跨平台开发的优势。 尽管成本和周期减少了很多,但与原生开发相比,其综合体验却不如原生APP,特别是对于那些想要创业或从传统行业转移的人们。 对于在线企业家。 对于大型制造商而言,完全可以进行跨平台开发,而无需考虑前期开发和优化的成本。 但是,跨平台APP的开发可能是将来APP开发市场中的流行趋势。 毕竟,随着APP开发技术的进步,跨平台开发的弊端将因技术而改变,因此选择跨平台开发也是需要权衡的考虑因素。 那么郑州APP开发公司应该如何选择呢? 推荐郑州燚轩科技。

    展开全文
  • 带你从零学ReactNative开发跨平台App开发(一) 带你从零学ReactNative开发跨平台App开发(二) 带你从零学ReactNative开发跨平台App开发(三) 带你从零学ReactNative开发跨平台App开发(四) 带你从零学React...

     ReactNative跨平台开发系列教程:

    带你从零学ReactNative开发跨平台App开发(一)

    带你从零学ReactNative开发跨平台App开发(二)

    带你从零学ReactNative开发跨平台App开发(三)

    带你从零学ReactNative开发跨平台App开发(四)

    带你从零学ReactNative开发跨平台App开发(五)

    带你从零学ReactNative开发跨平台App开发(六)

    带你从零学ReactNative开发跨平台App开发(七)

    hot:更多>>

     贴一个交流群的二维码,欢迎加入:

     

     

    首先自我介绍一下,本人鸟窝,现在就职于xx共享汽车,担任主程,目前用的技术栈是.net core+angular。

    今天我讲的是关于ReactNative从零基础开发,希望可以对入门的新手,起到一个指导作用。

    目前学习React Native跨平台开发的人员比较多,干ReactNative开发的程序员,转行过来的也比较多,之前就有遇到过,比如:干前端的,干Android/IOS的,干后台的(C#,Go,Java...PHP),发现一个很有趣的现象,我公司同事干PHP的,一次偶然,我发现他尽然学起了RN,好了,废话不多说,只是想告诉大家,RN开发App效果也不错。

    接下来就开始了...你们准备好了吗!!!


    一,首先检查环境,ReactNative(一下简称:RN)开发,必要环境。
    等等,在这里我必须强调,RN开发有两种模式,一是原生Android/IOS混合起来的开发(这种开发目前在国内,从事的比较多),二是CRNA(create react native app)模式开发,也就是利用脚手架生产项目模板。【国内市场对CRNA的介绍不多,我这里先简单的介绍一下CRNA 入门,后续还是讲原生Android/IOS混合这种模式】暂时先不介绍CRNA模式开发,等国内市场成熟再说不迟。

    工具准备:

    1,进入http://nodejs.cnnodejs中文网,下载与自身环境相一致的nodejs安装包

     

    2,安装包下载之后,双击进行安装

    win平台的同学注意,安装过程中要关闭杀毒软件和各种安全工具

    3,安装完成之后,打开命令行工具,检查是否安装成功,执行如下命令:

    $ node -v
    

    该命令执行结果为当前node版本,笔者当前版本为:

    4,检查NPM是否安装成功,

    npm 是Node包管理工具,之后需要使用它来安装其他node程序包

    在在命令行中输入如下命令:

    $ npm -v
    

    该命令执行结果为:

    3.10.10

    Yarn

    Yarn是Facebook出品的一个依赖包管理工具,起作用和npm一样。但Yarn具有更多好用的特性:

    • Yarn 会缓存它下载的每个包,所以不需要重复下载。它还能并行化操作以最大化资源利用率,所以安装速度之快前所未有

    • Yarn 在每个安装包的代码执行前使用校验码验证包的完整性。

    • Yarn 使用一个格式详尽但简洁的 lockfile 和一个精确的算法来安装,能够保证在一个系统上的运行的安装过程也会以同样的方式运行在其他系统上

    • 网络适应单个请求失败不会导致安装失败,请求失败时会重试

    安装yarn

    访问Yarn官网,下载响应平台的安装包,进行安装

    使用Yarn

    安装好之后,其他工具会自动使用Yarn进行加速。

    当然安装之前,你可以先检查一下,你自己是否已经安装过Yarn,如果出现下图的模式,说明已经安装过了。


    yarn -v 看一下当前版本

    安装create-react-native-app命令行工具

    create-react-native-app是一个综合创建ReactNative工程,并且不需要配置的工具,它极大的简化了入门开发的流程。具体的内容,大家可以进入其github.com的主页进行浏览

    安装create-react-native-app需要使用npm进行,在任意目录下,输入如下命令,便可以在该目录下创建一个ReactNative工程。

    注意,如果没有安装crna命令行工具的话,直接运行该命令会报这样的错:

    所以我们要先安装命令行工具,也叫脚手架。

    由于npm 服务器在境外,加上网速慢的原因,这个加载起来会很满,大家稍安勿燥。

    如图所示,安装完成,我今天网速好像有点快啊,安装了30s。

    创建ReactNative工程

    ReactNative工程的模板需要通过create-react-native-app工具进行创建。创建方法如下:

    1,通过命令行进入存放ReactNative工程的文件夹。

    2,在该文件夹下执行如下命令:

    $ create-react-native-app myapp
    

    myapp为工程名,可以更换为其他字符,但必须小写

    安装过程需要1-5分钟不等,如想提升安装速度,可以安装yarn,详情见yarn官网

    下面为笔者安装成功截图:

     

    这个过程比较 漫长  是真的漫长啊,我等了有10分种。这个过程你不要怀疑时间,真的是这样的。

    如果在这个过程中,你等的不耐烦,可以先下载我们的必备工具:1.模拟器,这里我推荐夜神模拟器。2.Expo ,这是一个可以直接装在手机上或者模拟器里,用来测试项目用的。

    模拟器都会安装吧,安装好模拟器,我们配置一下参数:

    为了减少我们的内存开销,我们把配置调的低一点。内存大的土豪无所谓!

     

    运行预览工程

    1,工程创建完成之后,便可以启动工程,开始开发和调试。

    启动工程,首先要使用命令行工具进入工程更目录,然后运行如下指令

     

    $ yarn start
    

    工程 启动之后,会生成一个二维码和一个本地链接,通过此此二维码或本地链接,便可预览工程运行效果。

     

     

     

     这就是代表着你的项目已经跑起来了,如何看效果呢?那就看英文字符,提示:想预览你的app加载出来是什么吊样,那么就用expo app的扫码工具扫一扫吧,你就可以看见你的项目运行起来是什么吊样了!

    expo是什么,如何找到expo并安装expo呢?去expo官网 https://expo.io  好多人反应官网上下载expo有问题,并且也有人加我找我要,这里如果你们有问题的话,可以直接访问下面我给出的expo下载链接,直接下载!

     

     

    按 a 打开该项目在android 或 模拟器上开发设备上

    按 q 展示二维码

    按 r 重新加载资源包 

    按R 重新加载资源包,并清楚缓存

    好了,下面我给大家提供一点资料:

    2,启动工程之后,需要在手机端安装Expo App,使用Expo App对所开发的ReactNative App进行预览运行。

    安装ExpoApp的方法如下:

    iOS平台:在AppStore中搜索Expo client,如图

     

    Android平台下,访问此链接:http://expo.io/--/api/v2/versions/download-android-apk 下载安装包并安装,安装过程中需要给此App全部权限。

    3,Expo App在手机端安装完成之后,打开ExpoApp,通过其扫描二维码的功能,扫描生成的二维码,便可以在App内预览开发中的App工程

     

    4,新建工程的运行效果为:

    注意:expo上看你开发的app效果有两种途径:1.手机上直接扫码就可以了 2.复制exp://xxxx.xx.xx.xx那个链接,到project上收索该地址,可以看到项目,如图

     

    在IDE中编写代码,查看效果!

    熟话说,工欲善其事,必先利其器,这里我推荐大家用 vs code编辑器敲代码,效果是非常爽的!

     

    找到我们刚才创建的项目,有vs code打开它,并且编写代码!

     在我修改了内容之后,app的内容也发生了变化!

     

     

    用vs code写rn的话,我在推荐大家安装几个插件,安装插件的目的是为了更加高效的开发

     

     


     

     

     好了,到这一步,我们的app就算是跑起来了,如果你耐心的和我学到了这里,那么恭喜你,你很牛逼,因为我第一搞这个的时候,搞了两天,还是一脸蒙蔽!

    后续文章持续更新,敬请期待!

    文章为作者原创,转载请注明出处。

     

    
    

    转载于:https://www.cnblogs.com/gdsblog/p/8025092.html

    展开全文
  • 带你从零学ReactNative开发跨平台App开发(一) 带你从零学ReactNative开发跨平台App开发(二) 带你从零学ReactNative开发跨平台App开发(三) 带你从零学ReactNative开发跨平台App开发(四) 带你从零学React...

     ReactNative跨平台开发系列教程:

    带你从零学ReactNative开发跨平台App开发(一)

    带你从零学ReactNative开发跨平台App开发(二)

    带你从零学ReactNative开发跨平台App开发(三)

    带你从零学ReactNative开发跨平台App开发(四)

    带你从零学ReactNative开发跨平台App开发(五)

    带你从零学ReactNative开发跨平台App开发(六)

    带你从零学ReactNative开发跨平台App开发(七)

    hot:更多>>

     贴一个交流群二维码,欢迎加入

     

    经过上两篇文章的讲解,已经基本搭建起来基础环境,接下来就要真是开发了,这边文章,我想先普及一下CRNA(create-react-native-app xx)的知识,因为有不少人问过我expo方面的东西,所以实战时候第一个项目使用CRNA方式创建,然后再将其转化为原生混合模式开发 。声明,本人打算app开发中的所有接口api,由我自己来实现,并上传服务器,届时大家可以一起调用,当然实战项目肯定是会上传到github的。废话不多说,开始撸码,你准备好了吗?


     

    介绍一款新武器-xde

    采用crna模式开发,好多人以为跳不过xde,那什么是xde?在这里我不做过多解释。

    等等,先白话一下,好久没搞crna发现变化还是挺大的,我决定要先科普了。

    如果嫌下载XDE慢的话,这里是我下载好的,点击可以下载

    如果嫌expo下载慢的话,可以点击这里下载

    下载好xde,双击运行打开,然后下一步,下一步

    安装完成后会出现登陆界面,这里强烈建议大家注册一个自己的号,用常用的qq邮箱,因为expo的好多变动都会发邮件提醒你。

    登陆成功后如下操作:

     

     然后点击create创建项目,第一次创建比较慢,之后创建就会快很多。

    如果在这里卡的很久,请点击retry

    创建成功后的一些配置:我直接做成动图了,这样大家会更好的理解,

     

     有部分人问我,用xde开发需不需要“翻墙” ,翻墙就不必了,但是防火墙请关掉。关于使用xde遇到的多有问题,欢迎和我交流。


    好了,官网给出的说法是,开发RN,你安装了xde和expo就够了,但是初次配置还需要node干一些事情,所以说,如果你现在有了这三种工具,然后就可以跟着我一起体验一把crna方式开发跨平台app的快感了!

    下图是项目跑起来的效果图:

     这里有一个小坑,初次运营,你要配置一下xde

     

     出现这个错误,如何配置呢?你可以这么来

    项目正在building文件,加载过程中,这个过程正常情况下,两分钟就可以搞定!

    好了,如果你项目到这里的话,证明你已经成功了,接下来就可以好好的干一翻了。

    这里我们修改一下代码里的内容,模拟器会立马刷新,这个感觉非常爽!

     

     到这里,基础环境搭建,我就真演示完毕了,能不能入门在天,哈哈!接下来我们实战!


    后续文章持续更新,敬请期待!

    文章为作者原创,转载请注明出处。如果对你有帮助欢迎点击右下角推荐。

     

    转载于:https://www.cnblogs.com/gdsblog/p/8031095.html

    展开全文
  • 带你从零学ReactNative开发跨平台App开发(一) 带你从零学ReactNative开发跨平台App开发(二) 带你从零学ReactNative开发跨平台App开发(三) 带你从零学ReactNative开发跨平台App开发(四) 带你从零学React...
  • 带你从零学ReactNative开发跨平台App开发(一) 带你从零学ReactNative开发跨平台App开发(二) 带你从零学ReactNative开发跨平台App开发(三) 带你从零学ReactNative开发跨平台App开发(四) 带你从零学React...
  • 带你从零学ReactNative开发跨平台App开发(一) 带你从零学ReactNative开发跨平台App开发(二) 带你从零学ReactNative开发跨平台App开发(三) 带你从零学ReactNative开发跨平台App开发(四) 带你从零学React...
  • 带你从零学ReactNative开发跨平台App开发(一) 带你从零学ReactNative开发跨平台App开发(二) 带你从零学ReactNative开发跨平台App开发(三) 带你从零学ReactNative开发跨平台App开发(四) 带你从零学React...
  • 带你从零学ReactNative开发跨平台App开发(一) 带你从零学ReactNative开发跨平台App开发(二) 带你从零学ReactNative开发跨平台App开发(三) 带你从零学ReactNative开发跨平台App开发(四) 带你从零学React...
  • 带你从零学ReactNative开发跨平台App开发(一) 带你从零学ReactNative开发跨平台App开发(二) 带你从零学ReactNative开发跨平台App开发(三) 带你从零学ReactNative开发跨平台App开发(四) 带你从零学React...
  • 带你从零学ReactNative开发跨平台App开发(一) 带你从零学ReactNative开发跨平台App开发(二) 带你从零学ReactNative开发跨平台App开发(三) 带你从零学ReactNative开发跨平台App开发(四) 带你从零学React...
  • 带你从零学ReactNative开发跨平台App开发(一) 带你从零学ReactNative开发跨平台App开发(二) 带你从零学ReactNative开发跨平台App开发(三) 带你从零学ReactNative开发跨平台App开发(四) 带你从零学React...
  • 在9秒社团和GMGC联合主办的“移动游戏与移动应用跨界开发趋势论坛”上,9秒社团最新开源的跨平台App开发引擎CrossApp引起了与会者们的关注。 据了解,CrossApp是一款免费、开源、跨平台的App开发引擎,基于最宽松的...
  • 跨平台app开发之Phonegap教程合集_全得不能再全了.zip
  • ionic2飞速上手的跨平台App开发学习 当前最主流的混合开发框架 此资源为百度网盘分享路径 永久有效 文件太大 不好上传
  • 几款移动跨平台App开发框架比较

    万次阅读 2019-04-03 16:34:23
    整理目前流行的跨平台WebApp开发技术的特点,仅供参考。 每个框架几乎都包含以下特性: 使用 HTML5 + CSS + JavaScript 开发跨平台重用代码; 丰富的UI库; 提供访问设备原生API的 JavaScript API 包装器; ...
  • 带你从零学ReactNative开发跨平台App开发(一) 带你从零学ReactNative开发跨平台App开发(二) 带你从零学ReactNative开发跨平台App开发(三) 带你从零学ReactNative开发跨平台App开发(四) 带你从零学React...
  • 跨平台APP开发--笔记

    2017-12-02 20:25:39
    2.跨平台App开发:开发一套代码多端适配; 基于H5;使用HBuilder开发测试;打包生成安卓,IOS; UI:Html,css,JS按照规则设计UI; 使用Ajax请求数据进行交互; 后台语言:PHP,JAVA,PYTHON; 底层,照相机

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 4,052
精华内容 1,620
关键字:

跨平台app开发