Cordova+angularjs+ionic+vs2015开发(三)

欢迎加群学习:457351423 这里有4000多部学习视频,涵盖各种技术,有需要的欢迎进群学习!

一、基础设置

1.修改App名称和程序起始页

打开config.xml配置文件显示如下,在【通用】选项卡中,将显示名称和起始页,修改为自己想要的名称即可。

如需直接在xml文件中修改:右击config.xml,使用【查看代码】进行修改即可。

2.插件安装

一般在项目开发中,免不了使用第三方的插件,在VS中安装Cordova插件也是比较简单的。

可视化打开config.xml文件。切换到【插件】选项卡:

核心插件:是包中内置的一些插件。

自定义:可以安装第三方插件。

已安装:当前项目已安装的插件。

在自定义标签中,有两种安装方式,一种是本地,一种是git安装:

git安装,只需粘贴git地址,点击箭头,解析成功后右侧显示插件信息,点击安装即可。

本地安装,只需要选择到本地插件所在的文件夹即可,文件目录中需要包含plugin.xml文件。

例如,插件位于如下目录中:

在VS中只需选择对应文件夹即可:

一些常用插件列表和说明:

插件官网:

http://cordova.apache.org/plugins/

扫码:

https://github.com/wildabeast/BarcodeScanner.git

应用程序角标:

https://github.com/katzer/cordova-plugin-badge.git

邮件系统:

https://github.com/katzer/cordova-plugin-email-composer.git

对话框:

https://github.com/apache/cordova-plugin-dialogs.git

内置浏览器:

https://github.com/apache/cordova-plugin-inappbrowser.git

推送服务(需注册):

https://github.com/jpush/jpush-phonegap-plugin.git

JPush插件在安装时需要填写AppKey,安装显示界面如下,先填写申请到的Key再点添加就行了。

二、中文乱码

如果遇到中文乱码问题,记住一条就行了,统一所有编码。

index.html显示中文乱码,首先保证<meta>设置为utf-8,设置如下:

<meta charset="utf-8">

其次保证文件格式为utf-8编码,这样就能解决所有中文乱码问题了。

VS2015创建的js文件和Html文件默认为GB2312,而Cordova和Ionic默认使用的utf-8.所以会显示为中文乱码。一般在视图模板和js文件中使用中文都会出现乱码问题。最简单的解决方案就是,打开html/js文件,点击【文件】-【高级保存选项】,选择UTF-8格式保存就行了。

结束语:今天时间有限,暂时写到这里,由于Cordova+Ionic开发涉及到很多的知识点,本文原本打算仅仅是介绍VS2015开发Cordova程序的一些注意事项和技巧。至于后面要不要涉及到Ionic和Angular的语法和知识点,这个看需求吧!

欢迎加群学习:457351423 这里有4000多部学习视频,涵盖各种技术,有需要的欢迎进群学习!

时间: 2024-10-08 10:16:59

Cordova+angularjs+ionic+vs2015开发(三)的相关文章

Cordova+angularjs+ionic+vs2015开发(二)

欢迎加群学习:457351423 这里有4000多部学习视频,涵盖各种技术,有需要的欢迎进群学习! 一.创建空白Cordova应用 打开VS,选择[新建项目],选择其它语言JavaScript或者TypeScript,语言的话就按个人喜好,喜欢JS就用JS,喜欢TS就用TS,推荐使用TS书写,代码结构和可读性相对更强.本文演示使用JS来书写,方便不会TS的用户阅读. 创建完项目后,项目结构如下: www目录为我们本地应用程序目录,和一般静态网站类似.默认主页为index.html.脚本对应为sc

Cordova+angularjs+ionic+vs2015开发(五)

欢迎加群学习:457351423 这里有4000多部学习视频,涵盖各种技术,有需要的欢迎进群学习! 一.创建侧边菜单和导航项目 1.使用VS创建一个Ionic空项目,同时创建一个Ionic SideMenu和Ionic Tabs项目.将SideMenu和Tabs项目里的templates和js文件合并到空项目里,修改js对应的代码即可.完整项目工程如下: 2.App.js代码修改如下: /* * 加载所需要的各个模块 * 上篇教程中加载了controllers控制器模块 * 本篇教程加载了ser

Cordova+angularjs+ionic+vs2015开发(四)

欢迎加群学习:457351423 这里有4000多部学习视频,涵盖各种技术,有需要的欢迎进群学习! 一.布局 Ionic模板提供了一个侧边栏菜单示例项目和标签选项卡示例项目.本案例将两个布局进行结合,简单介绍下Ionic的布局.Ionic采用自定义标签和标准Html标签相结合.相对于全部使用div方式来说,自定义标签的可读性更强.Ionic的界面呈现既可以使用静态页面方式呈现,也可以使用Angular提供的路由机制和控制器来控制控制页面的呈现及数据绑定. 使用VS创建一个空白的Ionic项目.项

Cordova+angularjs+ionic+vs2015开发(一)

欢迎加群学习:457351423 这里有4000多部学习视频,涵盖各种技术,有需要的欢迎进群学习! 一.Windows环境配置 1.如果已经安装VS2015,打开[工具]-[选项]找到Cordova选项: 运行依赖关系查看器,用来检测开发环境是否完整. 如果检测显示: 那么就是环境配置完成了.可以直接开发了. 如果显示有错误页面,那么按照错误页面的提示,进行对应的环境配置即可. 一般错误页面提示都是缺少对应的依赖组件,包括如下: Git Node.js Android SDK JDK 这些组件可

基于AngularJS/Ionic框架开发的性能优化

AngularJS作为强大的前端MVVM框架,虽然已经做了很多的性能优化,但是我们开发过程中的不当使用还是会对性能产生巨大影响. 下面提出几点优化的方法: 1. 使用单次绑定符号{{::value}} AngularJS的性能优化方法之一是减少双向绑定.我们知道AngularJS的双向绑定是通过为每个需要双向绑定的数据对象添加$$watchers,一旦某个scope的数据发生了更新,就触发脏检测($digest),深度优先遍历所有scope对象的$$watchers值的old/new value

我用VS2015 开发webapp (1) 需求、目的、配置

分析需求: 1.要求数据分析 [门店销售数据分析] 2.数据要实时同步 3.数据要求安全并保密 4.数据分析图 开发工具的选择: VS2015 + Cordova + Angularjs + Ionic 配置环境 CMD-- node -v CMD-- npm -version 解决方法: 点击"Packages" > "Show Obsolete Packages"然后library就出来了 下面碎碎念: MD,我真不会啊.... 24K纯新手,这是多大坑啊

搭建 AngularJS+Ionic+Cordova 开发环境并运行一个demo

目前的手机APP有三类:原生APP,WebAPP,HybridApp:HybridApp结合了前两类APP各自的优点,越来越流行. Cordova就是一个中间件,让我们把WebAPP打包成HybridAPP,并且它提供了非常多的插件,方便我们使用原生APP的功能. Ionic是一个界面样式库,仿照原生的ios和android界面:同时它是基于AngularJs的. 本文我们在win7中搭建 AngularJS+Ionic+Cordova 开发环境,包括所涉及的Node.js.Cordova CL

ionic+cordova+angularJs

ionic+cordova+angularJs 这里详细介绍下如何用ionic+cordova+angularjs搭建自己的移动端app,包括环境搭建,框架使用等,具体项目已放置在github上,可下载下来自行启动. 下载地址:https://github.com/foreverjiangting/myApp/tree/master/myApp 一:环境搭建 1.配置java的运行环境,包括path变量的路径,这里不再详细讲解,请自行百度. 2.下载Android  Studio,并配置path

AngularJS+Ionic开发-1.搭建开发环境

临时项目需要使用AngularJS+Ionic+Cordova技术,半年前跟别人用过一段时间做过几个页面,目前别人已经无法联系了,只能我自己上了. 上次做完项目后,想抽时间好好巩固一下这方面的知识面来,后来其他项目忙起来就给扔下,主要原因还是懒啊,其实有好多的技术排着队等着好好研究呢,就是懒啊. 开发第一步,需要先把开发环境搭建起来. 1.开发IDE 选择VS Code,官方下载地址:https://code.visualstudio.com/ .下载完成后,根据安装步骤一步步完成即可. 2.安