APP插件开发

代码部署

开源版项目（支持PC以及APP开发）： jepaas-project-frontend

1. 仓库地址

APP端插件项目： p-suanbanyun-app（je-paas-app-plugin）

1. 用vscode打开插件项目，在终端运行 cnpm i 下载所有package.json配置中的依赖包：

   npm i 或者 cnpm i

2. 当所有依赖安装完成，运行本地调试启动命令：

   npm run dev

3. 当插件开发完成，需升级到线上，则启动build命令：

   npm run build

4. build后的文件会输出在根目录app文件下，.zip文件就是插件包，我们在平台APP升级包功能上传上去，打开JEAPP功能，添加刚才的插件，并在应用中配上菜单，然后在管理中角色授权给相关角色授权访问就行了，如图：

开发标准

1. 首先我们需要在根目录config文件夹下新建config.json文件，这个文件负责我们调试或者打包哪个插件（entry），以及一些本地调试的配置；

{
  "entry": ["demo"], // 插件所在文件夹名称
  "proxyServerUrl":"服务器地址",
  "h5plus": true,
  "username": "你的账号",
  "password": "你的密码",
  "socket": false
}

2. 然后我们在根目录src/views/下新建一demo（名字自定义，这个文件夹名字要对应config/config.json文件的entry属性值）文件夹, 然后我们需要在demo文件夹下新建index.vue、index.js、config.json文件（文件名字是固定不变的），这三个文件是插件的入口文件；

3. config.json和index.js文件的内容也基本不会有太大变化；

// config.json
{
  "title":"培训插件",
  "include": [
    "mui",
    "je",
    "waves"
  ],
  "pluginName": "培训插件",
  "pluginCode": "JE-PLUGIN-DEMO",
  "describe": "新建培训插件",
  "version": "1"
}

********************************************************************

// index.js
import Vue from 'vue';

import App from './index.vue';

Vue.config.productionTip = false;
Vue.config.devtools = true;

new Vue({
  // router,
  // store,
  render: h => h(App),
}).$mount('#app');

4. 假如需要引用第三方库，则可以在config.json中做扩展，如下图方式引入；

{
  "title":"培训插件",
  "include": [
    "mui",
    "je",
    "waves"
  ],
  // 此处引入第三方的js，css等
  "files":{
    "js":["https://api.map.baidu.com/api?v=3.0&ak=你的秘钥"],
    "css": ['style.css']
  },
  "pluginName": "培训插件",
  "pluginCode": "JE-PLUGIN-DEMO",
  "describe": "新建培训插件",
  "version": "1"
}

5. 最后就是写业务代码了，请看代码示例

代码示例

我们简单写个列表跳详情的demo插件，如下：

1. index.vue 文件；

<template>
  <div class="app-plugin-demo">
    <div
      v-for="item in 10"
      :key="item"
      @tap="goDetail(item)"
      class="list"
    >
      {{ `我是列表${item}` }}
    </div>
  </div>
</template>

<script>
import { openWindow } from '@/helper';

export default {
  name: 'Demo',
  data() {
    return {

    };
  },
  created() {
    Waves.init();
  },
  methods: {
    // 跳转详情
    goDetail(item) {
      Waves.attach('.list'); // 点击水波纹效果
      openWindow({
        url: './pages_detail_index.html',
        id: '__detailView',
        title: '列表详情',
        extras: {
          item,
        },
      });
    },
  },
};
</script>

<style lang='less'>
@import "~@/theme/index.less";

.app-plugin-demo {
  background-color: #f6f6f6;
  color: #333;
  .list {
    padding: 5px 15 * @hd;
    font-size: 16 * @hd;
  }
}
</style>

2. 然后我们新建pages文件夹，在文件夹下新建detail文件夹，detail下我们一样新建index.js,index.vue,config.json三个文件，除了.vue文件其他两个文件内容基本相同，这就是详情页面，如下图：

<template>
  <div class="app-plugin-demo-detail">
    我是列表{{ detail }}的详情
  </div>
</template>

<script>

export default {
  name: 'DemoDetail',
  data() {
    return {
      detail: '',
    };
  },
  created() {
    // 获取列表页传过来的参数
    const params = plus.webview.currentWebview();
    const { item } = params;

    this.detail = item;
  },
};
</script>![](/uploads/je-train-client/images/m_747ed9eff9aa827cfd6679a500d20f8a_r.png)

<style lang='less'>
@import "~@/theme/index.less";

.app-plugin-demo-detail {
  background-color: #f6f6f6;
  color: #333;
  text-align: center;
  margin-top: 60px;
}
</style>

3. 代码写完，我们肯定想看效果，那就要安装Hbuilderx下载地址，用Hbuilder打开项目。首先手机通过USB连接到电脑，手机需要打开开发者选项，并打开USB调试，然后 在vscode启动 npm run dev 命令，最后用Hbuilder连接手机，打开chorome浏览器，输入chrome://inspect/#devices（此地址需要访问外网，所以要整个翻墙软件），进行真机调试；

4. 这样一个基本的例子就完了，待开发完所有需求，并测试没问题，则启动上面代码部署，build后上传授权等操作；

结束