使用Xamarin开发即时通信系统 -- 基础篇(大量图文讲解 step by step,附源码下载)

      如果是.NET开发人员,想学习手机应用开发(Android和iOS),Xamarin 无疑是最好的选择,编写一次,即可发布到Android和iOS平台,真是利器中的利器啊!而且,Xamarin已经被微软收购并被大力推广,.NET开发人员将时间投资在Xamarin上,以应对移动开发的热潮,应该是值得的。

      好了,废话不多说,就开始吧。本系列文章将详细介绍如何使用Xamarin开发出一个移动端的即时通信系统(手机聊天程序)(文末有源码下载,可先睹为快),本文作为第一篇基础篇,将着重介绍Xamarin Android和Xamarin iOS环境的搭建,包括安装、设置、模拟器、部署、运行调试等。本系列后面的文章将详细介绍手机聊天系统结构原理和具体代码实现。

一.搭建环境

1. 安装 Xamarin。

     VS2017已经集成了Xamarin,只要在安装的时候,将“使用.NET的移动开发”选项勾选上,即可。

      

2.设置Xamarin Android。

(1)启动VS 2017之后,打开菜单 工具->选项->Xamarin->Android设置,在设置面板上做如下设置:

        

(2)使用 Genymotion 作为安卓模拟器。

3.设置Xamarin iOS。

(1)在我的MacBook笔记本上安装 Visual Studio for Mac。

(2)在MacBook的系统偏好设置 中找到“共享”选项,打开“共享”界面如下。 开启远程管理和远程登录。

         

(3)在PC端VS “工具” 选择卡中依次选择 IOS ->Xamarin.Mac代理,点击左下方的“Add Server”按钮,输入对应远程Macbook机器的IP,并进行登录。

         

(4)登录成功后,界面上会显示如下链接的图标表示远程成功。

          

(5)连接成功后,在VS中就可以进行调试MAC机器上的模拟器或者真机了。

         

(6)在PC端VS中,打开菜单 工具->选项->Xamarin->iOS设置,在设置面板上做如下设置:

        

  

二. 新建Xamarin.Forms项目、编译

  Xamarin.Forms 是Xamarin提供的一个套件,用于跨移动平台的Form应用开发,所以,如果是使用Xamarin开发App,那么,Xamarin.Forms 将是很好的选择。

1.新建一个Cross-Platform跨平台项目,选择Cross Platform App(Xamarin)。

     

2.项目新建成功后,会在解决方案管理器中,生成三个项目。

   

   XamarinDemo 项目是可移植的类库,App的绝大部分逻辑和UI都是在其中完成。

   XamarinDemo.Droid 项目对应了安卓版本,XamarinDemo.iOS 项目对应了iOS版本,它们都引用了 ESFramework.XamarinDemo 项目。

   对于一般简单的应用而言,只需要在XamarinDemo中编写代码就可以了,XamarinDemo.Droid 和 XamarinDemo.iOS中的代码只需要做少量修改。   

3.编译 XamarinDemo.Droid 项目

        在解决方案管理器中选中 XamarinDemo.Droid 项目,右键->属性,打开设置面板。

   

  在项目属性面板中,要选择编译所使用的安卓SDK的版本号,我选择的是最新6.0。

4.编译 XamarinDemo.iOS 项目

       在解决方案管理器中选中 XamarinDemo.iOS项目,右键->属性,打开设置面板。

       

        在项目属性面板中,选择编译所支持的CPU体系结构,由于现在是使用iOS模拟器,所以选择x86_64。

        如果是使用真机调试,则应该选择 ARMv7+ARMv7s+ARM64。

三.部署、调试

  编译成功后,就可以尝试部署到虚拟机,并运行调试了。

1. 安卓版本

(1)启动安卓虚拟机。

    运行上述的Genymotion。  

       

       选择6.0的虚拟机,点击Start按钮运行起来。

       

(2)部署

  在VS上的工具栏,选择刚才启动的虚拟机实例Genymotion Custom Phone - 6.0.0,点击调试按钮(绿色的三角形),即可开始部署、运行的流程。(注意,要选择Debug模式)

  

(3)调试

  部署运行成功后,模拟器就会显示demo App 的UI界面:

    

  此时,可以在源码中加入断点开始调试程序了。

2.iOS版本

(1)启动虚拟机

      

(2)在VS上的工具栏,选择iPhone 6 Plus iOS 11.2,点击调试按钮(绿色的三角形),即可开始部署、运行的流程。

        

(3)调试

  部署运行成功后,模拟器就会显示如下Demo的登录界面:

        

四.源码下载

  虽然还未正式开始介绍聊天程序的代码实现,但是还是先将demo的源码分享给大家,基于以上介绍的内容,大家已经可以将demo运行起来看效果了。并且,源码中除了Xamarin移动端外,还包含了聊天服务端和PC客户端以及WebSocket客户端,而且,Xamarin移动端和PC客户端以及Web端之间都可以相互聊天哦!

  下面是手机端运行的效果图:

              

(1)源码:服务端+PC客户端 (基于VS 2010)

(2)源码:Xamarin 移动端(包括Android 和 iOS)    (基于VS 2017)

  最后,在使用Xamarin开发本Demo的过程中,踩过了很多很多的“坑”,对这些坑的解决方案我们也会在本系列的文章中分享出来,如此能为后来者节省一些时间。敬请期待!

时间: 2024-09-05 22:37:46

使用Xamarin开发即时通信系统 -- 基础篇(大量图文讲解 step by step,附源码下载)的相关文章

基于spring+hibernate+JQuery开发之电子相册(附源码下载)_java

项目结构: 开发之电子相册(附源码下载)_java-spring hibernate源码"> 项目首页: 注册页面: 上传图片: 效果图一: 效果图二: 效果图三: ============================================================= 下面是代码部分 ============================================================= 需要用到的数据库SQL: 复制代码 代码如下: drop dat

android-使用环信SDK开发即时通信功能(附源码下载)_Android

最近项目中集成即时聊天功能,挑来拣去,最终选择环信SDK来进行开发,选择环信的主要原因是接口方便.简洁,说明文档清晰易懂.文档有Android.iOS.和后台服务器端,还是非常全的.  环信官网:http://www.easemob.com/ 本篇文章目的主要在于说明环信Demo如何实现即时通信的.我在集成环信SDK到我们自己开发的app之前,研究了一下环信demo的代码,看了两三天的样子,基本搞清楚来龙去脉,但是只是清楚来龙去脉,要说到里面的细节可能得深一步研究,但是这就够了,已经可以把dem

android-使用环信SDK开发即时通信功能(附源码下载)

最近项目中集成即时聊天功能,挑来拣去,最终选择环信SDK来进行开发,选择环信的主要原因是接口方便.简洁,说明文档清晰易懂.文档有Android.iOS.和后台服务器端,还是非常全的. 环信官网:http://www.easemob.com/ 本篇文章目的主要在于说明环信Demo如何实现即时通信的.我在集成环信SDK到我们自己开发的app之前,研究了一下环信demo的代码,看了两三天的样子,基本搞清楚来龙去脉,但是只是清楚来龙去脉,要说到里面的细节可能得深一步研究,但是这就够了,已经可以把demo

基于jQuery和CSS3制作数字时钟附源码下载(jquery篇)_jquery

废话不多说了,先给大家展示下效果图,感兴趣的朋友继续往下看 哦 查看演示       源码下载 HTML 和上一篇文章:使用jQuery和CSS3制作数字时钟(CSS3篇)一样的HTML结构,只是多了个>date用来展示日期和星期的. <div id="clock" class="light"> <div class="display"> <div class="date"></

Android中Canvas绘图基础详解(附源码下载)

Android中,如果我们想绘制复杂的自定义View或游戏,我们就需要熟悉绘图API.Android通过Canvas类暴露了很多drawXXX方法,我们可以通过这些方法绘制各种各样的图形.Canvas绘图有三个基本要素:Canvas.绘图坐标系以及Paint.Canvas是画布,我们通过Canvas的各种drawXXX方法将图形绘制到Canvas上面,在drawXXX方法中我们需要传入要绘制的图形的坐标形状,还要传入一个画笔Paint.drawXXX方法以及传入其中的坐标决定了要绘制的图形的形状

基于Jquery和CSS3制作数字时钟附源码下载(CSS3篇)_jquery

先给大家展示效果图,感兴趣的朋友可以下载源码哦. 效果演示         源码下载 数字时钟可以应用在一些WEB倒计时效果.WEB闹钟效果以及基于HTML5的WEB APP中,本文将给大家介绍不借助任何图片,如何使用CSS3和HTML来制作一个非常漂亮的数字时钟效果. HTML 我们先在页面中准备一个时钟区域#clock,并且要展示的数字放在.digits中. <div id="clock" class="light"> <div class=&

mac下dashboard小控件开发实例(附源码)

1.背景          用mac的用户都应该知道,mac有一个很好的功能,就是dashboard小控件的功能,按下F12键就可以自由切换.博主最近在背GRE单词,就尝试这开发了一个背单词的dashboard小控件.效果如图 2.步骤   (1)安转dashcode          这个是开发工具,用起来有点像xcode, 下载地址:https://developer.apple.com/downloads/index.action     (2)打开dashcode,新建项目      

C#使用Xamarin开发可移植移动应用(1.入门与Xamarin.Forms页面),附源码

原文:C#使用Xamarin开发可移植移动应用(1.入门与Xamarin.Forms页面),附源码 前言 什么是Xamarin? Xamarin始创于2011年,旨在使移动开发变得难以置信地迅捷和简单. Xamarin的产品简化了针对多种平台的应用开发,包括iOS.Android.Windows Phone和Mac App. Xamarin由许多著名的开源社区开发者创立和参与,而且也是Mono项目的主导者--C#与·NET框架的开源.跨平台实现. (以上摘自百度百科) 那么什么是Xamarin.

仿酷狗音乐播放器开发日志二十一 开发动态调色板控件(附源码)

转载请说明原出处,谢谢~~           上一篇仿酷狗日志结束后,整个换肤功能就只剩下调色板功能没有做了,我本以为会很简单,但是研究了酷狗的调色板功能后发现不是那么简单的事情.首先看一下酷狗的调色板的样子:         我原本以为酷狗的主界面只是一张图片,然后通过鼠标坐标来选择颜色,简单粗暴.等我开始做这部分时发现情况不一样.         可以看到,酷狗的调色板分为两部分,上半部分是调色板的主界面,下半部分是调整亮度的工具栏,我这里分别给他们起名为Pallet和Bar方便说明.这个