作者:手浪用户2602881857 | 来源:互联网 | 2023-05-18 02:10
题外话,话说今晚一边吃饭一边看《蜡笔小新》XX部之北海道旅行,心情轻轻松松的,纯粹的搞笑场景让我回想起小时候看《蜡笔小新》的感觉,又有点不一样了,不知道怎么说。还
题外话,话说今晚一边吃饭一边看《蜡笔小新》XX部之北海道旅行,心情轻轻松松的,纯粹的搞笑场景让我回想起小时候看《蜡笔小新》的感觉,又有点不一样了,不知道怎么说。
还是步入正题吧,“玩转创意街”是我第一个相对完整的作品,在设计这个原型和交互的过程中,我尽量去参考现有比较出名的app,像微信,QQ,蘑菇街,创意相关,快看漫画等等,进行快速的对比和设计,同时体验这些app的交互效果。我相信站在巨人的肩膀上,我可以看得更远!
设计完这个系统以及界面之后,首先需要先搭建开发环境,webstorm基本上没有多大问题,主要是ADT和cordova,
ADT需要配置好java环境,更新android-tool的版本号等,cordova主要会遇到编译不成功的问题,我已收录在以下的csdn博文里面:http://blog.csdn.net/chenshuyang716/article/details/50969970
然后对“玩转创意街”进行代码架构的组织,在毕设实现过程中,我需要在ADT 以及在webstorm上进行IDE的切换,如下图1所示显示在ADT 上的代码目录,主要是按照模块放置view:
其中,json对象参数中“placeholder”是指一开始加载的伪图片url,”effect”是指图片出现的特性效果,
“threshold”是指当图片加载到的某个可视化位置才出现真正的图片。
2.轮播图片,主要应用在首页以及用户创意的详情页面,使用swiper插件;
3.corodva获取本地相册以及拍照上传到服务器的核心代码如下:
var pictureSource; // 定义图片路径
var destinationType; // 定义输出格式
document.addEventListener("deviceready",onDeviceReady,false);
// 设备准时操作
function onDeviceReady() {
pictureSource=navigator.camera.PictureSourceType;
destinatiOnType=navigator.camera.DestinationType;
}
// 拍照成功时,相关事件操作
function onPhotoDataSuccess(imageData) {
$backlayer.hide();
var $img=$(".img-lib").eq(clickTimes);
$img.attr("src","data:image/jpeg;base64," + imageData);
$img.css("display","inline-block");
clickTimes++;
}
//选取本地图片成功时操作
function onPhotoURISuccess(imageURI) {
$backlayer.hide();
var $img=$(".img-lib").eq(clickTimes);
$img.attr("src",imageURI);
$img.css("display","inline-block");
clickTimes++;
}
//拍照控制
function capturePhoto(source) {
navigator.camera.getPicture(onPhotoDataSuccess, onFail, {
quality:70,
allowEdit: true,
destinationType: destinationType.DATA_URL
});
}
//选取图片操作
function getPhoto(source) {
// Retrieve image file location from specified source
navigator.camera.getPicture(onPhotoURISuccess, onFail, {
quality: 50,
destinationType: destinationType.FILE_URI,
sourceType: source
});
}
//拍照失败操作
function onFail(message) {
layer.msg('Failed because: ' + message);
}
我设置最多只能9张图片,因此我在js文件中设置了一个全局变量“clickTimes”,初始化为0,每成功获取一张图片,我就让变量自加1,如果成功删除一张图片便会自减1,每次触发“从手机中选择”以及“拍照”的按钮事件会先判断clickTimes是否小于9,满足条件才会允许获取图片和调用摄像头。
4.在首页展示图片方面,我参考蘑菇街的图片,在图片展示方面我做了一个比较好的处理,如果图片的张数是一张,宽高都是100%,如果是两张或者四张,图片宽高将占据父元素的49%,如果是三张以及小于九张的图片,图片的宽高将占据父元素的32%,图片核心代码如下
//判断图片的张数
common.testImg=function($img,$imgParent){
var length=$img.length;
if(length>0){
if(length==1){
$img.css({"height":"300px","width":"100%"});
}else if(length==2||length==4){
$img.css({"height":"200px","width":"49%"});
}else{
$img.css({"height":"100px","width":"32%"});
}
}else{
$imgParent.css("height","0px");
}
}
实现效果图(按照模块区分)如下: