| 地方站：
您的位置： >
2016 WGDC四维图新发布WeUI全新产品
& &经常使用车载信息系统的车主都会有这样的操作体验：触摸屏幕，或者使用按键，打开需要的应用程序；使用完毕之后，再退出当前应用界面，以方便切换到另一个应用程序。在日益推崇驾驶安全和汽车智能的当下，这样的操作步骤显得繁琐了很多。那么，是否有一种解决方案可以让车载环境下的使用更加直观、简便和安全呢？
& &针对这个问题，在6月15日举行的2016地理信息开发者大会（WGDC2016）上，大会战略合作伙伴、致力于车联网生态体系建设的四维图新给出了自己的答案：全新车载应用解决方案。
& &WeDrive产品家族新成员
& &这套完整的车载应用解决方案是四维图新WeDrive产品家族的新成员，倡导以人为本的人性化操作体验，以及实时在线的智能服务响应，同时基于四维图新强大的内容服务平台，为用户提供安全、便捷、贴心的车载信息服务。这套车载应用解决方案针对不同的市场定位、用户群体和产品需求，由三种产品形态组成，分别是车载专用桌面系统WeUI、趣驾行车助手以及相应的SDK。
& &车载专用桌面系统WeUI是一个成熟的完整方案，将软件、服务与车载硬件进行了一体化集成，具备整体能力；趣驾行车助手以交互为王，简小轻便，是四维图新结合业内最精准的车载语音识别技术和最丰富的车载信息服务推出的智能行车服务；SDK则不拘于应用和系统，针对用户特殊需求，以开发包的形式释放平台能力，自由进行合作。
& &WeUI带来三大变革
& &信息流交互方式、去APP化、卡片式扁平化UI，体现了车载专用桌面系统WeUI紧随当前趋势的设计理念。去掉繁杂的二级菜单，以最大程度降低了使用成本，将服务聚焦在信息本身，实现了卡片即信息、所见即所得、点击即发声，用户终于不需要在各类应用间频繁地进行跳转，确保了驾驶安全。
& &WeUI还提供了全新的Voice In/Voice Out人机交互方式，与传统单向语音输入相比，最大的特点就是可以完全自然语义理解，实现了人与机器的多轮交互，能够像朋友聊天一样地进行复杂对话，彻底解放了车主驾车过程中的双手和双眼。同时，智能搜索功能可以根据说出的关键词组进行全局搜索，并自动匹配相应服务，帮助车主从繁琐的车载输入中解脱出来，无需用户在指定的应用和场景下进行输入，一步直达所需服务。
& &因此，WeUI为车联网服务带来了三大变革：其一，服务方式的变革，将传统以应用为中心的车机服务模式改变为以人为本，只要说出需求，系统就能自动提供相应服务；其二，语音交互的变革，将传统依靠特有指令只支持单层逻辑的语音交互方式改变为自然语义理解，可以进行多轮对话交互，体验自然流畅，内容更加丰富；第三，系统价值的革命，将传统主要承担品牌风格和品质美化作用的车载桌面系统改变为承担生态入口作用，提供各类服务快速对接，去APP化的卡片式桌面管理系统。
& &趣驾行车助手将语音与服务合体
& &趣驾行车助手是在车载专用桌面系统WeUI的基础上，通过对语音和内容服务的提取以及融合，以轻应用的形式进行呈现。从产品功能层面而言，趣驾行车助手不是一款简单的语音工具，也不是传统的车联服务，而是通过语音交互方式，为车主提供用车、资讯、娱乐、社交以及安全驾驶等全方位的管家式服务。趣驾行车助手主要针对前装市场，以车载应用方式接入车机，集成简单方便。
& &精准语音识别是趣驾行车助手的亮点之一，针对车载环境进行了优化，使行车开窗状态下识别率仍然保持在95%以上，而语音识别请求响应时间则低于500毫秒；多层交互逻辑是亮点之二，由于应用了大数据分析和人工智能技术，用户无需了解特殊命令，可以自由提问，趣驾行车助手都能准确理解用户意图，完成相应场景的服务；服务资源丰富是亮点之三，趣驾行车助手覆盖了车生活场景下的八大类服务，包括天气、音乐、FM、新闻、股票、导航、违章、城市活动，这些在线信息，用户可以随时获取，尽享互联生活。
& &作为WeDrive平台服务链中完整的车载应用解决方案，以颠覆式的车载服务理念和高识别率的自然语义理解交互为主要特点，整合了丰富优质的服务资源，是四维图新的一次大胆尝试与突破，将会带来全新的使用体验。
快速团购报名
更多请关注官方微信：mycar168news
版权声明：为了保护知识产权，保障著作人权益，请本网转载信息所涉及的有关权利人，主动向本网提交权利人身份证明材料，以方便我们支付稿酬。
推荐经销商
厂家关注排行榜
车系排行榜
本站常年法律顾问：广东一龙律师事务所 陈律师
咨询电话：2　QQ：12172人阅读
java（13）
UEditor是由百度web前端研发部开发所见即所得富文本web编辑器，具有轻量，可定制，注重用户体验等特点，开源基于BSD协议，允许自由使用和修改代码。
最近在项目中需要用到在线编辑器，查找了相关资料，决定使用UEditor，整理了一下在项目中加入UEditor的步骤。
步骤如下：
一、官网上下载完整源码包，解压到任意目录
&_examples：编辑器完整版的示例页面
&&&&_demos：编辑器的各种使用案例
&&&&dialogs：弹出对话框对应的资源和JS文件
&&&&themes：样式图片和样式文件
&&&&third-party：第三方插件
&&&&editor_all.js：_src目录下所有文件的打包文件
&&&&editor_all_min.js：editor_all.js文件的压缩版，建议在正式部署时才采用
&&&&editor_config.js：编辑器的配置文件，建议和编辑器实例化页面置于同一目录
二、部署UEditor到实际项目（UETest）中的步骤:
第一步：在项目的任一文件夹中建立一个用于存放UEditor相关资源和文件的目录，此处在项目根目录下建立，起名为ueditor。
第二步：拷贝源码包中的dialogs、themes、third-party、editor_all.js和editor_config.js到ueditor文夹中。
第三步：为简单起见，此处将以根目录下的index.jsp页面作为编辑器的实例化页面，用来展示UEditor的完整版效果。在index.jsp文件中，首先导入编辑器需要的三个入口文件，示例代码如下：
&meta http-equiv=&Content-Type& content=&text/charset=UTF-8&&
&title&编辑器完整版实例&/title&
&script type=&text/javascript& src=&ueditor/editor_config.js&&&/script&
&script type=&text/javascript& src=&ueditor/editor_all.js&&&/script&
&link rel=&stylesheet& href=&ueditor/themes/default/ueditor.css&&
第四步：然后在index.php文件中创建编辑器实例及其DOM容器。具体代码示例如下：
&div id=&myEditor&&&/div&
&script language=&javascript& type=&text/javascript&&
var option = {
initialContent : '',//初始化编辑器的内容
minFrameHeight : 400,//设置高度
textarea : 'content'//设置提交时编辑器内容的名字，之前我们用的名字是默认的editorValue
var editor = new baidu.editor.ui.Editor(option);
editor.render(&myEditor&);
最后一步：&在/UETest/ueditor/&editor_config.js中查找URL变量配置编辑器在你项目中的路径。
//强烈推荐以这种方式进行绝对路径配置
URL=window.UEDITOR_HOME_URL||&/UETest/ueditor/&;
至此，一个完整的编辑器实例就已经部署到咱们的项目中了！在浏览器中输入&运行下试试UE强大的功能吧！&
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：154484次
积分：1969
积分：1969
排名：千里之外
原创：41篇
转载：26篇
评论：16条
(1)(1)(1)(1)(3)(4)(5)(1)(2)(1)(3)(7)(9)(8)(20)你的浏览器禁用了JavaScript, 请开启后刷新浏览器获得更好的体验!
问:参考文档来写的。然后js和css也是下载来的，为啥不能弹窗？
参考文档来写的。然后js和css也是下载来的，为啥不能弹窗？
style里面有个display:none
改成block就好了
这里引用了example.js
改成了block后，一开始就弹窗了
没有点击就弹窗了
你得自己写个js控制啊。。
问题整理自QQ群:
自己绑定去控制显示和隐藏
你需要自己绑定事件。。
要回复问题请先或
浏览: 2734
关注: 3 人weui框架实现上传、预览和删除图片功能代码
作者：GengbinZ
字体：[ ] 类型：转载 时间：
weui框架暂时只有css文件，并没有js文件实现其功能，我在其html+css后面增加了js实现其功能，为大家提供方便，也为自己保存记录。具体实例代码大家参考下本文
jQuery WeUI 是专为微信公众账号开发而设计的一个简洁而强大的UI库，包含全部WeUI官方的CSS组件，并且额外提供了大量的拓展组件，丰富的组件库可以极大减少前端开发时间。
jQuery WeUI 的最大特点是它只提供UI组件，并不会对项目所使用的框架和其他库有任何的限制，几乎可以在任何环境下使用。无论你的项目是基于jQuery，还是 React, Angular, Vue， 你都会发现 jQuery WeUI 能非常方便的和他们结合使用。既是你的项目是一个有很悠久历史的老项目，也几乎可以做到拿来即用。
weui框架暂时只有css文件，并没有js文件实现其功能，我在其html+css后面增加了js实现其功能，为大家提供方便，也为自己保存记录。
&!doctype html&
&meta charset="UTF-8"&
&title&&/title&
&meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /&
&link href="../css/mui.min.css" rel="external nofollow" rel="stylesheet" /&
&link rel="stylesheet" href="weui.min.css" rel="external nofollow" rel="external nofollow" /&
&link rel="stylesheet" href="jquery-weui.css" rel="external nofollow" rel="external nofollow" /&
&div class="weui-gallery" id="gallery"&
&span class="weui-gallery__img" id="galleryImg"&&/span&
&div class="weui-gallery__opr"&
&a href="javascript:" rel="external nofollow" class="weui-gallery__del"&
&i class="weui-icon-delete weui-icon_gallery-delete"&&/i&
&div class="weui-cells weui-cells_form"&
&div class="weui-cell"&
&div class="weui-cell__bd"&
&div class="weui-uploader"&
&div class="weui-uploader__hd"&
&p class="weui-uploader__title"&图片上传&/p&
&div class="weui-uploader__info"&0/2&/div&
&div class="weui-uploader__bd"&
&ul class="weui-uploader__files" id="uploaderFiles"&
&li class="weui-uploader__file" style="background-image:url(../images/applogo180x180.png)"&&/li&
&li class="weui-uploader__file" style="background-image:url(../images/applogo180x180.png)"&&/li&
&li class="weui-uploader__file" style="background-image:url(../images/applogo180x180.png)"&&/li&
&li class="weui-uploader__file weui-uploader__file_status" style="background-image:url(../images/applogo180x180.png)"&
&div class="weui-uploader__file-content"&
&i class="weui-icon-warn"&&/i&
&li class="weui-uploader__file weui-uploader__file_status" style="background-image:url(../images/applogo180x180.png)"&
&div class="weui-uploader__file-content"&50%&/div&
&div class="weui-uploader__input-box"&
&input id="uploaderInput" class="weui-uploader__input zjxfjs_file" type="file" accept="image/*" multiple=""&
&script src="../js/mui.min.js"&&/script&
&script type="text/javascript" src="jquery-2.1.4.js"&&/script&
&script type="text/javascript" src="jquery-weui.js"&&/script&
&script type="text/javascript"&
mui.init();
$(function() {
var tmpl = '&li class="weui-uploader__file" style="background-image:url(#url#)"&&/li&',
$gallery = $("#gallery"),
$galleryImg = $("#galleryImg"),
$uploaderInput = $("#uploaderInput"),
$uploaderFiles = $("#uploaderFiles");
$uploaderInput.on("change", function(e) {
var src, url = window.URL || window.webkitURL || window.mozURL,
files = e.target.
for(var i = 0, len = files. i & ++i) {
var file = files[i];
src = url.createObjectURL(file);
src = e.target.
$uploaderFiles.append($(tmpl.replace('#url#', src)));
//第几张图片
$uploaderFiles.on("click", "li", function() {
index = $(this).index();
$galleryImg.attr("style", this.getAttribute("style"));
$gallery.fadeIn(100);
$gallery.on("click", function() {
$gallery.fadeOut(100);
//删除图片 删除图片的代码也贴出来。
$(".weui-gallery__del").click(function() { //这部分刚才放错地方了，放到$(function(){})外面去了
console.log('删除');
$uploaderFiles.find("li").eq(index).remove();
补充说明上述代码中引用以下的这四个文件可以到这个weui的官网去下载
&link rel="stylesheet" href="weui.min.css" rel="external nofollow" rel="external nofollow" /&
&link rel="stylesheet" href="jquery-weui.css" rel="external nofollow" rel="external nofollow" /&
&script type="text/javascript" src="jquery-2.1.4.js"&
&/script&&script type="text/javascript" src="jquery-weui.js"&&/script&
以上所述是小编给大家介绍的weui框架实现上传、预览和删除图片功能代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具12195人阅读
前台技术（92）
移动开发（31）
jQuery WeUI 是WeUI的一个jQuery实现版本，除了实现了官方插件之外，它还提供了如下拉刷新、日历、地址选择器等丰富的拓展组件。jQuery WeUI 中的JS组件均是以JQuery 插件的形式提供，使用非常方便，并且可以和React、Angular、VUE之类的主流JS框架一起使用。
WeUI 是微信官方团队针对微信提供的一个H5 UI库，它只提供了一组CSS组件。jQuery WeUI 中使用的是官方WeUI的CSS代码，并提供了jQuery/Zepto版本的API实现。因为直接使用了官方的CSS，所以你不用担心跟官方版本的冲突。实际上 jQuery WeUI == WeUI + jQuery插件。
项目地址：
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：4233294次
积分：45358
积分：45358
排名：第72名
原创：586篇
转载：514篇
译文：19篇
评论：862条
(3)(3)(1)(2)(2)(1)(5)(4)(1)(2)(2)(4)(3)(1)(3)(6)(3)(4)(2)(1)(4)(1)(2)(5)(1)(2)(1)(1)(2)(2)(4)(3)(3)(2)(2)(2)(2)(5)(2)(3)(6)(8)(8)(4)(2)(3)(2)(3)(5)(8)(5)(9)(8)(2)(2)(2)(11)(4)(3)(4)(6)(5)(4)(6)(4)(5)(9)(7)(9)(9)(3)(6)(6)(4)(4)(3)(4)(8)(5)(6)(7)(4)(8)(4)(7)(6)(3)(4)(4)(8)(4)(6)(4)(3)(6)(6)(8)(14)(8)(1)(8)(17)(11)(10)(12)(6)(20)(28)(14)(8)(16)(8)(18)(26)(23)(24)(13)(29)(29)(51)(34)(14)(12)(19)(16)(20)(30)(7)(6)(5)(15)(14)(9)(9)(7)(12)(14)(5)(18)(7)(46)}