【4858美高梅】从环境安插到安卓苹果双端上线,cli搭建项目

By admin in 4858美高梅 on 2019年4月7日

壹、Cordova创立应用

cordova create oneApp

Vue-cli是官方推荐的连忙构建单页应用的脚手架。官方给的建议,假使你是初次尝试Vue,哪就安安分分用1般的书写引进js文件,那里牵扯太多的东西,例如webpack、npm、nodejs等等,很容易做到从入门到抛弃的思想。那篇文章自己正是比照官方的文档中的营造流程来的(官方构建建议)。一下是营造进度。

 Vue-cli是法定推荐的高速创设单页应用的脚手架。官方给的提出,假诺你是第一尝试Vue,哪就安安分分用一般的书写引进js文件,那里牵扯太多的事物,例如webpack 、npm 、nodejs 等等,很不难形成从入门到抛弃的构思。那篇文章本人便是根据法定的文书档案中的创设流程来的(【4858美高梅】从环境安插到安卓苹果双端上线,cli搭建项目。法定创设建议 )。一下是营造进度。

开赛简言

自家是一名前端工程师,刚刚完成了二个遵照cordova的webapp,并且安卓和苹果双端都已上线,趁热写个小结分享给大家。(也是刚伊始成人的小白,或者写的不佳,我们多多包蕴O(∩_∩)O
~)

Cordova创制应用出错

Cordova安装时无法运用cnpm
应该接纳npm,cnpm即便快不过前期出的错绝相比那省下来的刻钟多得多。

不错安装格局

npm install -g cordova

或

npm install -g cordova --registry=https://registry.npm.taobao.org

npm install -g cordova 报错ENOENT: no such file or directory

缘由是在此以前下载安装退步时,生成了node_modul文件夹,全体剔除重新下载安装就ok啦

一、 安装 node.js

一、 安装 node.js

约莫进程

本人是先在windows上完毕的品种代码,然后打包安卓端的apk包并且上传到各大应用商场(360、应用宝等),然后把项目代码移植到mac本上,来打包ios端的ipa包并且上传来app
store的。

贰、vue创造应用

一、创造三个基于webpack模板的新品类(在上头科尔多瓦项目目录里创立)

$ vue init webpack oneApp(名字可以和上面工程一样)

$ cd oneApp

$ npm install

$ npm run dev

创设完结之后的种类目录

4858美高梅 1

2、修改Vue项目config/index.js文件

'use strict'
module.exports = {
  build: {
    index: path.resolve(__dirname, '../../www/index.html'),
    assetsRoot: path.resolve(__dirname, '../../www'),
    assetsPublicPath: '',
 }
}

率先要求安装node环境,能够直接到中文官网下载安装包。

第2须要安装node环境,可以直接到普通话官网下载安装包。

背景介绍

Cordova是什么?百度词条中的定义:科尔多瓦提供了1组织设立备相关的API,通过这组API,移动使用能够以JavaScript访问原生的设备功效,如录像头、迈克风等。Cordova还提供了一组集合的JavaScript类库,以及为那么些类库所用的配备相关的原生后台代码。科尔多瓦扶助如下移动操作系统:iOS,
Android,ubuntu phone os, Blackberry, Windows Phone, Palm WebOS, Bada
和 Symbian。

粗略点清楚,Cordova是3个工具,通过它可以将你做的html网页展现在WebView里面,而你网页中用到的JS能够通过她的API去调用原生的事物,比如相机等。但它做出来的app比原生做出来的app辛亏哪儿吧?直白点说,简便,省钱。因为cordova
app展现的页面全是你做的html页面,所以说您写1套code,就足以用在Android上,IOS上,以及Web上。不用去分别找Android工程师,IOS工程师。

三、打包编写翻译

一、对Vue工程实行build,编写翻译之后打包生成的代码自动跑到主目录下的WWW文件下
cd 到Vue的MyApp目录下,执行npm run
build

二、对cordova实行各类平台展开编译cd到 主目录下,执行 cordova build
iOS、cordova build Android等。

ps:自身原本是运用Cordova+Ionic,刚刚最先用Cordova+vue,所以走了诸多坑。即使有怎么样难题欢迎在上面评论。

设置达成后,能够命令行工具中输入node -v和npm
-v,假诺能显得出版本号,就申明安装成功。

安装达成后,能够命令行工具中输入 node -v 和 npm
-v,若是能突显出版本号,就表明安装成功。

环境搭建

一. 安装node.js (Node.js是三个Javascript运转条件……)

下载安装node.js,下载地址:
-v,如果看到版本号表示安装成功。

4858美高梅 2

查看node版本号

2. 安装ant (Ant是1种基于Java的build工具……)

下载地址:
-v,看到版本号则表示成功。

4858美高梅 3

查看ant 版本号

Ps:假设是windows柒体系,在添加path的值时,多个值时期要用分号隔开分离。

3. 安装cordova

命令行输入  npm install –g cordova

npm(node package
manager)是nodejs的包管理器,用于node插件管理(包罗安装、卸载、管理注重等),可是因为npm安装插件是从国外服务器下载,受网络影响大,恐怕出现极度,化解:用Tmall团队提供的境内的cnpm,执行命令npm
install cnpm -g
–registry=
–v
,假若现身版本号则设置成功,大家就足以用cnpm安装大家所急需的事物了,比如
我们位置执行的 cnpm install –g cordova 。关于npm
和cnpm的事无巨细讲解,能够参见那篇博客。

测试安装是不是成功,终端输入cordova -v,假设出现版本号表示安装成功。

4858美高梅 4

查看cordova版本号

4. 安装jdk

下载地址:
,选用自身的本子点击下载。下载下来后,遵照提醒安装,安装地点比如D:\java\jdk1.8.0_13一,然后进行环境变量的布置即可。(添加环境变量的手续:右键笔者的微处理器属性高级系统装置环境变量系统变量中添加JAVA_HOME,值为D:\java\jdk1.8.0_13一,在系统环境变量中的变量path中添加%JAVA_HOME%\
bin)。

5. 安装sdk

下载地址:
,提议大家下载.zip文件不要下载.exe文件。反正本身下载.exe文件就装不上。下载下来.zip文件后解压缩,依据提示安装,然后根据安装的职位实行环境变量的布署。(添加环境变量的步调:右键作者的微型总计机属性高级系统装置环境变量系统变量中添加ANDROID_SDK_HOME,值为D:\android\android-sdk-windows,在系统环境变量中的变量path中添加%ANDROID_SDK_HOME%\platform-tools和%ANDROID_SDK_HOME%\
tools)。

4858美高梅 5

下载sdk

走到现行,开发所需的条件布署进度已经基本到位了!!


4858美高梅 6

4858美高梅 7

开创第三个利用

创办基于cordova平台的hybrid app,有上边两种情况:

  1. 原生cordova app(能够协作自身集团支出的框架)

  2. 采取ionic框架(个人精晓ionic=angular+cordova)

  3. 动用vue、react等任何框架,小编还一向不商量过。上面只介绍前三种。


===1 . 原生cordova app===


  a) 在某些目录下创建cordova项目(cordova create <文件夹名>
<包名> < app 名>)。

命令行输入 cordova create test com.cordova.test test

4858美高梅 8

创建cordova项目

开创成功后,打开文件目录如下:

4858美高梅 9

新建的cordova项目目录

hooks存放自定义cordova命令的台本文件。

platforms平台目录,各自的阳台代码就置身那里,能够放一下平台隶属的代码,今后以此目录应该是空的,前边会介绍怎么着创造平台。

plugins插件目录,安装的插件会放在那里。后边会介绍如何设置插件。

www最重点的目录,存放项目标HTML伍和JS代码的目录。app1起来打开的就是其一目录中index.html文件,相当于项指标入口文件。

config.xml根本是cordova的局地安顿,比如:项目选择了如何插件、应用图标icon和开发银行页面SplashScreen,修改app的版本,名字等音讯,还有平台的布局。

package.json一个JSON对象,该目的的每二个分子正是当下项目标一项设置。比如name正是项目名称,version是本子(遵循“大版本.次要版本.小本子”的格式)。

  b) 添加平台

进入到刚刚成立的类型文件目录下,命令行输入:

cd test (退出当前目录输入: cd .. )

cordova platform add android(添加安卓平台)

*cordova platform add
ios
(那句添加苹果平台供给在mac上进行。倘使该类型须求在苹果端上线,前面会讲到代码移植到mac本上打包ios包的步子。再次先忽略)*

尚未报错的话便是加上成功了,此时打开项目文件夹里的platforms文件之中有android文件夹了。

4858美高梅 10

执行命令 cordova platform add android

一旦要移除该平台,命令是:cordova platform rm android

到此地大家就把准备干活都搞好了,未来可以开端写js 和html代码了。

  c)添加和删除项目必要的codova插件

# 添加插件 #

命令行输入:cordova plugin add cordova-plugin-camera (cordova
plugin add <插件官方名称>),如下则证实添加成功。

4858美高梅 11

加上插件成功

若果报错则足以尝尝:移除android平台,再重新添加低版本的android平台(命令行输入cordova
platform add android@六安装陆.多版本的android,因为今天添加android平台系列暗中同意添加最新的
七.多版本的,不过有些cordova插件只怕还不可能同盟。)

去cordova官网找插件:http://cordova.apache.org/

也足以去github上找插件:

# 删除插件 #

命令行输入:cordova plugin rm
cordova-plugin-camera
 (使用rm和remove都可以)

4858美高梅 12

删去插件成功

 # 查看已经添加了的插件列表 #

命令行输入:cordova plugin list(查看当前安装了这一个插件)

也得以一向打开项目文件夹下的plugins文件夹查看(android.json和fetch.json都应有存在)

4858美高梅 13

plugins插件文件夹

  d)编写翻译调节和测试程序

上面包车型大巴不是每一句代码都亟需周转,依据自个儿的供给进行抉择。

cordova install android //将编写翻译好的应用程序安装到模拟器上。

cordova emulate android //在模拟器上运转(前提是成立好AVD)

cordova serve //在浏览器运营

cordova build android //打包cordova项目到android平台。

cordova run android
//通过USB直接设置到真机(该语句已经席卷了build命令,要是您手提式有线电话机电脑接二连三好,并且打开了手提式有线电电话机里的usb调节和测试格局,就足以如此直接run)

提起底出现BUILD SUCCESSFUL 则成功。

4858美高梅 14

build打包成功

实施完后到上海体育地方中最后1行十一分路径中去找大家的apk包,那些apk包正是我们打出去的app的debug形式也正是支付环境下的包,放到手机上就能运作了。可是正式上线到利用市镇的包不可能如此打,前边讲。第二遍run/build时间会相比长。最终出现BUILD SUCCESSFUL
则表明成功。

到那边大家大概形成了android端的花费。

Ps:大家以往开拓项目文件发现目录中多了个node_modules文件夹,那之中是大家项目所用到的注重包,是系统依照package.json中的配置对应生成的。借使大家去下载别人的付出好的品类代码时,下载下来后率先件事便是执行npm
install

来安装package.json中的配置和正视,生成node_modules文件。然后再cordova
platform  add android添加平台。


上边说一下我们在www文件里写代码时大概必要使用的局地学问:

一. 行使less 写样式文件:(作者用的编辑器是webstorm)

    一. 命令行输入:npm install –g less

    2.
找到C:\Users\用户名\AppData\Roaming\npm\lessc.cmd,打开webstorm
> file > settings

4858美高梅 15

在webstorm中配置less(1)

    三.点击
“+”,在下拉菜单中选用less,然后把刚刚的丰硕路径填到下图中的红框中。ok实现。接下来大家在开创less文件时,就会自动生成一个css文件跟随。

4858美高梅 16

在webstorm中配置less(2)

二. 活动端设备大小适配难点rem转px

在www/js中引入rem.js 可能flexible.js
(网上有),但小编用的要好写的1段代码,效果一样的,只是逻辑上不太雷同。小编的不二法门如下:

新建rem.js,引进到www下的index.html这几个进口文件中,然后写入以下代码:

!function(n){

    var e=n.document,t=e.documentElement,i=720,d=i/100,

         o=”orientationchange”inn?”orientationchange”:”resize”,

         a=function(){

             varn=t.clientWidth||320;n>720&&(n=720);

             t.style.fontSize=n/d+”px”

         };

        e.addEventListener&&     
 (n.addEventListener(o,a,!1),e.addEventListener(“DOMContentLoaded”,a,!1))

}(window);

那段代码的逻辑是:美术工作给的图壹般是720px宽的,(要是您的图案给的不是720得以修改上边包车型地铁代码中的720改成你的),在付出的进度中,执行cordova
serve运转在chrome浏览器后,F12 > 手提式有线电话机方式 >
设备宽度设置成responsive
720宽,在此界面下进展支付调节和测试,借使美术工作图上十0px的要素,我们在写less/css时,该元素div的宽就写一rem,即一rem=100px。


===2 . 选用ionic框架做hybrid app===


恰恰讲了cordova
原生app的步骤,上边简单讲一下选取ionic框架的做法。命令行基本一致。

Ionic的1二种命令:(类似corodva原生app)

1.npm安装ionic:npm install –g cordova ionic

2.创建项目:ionic start myproject
–type=ionic1
(myproject是项目名,前面—type=ionic一是威名昭著创制哪个版本用的的,不写的话暗许是当下风靡的三本子)

创制成功,项目文件目录如图:

4858美高梅 17

刚创制的ionic项目目录

  1. 恍如下面讲到的一名目繁多命令

cd myproject

ionic cordova platform add android

ionic serve // 浏览器调节和测试

ionic cordova build android            

 ionic cordova emulate android // 模拟器运维ionic cordova run
android  // 连接上手提式有线话机械运输营,等同于build+emulate

四.设置插件 命令行输入:ionic plugin add
cordova-plugin-shake(插件名)

ionic结合cordova 调用有个别原生的api
如录制头等,供给引进ng-cordova,具体参考:那篇小说


二、安装 vue-cli

二、安装 vue-cli

花色上线

品类源代码写完后,那么该上线了。上边分别讲一下
上线到安卓各大利用商场。(360手提式有线电话机帮手、应用宝等等) 和上线到苹果的app
store的手续!


android 端上线 ==> 以360手提式有线电话机助手为例。

1. 将利用打包 命令行输入:cordova build –release android

此次的打包差别于用地点讲到的用cordova build android
打出去的包,那几个是debug的包,是调节和测试版,是自行签名的。(这里解释一下“签名”:能在三哥伦比亚大学上运营的apk都以通过签字的,未有签字的apk是跑不起来的,debug包也是系统活动签的名,是用debugkeystore签过名的,但它不是业内的我们接纳唯1的签署,所以大家须要给大家运用唯壹的签订契约,所以大家在那步打包时打不署名的包,如上命令
加 –release,方便下一步签app专属的名)。

2. 变动签名文件
(首先找到jdk安装的职位(如笔者的D:\java\jdk1.8.0_13一),命令行进入到jdk文件下的bin目录下,在命令行顺序输入如下几条命令,创立test.keystore)

(一)命令行输入:cd D:\java\jdk1.8.0_131\bin

(2)命令行输入:keytool -genkey -alias test.keystore -keyalg RSA
-validity 40000 -keystore test.keystore
(参数表达:-genkey
生成文件  -alias 别称  -keyalg 加密算法  -validity 有效期  -keystore
文件名 )

(3)然后遵照提醒设置keystore密码以及你的新闻,接下去不报错的话就代表已经转移了test.keystore文件,在jdk的bin目录下。

三. 到360运动开放平台 上注册账号。

4. 签名,加固。

下载360巩固帮手,下载地址,里面有使用手册,遵照提醒操作,完毕里面新闻的填写。主要的:里面需求填写签名文件路径,那么就填写上边步骤第22中学最一生成的签名文件路径,那样我们就安插好了。接下来正是把手续一生成的未被自动签名的release包放进来,上传、签名、加固。然后最后生成的apk包正是我们能够上传到360利用市集的包了。

5.
进入
360费用平台 。

登录 > 管理为主 >
填写壹密密麻麻的app音讯和商店新闻,填写完整点击提交审查,一个工作日内就拿走结果了。壹般审批都能透过,假如没经过会提醒给您原因,依据她说的修改在提交就行,也许直接给他俩的客服邮箱发邮件沟通即可。总而言之android应用商场很好通过,不像苹果app
store那么严(shi)谨(er)。哈哈哈~


ios上线 。。

———————小说太长了,请看 (下)篇。——————–

设置好了 node,大家得以直接全局安装 vue-cli:

安装好了 node,大家得以从来全局安装 vue-cli:

npm install -g vue-cli
npm install -g vue-cli

因为各类不可描述的原委,使用npm安装会非常的慢,而且很简单出错,所以推举使用cnpm来安装。

因为各类不可描述的由来,使用npm安装会非常慢,而且很不难失误,所以推举应用cnpm来设置。

npm install -g cnpm --registry=https://registry.npm.taobao.org
npm install -g cnpm --registry=https://registry.npm.taobao.org

设置成功后,使用 cnpm 安装 vue-cli 和 webpack。

安装成功后,使用 cnpm 安装 vue-cli 和 webpack。

cnpm install -g vue-cli
cnpm install -g vue-cli

安装到位后,能够采用vue -V 查看是还是不是安装成功。

安装完毕后,能够利用 vue -V 查看是不是安装成功。

4858美高梅 18

4858美高梅 19

叁、生成项目

三、生成项目

首先需求在指令行中进入到项目目录,然后输入:

先是需求在命令行中进入到项目目录,然后输入:

vue init webpack Vue-demo
vue init webpack Vue-demo

个中 webpack 是模板名称,Vue-demo
是自定义的项目名称,命令执行之后,会在眼下目录生成八个以该名称命名的类型文件夹。

在那之中 webpack 是模板名称,Vue-demo
是自定义的项目名称,命令执行之后,会在现阶段目录生成一个以该名称命名的种类文件夹。

配备完结后,能够看看目录下多出了四个项目文件夹,里面纵使 vue-cli
创立的贰个依照 webpack 的 vue.js 项目

配置达成后,能够看来目录下多出了二个品类文件夹,里面纵使 vue-cli
成立的一个基于 webpack 的 vue.js 项目

然后进入项目目录(cd Vue-Project),使用 cnpm 安装依赖

然后进入项目目录(cd Vue-Project),使用 cnpm 安装依赖

cnpm install
cnpm install

然后运转项目

下一场运营项目

npm run dev
npm run dev

肆、打包上线

肆、打包上线

和谐的系列文件都亟待安置 src 文件夹下

友好的类型文件都急需安放 src 文件夹下

类型支出成功之后,能够输入npm run build 来拓展包装工作

类别支付完毕以往,能够输入 npm run build 来开始展览打包工作

npm run build
npm run build

包裹实现后,会转移 dist
文件夹,借使已经修改了文本路径,可以直接打开当和姑件查看

包裹完结后,会扭转 dist
文件夹,假诺已经修改了文件路径,能够平昔打开当三步跳件查看

类型上线时,只须要将 dist 文件夹放到服务器就行了。

花色上线时,只需求将 dist 文件夹放到服务器就行了。

4858美高梅,上述正是本文的全部内容,希望对大家的上学抱有支持,也期待大家多多帮忙脚本之家。

您或然感兴趣的篇章:

  • node
    vue项目开销以前后端分离实战记录
  • Vue二.0什么公布项目实战
  • 详解vue项目创设与实战
  • vue项目实战总计篇

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有