使用APICloud开发物流仓储app项目实践使用APICloud开发物流仓储app项目

一、前端思维导图

文章图片

二、项目原型图（UI图）
初版原型地址墨刀原型链接《外贸类》，涉及的页面大概有20+，有兴趣可以去招人做一下UI。

文章图片

三、前端app项目创建
1、前端APICloud后台（www.apicloud.com/console）创建app，创建混合的开发的app。

文章图片

2、下载调试工具自定义loader安装包
自定义loader是一个安卓或iOS的安装包，可以装到收集端，从而进行js开发，将代码同步到原生app里面来，从而进行快速的开发。

文章图片

3、APICloud Studio3拉取代码
APICloud Studio3是APICloud的开发工具，用来开发代码从而和手机端的app进行同步，我们也可以用来管理代码，可以同步到云端，可以安装git插件，可以安装断点调试等等，是一个全方位的工具。下载地址：https://www.apicloud.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;

文章图片

._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%; }

2、扫一扫功能
首先在APICloud的后台，将扫一扫模块添加到项目当中，然后添加好了插件后重新自定义loader，手机端重新安装。根据模块文档提供的方法来使用该模块，该模块可以在js代码里面调用。对于我们的项目，可以用来识别货物的订单号，可以用来识别置物架的号码。这样对于操作员来说很简单。

文章图片

文章图片

这个功能运用到，仓库出入库里面，当仓库入件包裹入库件扫码，货物架扫码。

文章图片

//样式 //主要方法 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实现。

（2）选择发货仓和快递公司，可以快速的选择快递公司和仓库
可以用APICloud自带的地步弹框实现，可参考官方文档：https://docs.apicloud.com/Cli...

select(){ let _this =this; api.actionSheet({ title: '请选择', buttons: ['威海仓', '青岛仓', '深圳仓'] }, function(ret, err) { var index = ret.buttonIndex; _this.cang = canglists[index] }); }

（3）添加商品，我们可以vue的双向绑定，再加上数据的地址传递来实现。

文章图片

【使用APICloud开发物流仓储app项目实践】5、入库包裹状态
包裹的入库主要是未入库、已入库、待出库、已出库的状态改变比较难写，这里一般用vue class的active绑定来实现，还有就是用css after伪类来实现，如果学习伪类比较少的可以关注一下这里的内容。

文章图片

//该代码主要是用的vant的van-tabs 未入库 1 已入库未出库已出库 //用到的vant的list组件来构成的下拉刷新的

6、我的地址
我的地址这个页面是很平常的列表页面，我们可以通过UI类插件来实现。就是这个背景的渐变色
background: linear-gradient(156deg, #C7EBFF 0%, #70ADFF 100%); 有机会可以看一看。

文章图片

.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%); }

7、云修复
首先在APICloud Studio3 这边的xml文件修改文件，设置开启云修复开启，然后提交到打包的后台。注意一定到提交到打包的后台，否则会不生效。然后我们正常的包，发版。如果遇到有的页面修改的问题，将修改后的文件上传到APICloud的云修复的后台，然后同步的下发下去，就可以改变原来的我们发的版本下的页面，从而实现云修复。