云信WEB DEMO HTML5-VUE版本 (以下简称h5 demo),是一套使用网易云信WEB端SDK,以VUE前端框架作为前端UI及缓存数据框架,进行开发的手机移动端适配DEMO。 h5 demo的推出,使得云信SDK的开发者们可以更便捷的利用移动端渠道推广他们的即时通讯产品(如微信、手机微博、手机浏览器等),或通过WebView嵌入到嵌入式设备中,作为混合APP进行发布。
为了给不同接入程度的开发者都能更好的利用后h5 demo进行移动端开发,云信 WEB DEMO HTML5版本的工程也做了一些考虑与设计,利用VUE及其配套框架,为开发者们设计了以下几种借鉴模式:
牛刀小试
登堂入室
出神入化
惊世骇俗
开发环境前端实时编译
npm install
安装相关依赖(仅需在工程第一次初始化时运行)npm run devbuild
运行工程打包工作 (如果想开发实时编译,请运行 npm run dev
, watch源代码)
开发环境后端服务
开发环境真机调试
<!-- 192.168.0.146 为举例,填写开发者的局域网IP地址 -->
<script src="http://192.168.0.146:2002/target/target-script-min.js#anonymous"></script>
生产环境前端代码生成
生产环境后端代码生成
import config from '@/configs'
const SDK = require('@/sdk/' + config.sdk)
LoggerPlugin
插件,将相关日志post
到服务器,使用文件日志的方式存储下来。store/actions/initNimSDK.js
文件中已经做了示例(已注释),用户可以进行相关尝试。vue的目标是通过尽可能简单的API实现"响应的数据绑定"和"组合的视图组件"。
vuex借鉴了flux、redux的设计思想,将应用的状态和组件内状态进行了区分,将应用的公共状态汇聚到了一处统一管理,避免了组件之间的状态传递。 您仍然可以按照MVVM常规的利用组件间的数据绑定进行数据传递,也可以尝试使用vuex,把组件的共享状态抽取出来,以一个全局单例模式管理。在这种模式下,我们的组件树构成了一个巨大的“视图”,不管在树的哪个位置,任何组件都能获取状态或者触发行为。
使用vue-router可以轻松的管理SPA页面路由。
Vux是基于WeUI和Vue(2.x)开发的移动端UI组件库,对一些常用的组件诸如alert/confirm/日历/导航等做了移动端上的封装,方便开发者快速生成自己的应用
如果您一直使用的是诸如RequireJS这类AMD框架进行工程化组织,那么不妨尝试一下CommonJS的编码规范。利用npm + webpack作为工程化构建方式,一定会让你欣喜。 它可以轻松的通过import/require的方式进行模块化编程,可以让您体验到es6/es7标准的便利,可以让您在不同环境打包相应的代码...
PostCSS,可以直观的理解为:它就是一个平台~ 通过这个平台,可以轻松使用大家熟悉的less/sass/stylus等样式预处理器,可以使用prefixer自动对浏览器样式兼容... 本demo中所使用的是sass作为通用样式预处理器
h5 demo主要工程目录结构如下:
|- root
|- build 前端工程构建文件夹,诸如webpack、postcss的配置文件
|- dist 前端生成的资源文件
|- js 通过npm run dev/npm run prod 生成的目标js文件
|- css 通过npm run dev/npm run prod 生成的目标css文件
|- nim 从云信官网上下载的[web sdk](http://netease.im/im-sdk-demo)
|- res 图片资源文件(目前nos的资源全在网易的cdn服务器上,这里是给开发者的一个备份示例)
|- src h5 demo 开发工程
|- main.js 应用页面主入口
|- App.vue 应用页面模板入口,即被main.js挂载
|- login.js
|- regist.js
|- configs demo基本配置,可参考教程[牛刀小试](./docs/h5-demo-guide-1.md)
|- pages demo具体页面UI逻辑,可参考教程[登堂入市](./docs/h5-demo-guide-2.md)
|- components demo UI组件,如聊天控件、表情控件等
|- plugins 适配于vue的插件
|- router 前端路由
|- store h5 demo数据驱动的管理中心,可参考教程[出神入化](./docs/h5-demo-guide-3.md)
|- index.js vuex数据中心入口
|- state.js 数据中心变量声明
|- actions 异步数据变更请求提交
|- mutations 同步操作数据变更
|- themes h5 demo的主要公共UI样式库,可参考教程[牛刀小试](./docs/h5-demo-guide-1.md)
|- utils 工具函数
|- login.html 登录页面
|- regist.html 注册页面
|- index.html 主页面
|- server.js 开发环境后端服务脚本
该部分主要向开发者介绍h5 demo的主要配置项、样式构成、路由结构,使得开发者只要通过修改配置、样式、图片等方式,即生成自己的demo,而无需更改代码底层。
该部分主要向开发者介绍h5 demo的主要页面结构和主要数据层交互,使得开发者可以高度定制h5 demo的UI及交互。
该部分主要向开发者介绍h5 demo的数据结构及数据驱动层,使得开发者可以依据web sdk,深度订制自己崭新的业务功能。
body {
position: relative;
width: 100%;
height: 100%;
}
.app {
position: absolute;
width: 100%;
height: 100%;
box-sizing: border-box;
padding-top: 4rem; /* 该处就可以留给导航tab位置 */
...
}
.app .main {
position: relative;
width: 100%;
height: 100%;
scroll-y: scroll; /* 该元素内部就可以留给滚动条了 */
}
<body>
<!-- 导航 -->
<div class="app">
<div class="main"></div>
</div>
</body>
.forward-enter-active {
position: absolute;
left: 0;
top: 0;
transition: all 0.5s;
z-index: 0;
}
.forward-enter {
transform: translate3d(100%, 0, 0);
}
.forward-enter-to {
transform: translate3d(0, 0, 0);
}