设计一个好看的app

     设计一个好看的app

第一次开发app，还是遇到了很多困难，之前一直在写后端的东西，这一次写app也是一个尝试吧，直接上几个页面吧

1.登录页面后台使用的是java编写的接口，登陆过一次以后会把用户名和密码存入到本地文件中，第二次登陆会自动验证
2.首页的折线图使用了echars，生成了饼状图和折线图
function echars(){
var myChart = echarts.init(document.getElementById(‘div1’));
// 指定图表的配置项和数据
var option = {
backgroundColor: ‘#D2F9FF’,
title: {
text: ‘温度变化表’
},

        grid: {
            left: '1%',
            right: '1%',
            bottom: '1%',
            containLabel: true
        },
        toolbox: {
          top:0,
          feature: {
              //点击图表可直接将柱形图与折线图进行切换

              magicType: {show: true, type: ['line', 'bar']},

          }
      },
      tooltip: {
       trigger: 'axis'
   },
   legend: {
    data:['温度变化表']
},
xAxis: {
    data: ["1:00","3:00","6:00","9:00","12:00","15:00","18:00"]
},
yAxis: {
   name:'℃'

},
series: [{
name: ‘出水温度:℃’,
type: ‘line’,
data: [30, 40, 60, 80, 88, 12, 22],
itemStyle: {
normal: {
color: “#12cf96”,//折线点的颜色
lineStyle: {
color: “#12cf96”//折线的颜色
}
}
},
},
{ name: ‘回水温度:℃’,
type: ‘line’,
data: [10, 10, 20, 50, 45, 10, 15],
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

}
function echars1(){
 var myChart = echarts.init(document.getElementById('div2'));
 option = {
    title: {
        text: '用料分析'
    },
    grid: {
        left: '1%',
        right: '1%',
        bottom: '1%',
        containLabel: true
    },
    tooltip: {
        trigger: 'item',
        formatter: '{a} 
{b}: {c} ({d}%)'
    },
    legend: {
        orient: 'vertical',
        left: 200,
        bottom:30,
        data: ['用料', '余料', ]
    },
    graphic:{
        type:"text",
        left:"center",
        top:"45%",
        style:{
            text:"总供料 8t",
            textAlign:"center",
            fill:"#333",
            fontSize:30,
            fontWeight:300
        }
    },
    series: [
    {
        name: '',
        type: 'pie',
        radius: ['50%', '70%'],
        avoidLabelOverlap: false,
        label: {
            show: false,
            position: 'left'
        },
        emphasis: {
            label: {
                show: true,
                fontSize: '20',
                fontWeight: 'bold'
            }
        },
        labelLine: {
            show: false
        },
        data: [
        {value: 3, name: '用料'},
        {value: 5, name: '余料'},

        ]
    }
    ]
};
myChart.setOption(option);

}

f

 3.工单中的导航功能使用了百度地图的定位和路线规划功能，可以实时的获取自己的所在位置，然后根据自己所在位置和目的位置生成路线规划

 3.文档的下载和预览功能实现原理是先把网络上的资源下载下来，然后系统检测本地所有的已安装软件，找出能够打开此文档的软件然后以列表的方式从app底部弹出

4.工单中的上传图片功能会首先扫描手机本地资源，找出所有的图片供用户选择，然后使用一个异步把图片上传到阿里云的s3服务器，本地数据库保存一个图片的路径
function photograph(){
var src1= $api.byId(‘src1’);
api.getPicture({
sourceType: ‘library’,
encodingType: ‘jpg’,
mediaValue: ‘pic’,
destinationType: ‘base64’,
allowEdit: true,
quality: 50,
targetWidth: 750,
targetHeight: 750,
saveToPhotoAlbum: false
}, function(ret, err) {
if (ret) {
if (ret.base64Datanull||ret.base64Data"") {
$api.attr(src1,‘src’, “…/image/图片框.png”)

  }else{

   $api.attr(src1,'src', ret.base64Data)

}

} else {
alert(JSON.stringify(err));
}

});
}
整个app大概就是这样，第一次写博客，大家多多包涵，如果有什么技术方面问题或者建议，欢迎评论，最后给大家一个福利http://datav.aliyun.com/tools/atlas/#&lat=30.37018632615852&lng=106.68898666525287&zoom=3.5，这个网址可以使根据你选择的地图区域生成json文件，可以远程访问或者下载到本地，功能强大。