Netty体验(四)模拟微信小程序移动端开发(上)
上篇文中模拟了网页版实时通讯，通过客户端与服务器的连接，体验了基于socket的长连接，本次通过移动端开发模拟微信App的通信；
实时双向通讯的3种方式：
1：ajax轮询：持续发送请求
2：Long pull：循环，阻塞，等待客户端返回，建立HTTP链接，耗费资源
3：websocket：H5提出的，基于Http的长连接，
通常请求与响应一一对应
而websocket是主动，建立一次，源源不断的保持连接
websocketApi
连接到后端
var socket=new Websokcet（"ws://[ip]:[port]"）
生命周期：
onopen（）---onmessage--onerror--onclose（）
主动方法
Socket.send() Socket.close()
首先搭建移动端页面，通过工具Hbuilder建立，软件自行下载：
http://www.dcloud.io/
Hbuilder跟HbuiderX相比，x更快，更稳定，我自己电脑常常出现Hbuilder运行出错的情况，而X就没出现过，页面类似idea的运行页面，清晰，简洁，智能
新建项目-->移动App-->mui项目
打开首页index.html
运行此页面------谷歌浏览器
在body部分填入快捷键mh
打开浏览器调试：
字体和背景颜色设置--
css文件下新建hearder.css文件
在link标签快捷键引入路径
刷新浏览器便可达到此效果
这里既然是移动端联调Netty，需要进行移动端的基座联调
点击箭头如上，如果没有此页面，打开Android手机开发者选项，打开usb调试连接，运行调试基座
如果不能安装可私信我联调
模拟下微信页面，对于底部状态栏的tab显示
首先在init下方引入mui.plusReady()，设置背景颜色与字体颜色
mui.init();
mui.plusReady(function(){
plus.navigator.setStatusBarBackground("red");
plus.navigator.setStatusBarStyle("light");
})
body页面引入底部tab，快捷键mhb，经过字体与class样式调试实现页面如下(这里在下文的kk页面加入了火锅的图标
)：
下面我们进行字体设置
打开http://www.iconfont.cn，进行字体及样式的选择，加入收藏，下载到本地解压，引入到项目
index引入css，在header引入class
然后再每个页面打开的时候进行内容显示：建立聊天记录，通讯录，等页面建立
里面内容只填写标题即可
然后实现页面的切换
定义数组，把每个页面id引入
var kkArray = [{
pageId: "kk-chartlist.html",
pageUrl: "kk-chartlist.html"
},
{
pageId: "kk-connect.html",
pageUrl: "kk-connect.html"
},
{
pageId:"kk-discover.html",
pageUrl: "kk-discover.html"
},
{
pageId: "kk-myself.html",
pageUrl: "kk-myself.html"
}
];
在页面初始化时加载
mui.plusReady(function() {
//当前webview对象
var indexWebView = plus.webview.currentWebview()
for(var i = 0; i < kkArray.length; i++) {
var kkpage = plus.webview.create(kkArray[i].pageUrl, kkArray[i].pageId, kkStyle);
//隐藏页面
kkpage.hide();
//追加子页面
indexWebView.append(kkpage);
}
plus.webview.show(kkArray[0].pageId);
//批量绑定tap事件
mui(".mui-bar-tab").on("tap", "a", function() {
var tabindex = this.getAttribute("tabindex");
//显示点击tab选项所对应页面
plus.webview.show(kkArray[tabindex].pageId, "fade-in", 200);
for(var i = 0; i < kkArray.length; i++) {
if(i != tabindex) {
//隐藏
plus.webview.hide(kkArray[i].pageId, "fade-out", 200);
}
}
})
})
这是进行联机调试，发现页面无法显示，因为字体原因，需要对底部的top进行样式设置
var kkStyle = {
top: "44px",
bottom: "50px"
}
在header.css页面加入
进行联机测试，这个时候的浏览器端是无法感知的，只能进行app端调试
最终效果：
声明：本公众号所有文章均为参考网上资料手写编制，如有侵权请联系删除，意在记录开发过程，不作为商业用途；
文末:关注公众号回复送书，免费获取
《Springcloud与Docker微服务架构实战》电子版书籍
有效期7天
回复Netty获取
《Netty权威指南》电子版书籍
欢迎投稿，指正
本文使用 文章同步助手 同步
