上篇文章地址:C#开发移动应用系列(1.环境搭建)javascript
嗯..一周了 原本打算2天一更的 - - ,结果 出差了..请各位原谅..html
今天咱们来说一下使用WebView搭建WebApp应用.前端
说明一下为什么要用WebApp的形式,由于首先..易于更新,其次学习成本又会下降一个档次java
由于不须要去很深刻的了解各类安卓的界面布局,咱们直接全屏覆盖一个WebView就行了.(固然,实际应用中仍是须要加入一部分原生控件来提升用户体验)web
肯定一下本篇的学习目标:框架
1.学会使用WebView基础功能ide
2.经过WebView调用页面中的JS代码函数
3.经过WebView让页面中的JS代码调用后台的C#代码工具
效果图:布局
1.使用WebView构建基础框架
咱们首先打开上一篇咱们只放了一个button的界面.
从左侧工具栏中找到WebView并拖到咱们的界面中,并放大到覆盖整个页面.位置如图:
而后编写MainActivity.cs文件,在OnCreate()方法中获取咱们的webView并进行基础设置
代码以下:
//获取WebView对象 var webView = FindViewById<WebView>(Resource.Id.webView1); //申明WebView的配置 WebSettings settings = webView.Settings; //设置容许执行JS settings.JavaScriptEnabled = true; //设置能够经过JS打开窗口 settings.JavaScriptCanOpenWindowsAutomatically = true; //这里是本身建立的WebView客户端类 var webc = new MyCommWebClient(); //设置本身的WebView客户端 webView.SetWebViewClient(webc);
说明都已经在注释里了.
下面咱们来说一下倒数第二行的MyCommWebClient是怎么来的.
这里是咱们本身申明的一个客户端类,用来拦截页面的跳转链接(否则会调用安卓原生游览器加载新页面),并在本页面中加载用的,代码以下:
class MyCommWebClient: WebViewClient
{
//重写页面加载的方法
public override bool ShouldOverrideUrlLoading(WebView view, String url)
{
//使用本控件加载
view.LoadUrl(url);
//并返回true
return true;
}
}
这样,当页面中有A标签链接跳转的时候就不会调用安卓的原生游览器加载了.
最后,咱们在MainActivity.cs文件加上一句代码
webView.LoadUrl("你的地址");
就会跳转到你设定的页面中了.
至此就完成了基本的WebView设置
咱们进入下一个阶段...
2.经过WebView调用页面中的JS代码
既然是要进行webAPP的开发 那么经过WebView来调用JS,确定是少不了的..
下面咱们就开始讲解如何调用.
首先咱们要建立一个Web项目..我这里的例子建立的ASP.NET Core的..
至于怎么让你的Web项目能够局域网访问..我就很少说了..自行百度
修改咱们的前端HTML页面
<body ontouchstart="">
<button onclick="showmessage('页面按钮点击')" type="button" class="mui-btn mui-btn-primary mui-btn-outlined">弹出</button>
<script src="~/js/js/mui.js"></script>
<script src="~/js/examples/hello-mui/js/mui.js"></script>
<script>
//定义一个JS方法,并返回一个字符串
function showmessage(message) {
mui.alert(message)
return "JS反馈"
}
</script>
</body>
若是咱们不须要获取这个JS的返回值
那么很简单,代码以下:
webView.LoadUrl("javascript:" + "showmessage('安卓按钮点击')");
就这样,一句便可..
若是你要获取返回值.那就请往下看..
咱们须要使用到WebView的EvaluateJavascript函数
这个函数有两个参数,一个是你要调用的JS,另外一个则是IValueCallback
如图:
咱们要建立一个类,来继承这个IValueCallback并提供返回值
代码以下:
public class ValueCall : Java.Lang.Object, IValueCallback
{//定义delegate
public delegate void TestEventHandler(string message);
//用event 关键字声明事件对象
public event TestEventHandler TestEvent;
public void Dispose()
{
}
//重写方法,获取返回值
public void OnReceiveValue(Java.Lang.Object value)
{
string a = value.ToString();
TestEvent(a);
}
}
这里咱们采用事件回调的方式,来返回咱们获取的Value,(注:细心的朋友确定发现了,咱们还继承了Java.Lang.Object,由于这个接口是Java的对象..因此..咱们须要继承一下JAVA基类..否则会报类型转换错误)
而后咱们回到MainActivity.cs
在里面定义ShowMessage()的函数以下:
public void ShowMessage(string message)
{
//很简单就是弹出返回值
Toast.MakeText(this.ApplicationContext, message, ToastLength.Short).Show();
}
编写OnCreate函数中的代码以下:
//获取按钮
var btn = FindViewById<Button>(Resource.Id.button1);//添加点击事件
btn.Click += delegate
{
ValueCall vc = new ValueCall();
//添加弹出返回值事件
vc.TestEvent += ShowMessage;
//调用JS
webView.EvaluateJavascript("showmessage('安卓按钮点击')", vc);
};
这样,咱们就完成了整个C#调用JS代码并获取返回值的过程
3.经过WebView让页面中的JS代码调用后台的C#代码
下面咱们就来说如何使用JS来调用C#代码.
首先,咱们申明一个类以下:
public class MyJSInterface : Java.Lang.Object
{
Context context;
//由于要弹出内容..因此构造函数须要一个当前的上下文对象
public MyJSInterface(Context context)
{
this.context = context;
}
//注意,这里须要加两个特性
[Export]
[JavascriptInterface]
public void SayHello(string message)
{
Toast.MakeText(context, message, ToastLength.Short).Show();
}
}
其实很简单,就是建立一个函数,而后添加两个特性,表明着JS能够调用(有点相似WebAPI).
这里须要注意的是Java.Interop.ExportAttribute这个特性.
须要项目引用Mono.Android.Export
注意这里的项目引用..的意思..就是 右键项目-->选择添加引用..而不是只Using
回到咱们的MainActivity.cs文件中的OnCreate方法.给咱们webview继续添加代码以下:
//添加咱们刚建立的类,并命名为wv
webView.AddJavascriptInterface(new MyJSInterface(this), "wv");
//加载测试页面
webView.LoadUrl("http://192.168.14.134:57870/");
修改咱们测试页面的代码以下:
<body ontouchstart="">
<button onclick="showmessage('页面按钮点击')" type="button" class="mui-btn mui-btn-primary mui-btn-outlined">弹出</button>
<button onclick="ShowAdMessage()" type="button" class="mui-btn mui-btn-primary mui-btn-outlined">调用后台C#</button>
<script src="~/js/js/mui.js"></script>
<script src="~/js/examples/hello-mui/js/mui.js"></script>
<script>
function showmessage(message) {
mui.alert(message)
return "JS反馈"
}
function ShowAdMessage() {
// alert(wv);
wv.SayHello("这里是JS调用后台的C#代码");
}
</script>
</body>
咱们添加了一个按钮,并直接经过wv对象来调用后台的函数...
信息弹出成功.到此.咱们的JS调用C#代码就调用结束了
代码虽然很少,可是很实用.
基本了解这些内容 咱们就可开始咱们的WebApp基础开发了.
固然,这些只是基础,咱们要作一个商业应用..确定是须要调用到机器的硬件设备,好比陀螺仪..摄像头什么之类的..
这个咱们留待后面讲解..敬请期待.. ...
顺便说一句..各位大哥 - -,期待更新的..是否是应该点个推荐加个关注?..(滑稽)