乐趣区

关于前端:使用-vue-开发-APICloud-应用的教程

jiezi

文档目录

一、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 背景，滚动条，是否全屏运行，主动监测更新，云修复，绑定模块的参数，权限治理等。

源码配置图

二、如何将 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.6vue 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.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.Apicloud 打包
将提交到后盾的代码进行打包成为安卓 APP 和 IOS APP 的过程。Apicloud 打包咱们把咱们改的代码提交到 APICloud 的后盾，留神咱们启动页的门路，须要改的含有 dist 的绝对路径而不是 http 咱们开发的门路。

编译正式包：点击后盾的控制器，点击外面的云编译，抉择咱们要编译的平台，利用类别，利用名称等，抉择打包，而后期待打包实现，这样咱们就实现了 APICloud 的开发。
两头可能波及到须要创立安卓证书和苹果证书，这个博客有创立证书教程：超具体图文保姆级教程：APICloud App 开发新手入门（四）
苹果证书：iOS 创立苹果证书、制作 p12 证书流程_隔壁老瓦的博客 – CSDN 博客_苹果 p12 证书

退出移动版