使用vue开发APICloud软件APP的教程-阿里云开发者社区

一、APICloud创建程序

1、APICloud后台创建应用

2、APICloud拉取代码，APICloud开发工具地址

APICloud开发工具PC端，先下载APICloud开发工具，打开开发工具后点击项目，导入项目，云端云端检出，可以看到项目目录，可以将项目拉取下来。

3、APICloud自定义apk 的loader 创建测试应用的程序。

如何自定义loader ：登录APICloud的官网，到达控制台，选择添加模块（可以添加h5不能实现的功能模块），点击模块下的自定义loader，点击编译xxx自定义loader。

将自定的loader下载到手机端，安装后打开，如果遇到问题，可能是需要打开此app的存储，照相的权限。

4.APICloud应用端的整体配置

整体的配置在config.xml文件下来配置，应用信息，偏好设置，模块的绑定，权限编辑等。

我们可以编辑源文件，改变里面的应用的名称，应用的版本，应用的开发者，应用的启动页，应用的邮箱，应用的描述，配置全局背景，window背景，frame背景，滚动条，是否全屏运行，自动监测更新，云修复，绑定模块的参数，权限管理等。具体的配置地址：

APICloud config.xml应用配置说明 - 手机APP开发、APP制作、APP定制平docs.apicloud.com/Dev-Guide/app-config-manual

源码配置图

二、如何将 vue 运行到 APICloud APP 中

1、使用vue 创建项目，并将项目同步到APP调试

1.1、使用vuecli创建项目和多页面项目创建

1>使用 vuecli创建项目:

PC端环境依赖：nodejs、vue、npm、webpack（新版本vue不用管webpack）

正常的创建vue的项目，vue可能分文2 3+版本，老的项目都是vue2的创建方式，很多都用到了webpack ，后面的是vue create创建项目方式，我们可以创建完毕后切换到文件夹内npm install，然后npm run serve,会得到一个启动地址。

例如下图： http://192.168.2.152:8080/ 将地址配置到我们的 config.xml的输入的目录。

vue2的安装和创建项目---老项目可能用的vue2 安装 npm install vue-cli@2.9.6

vue init webpack "项目名称"

vue的最新安装和创建项目

安装 npm install -g vue-cli

安装 vue create "项目名称"

2>多页面创建

为了尽量不影响应用性能和Hybrid中原生API的用户体验的前提下，并不推荐使用Vue.js的SPA开发模式，即不推荐使用vue-cli编译出使用vue-router、vuex、axois等模块的单页面应用。我们可以单独引入html页面每个页面引入vue.js，将vue.js当做是一个渲染的插件来用，可以使用里面的模板语法，v-if，v-show，v-for等。直接用script引入vue.js的方式能最大限度的减少vue与apicloud项目的耦合度，不会与现有原生api和原生模块产生冲突。

如下图每个页面都是这种单独引入vue.js的引入模式。

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
  <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
</head>
<body>
  <div id="vue">
    {{ message }}
  </div>
</body>
<script type="text/javascript" src="./script/vue.min.js"></script>
<script type="text/javascript">
  apiready = function () {
    new Vue({
      el: '#vue', // 与标记的id相同
      data: function() {
        return {
          message: 'Hello world!'
        };
      },
    });
  };
</script>
</html>

1.2、vue+APICloud项目开发调试

如果是单页的clivue的模式需要npm run serve启动，然后将启动后台的访问地址放到如下图的config.xml里面，首先去apicloud生成自定义loader并下载，然后手机安装loader和电脑端安装的APICloud studio3应用，打开项目，下载项目，编写里面代码，然后进行wifi同步到手机端。

如果是多页面的调试，和普通的项目的调试一样，就是将html页面新建到项目里面去，后面安装自定义loder和APICloud studio3进行同步。

即手机端安装自定义loader，保证手机和电脑在同一个路由下，如图，手机端自定义loader，输入调试器的ip的地址和端口，这样就可以把前端的代码同步到手机端了。电脑端我们点击手机端的断点，我们可以看到console后的数据。

在PC端的，APICloud studio的终端-通过wif链接设备手机端安装的自定义loader

同步的时候会注意这个文件.gitignore ，如图同步的时候将忽略的文件写到.gitignore 文件中。

2、使用 vue.js 结合APICloud 多页面渲染

2.1、vue多页面引入

首先我们知道了vue的多页面是怎么创建的，然后引入方式都是一个页面一个页面打开的，

使用APICloud 有两种打开页面的方式 1>api.openWin参数传递的时候写在pageParam里面，如果打开vue的路由的页面可以这样写， api.openWin({ name: "index",url: "./index.html",});这样将index.html路由的页面可以打开。

api.openWin({
    name: 'index',
    url: './index.html',
    pageParam: {
        name: 'index'
    }
});

2>api.openFrame参数传递的时候写在pageParam里面，如果打开vue的路由的页面可以这样写， api.openFrame({ name: "index",url: "./index.html",});这样将index.html路由的页面可以打开。

api.openFrame({
    name: 'index',
    url: './index.html',
    rect: {
        x: 0,
        y: 0,
        w: 'auto',
        h: 'auto'
    },
    pageParam: {
        name: 'index'
    }
});

参数可以在新页面中通过 api.pageParam 获取。

2.2、APICloud使用使用api

最需要注意的是apiready所有的js 运行代码用到api的都要在这个函数内运行。其实就是需要等apiready准备好了，我们就可以直接调用了。

apiready此事件是在api对象准备完毕后产生，在每个Window或Frame的HTML代码中都需要监听此事件，以确定APICloud扩展对象已经准备完毕，可以调用了。

APICloud所有的文档都在这个链接APICloud APP开发文档 - 手机APP开发、APP制作、APP定制平，关于所有的手机端的APICloud给我们封装的方法都在APICloud的api文档链接，我们可以看到他给我们封装了一些基础的使用手机系统的方法，关于应用的窗口的，各种事件的等，我们都可以在这边调用。还有就是APICloud的下面的模块都是通过api的方法去引用和调用。

例如使用ajax，可以将此方法放到vue页面的methods里面，在mounted可以直接调用或者在事件里面直接可以使用。

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
  <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
  <style>
    [v-cloak] {
    display: none;
  }
  </style>
</head>
<body>
  <div id="vue" v-cloak>
    {{ message }}
    <button onclick="vm.getData();" tapmode>Button One</button>
    <div @click="getData">Button Two</div>
    <div @click="getData('Tim')">Button Three</div>
  </div>
</body>
<script type="text/javascript" src="./script/api.js"></script>
<script type="text/javascript" src="./script/vue.min.js"></script>
<script type="text/javascript">
  var vm;
  apiready = function () {
    vm = new Vue({
      el: '#vue',
      data: function() {
        return {
          message: 'Hello world!'
        };
      },
      mounted: function() {
        this.greet();
      },
      methods: {
        greet: function() {
        api.ajax({
        url: 'http://192.168.1.101:3101/upLoad',
        method: 'post',
        data: {
            values: {
            name: 'haha'
        },
        files: {
            file: 'fs://a.gif'
        }
    }
     }, function(ret, err) {
       if (ret) {
           api.alert({ msg: JSON.stringify(ret) });
        } else {
        api.alert({ msg: JSON.stringify(err) });
        }
     });
        },
        getData: function(name) {
          setTimeout(function() {
            vm.message = vm.message + name + '吃了吗？';
          }, 3000);
        }
      }
    });
  };
</script>
</html>

3、使用 vue.js 和 vue 的路由

vue.js的优势：1、【Vue.js】可以进行组件化开发，使代码编写量大大减少，读者更加易于理解；2、使用【Vue.js】编写出来的界面效果本身就是响应式的，这使网页在各种设备上都能显示出非常好看的效果 3、这一套代码可以在APICloud上面打包成为安卓应用，可以打包成为IOS引用，可以打包成为h5应用。

首先通过vue的脚手架创建项目，使用vue-cli编译出使用vue-router、vuex、axois等混合APICloud的api来写项目。

开发配置：配置vue使用APICloud的api的方法是需要在main.js里面配置window.apiready方法如图，这样配置调用的是APICloud 里面api的方法，只有在main.js这样写后同步到手机端的时候才能生效。单个vue页面上需要配置let api = window.api来调用如下图：

import { createApp } from 'vue'import App from './App.vue'import router from './router'import Vant from 'vant';import 'vant/lib/index.css';window.apiready = () => {createApp(App).use(router).use(Vant).mount('#app')}

vue有路由：

方案一：声明式导航router-link

<router-link :to="{name:'home', params: {id:1}}">

<router-link :to="{name:'home', query: {id:1}}">

<router-link :to="/home/:id">

//传递对象

<router-link :to="{name:'detail', query: {item:JSON.stringify(obj)}}"></router-link>

方案二：编程式导航 this.$router.push() 在方法中添加参数，用的比较多。

1、不带参数：

this.$router.push('/home')

this.$router.push({name:'home'})

this.$router.push({path:'/home'})

2、query传参

1.路由配置：name: 'home',path: '/home'

2.跳转：this.$router.push({name:'home',query: {id:'1'}})this.$router.push({path:'/home',query: {id:'1'}})

3.获取参数 html取参: $route.query.id script取参: this.$route.query.id

3、params传参

1.路由配置：name: 'home',path: '/home/:id'(或者path: '/home:id')

2.跳转：this.$router.push({name:'home',params: {id:'1'}})

3.获取参数 html取参:$route.params.id script取参:this.$route.params.id

4、直接通过path传参

1.路由配置name: 'home',path: '/home/:id'

2.跳转：this.$router.push({path:'/home/123'})或者：this.$router.push('/home/123')

3.获取参数：this.$route.params.id

5、传递对象(obj不能过长否则会报错)

1 query传递对象 (类似get,url后面会显示参数) JSON.stringify(obj) 转一下.

2 接收参数： JS:JSON.parse(decodeURIComponent(this.$route.query.obj))

HTML:JSON.parse(decodeURIComponent($route.query.obj))

vue的项目的运行

如果上来就是链接npm run serve的页面，可以在配config.xml，如图。ip地址是启动的本机的ip地址，注意手机和电脑在同一个wifi下面。

三、项目打包

1、vue打包

1>单页面的需要打包到dist文件里面

打包命令是vue run build ，打包文件都在dist文件夹下，如下图，dist文件里面有css img js 和index.html，

主要增加一个vue.config.js文件，修改publicpath的路径改成如下代码，这样修改了打包后访问空白bug。

注意，这个dist文件夹很重要，需要同步到APICloud平台进行打包，访问的时候访问dist/index.html路径再加上vue的路由。

这个dist文件就是我们要用的到的编译后的文件。dist文件提交到apicloud的后台再去打包。

module.exports = {
      // 使用vue-cli3打包项目，通过配置不同的指令给项目设置不一样的配置。    
      // npm run serve时会把process.env.NODE_ENV设置为‘development’；    
      // npm run build 时会把process.env.NODE_ENV设置为‘production’；    
      publicPath: process.env.NODE_ENV === 'production' ? './' : '/'}

2>多页面的不需要打包，只需要将涉及到的html文件，img，css，js文件全部提交到APICloud的后台。

2.Apiclou打包

将提交到后台的代码进行打包成为安卓APP和IOS APP的过程。Apicloud打包我们把我们改的代码提交到APICloud的后台,注意我们启动页的路径，需要改的含有dist的绝对路径而不是http我们开发的路径。

编译正式包：点击后台的控制器，点击里面的云编译，选择我们要编译的平台，应用类别，应用名称等，选择打包，然后等待打包完成，这样我们就完成了APICloud的开发。

中间可能涉及到需要创建安卓证书和苹果证书，这个博客有创建证书教程：超详细图文保姆级教程：APICloud App开发新手入门（四）

苹果证书：iOS创建苹果证书、制作p12证书流程_隔壁老瓦的博客-CSDN博客_苹果p12证书

使用vue开发APICloud软件APP的教程

一、APICloud创建程序

1、APICloud后台创建应用

2、APICloud拉取代码，APICloud开发工具地址

3、APICloud自定义apk 的loader 创建测试应用的程序。

4.APICloud应用端的整体配置

二、如何将 vue 运行到 APICloud APP 中

1、使用vue 创建项目，并将项目同步到APP调试

1.1、使用vuecli创建项目和多页面项目创建

2、使用 vue.js 结合APICloud 多页面渲染

3、使用 vue.js 和 vue 的路由

1、vue打包

2.Apiclou打包

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

使用vue开发APICloud软件APP的教程

一、APICloud创建程序

1、APICloud后台创建应用

2、APICloud拉取代码，APICloud开发工具地址

3、APICloud自定义apk 的loader 创建测试应用的程序。

4.APICloud应用端的整体配置

二、如何将 vue 运行到 APICloud APP 中

1、 使用vue 创建项目 ，并将项目同步到APP调试

1.1、使用vuecli创建项目和多页面项目创建

2、 使用 vue.js 结合APICloud 多页面渲染

3、 使用 vue.js 和 vue 的路由

1、vue打包

2.Apiclou打包

热门文章

最新文章

相关课程

相关电子书

相关实验场景

1、使用vue 创建项目，并将项目同步到APP调试

2、使用 vue.js 结合APICloud 多页面渲染

3、使用 vue.js 和 vue 的路由