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

 一、前端思维导图

二、项目原型图（UI图）

涉及的页面大概有20+，有兴趣可以去招人做一下UI。

三、前端app项目创建

1、首先注册APICloud（www.apicloud.com），注册完后进入后台创建app，选择混合开发的app。

2、下载调试工具自定义loader安装包

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

3、APICloud Studio3拉取代码 

APICloud Studio3是APICloud的开发工具，用来开发代码从而和手机端的app进行同步，我们也可以用来管理代码，可以同步到云端，可以安装git插件，可以安装断点调试等等，是一个全方位的工具。

点击项目，导出云端检出。

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>