zoukankan      html  css  js  c++  java
  • Ionic + Angular + Cordova

      拿到了一个项目,是用Ionic + Angular + Cordova,有点头大,不怎么了解大前端,所以为此做一下总结和思考。

      先说下环境吧:

      安装:  

      这里我采用官网的安装方法,不过在这之前需要安装node.js,安装完毕之后,可以看下使用的版本:node -v 来查看,之后安装ionic ,这里ionic 是官网,按照里面的方法即可安装成功。

      首先移除现有的Ruby镜像

        gem sources --remove https://rubygems.org/

      然后添加国内最新镜像源

        https://gems.ruby-china.org/

      (淘宝的Ruby镜像https://registry.npm.taobao.org已经不更新了,当然你也可以使用)

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

      通过淘宝NPM镜像就可以安装ionic和cordova包.

      在安装ionic 和cordova 之前,先安装 express

        1. npm  install express

        2.sudo  npm install -g ionic

        3.sudo  npm install -g cordova                 [默认最新版]

      再通过ionic官网创建应用的时候要是想创建带tab选项的首页,那么只要将ionic start helloWorld blank 更改为 ionic start myApp tabs   即可。安装完毕之后可以使用 ionic -v  命令来查看是否安装成功和版本号。安装成功之后看下项目文件夹的排序和意义。

        hooks:编译 cordova 时自定义的脚本命令,方便整合到我们的编译系统和版本控制系统中

        node_modules :node 各类依赖包

        resources :android/ios 资源(更换图标和启动动画)

        src:主要开发工作目录,页面、样式、脚本和图片都放在这个目录下

        www:静态文件

        platforms:生成 android 或者 ios 安装包路径( platformsandroiduildoutputsapk:apk 所在位置)执行 cordova platform add android 后会生成

        plugins:插件文件夹,里面放置各种 cordova 安装的插件

        config.xml: 打包成 app 的配置文件,app基础信息可在这里修改

        package.json: 配置项目的元数据和管理项目所需要的依赖

        tsconfig.json: TypeScript 项目的根目录,指定用来编译这个项目的根文件和编译选项

        tslint.json:格式化和校验typescript

       之后介绍一下SRC的工作目录:

        

      本以为事情到此就解决了一大部分,并非如此,切换到项目的路径中,ionic serve发现爆了一大堆的ero,这。。无奈再次百度,以下是解决方案(好狗血~~),按camera来说明:

        报错信息:cannot find module ionic-native

        第一步

          ionic cordova plugin add cordova-plugin-camera

          npm install --save @ionic-native/camera

        第二步

          在app.module.ts里引用,并添加在providers里

          

          第三步

            在所需要使用的页面中引入import { Camera } from '@ionic-native/Camera

          第四步

            在constructor中声明:private camera:Camera

       学习资料的三个网址:

    1. ionic-API
    2. ionic-DOC
    3. typeScript

      

  • 相关阅读:
    用GDB调试程序(一)
    vim添加删除多行注释
    python binary lib on win/各种python库的二进制包
    python使用libssh2连接linux
    python xpath
    splinter python浏览器自动化操作,模拟浏览器的行为
    pytesser图片文本识别
    python验证码识别
    Python 之 使用 PIL 库做图像处理
    Connection reset by peer问题分析
  • 原文地址:https://www.cnblogs.com/MyBlogZH/p/9811011.html
Copyright © 2011-2022 走看看