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

34次阅读

共计 6839 个字符,预计需要花费 18 分钟才能阅读完成。

文档目录

一、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 证书

正文完
 0