-
移动开发
站-
热门城市 全国站>
-
其他省市
-
-
400-636-0069
凌雪
2018-09-13
来源 ：网络
阅读 501
评论 0
摘要：本文将带你了解WEBAPP开发之WebApp简单制作，希望本文对大家学微信有所帮助。
本文将带你了解WEBAPP开发之WebApp简单制作（后端也可以装逼啦），希望本文对大家学微信有所帮助。
前端越来越吃香的感觉
年后回来，跟之前和几个同事和朋友聊天，发现有两个.net的和一个php的朋友都转到了前端，真是出乎意料。自从之前的webapp兴起后，前端感觉比后端吃香很多，总结朋友们转的原因，大概就几点
1.易上手，相对其他语言来说，作为后端人员，转到前端，其实已经有了很好的底子和基础了，毕竟以前多少都会和js,jq,html,css打交道
2.前端比后端容易找工作，这里的容易找工作，是指不会被后端的语言限死。就像我朋友说的“做网站不一样需要.net，可以是java，可以是php，但一定离不开js,jq,html,css这些东西”。
3.前端妹子多......
其实自己也觉得有一定道理，感觉这两年.net的需求度相对其他的语言都弱了些，前程上搜索发现，.net的职位数是1100+，php是1800+, 前端是2000+，java 是3600+（都是仅限于广州）。所以还是蛮明显的。
看到了那么多朋友转前端，自己也开始搞点前端的东西，近期刚好有点时间，正好研究下webapp开发， 其实webapp开发说到底就是响应式布局嘛，配合html5+css3就看上去高大上点了。不过作为后端程序猿来说，我还没打算深入去研究html5和css3，反正就是响应式布局，用现成的前端框架来练练手。于是，就想用bootstrap做一个简单的新闻网站来装下逼。
初试
Boootstrap，来自 Twitter，是目前很受欢迎的前端框架，主要是响应式布局，无论是文档，资料，还是demo等都比较齐全，而且界面好看，提供多样式主题，还有很多开源的插件和模板，上手相对简单，让后端程序屌丝也能做出好看的界面。
文件的下载和相关引用，可参考如下地址，详细明了
//v3.bootcss.com/getting-started/
就是下载后只要依次引入：
bootstrap.min.css
bootstrap-theme.min.css
Jquery.min.js
Bootstrap.min.js
这四个文件就好了，然后 在<head> 之中添加 viewport 元数据标签，用来指定移动设备优先
<meta name="viewport" content="width=device-width, initial-scale=1">
viewport
登陆，注册
使用到的组件 panel(面板),navbar(导航条),from(表单) jNotify(提示框)
表单验证，Bootstrap下的表单本身不带验证功能，不过它的插件很多，表单插件bootstrapvalidator就是其中一款，感觉它封装的验证功能比easyui的还要强大。
下载地址: https://github.com/nghuuphuoc/bootstrapvalidator
使用方式,引入 bootstrapValidator.min.css 和 bootstrapValidator.min.js
这两个文件，然后初始化表单
Bootstrapvalidator下载的代码中有大量的demo,可以根据需要自己选择查看。
提示框，jNotify
jNotify是一款提示消息的插件，不过它并不是Bootstrap专有的插件。它提示界面好看，而已又是属于轻量级的，方法使用也简单，下载地址：//www.jq22.com/jquery-info1377
使用方式，引入 jNotify.jquery.js 和 jNotify.jquery.css
这两个文件，然后就可以直接使用
jError("错误信息提示");
jSuccess("成功信息提示");
jNotify("一般信息提示");
1 <div>
2 <div class="wrapper-dropdown active navbar navbar-default" id="navbar">
3 <label style="color: white; padding-left: 8px; font-size: 20px;"><strong>登录</strong></label>
4 <div>
5 <a id="dropdownMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
6 <img src="/Content/img/head/nemu.png" />
7 </a>
8 <ul class="dropdown dropdown-menu" id="menu" aria-labelledby="dropdownMenu">
9 <li><a href="/Home/Index"><i class="glyphicon glyphicon-home"></i> 首页</a></li>
10 <li><a href="/Home/Registere"><i class="glyphicon glyphicon-user"></i>注册</a></li>
11 </ul>
12 </div>
13 </div>
14 <div class="row panel-body">
15 <form id="loginform">
16 <div>
17 <input type="text" id="username" name="username" placeholder="用户名">
18 </div>
19 <div>
20 <input type="password" id="password" name="password" placeholder="密码">
21 </div>
22 <button type="button" data-loading-text="正在提交" autocomplete="off" id="validateBtn" class="btn btn-info btn-block">登陆</button>
23 </form>
24 </div>
25 </div>
登录页代码
1 <div class="panel">
2 <div class="wrapper-dropdown active navbar navbar-default" id="navbar">
3 <label style="color: white; padding-left: 8px; font-size: 20px;"><strong>注册</strong></label>
4 <div>
5 <a id="dropdownMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
6 <img src="/Content/img/head/nemu.png" />
7 </a>
8 <ul class="dropdown dropdown-menu" id="menu" aria-labelledby="dropdownMenu">
9 <li><a href="/Home/Index"><i class="glyphicon glyphicon-home"></i>首页</a></li>
10 <li><a href="/Home/Login"><i class="glyphicon glyphicon-lock"></i>登录</a></li>
11
12 </ul>
13 </div>
14 </div>
15 <div class="row panel-body">
16 <form id="loginform">
17 <div>
18 <input type="text" name="username" placeholder="用户名">
19 </div>
20 <div>
21 <input type="text" name="nickName" placeholder="用户昵称">
22 </div>
23 <div>
24 <input type="password" name="password" placeholder="密码">
25 </div>
26 <div>
27 <input type="password" name="confirmPassword" placeholder="确认密码">
28 </div>
29 <button type="button" data-loading-text="正在提交" autocomplete="off" id="validateBtn" class="btn btn-info btn-block">注册</button>
30 </form>
31 </div>
32 </div>
注册页代码
1 var $btn;
2 $('#loginform').bootstrapValidator({
3 message: 'This value is not valid',
4 feedbackIcons: {
5 valid: 'glyphicon glyphicon-ok',
6 invalid: 'glyphicon glyphicon-remove',
7 validating: 'glyphicon glyphicon-refresh'
8 },
9 fields: {
10 username: {
11 validators: {
12 notEmpty: {
13 message: '用户名不能为空'
14 },
15 stringLength: {
16 min: 6,
17 max: 30,
18 message: '用户名必须在6-30位之间'
19 },
20 remote: {
21 type: 'POST',
22 url: '/User/CheckUserName',
23 message: '该用户名已经存在'
24 },
25 different: {
26 field: 'password,confirmPassword',
27 message: '用户名不能与密码一致'
28 }
29 }
30 },
31 nickName: {
32 validators: {
33 notEmpty: {
34 message: '用户昵称不能为空'
35 },
36 stringLength: {
37 min: 2,
38 max: 8,
39 message: '用户昵称必须在2-8位之间'
40 },
41 remote: {
42 type: 'POST',
43 url: '/User/CheckNickName',
44 message: '该用户昵称已经存在'
45 }
46 }
47 },
48 password:
49 {
50 validators: {
51 notEmpty: {
52 message: '密码不能为空'
53 },
54 stringLength: {
55 min: 8,
56 max: 20,
57 message: '密码长度必须在8-20位之间'
58 },
59 different: {
60 field: 'username',
61 message:
62 '用户名不能与密码一致'
63 }
64 }
65 },
66 confirmPassword: {
67 validators: {
68 notEmpty: {
69 message: '确认密码不能为空'
70 },
71 identical: {
72 field: 'password',
73 message:
74 '两次密码不一致，请检查'
75 },
76 different: {
77 field: 'username',
78 message:
79 '用户名不能与密码一致'
80 }
81 }
82 }
83 }
84 });
表单验证初始化
1 (function ($) {
2 $.extend($,
3 {
4 //成功提示
5 MsgSuccess: function (msg, func) {
6 jSuccess(msg, {
7 VerticalPosition: 'center',
8 HorizontalPosition: 'center',
9 TimeShown: 1000,
10 onClosed: function () {
11 if (func) func();
12 }
13 });
14 },
15 //出错时的提示
16 MsgError: function (msg, func) {
17 jError(msg, {
18 VerticalPosition: 'center',
19 HorizontalPosition: 'center',
20 TimeShown: 1000,
21 onClosed: function () {
22 if (func) func();
23 }
24 });
25 },
26
27 //一般的提示
28 MsgInfo: function (msg, func) {
29 jNotify(msg, {
30 VerticalPosition: 'center',
31 HorizontalPosition: 'center',
32 TimeShown: 1000,
33 onClosed: function () {
34 if (func) func();
35 }
36 });
37 },
38 //统一处理 返回的json数据格式
39 DealAjaxData: function (data, funcSuc, funcErr) {
40
41 //如果是字符串格式的josn，就变为json对象
42 if (typeof (data) == "string") {
43 try {
44 data = eval("(" + data + ")");
45 } catch (e) {
46
47 }
48 }
49
50 if (!data || data.Code == undefined) {
51 return;
52 }
53
54 switch (data.Code) {
55 //错误的提示
56 case 0:
57 $.MsgError(data.Msg, function () { if (funcErr) { funcErr(data); } });
58 break;
59 //成功的提示
60 case 1:
61 $.MsgSuccess(data.Msg, function () { if (funcSuc) { funcSuc(data); } });
62 break;
63 //带跳转的提示
64 case 2:
65 $.MsgInfo(data.Msg, function () { if (window.top) window.top.location = data.BackUrl; else window.location = data.BackUrl; });
66 break;
67 }
68 }
69 });
70 }(jQuery));
JNotify简单封装
效果如下:
新闻列表
使用到的组件 panel(面板),dropdown(下来菜单),Carousel（轮播）glyphicon（图标） 栅格布局
1 <div>
2 <div class="wrapper-dropdown active navbar navbar-default" id="navbar">
3 <label style="color: white; padding-left: 8px; font-size: 20px;"><strong>新闻列表</strong></label>
4 <div>
5 <a id="dropdownMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
6 <img src="/Content/img/head/nemu.png" />
7 </a>
8 <ul class="dropdown dropdown-menu" id="menu" aria-labelledby="dropdownMenu">
9 <li><a href="/Home/Index"><i class="glyphicon glyphicon-home"></i> 首页</a></li>
10 <li><a href="/Home/Login"><i class="glyphicon glyphicon-lock"></i>登录</a></li>
11 <li><a href="/Home/Registere"><i class="glyphicon glyphicon-user"></i>注册</a></li>
12 <li><a href="/Collection/Index"><i class="glyphicon glyphicon-star"></i>我的收藏</a></li>
13
14 </ul>
15 </div>
16 </div>
17 <nav>
18 <a href="jvavscript:;">推荐</a>
19 <a href="/News/NewsList?type=News">新闻</a>
20 <a href="/News/NewsList?type=Sports">体育</a>
21 <a href="/News/NewsList?type=Entertainment">娱乐</a>
22
23 </nav>
24 </div>
顶部菜单代码
1 <div class="row fix-bottom">
2 <div>
3 <a href="/Home/Index">
4 <img src="/Content/img/Login/home.png" />
5 </a>
6 </div>
7 <div>
8 <a href="/Collection/Index">
9 <img src="/Content/img/Login/collect.png" />
10 </a>
11 </div>
12 </div>
13
14 <!--返回顶部-->
15 <div>
16 <a href="javascript:void(0)" onclick='$("body").animate({ "scrollTop": "0px" }, 300)'>
17 <img src="/Content/top.png"/>
18 </a>
19 </div>
尾部菜单代码
1 <!--焦点图start-->
2 <div class="carousel slide" id="NewsCarousel">
3 <!--Indicators-->
4 <ol>
5 <li data-slide-to="0" data-target="#NewsCarousel"></li>
6 <li data-slide-to="1" data-target="#NewsCarousel"></li>
7 <li data-slide-to="2" data-target="#NewsCarousel"></li>
8 </ol>
9 <!--wrapper for slides-->
10 <div>
11 <div class="item active" id="slide1">
12 <img src="/Content/img/image.jpg" class="img-responsive center-block" />
13 <div>
14 <h4>围棋人机大战第二局 李世石再次中盘落败</h4>
15 </div>
16 </div>
17
18 <div id="slide2">
19 <img src="/Content/img/image1.jpg" class="img-responsive center-block" />
20 <div>
21 <h4>《看客》第491期：梦在迪士尼</h4>
22 </div>
23 </div>
24
25 <div id="slide3">
26 <img src="/Content/img/image2.jpg" class="img-responsive center-block" />
27 <div>
28 <h4>“动”态两会：消防官兵列队行进</h4>
29 </div>
30 </div>
31 </div>
32 <!--controller-->
33 <a class="left carousel-control" data-slide="prev" href="#NewsCarousel"><span></span></a>
34 <a class="right carousel-control" data-slide="next" href="#NewsCarousel"><span></span></a>
35 </div>
36 <!--焦点图end-->
轮播代码
1 <div class="context panel panel-default">
2 <div class="row newsItem" data-url="/News/NewsDetails?newId=24">
3 <div class="left-context col-sm-2 col-xs-4 ">
4 <img src="/thumbnail/down/BA8J7DG9wangning/BI0GG89900014AED.jpg">
5 </div>
6 <div class="right-context col-sm-10 col-xs-8">
7 长沙市长:望让小学生步行上学
8 </div>
9 </div>
10 <div>
11 <div>
12 2小时前
13 </div>
14 <div class="col-xs-8 showTip">
15 <span class="glyphicon glyphicon-thumbs-up" aria-hidden="true"></span> 76
16 <span class="glyphicon glyphicon-thumbs-down" aria-hidden="true"></span> 93
17 <span class="glyphicon glyphicon-comment" aria-hidden="true"></span> 2
18 </div>
19 </div>
20 </div>
新闻列表代码
效果图：
新闻详情和收藏页面
使用到的组件 panel(面板),dropdown(下来菜单),lyphicon（图标） 栅格布局
1 <div class="panel panel-info" id="newspanel">
2 <div class="panel-heading article_head">
3 <strong>长沙市长:望让小学生步行上学</strong>
4 </div>
5 <div class="row article_info">
6 <small> 2016-03-13 00:59; 北京晨报</small>
7 </div>
8 <div class="article_list panel-body ">
9 <!--IMG#0-->
10 <p>我是内容</p>
11 </div>
12 </div>
13 <div class="row fix-bottom">
14 <div style="padding: 6px;">
15 <span class="glyphicon glyphicon-thumbs-up" aria-hidden="true"></span> 0
16 <span class="glyphicon glyphicon-thumbs-down" aria-hidden="true"></span> 11
17 <span class="glyphicon glyphicon-comment" aria-hidden="true"></span> 56
18 </div>
19 </div>
20 <!--评论区start-->
21 <h3><span class="label label-primary">评论区</span></h3>
22 <div class="panel panel-default commentItem" id="nonecomment">
23 <div>
24 <p class="text-center text-muted" style="padding-top: 6px;">此新闻暂无评论，快来评论吧</p>
25 </div>
26 </div>
27 <div id="commentList">
28
29 </div>
30 <div class="row text-center">
31 <label id="loading">
32 <span class="glyphicon glyphicon-refresh" aria-hidden="true"></span> 正在努力加载中...
33 </label>
34 </div>
35 <br />
36 <br />
37 <!--评论区end-->
38 <div class="row fix-bottom" id="bottombar">
39 <div>
40 <div>
41 <a href="javascript:void(0)" onclick="return addReview(0,this)">
42 <span class="glyphicon glyphicon-thumbs-up" aria-hidden="true" id="likeCount"></span> <span>76</span>
43 </a>
44 </div>
45 <div>
46 <a href="javascript:void(0)" onclick="return addReview(1,this)">
47 <span class="glyphicon glyphicon-thumbs-down" aria-hidden="true" id="badCount"></span> <span>93</span>
48 </a>
49 </div>
50 <div>
51 <a href="javascript:void(0)" id="commentBtn">
52 <span class="glyphicon glyphicon-comment" aria-hidden="true"></span> <span id="commentsCount">2</span>
53 </a>
54 </div>
55 <div>
56 <a href="javascript:void(0)" onclick="return addCollection()">
57 <span class="glyphicon glyphicon glyphicon-star-empty" aria-hidden="true"></span>
58 </a>
59 </div>
60 </div>
61 </div>
62 <div class="row fix-bottom" id="commentbar">
63 <form id="commentform">
64 <input type="hidden" name="newId" value="24" />
65 <div>
66 <textarea name="context" id="context" rows="4" placeholder="请输入你的评论内容"></textarea>
67 </div>
68 <div style="text-align: right;">
69 <button class="btn btn-success" data-loading-text="正在提交" autocomplete="off" id="validateBtn"> 提交 </button>
70 </div>
71 </form>
72 </div>
新闻详情页面代码
1 <div class="wrapper-dropdown active navbar navbar-default" id="navbar">
2 <label style="color: white; padding-left: 8px; font-size: 20px;"><strong>我的收藏</strong></label>
3 <div>
4 <a id="dropdownMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
5 <img src="/Content/img/head/nemu.png" />
6 </a>
7 <ul class="dropdown dropdown-menu" id="menu" aria-labelledby="dropdownMenu">
8 <li><a href="/Home/Index"><i class="glyphicon glyphicon-home"></i> 首页</a></li>
9 </ul>
10 </div>
11 </div>
12
13 <div>
14 <div>
15 <div id="username" class="bg-primary center-block text-center" >QingTT</div>
16 <p>
17 <small>用户昵称:最爱晴天 | 收藏数:4</small>
18 </p>
19 </div>
20
21 </div>
22 <div id="newsList">
23
24 </div>
25 <div class="row text-center">
26 <label id="loading">
27 <span class="glyphicon glyphicon-refresh" aria-hidden="true"></span> 正在努力加载中...
28 </label>
29 </div>
30 <br />
31 <br />
32 <div class="row fix-bottom">
33 <div>
34 <a href="/Home/Index">
35 <img src="/Content/img/Login/home.png" />
36 </a>
37 </div>
38 <div>
39 <a href="/Collection/Index">
40 <img src="/Content/img/Login/collect.png" />
41 </a>
42 </div>
43 </div>
收藏页面代码
效果图：
造数据
前端基本搭建好了，一个简单的新闻浏览页面就出来了，接着就是让后端有数据出来，怎么办呢，自己写一个后台，提供新闻发布功能，然后自己来造数据？不不不，难得搞定了前端，后端就更要装逼点，直接找个网站偷点数据就好了。于是乎浏览了网易新闻，用谷歌查看了它的请求，发现比想象中的简单很多：
网易网页：
//3g.163.com
新闻列表的获取地址（地址A）：
//3g.163.com/touch/article/list/BBM54PGAwangning/0-10.html
//3g.163.com/touch/article/list/{类型标示}/{页码}-{页数}.html
新闻详情页面的获取地址：
//3g.163.com/touch/article/BI0GG89900014AED/full.html
//3g.163.com/touch/article/{地址A中返回的新闻标示}/full.html
哈哈，就是这么简单了，写个控制台跑一下，把新闻标题，图片，内容等信息全部拿下来保存到本地，发送给前端显示就好了，于是就有了下面代码：
1 public class NewsHelper
2 {
3 //获取新闻列表
4 public static List<NewsItem> GetNews(KeyValuePair<NewTypeEnum, string> newType)
5 {
6 string type = newType.Value;
7 int pageIndex = 0;
8 int pageSize = 10;
9 bool isStart = true;
10 while (isStart)
11 {
12 List<NewsItem> newsInfos = new List<NewsItem>();
13 string url = string.Format("//3g.163.com/touch/article/list/{0}/{1}-{2}.html", type, pageIndex * pageSize, pageSize);
14 string result = HttpHelper.Get(url);
15 Console.WriteLine(string.Format("{0} 行位置：{1}", type, pageIndex * pageSize));
16 if (!string.IsNullOrWhiteSpace(result))
17 {
18 result = result.Replace("artiList(", "").Trim(')');
19 if (!string.IsNullOrWhiteSpace(result))
20 {
21 var jsonObj = JsonConvert.DeserializeObject<dynamic>(result);
22 var newList = jsonObj[type];
23
24 foreach (var newItem in newList)
25 {
26 //只获取单图新闻
27 if (newItem.hasImg > 0)
28 {
29 NewsItem model = new NewsItem()
30 {
31 //新闻标示
32 Docid = newItem.docid,
33 //缩略图url
34 Imgsrc = newItem.imgsrc,
35 //发布时间
36 Ptime = newItem.ptime,
37 //标题
38 Title = newItem.title
39 };
40 newsInfos.Add(model);
41 DownloadImg(model, type);
42 DownDetails(model, type);
43
44 }
45 }
46 }
47 else
48 {
49 isStart = false;
50 }
51 }
52 else
53 {
54 isStart = false;
55 }
56 SaveDb(newsInfos, newType.Key);
57 pageIndex = pageIndex + 1;
58
59 }
60 Console.WriteLine(type + " get end~~~");
61 return null;
62 }
63
64 //将新闻保存到数据库
65 public static void SaveDb(List<NewsItem> newsItems, NewTypeEnum newTypeEnum)
66 {
67 List<NewsInfo> newsInfos = newsItems.Select(p => ConvertNewsInfo(p, newTypeEnum)).ToList();
68 if (newsInfos.Any())
69 {
70 using (var db = DbHelp.OpenConnection())
71 {
72 db.InsertAll(newsInfos);
73 }
74 Console.WriteLine("保存到数据库 {0}", newTypeEnum);
75 }
76 }
77
78 #region 辅助方法
79 //图片下载
80 private static bool DownloadImg(NewsItem item, string type)
81 {
82 var imgUrl = item.Imgsrc;
83 byte[] imgByes = HttpHelper.HttpGetBytes(imgUrl);
84
85 var path = string.Format("/thumbnail/down/{0}/", type);
86 var uploadPath = GetFilePath(path);
87 if (!Directory.Exists(uploadPath))
88 {
89 Directory.CreateDirectory(uploadPath);
90 }
91 string fileName = item.Docid + ".jpg";
92 //创建一个文件流对象，并初始化
93 using (FileStream fs = new FileStream(uploadPath + fileName, FileMode.OpenOrCreate))
94 {
95 //向文件流中写入内容
96 fs.Write(imgByes, 0, imgByes.Length);
97 }
98 item.SaveDbImgsrc = path + fileName;
99
100
101 return true;
102 }
103
104 //文章下载
105 private static bool DownDetails(NewsItem item, string type)
106 {
107 string url = string.Format("//3g.163.com/touch/article/{0}/full.html", item.Docid);
108 string result = HttpHelper.Get(url);
109 if (!string.IsNullOrWhiteSpace(result))
110 {
111 result = result.Replace("artiContent(", "").Trim(')');
112 if (!string.IsNullOrWhiteSpace(result))
113 {
114 var jsonObj = JsonConvert.DeserializeObject<dynamic>(result);
115 var detail = jsonObj[item.Docid];
116 //新闻内容
117 item.Details.Context = detail.body;
118 //标题
119 item.Details.Title = detail.title;
120 //发布时间
121 item.Details.Ptime = detail.ptime;
122 //来源
123 item.Details.Source = detail.source;
124 }
125 }
126 return true;
127 }
128
129 private static string GetFilePath(string file)
130 {
131 string dir = System.Configuration.ConfigurationManager.AppSettings["imgSavePath"];
132 var filename = Path.Combine(dir, file.TrimStart('~', '/'));
133 return filename;
134 }
135
136 static Random rd = new Random();
137
138 //数据转换
139 private static NewsInfo ConvertNewsInfo(NewsItem item, NewTypeEnum newTypeEnum)
140 {
141 NewsInfo result = new NewsInfo()
142 {
143 BadCount = rd.Next(0, 100),
144 CommentsCount = 0,
145 Context = item.Details.Context,
146 Imgsrc = item.SaveDbImgsrc,
147 LikeCount = rd.Next(0, 100),
148 NewType = (int)newTypeEnum,
149 Ptime = DateTime.Parse(item.Ptime),
150 Source = item.Details.Source,
151 Title = item.Title
152
153 };
154 return result;
155 }
156 #endregion
157 }
获取新闻帮助类
装逼升级
用户是最懒的，你让用户在手机上自己输入一个网站的地址来使用你的webapp，用户会打你的。所以对用户来讲，手机上我想的是一安装，然后打开就能用了。那无非就是搞了app，什么功能都不用，内置一个浏览器，一开到就直接在这个app上面跳到你的网站就好了。就像winfrom里面的webBrowser一样。于是百度了一下，android有WebView 这一控件，可以实现这样功能，虽然不懂安卓，不过这个小功能还是简单的，于是百度WebView 的使用，大致过程如下：
先建一个空白的android项目
在AndroidManifest.xml设置访问网络权限：
<uses-permission android:name="android.permission.INTERNET"/>
View Code
然后修改MainActivity，如下：
1 private WebView webView;
2 @Override
3 protected void onCreate(Bundle savedInstanceState) {
4 super.onCreate(savedInstanceState);
5 setContentView(R.layout.main);
6 init();
7
8 }
9
10 private void init(){
11 webView = (WebView) findViewById(R.id.webView);
12 webView.loadUrl("//192.168.0.102:1111/");
13 WebSettings settings = webView.getSettings();
14 settings.setJavaScriptEnabled(true);
15
16 webView.setWebViewClient(new WebViewClient(){
17 @Override
18 public boolean shouldOverrideUrlLoading(WebView view, String url) {
19 view.loadUrl(url);
20 return true;
21 }
22 });
23 }
View Code
本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标移动开发之webapp频道！
喜欢 | 0
不喜欢 | 0
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了，明天再试试吧！
我们会在第一时间安排职业规划师联系您！
您也可以联系我们的职业规划师咨询：
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com，All Rights Reserved.
沪公网安备 31011502005948号
索取资料
答疑解惑
技术交流
职业测评
面试技巧
高薪秘笈
