查看: 3649|回复: 13
wex5/bex5学习资源——案例汇总
主题帖子积分
初级会员, 积分 130, 距离下一级还需 70 积分
初级会员, 积分 130, 距离下一级还需 70 积分
本帖最后由 zhijun 于
17:49 编辑
大家在学习和使用wex5/bex5过程中，免不了要参考一些案例。今天做了一个案例的汇总清单，包含现有的大部分案例介绍及下载地址，方便大家查阅。
另外，开发工具中包含了部分经典案例的源代码，这些案例的路径也一并附上。
=============================================================================
下载及播放音频视频案例& &
案例综合使用了cordova.file和cordova.fileTransfer组件实现文件（音频，视频，图片）的下载和存入相册的功能。
云ide开发登录页面&&&&
基于cloudX5的简单注册登录功能。实现了手机号码验证、邮箱验证、是否重复等功能
Wex5新adminLTE风格门户& &
本案例使用WeX5开发，采用AdminLTE界面风格。案例中整合了官方PC端界面的100案例，并且可以很简单快捷地使用AdminLTE提供的widget。
本案例使用WeX5开发，基于地理位置、商品交易。功能仿闲鱼，具体包括：
①登录及注册；& & ②用户头像的上传 ；& & ③鱼塘创建（鱼塘为百度地图定位到的周边建筑）；& & ④加入其它鱼塘；& &
⑤发布想要卖出的商品（可选择发布到的鱼塘及商品分类）；& & ⑥鱼塘的人气及发布数；& & ⑦购买商品；& & ⑧统计自己所发布、买到及卖出的商品。
仿一本时光& &
本案例使用WeX5开发。功能仿一本时光，具体包括：
①展示相册成品，查看介绍；& & ②手机验证登录；& & ③创建相册，支持多选图片；
④编辑相册格式，可翻页；& & ⑤下单页功能，编辑/保存地址。
微信二维码名片应用& &
功能：在微信内根据用户输入的信息生成二维码名片；微信分享。
微信退款案例 & &&&
本案例功能为微信退款。
cordova插件案例 & &&&
常用cordova插件使用说明汇总帖，包含案例与源码。
随手拍案例
路径：UI2\demo\pai&&
功能：拍照，上传图片，显示当前位置。
PC浏览器端的UI案例& &&&
本案例用WeX5来做PC浏览器端的UI。
QQ联系人列表案例 & &
本案例把QQ联系人以列表形式展现出来；
图片裁剪案例 & &
路径：UI2\demo\picCut& && && &功能：将本地图片裁剪成固定尺寸、实时查看效果、上传。
图片瀑布流布局案例 & &&&
路径：UI2\system\templates \direct\list12& && &&&
功能：图片以瀑布流的方式布局，点击小图放大显示，图片图片轮播滑动。
主从表数据同步保存& &&&
表现多表同时保存的案例。信息录入时基本信息和入职信息分别存在两个数据表中（主表和从表），点击同步保存。
在线编辑组件案例&&& &
功能：本地文件上传与在线编辑，保存文件数据到baasdata。
值唯一验证案例
这是一个BeX5案例，对值进行唯一验证。
翻船小游戏&&& &
小游戏案例，可以在微信中直接演示但需要微信第三方支持。
右下角消息提醒案例& && &
在页面的右下角弹出消息提醒框，可以控制收回时间、弹出时的动画效果等。
蓝牙案例& && &
这是一个通过蓝牙来连接外设的示例，它包括在设备上启动蓝牙、打开蓝牙设置、扫描外设设备、连接设备、断开连接等功能。
APP中打开第三方应用案例&&& &
这是一个在APP中打开第三方应用的示例。
APP中打开doc、pdf等文件案例 & && &
在APP中打开doc、pdf等文件。支持本地文件、网络文件等。
grid中显示attachmentImage上传
这是BeX5案例，在grid表格中显示通过attachmentImage上传的图片。
grid和报表中显示blobImage上传的图片案例&&& &
这是BeX5案例，在grid表格中显示通过blobImage上传的图片。
报表中显示blobImage上传的图片案例&&& &
这是BeX5案例，在报表中显示通过blobImage上传的图片。
登录案例& &&&
手机和邮箱进行验证登录案例。
记账本 & && &
路径： UI2\demo\acc_data 或 UI2\demo\accoun（前者不使用baasData访问baas）
这是WeX5的一个记账本App应用。功能包括显示账目列表、设置账目分类、记一笔、左侧滑动菜单栏。
路径：UI2\demo\taobao&&
本案例用WeX5开发，功能仿淘宝，包括：①模仿淘宝的首页展现；& & ②查看购物车；& & ③搜索页；& & ④宝贝列表和详情的展现。
仿网易 & && &
路径：UI2\demo\netease
本案例用WeX5开发，功能仿网易，包括：①模仿网易的首页展现；& & ②24小时新闻展现；& &&&③新闻列表和详情的展现；& & ④多栏目侧滑查看。
仿途牛& && &
路径：UI2\demo\tuniu
本案例用WeX5开发，功能仿途牛，包括： ①模仿途牛的首页展现；& &&&②切换城市；& &&&③旅游项目搜索；& & ④旅游项目列表和产品详情的展现；& & ⑤多栏目侧滑查看。& &
外卖案例& && &
路径：UI2\takeout
这是WeX5的一个外卖订餐App应用，功能包括：①菜单选择加入购物车；& & ②购物车下单；& & ③历史订单查看；& & ④用户信息管理。
新外卖案例
路径：UI2\demo\takeoutNew& && &&&
在之前外卖案例的基础上新增功能：动态上传图片、查看商品是否热销及下架等信息。
外卖案例后台管理
路径：UI2\demo\takeoutAdmin
这是外卖案例后台管理实例。功能包括：菜品管理，订单管理，会员管理，统计分析。
移动协同办公 & && &
路径：UI2\portal\mobile
这是BeX5的移动协同办公示例。包括工作交办、日程管理、出差管理、请假管理、客户信息、客户拜访等协同办公功能；并提供有组件、报表图表、硬件能力、外卖、订单、随手拍等丰富的演示案例。
综合演示移动端实例&&& &
路径：UI2\portal\sample
这是WeX5的综合演示示例。功能包括：List、地图定位、扫一扫、音频录播、加速度、摄像头、TodoMVC等，并有各个组件的演示案例，可以一窥WeX5移动开发的强大能力。
综合演示pc端实例
路径：UI2\portal\sample-pc2
这是BeX5的综合演示pc端实例，包括仿途牛，外卖，记账本，记账本-设置分类，简单数据，复杂数据，树形数据，主从数据，TodoMVC,touchjs等，并有各个组件的演示案例。
主题帖子积分
初级会员, 积分 130, 距离下一级还需 70 积分
初级会员, 积分 130, 距离下一级还需 70 积分
本帖最后由 zhijun 于
17:43 编辑
短信邮件注册登录案例& &
路径：UI2\demo\regLogin
功能：使用手机号或者邮箱进行注册，注册成功后可登录
加速度传感器
路径：UI2\demo\native\accelerometer
功能：获取当前设备加速度，监听设备加速度变化，停止监听 。
音频录制/播放
路径：UI2\demo\native\audio
功能：使用设备录音，播放录制好的音频文件，清除记录。
二维码扫描
路径： UI2\demo\native\barcode
功能：扫描二维码
日历插件实例
路径：UI2\demo\plugin\calendar
功能：创建自定义活动，打开本地日历应用，查找活动，删除活动，列出所有活动，创建和管理本地日历（限于iOS）
摄像头拍照/录像
路径：UI2\demo\native \camera
功能：摄像头拍照、摄像头录像。
list组件显示手机图片案例& && &
路径：UI2\demo\native\camera
功能：选择手机内的图片；显示图片及其路径。
缓存清除插件实例
路径：UI2\demo\native\clearCache
功能：清除缓存。
复制粘贴插件实例
路径：UI2\demo\native\clipboard&&
功能：复制文本内容，粘贴到另一个文本框中。
文件下载插件实例
路径：UI2\demo\native\downloader
功能：下载单个/多个文件，判断该插件是否初始化。
文件打开插件实例
路径：UI2\demo\native \fileOpener
功能：打开文件，卸载应用，判断app是否存在。
地图/地理定位
路径：UI2\demo\native \geolocation
功能：打开百度地图，获取设备位置信息，监听设备位置信息，停止监听。
键盘插件实例
路径：UI2\demo\native \keyboard
功能：显示软键盘，隐藏软键盘（适用于android设备）；禁止视图滚动（适用于iOS）。
屏幕旋转插件实例
路径：UI2\demo\plugin \screenorientation
这是屏幕旋转插件实例，
路径：UI2\demo\ native\share
功能：将当前页面分享到微博，微信，朋友圈，QQ空间，QQ。
路径：UI2\demo\native \shareInfo
功能：调用手机原生的分享方式，分享当前页面的内容。
浮动提示插件实例
路径：UI2\demo\ native\toast
功能：显示一个浮动提示框，手动隐藏浮动提示框，垂直调整显示位置。
视频播放插件实例
路径：UI2\demo\native \videoplayer
功能：输入视频路径，点击播放。
本地列表插件实例
路径：UI2\demo\native \actionsheet
功能：创建/删除分享列表，显示一个Logout的列表，5s后自动关闭。
app后台运行实例
路径：UI2\demo\native \backgroundMode
功能：激活/终止app后台运行模式，终止app后台运行模式，设置默认配置，设置slient。
语音搜索实例
路径：UI2\demo\native \voiceSearch
功能：点击“按住说话”说出想要查看的书籍进行语音搜索。
路径：UI2\demo\comments
功能：编辑姓名和评论内容，点击提交进行评论。
对话框实例
路径：UI2\demo\dialog
功能：空对话框，列表单选，列表多选，树形单选，树形多选。
初始页实例
路径：UI2\demo\initPage
功能：手动输入初始页域名，二维码扫描设定，APP内置初始页。
消息推送实例
路径：UI2\demo\misc\message
功能：选中联系人，编辑消息标题、消息类型、消息页面内容，点击发送进行消息推送。
路径：UI2\demo\misc\todoMVC
功能：待办事项的增加的删除。
echarts实例
路径：UI2\demo\misc\echarts
功能：echarts图表的展示 。
还可以点击这里，查看插件的详细介绍和使用方法：
主题帖子积分
高级会员, 积分 776, 距离下一级还需 224 积分
高级会员, 积分 776, 距离下一级还需 224 积分
我想说的是，这个链接地址不正确
图片裁剪案例& &&&查看/下载
路径：UI2\demo\picCut& && && &功能：将本地图片裁剪成固定尺寸、实时查看效果、上传。
还好，下边有这个链接，里面有正确的
还可以点击这里，查看插件的详细介绍和使用方法：
主题帖子积分
初级会员, 积分 130, 距离下一级还需 70 积分
初级会员, 积分 130, 距离下一级还需 70 积分
我想说的是，这个链接地址不正确
非常感谢你的细心提醒，下载地址已经修复
主题帖子积分
初级会员, 积分 183, 距离下一级还需 17 积分
初级会员, 积分 183, 距离下一级还需 17 积分
主题帖子积分
初级会员, 积分 183, 距离下一级还需 17 积分
初级会员, 积分 183, 距离下一级还需 17 积分
主题帖子积分
新手上路, 积分 3, 距离下一级还需 47 积分
新手上路, 积分 3, 距离下一级还需 47 积分
很多页面不存在……
主题帖子积分
初级会员, 积分 130, 距离下一级还需 70 积分
初级会员, 积分 130, 距离下一级还需 70 积分
很多页面不存在……
那些页面不存在？是百度云盘不存在下载资料吗？
主题帖子积分
新手上路, 积分 3, 距离下一级还需 47 积分
新手上路, 积分 3, 距离下一级还需 47 积分
数据库怎么导入、设置啊？
主题帖子积分
新手上路, 积分 17, 距离下一级还需 33 积分
新手上路, 积分 17, 距离下一级还需 33 积分
这2个教程在哪？
路径：UI2\demo\takeoutNew& && &&&
在之前外卖案例的基础上新增功能：动态上传图片、查看商品是否热销及下架等信息。
外卖案例后台管理
路径：UI2\demo\takeoutAdmin
这是外卖案例后台管理实例。功能包括：菜品管理，订单管理，会员管理，统计分析。
Powered byWeX5的学习材料有哪些，怎么学习快速开发平台——WeX5？WeX5教材_图文_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
上传于||文档简介
&&起​步​软​件​W​e​X教​材​文​档
阅读已结束，如果下载本文需要使用0下载券
想免费下载更多文档？
定制HR最喜欢的简历
下载文档到电脑，查找使用更方便
还剩168页未读，继续阅读
定制HR最喜欢的简历
你可能喜欢JavaScript（6）
技术篇（4）
前端时间做了一个基于微信公众号的问卷调查、数据填报的项目，在里面涉及了一些图表的分析展示，本来以为很简单的一个功能，却着实让我折腾了好长一段时间，到处查找资料、翻看API也没有找到解决办法，真的想说，啥事还是得靠自己，是什么问题呢，请听我慢慢道来。。。
首先，得感谢起步强大的移动开发平台：wex5，让我们的基于微信公众号的项目开发不再是什么难事
下面要说的就是wex5集成echarts实现折线图的不同区间不同颜色的显示问题！
一、效果图
先上几张效果图感受一下wex5平台的开发之快和百度echarts功能的强大吧!!!轻松集成到微信公众号中去
二、WeX5介绍
wex5平台是北京起步公司开发的面向移动应用的开源平台
定位：开发面向消费者和公众的开放应用系统
适用：一般app、电商app、客服app、会员app、微店微商等
前端：安卓app/苹果app/微信服务号/PC web app
后端：后端数据处理组件，对接各主流技术平台
费用：完全开源，彻底免费，无任何限制
关于该平台的详细介绍，请参见官网：
三、开发思路介绍
对于echarts来说，图表的数据展示是通过series来实现的，我们的开发一般都是涉及一个series来显示所有的数据，这种情况下只会有一条线显示数据，那么反过来思考，我们如果需要两条线呢？那不就是设置两个series就可以实现了啊。按照这个思路，我们定义了两个数组存放不同区段的数据：
在对series的数据集进行转化的时候，其实要考虑的是如果某个数据不属于第一个数据daySumOld，要将daySumOld数组中的值设置为'-'，用'-'可以让某个点不展示。
废话不多说，摞代码：
//显示折线图
var daySumOld= [];
var daySumNew=[];
var time=[];
var i = 0;
var flag =
dPriceTrend.each(function(obj){
if(obj.row.val('fDate')== null){
& & & &if(i==0){ &
& & & & & daySumOld = []; &//有数据时，清空假数据
& & & & & daySumNew = [];
& & & & & time = [];
& &var chuqinlv = obj.row.val('fPrice');
var fDate = obj.row.val('fDate');
var date = new Date();
var currentDate = date.getFullYear()+'-'+self.paddNum(date.getMonth() + 1)+'-'+self.paddNum(date.getDate());
if(new Date(fDate).getTime() &= new Date(currentDate).getTime()) {
if(flag) {
//时间是倒序显示，比如9-30,9-14...这样获取顺序，第一次发现有小于当前日期的，需要将该日期赋值给daySumNew,方便蓝色线条的展示
daySumOld[i] =
daySumNew[i] =
daySumOld[i] =
daySumNew[i] = &-&;
daySumNew[i] =
daySumOld[i] = &-&;
var times = fDate.toString().substr(5);
i++;
daySumOld.reverse();
daySumNew.reverse();
time.reverse();
var option = {
text: &价格预测&,
x: &center&
& & & & & & tooltip : {
& & & & & & & & trigger: 'item'
& & & & & & },
& & & & & &/* legend: {
& & & & & & & & data:['出勤率']
& & & & & & },*/
& & & & & & toolbox: {
& & & & & & & & show : true,
& & & & & & & & feature : {
& & & & & & & & & & mark : {show: false},
& & & & & & & & & & dataView : {show: false, readOnly: false},
& & & & & & & & & & magicType : {show: true, type: ['line']},
& & & & & & & & & & restore : {show: false}
& & & & & & & & & & //saveAsImage : {show: true}
& & & & & & & & }
& & & & & & }, & & & &&
& & & & & & xAxis : [
& & & & & & & & {
& & & & & & & & & & type : 'category',
& & & & & & & & & & data : time,
& & & & & & & & & & name : &日期&,
& & & & & & & & & & nameLocation : &start&
& & & & & & & & }
& & & & & & ],
& & & & & & yAxis : [
& & & & & & & & {
& & & & & & & & & & type : 'value',
& & & & & & & & & & splitArea : {show : true},
& & & & & & & & & & name : &价格&,
& & & & & & & & & & nameLocation : &end&
& & & & & & & & }
& & & & & & ],
& & & & & & series : [
& & & & & & & & & & & {
& & & & & & & & & & &name:'价格预测',
& & & & & & & & & & &type:'line',
& & & & & & & & & & &itemStyle : {normal:{label:{show:true,position:'top',formatter:'{c}'}}},
& & & & & & & & & & &data : daySumOld
& & & & & & & & & & &//data: [daySumOld[0],daySumOld[1],daySumOld[2],daySumOld[3],'-']
& & & & & & & & &},{
& & & & & & & & & & &name:'价格预测',
& & & & & & & & & & &type:'line',
& & & & & & & & & & &itemStyle : {normal:{label:{show:true,position:'top',formatter:'{c}'}}},
& & & & & & & & & & &data : daySumNew
& & & & & & & & & & &//data: ['-','-','-',daySumNew[3],daySumNew[4]]
& & & & & & & & &}
& & & & & & ], & & & &&
& & & & & & grid:{
& & & & & & x:30,
& & & & & & x2:10,
& & & & & & y:50,
& & & & & & y2:30
& & & & };&
var myChart = echarts.init(this.getElementByXid('div8'));
myChart.setOption(option);
1.选择一个好的平台非常重要，wex5平台在开发手机应用和微信应用方面非常的适合；
2.集成echarts，需要对echarts的api非常的熟悉，如果api没有提到的，也可以自己不断尝试发现解决问题的方法。
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：19870次
排名：千里之外
原创：20篇
转载：11篇
(3)(1)(2)(1)(4)(4)(4)(3)(1)(2)(6)}