All Projects → nurdun → Ionic3 App

nurdun / Ionic3 App

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

Programming Languages

typescript
32286 projects

Projects that are alternatives of or similar to Ionic3 App

Ionic Boilerplate
✨ An Ionic Starter kit featuring Tests, E2E, Karma, Protractor, Jasmine, Istanbul, Gitlab CI, Automatic IPA and APK, TypeScript 2, TsLint, Codelyzer, Typedoc, Yarn, Rollup, and Webpack 2
Stars: ✭ 309 (+291.14%)
Mutual labels:  ionic3
Ionic Apollo Simple App
Explains how to develop Ionic application with Apollo GraphQL client
Stars: ✭ 16 (-79.75%)
Mutual labels:  ionic3
Ionic Google Login
Ionic 4 starter app to show you how to add Google Log In to an Ionic App using Google Sign-In Cordova Plugin.
Stars: ✭ 61 (-22.78%)
Mutual labels:  ionic3
Ionic Audio
An audio player for Ionic 3 and Angular 4. Works with HTML 5 audio or native audio using Cordova Media plugin.
Stars: ✭ 332 (+320.25%)
Mutual labels:  ionic3
Awesome Ionic
An "awesome" list of Ionic resources
Stars: ✭ 799 (+911.39%)
Mutual labels:  ionic3
Angularfire2 Ionic3 Pictureupload
An example application showing how to upload picture from the gallery or from camera to Firebase using Ionic 3 and Angularfire2. 📸
Stars: ✭ 13 (-83.54%)
Mutual labels:  ionic3
ionic2-mask-directive
directive to mask ion-input
Stars: ✭ 24 (-69.62%)
Mutual labels:  ionic3
Game Music Player
All your music are belong to us
Stars: ✭ 76 (-3.8%)
Mutual labels:  ionic3
Cnode Ionic
A third party app for Node.js中文社区 https://cnodejs.org/
Stars: ✭ 6 (-92.41%)
Mutual labels:  ionic3
Ion Affix
A directive for Ionic framework for creating affix headers.
Stars: ✭ 58 (-26.58%)
Mutual labels:  ionic3
Ionic2 Calendar
A calendar component based on Ionic framework
Stars: ✭ 338 (+327.85%)
Mutual labels:  ionic3
Ion2 Calendar
📅 A date picker components for ionic2 /ionic3 / ionic4
Stars: ✭ 537 (+579.75%)
Mutual labels:  ionic3
Ionic3 Angular43 Httpclient
Example of Ionic 3 and the new Angular 4.3 HTTPClient
Stars: ✭ 20 (-74.68%)
Mutual labels:  ionic3
Ng Lottie
Render After Effects animations on Angular based on lottie-web
Stars: ✭ 311 (+293.67%)
Mutual labels:  ionic3
Nativescript Ionic Template
📱 🖥 Create Mobile First apps, Web and Native sharing the code with Angular 🎉
Stars: ✭ 65 (-17.72%)
Mutual labels:  ionic3
Ionic Environment Variables
Easy to use environment variables for Ionic3!
Stars: ✭ 278 (+251.9%)
Mutual labels:  ionic3
Ionic Custom Components
Ionic 3/4 Custom Components. Spend less time on design and more time on coding! Free to use for everyone! 🧙‍♂️
Stars: ✭ 23 (-70.89%)
Mutual labels:  ionic3
Ionic Firebase Starter App
Ionic 4 firebase CRUD tutorial to learn how to create a firebase application to perform Authentication and all CRUD operations in an ionic 4 application. You can use this FREE Ionic Firebase Starter App as a base to create your Ionic App with Firebase backend :)
Stars: ✭ 77 (-2.53%)
Mutual labels:  ionic3
Drip Ionic3
「水滴打卡」App Open Source Code Base On Ionic V3 Framework
Stars: ✭ 74 (-6.33%)
Mutual labels:  ionic3
Ionic 3 Google Maps Google Places Geolocation
This repository is part of an ionic tutorial about Maps! In this tutorial we merged Google maps, Geolocation and Google Places. This ionic tutorial includes a working example you can reuse for your needs!
Stars: ✭ 32 (-59.49%)
Mutual labels:  ionic3

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

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].