APP開發平臺 > Blog > 使用APICloud開發物流倉儲app

一、前端思維導圖

 

二、項目原型圖(UI圖)

初版原型地址原型鏈接 《外貿類》 ,涉及的頁面大概有20+,有興趣可以去招人做一下UI。

 

三、前端app項目創建

1、前端APICloud后臺(www.46uv.com/console)創建app,創建混合的開發的app。

 

2、下載調試工具自定義loader安裝包

自定義loader是一個安卓或iOS的安裝包,可以裝到收集端,從而進行js開發,將代碼同步到原生app里面來,從而進行快速的開發。

 

3、APICloud Studio3拉取代碼 

APICloud Studio3是APICloud的開發工具,用來開發代碼從而和手機端的app進行同步,我們也可以用來管理代碼,可以同步到云端,可以安裝git插件,可以安裝斷點調試等等,是一個全方位的工具。下載地址:http://www.46uv.com/studio3

點擊項目,導出云端檢出。

 

4、創建證書

一鍵創建安卓證書,這個小技巧可以用在別的安卓或者其他的證書開發,這樣節省了,創建證書的時間,讓我們擁有一個百年的安卓證書。

 

5、真機同步功能

該功能是第2步和第3步的集合,通過自定義loader和APICloud Studio3,將手機和電腦至于同一個WIFI下面,這樣他們就在同一個波段下面了,通過IP地址和端號將兩個連在一起,可以同步代碼。(注意可能遇到問題,有些需要給app設備讀取存儲的權限)

 

6、項目開發使用框架

該項目是使用Vue Cli來開發,Vue Cli創建的單頁面的項目,將APICloud里面的API的方法集成到Vue的框架里面,其中window.apiready = () => { createApp(App).use(router).use(Vant).mount('#app') }這樣API的方法每個頁面都可以使用,還有就是打開頁面的openwin的方法,api.openWin({ name: "index",url: "./index",});這樣將index路由的頁面可以打開。通過頁面引入let api = window.api;將APICloud所有的API的方法引入到頁面當中。

 

四、App功能講解

1、App的多語言開發

主要的思路是,將一個頁面的所有元素進行多語言話,例如tip,對應著英文,對應著中文,對應著韓文,有三個文件,tip中文文件,tip中文文件,tip韓文文件,當我們選擇中文時候,就是選擇的tip的中文文件,所有對應的都是中文。如果我們選擇韓文,就是對應的選擇的韓文文件,所有對應的都是韓文。

請看碼云的源碼Chan/vue多語言例子。

中文

const cn = {
    selsct:{
		title:'請選擇物流',
        con: ' 威??蛇_鴨中韓物流',
        han: 'one world 韓中物流'
    }}export default cn;

韓文

const han = {
    selsct:{
	title:'??? ??????.',//這里的韓文也是請選擇物流
        con: '???? ??? ??',//威??蛇_鴨中韓物流
        han: '???? ????'//這里的韓文也是one world 韓中物流
    }}export default han;

<template>
  <view>
    <view class="_select"> 請您選擇語言 </view>
    <div class="_image1" @click="goindex('domestic')">
      <div class="_title">中文</div>
      <img src="@/assets/zhonghan.png" style="margin: 0 auto; width: 100%" />
    </div>
    <div class="_image1" @click="goindex('overseas')">
      <div class="_title">韓文</div>
      <img src="@/assets/hanzhong.png" style="margin: 0 auto; width: 100%" />
    </div>
  </view></template><script>let api = window.api;export default {
  data() {    return {};
  },  methods: {    async goindex() {
      api.openWin({        name: "index",        url: "./index",
      });
    },
  },
};</script><style>._select {  font-size: 24px;  font-weight: 400;  color: #333333;  line-height: 100px;
}._image1 {  margin: 0px 27px;  position: relative;  margin-top: 27px;
}._image1 img {  height: 102px;
}._title {  position: absolute;  height: 100%;  line-height: 102px;  text-align: center;  left: 10%;  top: 10%;
}</style>

 

2、掃一掃功能

首先在APICloud的后臺,將掃一掃模塊添加到項目當中,然后添加好了插件后重新自定義loader,手機端重新安裝。根據模塊文檔提供的方法來使用該模塊,該模塊可以在js代碼里面調用。對于我們的項目,可以用來識別貨物的訂單號,可以用來識別置物架的號碼。這樣對于操作員來說很簡單。

這個功能運用到,倉庫出入庫里面,當倉庫入件包裹入庫件掃碼,貨物架掃碼。

//樣式<template>	<view>
		<view class="tishi">掃一掃單號快速入庫</view>
		<view class="content">
			<van-cell-group inset>
			<van-cell title="快遞單號" titleStyle="font-size: 28rpx;font-weight: 600;color: #333333;"
					icon="https://qrcode.deui.cn/xing.png">
			<input type="text" v-model="danhao" placeholder="請掃一掃快遞單號" slot="label"  />
			<image src="../../../static/images/saoyisao.png"  slot="value" class="saoyisao" @click="saoyisao()"  mode=""></image>
				</van-cell>
			</van-cell-group>
		</view>

		<view class="foot">
			<view class="bt" @click="tijiaoruku()">提交出庫</view>
		</view>
	</view></template>//主要方法saoyisao(){let _this =this;var zyHmsScan = api.require('zyHmsScan');var param = {    //returnAll:true};
zyHmsScan.openDefaultView(param,function(ret){  //  alert(JSON.stringify(ret));_this.danhao=ret.result
});
}

 

3、卡片列表

卡片列表這個功能,通過橫向等分,設置界面。首先這個頁面通過各個ui的插件庫很好的實現,如果自己寫的話大概的思路是,等分,里面套用塊狀元素,設置padding和margin,這樣可以快速的設置出來兼容性良好的css。

 

4.包裹預報

包裹預報這個頁面比較難寫

(1)涉及到星號和字的對齊---可以用postion absolut實現。

<van-cell-group>
				
				<van-cell title="中國快遞單號"  titleStyle="font-size: 28rpx;font-weight: 600;color: #333333;"
					arrow-direction="right"  rightIconStyle="font-size:24rpx"
					icon="https://qrcode.deui.cn/xing.png">
					<view slot="value" ><input value="單號" /></view>
						</van-cell></van-cell-group>

(2)選擇發貨倉和快遞公司,可以快速的選擇快遞公司和倉庫

可以用APICloud自帶的地步彈框實現,可參考官方文檔:https://docs.apicloud.com/Client-API/api#50

select(){let _this =this;
api.actionSheet({    title: '請選擇',    buttons: ['威海倉', '青島倉', '深圳倉']
}, function(ret, err) {    var index = ret.buttonIndex;
_this.cang = canglists[index]
});
}

(3)添加商品,我們可以vue的雙向綁定,再加上數據的地址傳遞來實現。

5、入庫包裹狀態

包裹的入庫主要是未入庫、已入庫、待出庫、已出庫的狀態改變比較難寫,這里一般用vue class的active綁定來實現,還有就是用css after偽類來實現,如果學習偽類比較少的可以關注一下這里的內容。

//該代碼主要是用的vant的van-tabs<van-tabs v-model:active="active">  <van-tab title="標簽 1">未入庫 1</van-tab>
  <van-tab title="標簽 2">已入庫</van-tab> 
  <van-tab title="標簽 3">未出庫</van-tab>
 <van-tab title="標簽 4">已出庫</van-tab></van-tabs>//用到的vant的list組件來構成的下拉刷新的<van-list
  v-model:loading="loading"
  :finished="finished"
  finished-text="沒有更多了"
  @load="onLoad">
  <van-cell v-for="item in list" :key="item" :title="item" /></van-list>

 

6、我的地址

我的地址這個頁面是很平常的列表頁面,我們可以通過UI類插件來實現。就是這個背景的漸變色

background: linear-gradient(156deg, #C7EBFF 0%, #70ADFF 100%);有機會可以看一看。

<template>
	<div>
		<div class="tishi">1收件人姓名填寫韓語英文且證件名字一致 2 若無通關序列號, 請用登錄證號代替 3地址請使用韓語填寫,精準到門牌號</div>
		<div class="content">
			<van-cell-group>
				<van-cell title="收件人" titleStyle="font-size: 28px;font-weight: 600;color: #333333;"
					arrow-direction="right" rightIconStyle="font-size:24px"
					icon="https://qrcode.deui.cn/xing.png">
					<input type="text" placeholder="請輸入收件人姓名" slot="value" v-model="consignee" class="u-slot-value" />
					</van-cell>
				<van-cell title="通關號碼/身份證" titleStyle="font-size: 28px;font-weight: 600;color: #333333;"
					arrow-direction="right" rightIconStyle="font-size:24px"
					icon="https://qrcode.deui.cn/xing.png">
					<input type="text" placeholder="請輸入通關號碼" slot="value" v-model="personalCustomsClearanceCode" class="u-slot-value" />
					</van-cell>
				<van-cell title="電話" titleStyle="font-size: 28px;font-weight: 600;color: #333333;"
					icon="https://qrcode.deui.cn/xing.png">
					<input type="text" placeholder="請輸入電話" v-model="consigneeTel"  slot="value" class="u-slot-value" />
				</van-cell>
				<van-cell title="地址" titleStyle="font-size: 28px;font-weight: 600;color: #333333;"
					icon="https://qrcode.deui.cn/xing.png">
					<input type="text" placeholder="請輸入地址" v-model="consigneeAddr" slot="value" class="u-slot-value" />
				</van-cell>


				
				
			</van-cell-group>
		
			
		</div>
		<div style="margin-top: 40px;background-color: #FFFFFF;">
			<van-cell-group>
				<van-cell title="設為默認地址" titleStyle="font-size: 28px;font-weight: 600;color: #333333;"
					icon="https://qrcode.deui.cn/xing.png">
					<van-switch   size="36" v-model="isDefault" @change="change" slot="value" class="u-slot-value"></u-switch>
				</van-cell>
			</van-cell-group>
			
		</div>

		<div class="foot">
			<div class="bt" @click="addadress()">添加地址</div>
		</div>
	</div></template><script>
	import common from "../../../common/common.js"
	import ajax from "../../../common/ajax.js"
	
	export default {
		data() {			return {				cang: "威海倉",				value:true,				consignee:"",//姓名
				personalCustomsClearanceCode:"",				consigneeTel:"",				consigneeAddr:"",				isDefault:false
			}
		},		methods: {
			change(){				console.log(this.value)
			},			async addadress(){				if(!this.consignee){
					alert('請您輸入用戶名')					return false
				}				if(!this.personalCustomsClearanceCode){
					alert('請您輸入通關號')					return false
				}				if(!this.consigneeTel){
					alert('請您輸入電話')					return false
				}				if(!this.consigneeAddr){
					alert('請您輸入地址')					return false
				}				let data ={					wxOpenId:common.fu.getStorageSync("openid"),					consignee:this.consignee,					personalCustomsClearanceCode:this.personalCustomsClearanceCode,					consigneeTel:this.consigneeTel,					consigneeAddr:this.consigneeAddr,					isDefault:this.isDefault==true?'Y':'N'
				}				console.log(data)				let direction =  common.fu.getStorageSync("direction")				if(direction=="domestic"){					let datas = await ajax.fu('POST','business/BizConsigneeAddressDomestic',data);					this.assignment(datas)
				}else{					let datas = await ajax.fu('POST','business/BizConsigneeAddressOverseas',data);					this.assignment(datas)
				}
			},
			assignment(datas){				if(datas.code==200){
					alert('添加成功')
				}
			}
		}
	}</script><style lang="scss" scoped>
	.zhuce{
		position: absolute;
		right: -28px;
		top: -1px;
		width: 24px;
		height: 24px;
		background-color: #FFF0E1;
		color: #FE5252;
		font-size: 00px;
		text-align: center;
		border-radius: 50%;
		line-height: 24px;
	}
	.jian1 {
		position: absolute;
		right: -56px;
		top: -4px;
		width: 24px;
		height: 24px;
		background-color: #FFF0E1;
		color: #FE5252;
		font-size: 10px;
		text-align: center;
		border-radius: 50%;
		line-height: 24px;
	
	}
	.jian {
		position: absolute;
		right: -30px;
		top: -1px;
		width: 24px;
		height: 24px;
		background-color: #FFF0E1;
		color: #FE5252;
		font-size: 10px;
		text-align: center;
		border-radius: 50%;
		line-height: 24px;

	}

	.foot {

		margin: 0px 16px;

		.foot_title {
			line-height: 44px;
		}

		.bt {
			height: 44px;
			line-height: 44px;
			text-align: center;
			color: #FFFFFF;
			font-size: 17px;
			background-color: #0365FC;
			border-radius: 4px;
			position: fixed;
			left: 10px;
			bottom: 10px;
			right: 10px;
		}
	}

	.content {
		// padding: 0px 32px;
		background-color: #FFFFFF;
	}

	.content1 {
		margin: 17px 16px;
	}

	.u-slot-value {
		text-align: right;
		color: red;
		position: relative;
	}

	.tishi {
		font-size: 12px;
		line-height: 23px;
		height: 45px;
		text-align: center;
		padding: 0 10px;
		background: linear-gradient(156deg, #C7EBFF 0%, #70ADFF 100%);
	}</style>

 

7、云修復

首先在APICloud Studio3 這邊的xml文件修改文件,設置開啟云修復開啟,然后提交到打包的后臺。注意一定到提交到打包的后臺, 否則會不生效。然后我們正常的包,發版。如果遇到有的頁面修改的問題,將修改后的文件上傳到APICloud的云修復的后臺,然后同步的下發下去,就可以改變原來的我們發的版本下的頁面,從而實現云修復。

 

8、閃屏廣告端設置

啟用定制廣告頁注意:啟用該功能后,應用的啟動頁將動態顯示為您在此提交的圖片。關閉該功能時,應用默認顯示“端設置”中設置的啟動頁。

 

9、云編譯

登錄自己的APICloud賬號,在對應的應用(測試)下,進行云編譯剛提交的代碼,云編譯完成后會出現APP下載的二維碼,手機掃描下載后安裝即可。從云編譯的地方編譯正式版的安卓或者蘋果iOS軟件。

APICloud是一款“云端一體”的低代碼開發平臺,可免費自助制作APP,也可進行專業APP定制開發。使用APICloud開發平臺,是用Web語言去開發iOS和Android應用,這樣將開發難度大幅降低,開發周期縮短將近一倍。此外,APICloud平臺上有上千個各式各樣的功能模塊,一鍵調用方便去開發各類App。

 

來APICloud移動應用開發平臺學習更多APP開發知識:app開發,app制作,app開發源碼下載,app開發框架,app制作模板等免費獲取。APICloud支持APP定制開發,一鍵網站自動生成app、網站轉app、網站封裝app,有網站即可生成自己的app。

 

立即免費在線制作一個APP,新手注冊即送開發大禮包

提交app定制需求,免費獲取報價和周期:

電腦請點擊https://app.apicloud.com/index?uzchannel=500

手機請點擊https://app.apicloud.com/m/quickaddcustom


高效的App定制平臺,標準化、便宜、快!

提交APP定制開發需求
人人干人人摸人人,人人干人人摸人人操,人人干人人摸人人插,人人干人人摸人人看,人人干人人摸人人入