設計一個好看的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} <br/>{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檔案，可以遠程訪問或者下載到本地，功能強大，