开放式社交公共网络（OSPN）之二十一：跨云CROSSIM（封装H5项目制作APP）

前言
  如果开发团队只具备开发H5的能力，需要制作app，又需要使用聊天功能和小程序平台功能，可参考此篇文章。

android demo下载地址：
https://gitee.com/apowner/crossim-android-js-demo.git

1. 搭建IM服务
搭建IM服务请参阅前章，如果您想使用免费共享IM服务，可直接联系我们。搜索VX号cannontech，或者关注公众号跨云crossim。

2. 注册时绑定IM账号
在用户注册成功时，由后台调用注册接口注册IM账号，并与现有账号在数据库中做一个映射。

3. 添加APP登录代码
在登录的js里加入以下代码

var json =
{“command”:“Login”,“username”:res.ospnUsername,“password”:res.ospnPassword}
if( typeof(osnsdk) != “undefined” && undefined != osnsdk && null !=
osnsdk && “” != osnsdk ){ json = osnsdk.run(JSON.stringify(json)) }
console.log(JSON.stringify(json));

username和password为注册时对应的username和password。

4. 下载源码，进行修改编译
下载地址 https://gitee.com/apowner/crossim-android-js-demo.git
（1） 更改图标
将chat\src\main\res\mipmap-xxhdpi目录下的ic_launcher.jpg文件替即可。
（2） 更改app名称
（3） 更改包名
（4） 更改IM服务器IP
打开build.gradle(:chat)
找到buildConfigField
将其中的ip地址替换指定ip地址
（5） 更改登录页面
打开LoginJSActivity
找到initWebview函数
替换里面的页面加载url为自己的登录主页
mWebView.loadUrl(“http://xxx.xxx.xxx/login”);
（6） 更改主页URL
Im系统登录成功后，会自动跳转到主页面的activity，目前主页面分为4个fragment，预设功能为1、主页面 2、会话列表 3、新闻页面 4、我的页面。
4个页面除了会话列表页面为原生页面，其余几个页面为webview页面，用户可以根据需要替换url来加载不同的业务页面。
打开MainActivity，找到initView函数，替换几个页面生成时加载的url

WebViewFragment mainPage = new WebViewFragment(PAGE_TYPE_MAIN,
“https://xxx.xxx.xxx/?inapp=1”); WebViewFragment newsPage = new
WebViewFragment(PAGE_TYPE_NEWS,
“https://xxx.xxx.xxx/pages/news/index?inapp=1”); WebViewFragment
mePage = new WebViewFragment(PAGE_TYPE_ME,
“https://xxx.xxx.xxx/pages/user/user?inapp=1”);

另外，如果H5端带有部分导航条或者工具条的，需要设置隐藏，否则会在页面上显示2层导航。（注:效果请见图1图2图3）
（7） 编译生成apk

5. 在H5页面上唤醒APP中的聊天页面
App在进行单聊之前，需要双方是好友关系，可以使用以下方式拉起添加好友页面：

var json = {“command”:“AddFriend”,“userID”:platformUserId};
window.location.href = “app://”+JSON.stringify(json);

注: platformUserId为对方的ospnid。效果请见图6中的“加好友”按钮。

编译以后的界面截图：
图1为替换的主页

图2为替换的第三页

图3为替换的第四页

图4为通过跨界群分享小程序

图5为h5中使用聊天功能的效果图

有疑问的朋友可以加群咨询

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！