Code Monkey home page Code Monkey logo

nurdun / ionic3-app Goto Github PK

View Code? Open in Web Editor NEW
78.0 9.0 35.0 2.57 MB

本项目是用cordova+ionic3+angular4实现的一个简单的demo,可以用来参考。现有功能为登录模块,Home主页面,左侧menu菜单,segment选项卡,列表,搜索页面,详细页面,底部TAB,用户登出等。实例中还提供了安卓端和ios端样式调整的方法,还有安卓和ios端分别实现的消息推送功能

License: MIT License

TypeScript 54.35% HTML 24.72% CSS 18.18% JavaScript 2.74%
ionic3 angular ionic-apps ionic3-examples

ionic3-app's Introduction

This is a starter template for Ionic projects.

How to use this template

This template does not work on its own. The shared files for each starter are found in the ionic2-app-base repo.

To use this template, either create a new ionic project using the ionic node.js utility, or copy the files from this repository into the Starter App Base.

With the Ionic CLI:

Take the name after ionic2-starter-, and that is the name of the template to be used when using the ionic start command below:

$ sudo npm install -g ionic cordova
$ ionic start myTabs tabs

Then, to run it, cd into myTabs and run:

$ ionic cordova platform add ios
$ ionic cordova run ios

Substitute ios for android if not on a Mac.

ionic3-App

安装并启动

首先在电脑上安装好ionic3,Android SDk,xcode等需要的环境
用 git clone 的方式拉项目到本地
先到package.json中删掉jpush-phonegap-plugin(注意dependencies和cordova中都删掉)
jpush-phonegap-plugin 需要先删掉,等安装完其他依赖之后再单独安装,因为这里的消息推送插件需要配置自己的appkey
不需要消息推送功能的话,删掉这个插件和之后app.component.ts中的消息推送相关代码就可以
用 npm install 的方式 安装node_modules
用ionic serve 命令可以启动项目并在浏览器中查看(此功能需要删掉消息推送相关代码)

Android

ios的消息推送功能用到了phonegap-plugin-push插件,本插件在安卓上需要使用google services通过firebase来推送消息。
因为我们用不了google services,所以Android端用了极光的jpush-phonegap-plugin来实现了消息推送。
要打包成Android时需要用 ionic cordova plugin remove phonegap-plugin-push命令来删除phonegap-plugin-push插件
否则的话因为获取不到google services配置文件,打包会失败。这个问题之后会解决

ionic cordova platform add android 打包安卓项目
ionic cordova emulate android -lc 启动安卓模拟器并查看项目
ionic cordova run android -lc  真机调试

IOS

ionic cordova platform add ios
ionic cordova emulate ios -lc
ionic cordova run ios -lc

注意

config.xml中的widget id="ionic.App" 需要替换成自己的App id

建议

安装npm package时可能会报错
建议自己ionic start xxx新建一个ionic3项目然后把代码复制进去运行
创建新项目并复制我的代码的时候需要单独安装几个插件和npm包
$ ionic cordova plugin add phonegap-plugin-push
$ npm install --save @ionic-native/push
ionic plugin add jpush-phonegap-plugin --variable APP_KEY=your_jpush_appkey
$ npm install --save ionic3-jpush
上面四个是消息推送相关的插件和包,如果不需要消息推送功能的话可以不安装,记得注释掉app.component.ts中的相关代码就好
$ npm install --save cordova-sqlite-storage

ionic3-app's People

Contributors

nurdun avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

ionic3-app's Issues

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.