• 首先我们需要用到HBuilder。 什么是HBuilder? ...HBuilder的编写用到了Java、C、Web和Ruby。HBuilder本身主体是由Java编写,它基于Eclipse,所以顺其自然地兼容了Eclipse的插件。快,是HBuilder的最大优势,通过完整...

    首先我们需要用到HBuilder。

    什么是HBuilder?

    HBuilder是DCloud(数字天堂)推出的一款支持HTML5的Web开发IDE。HBuilder的编写用到了Java、C、Web和Ruby。HBuilder本身主体是由Java编写,它基于Eclipse,所以顺其自然地兼容了Eclipse的插件。快,是HBuilder的最大优势,通过完整的语法提示和代码输入法、代码块等,大幅提升HTML、js、css的开发效率。当知道如何创建HTML5 APP项目,以及APP页面如何调试后。接下来,需要考虑的就是HTML5 APP项目打包的事情。

     

    HBuilder安装完毕后选择新建移动APP项目。

    直接把项目按文件分类拖进去。

     

    在HBuilder中创建“移动App”应用后会在工程下生成manifest.json文件,在“项目管理器”中双击即可打开

    Manifest.json文档介绍:

    Manifest.json文件是5+移动App的配置文件,用于指定应用的显示名称、图标、应用入口文件地址及需要使用的设备权限等信息,用户可通过HBuilder的可视化界面视图或者源码视图来配置5+移动App的信息。

    Manifest.json文件根据w3c的webapp规范制定,plus节点下内容为HTML5Plus扩展规范,其下包括iOS和Android子节点,内容来源分别为iOS和Android原生打包所要求的参数,用于对5+移动App打包为ipa或apk安装包进行配置。

    应用信息配置:

     

    可通过点击表示设备方向的按钮来选择设备支持重力感应旋转方向。

    重力选择按钮可选择一个或多个,选择多个方向后,应用可按照指定方向显示应用页面,如只选中一个按钮,表示终端只支持一个方向显示页面内容

    应用名称:App打包后在手机上桌面的快捷方式名称;

    appid:HBuilder appid(应用标识),在创建时分配的、以后不可改的标识。如用户手动修改ID打包时会提示参数错误;

    版本号:应用的版本号

    入口页面:应用启动后自动打开的第一个HTML页面,可填写本地html文件地址(相对于应用根目录)或网络地址(以http://或https://开头)。

    debug模式:不勾选打包后的apk不生成日志文件

     

    点击“发行”-“发行为原生安装包”

    可以勾选ios和Android的安装包

    ios选项:默认选择ipone和ipad版本,选择越狱包可以不需要苹果证书,如果是需要发布到苹果商店点选使用证书,在下方ios开发者证书把相应的描述文件和私钥文件上传好。

    Android选项:如果只是打包的应用是自己用的话可以选择DCloud公用证书,如果是需要发布到线上应用商店徐点选使用自有证书,在下方的Google开发者证书把相应的证书文件、密码上传上去。

     

    图标文件和启动图片都需要png格式的图片,用户可以根据HBuilder提示添加指定尺寸的图片

    或者通过修改manifest文件修改图片的引用地址

    设置应用图标只能上传png格式的图片,可以通过上传一张192x192的源图片,可以选择自动生成所有ios和Android上不同格式的应用图标。

     

     

    点击菜单栏“运行”-“手机运行"(可以是Android手机运行,也可以是IOS手机运行)---- 前提是用数据线连接手机和电脑端。

    首次手机运行,会自动安装HBuilder APP软件(该软件用于直接打开运行的APP软件界面),下面是安装完成的效果。

    对于安桌手机,需要先把USB调试和USB安装应用选项打开,安装HBuilder APP软件后,会自动打开运行的APP软件。对于IOS手机,需要在电脑上打开itunes,通过itunes连接到手机,安装HBuilder APP软件后,需人工点击HBuilder APP软件打开运行的APP软件。

     

    其他的选择项

    ios打包ipa:iOS开发环境,Mac OS、XCode;

    Android打包apk:Android开发环境,使用eclipse和ADT;

     

    参考文献

    DCloud文档: http://ask.dcloud.net.cn/docs/#//ask.dcloud.net.cn/article/89

    5+APP开发入门指南:http://ask.dcloud.net.cn/docs/#//ask.dcloud.net.cn/article/89

     

    一些问题

    打包应用时的开发者证书怎么获取?

    参照以下链接

    http://www.cnblogs.com/vincent-guo/p/3568074.html

    http://www.cnblogs.com/franksunny/p/3938143.html

    http://www.jianshu.com/p/01e2b977f177

    对安卓各个版本和机型的兼容性

    一般可以适应安卓4.0以上

    展开全文
  • Xcode7最新版打包发布的详细步骤,方便每一位开发者。iOS开发中将工程打包成ipa文件的过程既简单又复杂,对于一个没有做过打包的人来说,生成开发者证书,描述文件的过程实在是繁琐,但是真正的操作过一次之后就会...

    Xcode7程序打包详细过程:1、用开发者账号登录开发者中心,来到这个页面,点击图中箭头指的地方:

    2、第二布来到这个页面,

    3、点击图中的加号可以创建一个新的开发者证书

    4、选取该圆圈按钮,点击下方的continue


    5、当为选择生成什么样的证书时,继续按钮是不能点击的

    6、


    7、


    8、


    9、


    10、第二步“生成appID


    11、


    12、


    13、这里不需要选择,只保持默认的就行。

    14、同样保持默认的,点击继续按钮即可


    15、


    16、


    17、


    18、


    19、



    展开全文
  • 今天装完xcode,.在装个node, ,然后在安装cordova的时候,就出现问题了,居然装不了,,window..轻轻松松就安装了,,你mac..太难用了 百度找cmd..原来mac叫终端,,哎哎,,打开终端键入命令行 $ sudo npm ...
     装虚拟机,mac网上教程很多,大伙自己搜索.. 

    今天装完xcode,.在装个node,

    ,然后在安装cordova的时候,就出现问题了,居然装不了,,window..轻轻松松就安装了,,你mac..太难用了


    百度找cmd..原来mac叫终端,,哎哎,,打开终端键入命令行

    $ sudo npm install -g cordova..

    提示要密码,,我键盘怎么输密码都没有输进去呀,,退出这个命令行,,键盘又可以用,我就纳闷,是不是在虚拟机安装mac os时,安装不完整了,导致出现某些bug..

    然后各种搜索呀,,最后,,你丫个,,安全系数也太高了吧,,,在输入密码的时候,居然是没有显示字符的,,输入完之后直接回车即可,,我是给服了..


    装完之后,,建个项目,让自己的webapp进去跑跑, 拉风拉风..


    cordova create AppV1 com.wx.v1 AppV1
    cd AppV1
    cordova platform add ios      //安卓的就是Android


     找mac硬盘下找到自己建的cordova项目,,然后在ios这个目录下下打开appv1.xcodeproj...双击..本以为可以看到xcode显示我的app了呢..

    没想到居然打不开项目,,提示权限不足,, 什么乱七八糟的,,  记得是有个提示  change permission..然后又是一番百度谷歌的,,

    还是终端,键入下面这行命令,,我是在虚拟机玩玩的,,xxx代表要提升的权限的目录,,
    sudo chmod -R 777 /Users/XXX/

    至此就可以用xcode打开cordova建的项目了.






    展开全文
  • 1.IDEA注册 http://idea.lanyus.com/  ... Activition code中输入即可 2.安装homebrew套件管理器 3.安装node.js brew install node 4.安装ionic cordova sudo npm install -g cordova ionic ...需要更换b

    1.IDEA注册 http://idea.lanyus.com/  点击获取注册码就可以了

    Activition code中输入即可

    2.安装homebrew套件管理器

    3.安装node.js  brew install node

    4.安装ionic cordova

    sudo npm install -g cordova ionic 4.1出现 需要更换brew源 4.2出现4.3查看 node_modules属主有问题执行 sudo chown hyjt:admin node_modules 然后重新安装ionic

    5.ionic info查看当前情况,然后根据提示进行安装模拟器等支持

    6.将之前写好的ionic代码放入

    www-dev为源代码 并添加resources(APP启动图标和启动图)

    7.在当前目录下执行npm install 将创建出一个node_modules文件夹

    8.执行 ionic state reset 此时会出现一个问题,无法正确生成platforms文件夹,也就是双平台工程目录

    解决方法,创建一个www文件夹,之后即可正确生成platforms文件夹

    9.此时可以运行xcworkspace工程,然后并不能正确展示

    原因为没有将工程任务集成关联在一个工程中 解决方法: gulp.js - 基于流的自动化构建工具 安装glup  首先确保你已经正确安装了nodejs环境。然后以全局方式安装gulp: sudo npm install -global gulp-cli 在目录中npm install gulp将pulp工具加入

    10.使用glup构建项目

    ios:gulp build:ios:release 安卓:gulp build:android:release(需要签名文件) 成功后重新执行 ionic state reset 终于完成了项目,此时xcode工程可以正确运行了 (实际上添加的插件,都可以在package.json文件中找到,手动添加或者修改) config.xml 配置信息 用通知广播实现ionic原生通信 添加插件cordova-plugin-broadcaster 让ionic支持cocoaPod 添加插件cordova-plugin-cocoapod-support

    展开全文
  • web项目打包成Native App

    2019-07-08 11:44:22
    闲暇时分静下心来给大家分享一下web项目打包成Native App的小知识,最近公司的web项目都开发到收尾阶段了,也在把web项目打包成Android和IOS程序包,我所使用的打包工具是HbuilderX,Xcode也有使用,但每次配置的...

    web项目打包成Native App

    好长时间没有写过博客了,闲暇时分静下心来给大家分享一下web项目打包成Native App的小知识,最近公司的web项目都开发到收尾阶段了,也在把web项目打包成Android和IOS程序包,我所使用的打包工具是HbuilderX,Xcode也有使用,但每次配置的东西实在是有些繁琐,再一个就是我们有一个项目需要配置个推,HBuilderX集成了个推的SDK,只需要配置在个推中心申请的appid、appkey、appsecret即可,相对比较简单,因此现在多是采用HBuilderX打的程序包。

    一.打包成Android(.apk)

    打包成android比较简单,只需要在HBuilderX中新建一个5+App项目,然后只保留一个manifest.json文件,其余目录全部删除,再把vue打包后的dist文件夹放到项目根目录下,这样基本目录就OK了,接下来就要配置manifest.json了。

    配置manifest.json最需要注意的就是基础配置中的应用入口页面地址,很多人打完了包之后,也安装到移动端了,打开app什么也没有,只是一个空白页,那么很可能就是你的入口地址没写对,我们公司的项目都是配置到公网,所以把程序包交给运维后,运维部署完会给我们一个项目入口地址,先在PC的chrome浏览器输入这个网址,看看能不能进入到项目中,如果可以,就基本没问题。

    剩下的配置都相对比较简单,就不再这里一一描述了,接下来进入真机模拟(假设大家都已经配置好了manifest.json)

    真正打包之前,可以先连接真机,在真机安装HBuilder基座,先行验证一下项目是否可打开
    (菜单运行-运行到手机或模拟器-运行设备…),这里相当于在真机上安装了该app的初始测试版(此时配置的图标及启动图不会生效,真正打包才生效),如果HBuilder基座安装成功,并可以启动项目,那么恭喜,接下来就可以真正进入到打包程序了

    菜单发行—>原生App-云打包—>勾选Android,使用DCloud公有证书,下面的广告啥的取消勾选,点击打包,就是这么简单,接下来就是等待控制台日志显示打包成功并给你一个程序包的下载地址了,成功后下载apk安装包,此包可以交给运维部署,运维给你一个网址可以指向这个包,安卓用户就可以通过手机搜索这个网址下载程序了。

    下载方式:
    网址搜索下载:手机浏览器直接输入程序包网址,可直接下载
    二维码扫码下载:可以将指向该程序包的网址放到草料二维码官网,去生成一个二维码,手机扫这个二维码也可以下载。

    二.打包成ios(.ipa)

    ios打包是有些麻烦,需要去苹果开发者中心申请ios证书(.p12文件)及一个描述文件,到处.p12文件的时候会让你设定一个密码,这个密码就是HBuilderX打包ios程序包时的证书私钥密码。
    HBuilder中有个ios证书申请指南链接,里面的介绍还是蛮详细的,可以根据上面的步骤一步步来,最终会把所有文件都申请下来。具体申请不做过多介绍,下面把我遇到的坎给大家描述一下:

    描述文件类型相关的坎
    1.Ad Hoc
    如果我们在申请描述文件时选择的是Ad Hoc类型,那么我们的app将可以直接绕过App Store的审核,用户可直接下载使用(安装包可部署到公网服务器,通过输入指向该ipa程序包的网址下载),但前提是用户设备的UDID必须添加进来。也就是说,只有指定了用户的UDID,该用户才可以下载使用,这一般会出现在对企业内部使用的场景上,即只对部分人开放,并不想对所有人开放的时候。
    2.App Store
    如果我们在申请描述文件时选择的是App Store类型,那么我们的程序包将不可以直接安装到手机使用(无论是输入网址下载还是直接拖拽到Itunes),只能通过上传到TestFlight或AppStore才可以下载(需要审核)

    打包ios程序包需要填写四项:
    Bundle ID(AppID):这个是在苹果开发者中心申请的Identifiers,可以理解成app的唯一标识ID
    证书私钥密码:苹果开发者中心导出.p12文件的时候要求你设定的密码,上文中有提及
    证书profile文件:苹果开发者中心申请的Profiles
    私钥证书:.p12文件

    当上面四项都已具备,就可以愉快的打包了。

    注:以上文章纯属个人经验只谈,如有不对指出,欢迎指正

    展开全文
  • 因为本人的手机是IOS系统,如果用Xcode打包需要开发证书,貌似99美元一年。意外发现一个叫Hbuild的软件,简单好用,下面做个简单的使用分享:下载地址首先到网上下载一个Hbuild,->戳(windows)一、安装成功后打开...
  • webApp打包上传到Appstore流程: 先将HTML5写好的webApp通过html5编辑器Builder打包为ipa包,打包流程下图 发行为原生安装包后如图所示: 咋们发行的是iOS版本,所以最上面一栏选者iOS,支不...
  • 首先要明白一点,打iOS 包环境:mac系统、xcode(最高支持版本7.3.1)。 装虚拟机是因为没苹果电脑或黑苹果,方便在Windows下打iOS包才装的。如果是为了本地打包服务器才装,那么也不用装,因为只需要一个名为...
  • 对应用的用户来说,他们得到的用户体验和真正的用Android Studio或者XCode开发的原生应用完全一致。 这是怎么做到的? 答案是使用Apache的开源框架,Cordova。 以Android框架为例,Cordova能将您的前端应用里...
  • 最近有小伙伴问我如何打成ipa包分发给测试人员 , 虽然现在网上的教程很多,但是也很杂, 没有一个比较完整的讲解. 利用工作之余, 就说一下如何生成ipa包?共分为两种方法. 第一种方法:  1) 至于配置发布证书和AdHoc...
  • WeX5 苹果APP打包教程

    2019-01-05 22:41:59
    WeX5是前端快速开发框架,可开发跨端运行应用,是移动App/微信/WebApp开发利器,一次开发多平台运行。因此,WeX5开发的应用,不仅可以在微信上运行,也可以直接手机浏览器运行,或者打包成App下载运行。 WeX5开发的...
  • cordova可以帮我们将一个webApp打包成安卓apk和ios的App,本文详细描述了cordova的环境搭建以及打包vue项目的webapp成手机端的App的详细过程,打包的app分为debug版本的调试版以及能上线的release版本,其中都会做...
  • 开发环境:OS X 10.11+Xcode 8.2.1+Object-C 关于如何部署苹果系统,大家可以买一台苹果电脑,或者百度黑苹果(非法不建议)。 下面是开发步骤: 1. 打开Xcode,这里用的是8.2.1,新建项目,如下图: 2. 新建...
  • Build an ionic3 web app

    2018-05-14 20:49:01
    What is ionic3 framework?The Ionic3 framework is a hybrid development framework, which is dependent on the elements, Sass, Cordova.Ionic3 development environment preparation.(Windows)1....
  • Vue.js2.0作为国内热门并广为人知的前端框架,其与其他主流框架的优势在此不做过多赘述。搭建框架步骤如下:安装Node.js搭建框架需要使用最新稳定版Node.js,请选择LTS版本。tip1:如果本机有其它项目需要早期版本,...
  • webapp 的简单开发

    2019-10-06 11:47:39
    web app 的技术平台很多,如adobe phonegap、sencha touch、appcan(国产)、dcloud(国产)平台。我选择了dcloud平台,原因:简单,容易上手。 web app项目开发的技术架构:... 前端: mui(view层/control层) ......
  • webapp 网页运行在浏览器上 app 开发 native 开发 安卓 java 安卓框架 ios objective-c swift 优势 : 用户体验好 界面跳转 webview 手机原生 流畅度高 网络依赖性 不高 劣势 使用困难 (下载 100m) ...
  • 一、安装Cordova ...安装Xcode windows上运行: C:\>npm install -g cordova cordova create hello com.example.hello HelloWorld cd hello cordova platform add ios cordova platform add and...
  • 不断更新中,下面是2017-12-22更新部分 IOS_源码及视频一小部分: 开发环境:Xcode 基于cocos2d的tweejump跳跃游戏ios经典游戏源码.rar https://pan.baidu.com/share/link?uk=2433762860&shareid=2999758878
1 2 3 4 5 ... 13
收藏数 248
精华内容 99
热门标签