共计 8378 个字符，预计需要花费 21 分钟才能阅读完成。
一、前端思维导图
二、我的项目原型图（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;
<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/Cli…
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 软件。
