• Web网站打包成APP

    2017-11-10 14:40:46
    appcan是国内比较老牌的平台 apicloud是新起之秀 phonegap是国外的大牌。 长期来看,phonegap是开源的,理所当然是技术最好。但是中文资料较少,国内应用的也不多。 appcan近期被apicloud蹂躏得不行不行的,基本全...
    appcan是国内比较老牌的平台
    apicloud是新起之秀
    phonegap是国外的大牌。
    长期来看,phonegap是开源的,理所当然是技术最好。但是中文资料较少,国内应用的也不多。
    appcan近期被apicloud蹂躏得不行不行的,基本全方位被碾压了。渐渐处于apicloud下风,后力不继。
    apicloud还提供了简单的后端api,用户系统,自定义字段什么的基本不用写后端代码了。

    但是最后我要劝你一句,不要用这种混合打包平台,最终都是然并卵的。君不见淘宝技术有多牛,写出来的app(html5)还是卡到死。

    这里以APICLOUD为例演示:

    1、首先访问http://www.apicloud.com/进行用户注册


    2、注册成功登陆页面,点击左上角--创建应用



    3、选择中间的--Web--输入项目名字--在网址一栏要输入在线网址(一定要是在线项目),点击创建即可


    4、直接点击云编译


    5、填写应用名称--选择平台--类型--调试模式--全局加密--渠道打包--版本信息--点击云编译


    6、如果点击云编译发现没有Android证书,则重新选择类型为--测试版,也可以先去申请个证书。

    7、出现编译完成和二维码,就可以扫码或者下载你的个人APP了


    展开全文
  • 使用APICloud打包webapp

    2019-07-30 05:26:41
    做个记录: 参照apicloud官方文档:http://docs.apicloud.com/Dev-Tools/sublime-apicloud-plugin 可以看下我的github:https://github.com/padipata ,里面有我写的项目,喜欢的去给个关注呗。 ...

    做个记录:

    参照apicloud官方文档:http://docs.apicloud.com/Dev-Tools/sublime-apicloud-plugin

     

    可以看下我的github:https://github.com/padipata ,里面有我写的项目,喜欢的去给个关注呗。

    转载于:https://www.cnblogs.com/pengjunhao/p/6805798.html

    展开全文
  • 前言 最近一直有BUI Webapp的... 这本身是属于第三方平台的事, 既然有开发者在问, 那我们针对这个问题, 也想对Webapp打包做个总结, 本文适用于任何的H5打包, 如果你是使用BUI开发的Webapp, 那会更加简单. 最后...

    原文链接: https://segmentfault.com/a/1190000015902575?_ea=4124812

    前言

    最近一直有BUI Webapp的开发者在问, webapp如何打包? 这本身是属于第三方平台的事, 既然有开发者在问, 那我们针对这个问题, 也想对Webapp的打包做个总结, 本文适用于任何的H5打包, 如果你是使用BUI开发的Webapp, 那会更加简单. 最后会有不同平台的打包效果对比, 可以下载安装测试.

    BUI Webapp的特点. 想了解更多,可以去BUI官网看.

     

     

    关于Cordova的打包教程,可以看另外一位群友@伊何底止丶的文章.
    Cordova项目中使用BUI框架打包及常见解答

    创建一个Webapp工程

    buijs 是BUI用来快速构建工程及模板的工具. 如果不想安装,可以直接下载BUI demo工程

    创建BUI Dcloud 单页工程

    下面以创建BUI Dcloud工程为例.
    buijs create -p dcloud
    
    -p 之后可以加不同平台, 目前有 bingtouch,dcloud,apicloud,appcan, 加上不同平台以后,工程会有对应打包平台需要的文件.

     

     

    安装依赖

    npm install
    
    如果较慢,也可以使用cnpm.

     

     

    压缩混淆工程

    生成dist目录,这个目录就是我们要拿来打包的,会对源码做压缩混淆.

    npm run build
    

     

     

    复制dist目录里面的所有文件

     

     

    使用Dcloud打包Webapp

    新建一个空白应用

    打开Hbuilder编辑器

     

     

    复制的dist工程覆盖空白应用工程

     

     

    在Dcloud工程上右键粘贴, 选择全覆盖.

    在线打包

     

     

    在工程上右键-->发行-->发行为原生安装包

     

     

    安卓默认使用Dcloud提供的证书测试就可以了,直接点打包就可以排队.

     

     

    点确定查看打包状态, 稍作等待.

     

     

    最终效果预览

    下载官网demo打包后的预览, 如果是创建的工程,是一个只有简单页面的效果.

     

     

    物理后退及退出提醒

    注意: 如果你要绑定物理后退按键, 在执行 npm run build打包之前,先打开 index.js 里面有个注释, 去掉注释就行(直接下载的demo为webapp,没有这块的处理).

     

     

    打包平台总结

    每个平台的打包方式都是类似,都有自己的对应工具, 只要按这个过程来就可以的.

    Dcloud

    目前免费打包需要排队,功能没有限制,已经很不错 强烈推荐

    APICloud

    免费用户的应用有数量限制,其它整个操作的流程及体验都还可以.

    Appcan

    打包有测试的启动页字样

    下载体验总结

    BUI Dcloud BUI APICloud BUI Appcan

    基于相同工程在不同平台上的打包体验. 以下是我在魅蓝 note6 的测试体验. 大家可以试试你们的结果是不是也这样?

    打开速度方面: Dcloud > Apicloud > Appcan 
    明显打开的启动页都不用停留很久,这个都是默认配置打包,不知道是否有时间配置的缘故.

    页面切换方面: Dcloud >= Apicloud >= Appcan 
    由于都是采用的一样的路由,页面切换速度基本保持一致的速度,在我的机型里,感觉Dcloud会略胜一筹.

    效果体验方面: Dcloud == Apicloud == Appcan 
    不同平台的打包结果在不同机型的适配,都是保持一致的交互,一致的效果.

    展开全文
  • 公司做好一个H5的网页版网站,想直接打包成ios 和andrioid的App应用,方法很简单步骤详见我的另一篇博文(http://blog.csdn.net/lxy1106/article/details/79420176),此处为第2步的Hbuilder的解决方案,只需要将该...
  • 所有基于h5+css3+js,以及服务端语言php做的webapp都可以封装成app么?
  • cordova+vue打包webapp

    2019-10-01 20:10:35
    使用cordova+vue打包webapp,可以快速给网页套上一个android和ios壳子,完成一个app的开发。 1.环境准备。 (1)node.js 下载地址:https://nodejs.org/dist/latest-v8.x/ (2)java环境,jdk安装和环境变量配置...

    使用cordova+vue打包webapp,可以快速给网页套上一个android和ios壳子,完成一个app的开发。

    1. 环境准备。

    (1)node.js

    (2)java环境,jdk安装和环境变量配置。
     本次安装版本:jdk1.8.0_201
    (3)android SDK
      下载地址:http://tools.android-studio.org/index.php/

    步骤:

      1.将文件解压到 D:\Android\Android-SDK;

      2.添加系统环境变量。ANDROID_HOME:D:\Android\Android-SDK,path增加%ANDROID_HOME%\tools\bin  和  %ANDROID_HOME%\tools。

      3.dos进入D:\Android\Android-SDK目录,安装android api 版本。

      sdkmanager "platform-tools" "platforms;android-28"
    sdkmanager "build-tools;28.0.0"
    (4)安装gradle
     下载地址: http://services.gradle.org/distributions/


    步骤:
      1.将文件解压到D:\Gradle\gradle-5.3.1;
      2.添加环境变量 GRADLE_HOME:D:\Gradle\gradle-5.3.1,path增加 D:\Gradle\gradle-5.3.1\bin。
      3.到站点任意目录运行 gradle -v,检查gradle是否安装成功。
    (5)安装cordova。
    运行命令:npm install -g cordova,通过输入cordova -v查看版本号,检验是否安装成功.

    2.打包。
    (1)创建cordova项目.
      1.dos进入对应目录,如(D:\Cordova),运行cordova create cordova-test,注意路径中不能有中文字符。
      运行生成目录:
      
      2.添加平台,按需安装。
      cordova platform add android --save    安卓平台
       cordova platform add ios --save    ios平台
      
      cordova platform add browser --save 浏览器
      3. 运行命令。
      cordova build android(ios) 生成打包文件,文件路径:platforms → android → app → build → outputs → apk → debug
      cordova run android(
    browser, ios) 调试运行
    (2)配置vue项目。
      1.复制vue项目文件到
    D:\Cordova下。
      2.修改vue配置文件。
       first: 文件路径 config\index.js  
        

       修改build 下配置。
      
         
    index: path.resolve(__dirname, '../../cordova-test/www/index.html'),
        // Paths
        assetsRoot: path.resolve(__dirname, '../../cordova-test/www'),
        assetsSubDirectory: 'static',
        assetsPublicPath: '',
    View Code

     

        second: 修改build/utils.js.

     if (options.extract) {
          return ExtractTextPlugin.extract({
            use: loaders,
            //新增
            publicPath: '../',
            fallback: 'vue-style-loader'
          })
        } else {
          return ['vue-style-loader'].concat(loaders)
        }
    View Code

      3.打包。

      1. 打包vue。到D:\Cordova\vueProject,运行 npm run build,文件会出现在cordova项目的www文件夹下。

      2.生成apk文件。到D:\Cordova\cordova-test,运行 cordova build android。

      4.完成。

      在app上安装apk文件。



     

     



     
     

      
     

     

     

     

     
     

     

    转载于:https://www.cnblogs.com/heshuaiblog/p/10694386.html

    展开全文
  • 方法一和方法二虽然效果差不多,都是简单的封装了webapp。 但是方法一不支持旋转。使用方法二固定横屏旋转可以制作成TV版的webapp。 方法二有一定的开发性,也比较简单,有兴趣的可以自己研究。 步骤图片太多,...

    该封装方法操作简单,无需开发。支持内置QQ浏览器;可封装成多种平台应用;占用权限少;APP体积小。

    方法一和方法二虽然效果差不多,都是简单的封装了webapp。
    但是方法一不支持旋转。使用方法二固定横屏旋转可以制作成TV版的webapp。
    方法二有一定的开发性,也比较简单,有兴趣的可以自己研究。

    步骤图片太多,文字看不懂的可以参考一下图包里的图片看吧:https://pan.baidu.com/s/1skTIbP7

    【方法一】
    1.进入appcan开发中心(http://www.appcan.cn/)。注册-开发。
    2.创建应用→选择webapp→输入名称、描述、你的网站地址
    3.应用打包:图标、状态栏、启动页,按照指定要求设置上传。
    4.引擎选择:安卓请选择包含腾讯X5内核的引擎。
    5.安卓证书:可一键生成也可以不生成
    6.云端打包:引擎选择这里改成腾讯X5内核,然后自定义包名(不支持数字)
    7.服务器存储地址:仅勾选appcan服务器。
    8.生成安装包。下载或扫码到手机。


    【方法二】
    1.下载appcan开发工具:https://pan.baidu.com/s/1nvwq5tR
    下载模板源码:https://pan.baidu.com/s/1bpLDvv5

    2.进入appcan开发中心,创建应用→选择hybrid→输入名称、描述。
    3.复制该应用的ID。
    4.打开开发工具。登录你的开发中心账号。文件→新建→appcan项目→选择刚才创建的应用→完成
    5.在右侧会出现你的应用源码。删除整个phone文件夹。把第1步中下载的模板源码中的phone文件夹移动到里面。
    6.右键congfig.xml→打开方式→文本编辑。修改appid,把第3步中复制的应用ID粘贴到这里。修改你的APP名称。保存。
    注意:制作TV版本:右键congfig.xml→打开方式→config编辑器。修改支持屏幕旋转:仅勾选横屏状态。
    7.打开index.html→拉到最下面,找到url,在这一栏把网址改成你的网站地址。保存。
    8.右键phone→Team→提交→OK!
    9.打开你的开发中心,在该应用打包中修改如方法一各项设置即可。

    成品APP演示:https://www.52pojie.cn/thread-635286-1-1.html
    成品APP演示:https://www.52pojie.cn/thread-635286-1-1.html

    展开全文
  • webapp的常见功能

    2019-04-11 16:43:49
    那么WebApp与Native App的区别是什么?Native App: 缺点:1、开发成本非常大,一般使用的开发语言为JAVA、C++、Objective-C。2、更新体验较差、同时也比较麻烦,每一次发布新的版本,都需要做版本打包,且需要用户...
  • 结合网上相关资料,以及自己项目中的经验,收集汇总了iOS Webapp相关的开发知识,如下。 WebApp是一种新出现的基于WEB形式的类应用程序,运行在高端的移动终端设备上,其应用范围会越来越广。 开发者们都知道在...
  • 打包webapp的时候遇到的问题不管用jquery 还是 angularjs 自带封装的cookie 都会失效那我们还怎么识别用户的登录状态呢?用 localStorage设置localStorage.setItem('Token',token)获取localStorage.getItem('Token')...
  • cordova可以帮我们将一个webApp打包成安卓apk和ios的App,本文详细描述了cordova的环境搭建以及打包vue项目的webapp成手机端的App的详细过程,打包的app分为debug版本的调试版以及能上线的release版本,其中都会做...
  • 自Iphone和Android这两个牛逼的手机操作系统发布以来,在互联网界从此就多了一个新的名词-WebApp(意为基于WEB形式的应用程序,运行在高端的移动终端设备。 我相信各位童鞋应该和我刚开始一个样子,到处查找贴子,...
  • 1.打包方法参考 https://www.jianshu.com/p/d86bf569295d https://blog.csdn.net/qq_38025219/article/details/101678986 2.下载(例子) 将打包好的apk文件,放在项目某文件下,本项目是放在static/upload/。 ...
  • 自Iphone和Android这两个牛逼的手机操作系统发布以来,在互联网界从此就多了一个新的名词-WebApp(意为基于WEB形式的应用程序,运行在高端的移动终端设备。我相信各位童鞋应该和我一个样子,到处查找贴子,学习如何...
  • 自Iphone和Android这两个牛逼的手机操作系统发布以来,在互联网界从此就多了一个新的名词-WebApp(意为基于WEB形式的应用程序,运行在高端的移动终端设备)。 开发者们都知道在高端智能手机系统中有两种应用...
  • WEBAPP开发技巧总结

    2019-09-22 10:14:42
    自Iphone和Android这两个牛逼的手机操作系统发布以来,在互联网界从此就多了一个新的名词-WebApp(意为基于WEB形式的应用程序,运行在高端的移动终端设备)。 开发者们都知道在高端智能手机系统中有两种应用程序:一...
  • 最近做了一款小游戏,定位是移动端访问,思来想去最后选择了jQuery mobile最为框架,制作差不多以后,是否可以打包成App,恰好以前对PhoneGap有耳闻,便想用这个来做打包,可以其中艰辛曲折多次让我想放弃的心情,...
1 2 3 4 5 ... 20
收藏数 1,793
精华内容 717