代码部署

开源版项目(支持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
}
  1. 然后我们在根目录src/views/下新建一demo(名字自定义,这个文件夹名字要对应config/config.json文件的entry属性值)文件夹, 然后我们需要在demo文件夹下新建index.vue、index.js、config.json文件(文件名字是固定不变的),这三个文件是插件的入口文件;

  1. 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');
  1. 假如需要引用第三方库,则可以在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"
}
  1. 最后就是写业务代码了,请看代码示例

代码示例

我们简单写个列表跳详情的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>
  1. 然后我们新建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>
  1. 代码写完,我们肯定想看效果,那就要安装Hbuilderx下载地址,用Hbuilder打开项目。首先手机通过USB连接到电脑,手机需要打开开发者选项,并打开USB调试,然后 在vscode启动 npm run dev 命令,最后用Hbuilder连接手机,打开chorome浏览器,输入chrome://inspect/#devices(此地址需要访问外网,所以要整个翻墙软件),进行真机调试;



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

结束

最后编辑: 呼丽华  文档更新时间: 2024-03-05 11:49   作者:呼丽华