精制小程序二开指南

西内6030
85 阅读7分钟

项目介绍

大家下午好，我是来自xx的前端开发xx，下面我给大家介绍下，在精制平台下，如何开发小程序。精制平台的小程序，区分为在线小程序和本地小程序（可以根据图标颜色来区分，不绝对），如下图：

本地和在线.png

主要的区别是：

  • 前端角度来说，在线小程序是一整个web项目里的一个功能页。本地小程序则是可以独立打包的一个web项目。本地小程序可以根据需求大版本和小版本快速迭代。在线小程序跟随需求大版本迭代。

开发流程

  1. 开发配置
  2. 项目改造
  3. 开发
  4. 打包
  5. 上传
  6. 测试环境验证
  7. 发布现网

开发配置（推荐）

环境配置：node14.18.3 // 可以nvm切换版本

搭建脚手架：vue-cli4.4.4

开发语言：vue2（暂不推荐vue3）// 因为一些版本较老的设备并不能兼容，有些设备是机顶盒、电视等

ui框架：element-ui,vant-ui

项目改造

  • 已有项目改造或者使用脚手架搭建vue官方默认工程

    上架为本地小程序改造步骤：

    1. 添加精制版本控制文件（必须）：根目录放置AppManifest.json，具体内容打包模块介绍。

    • 其他按需配置

    上架为在线小程序改造步骤（不展开，具体可以翻阅qiankun子应用开发文档）：

    1. 将已有项目嵌套到已存在的qiankun子应用，或者新建qiankun子应用。
    2. 添加前端路由、添加权限相关

  • 开箱即用本地小程序demo包：

    demo_本地小程序模板、aps_新qiankun子应用模板(在线小程序模板)

    内置：

    • 代码格式化配置：统一的ESLint规则和Prettier格式化插件，具体查看.eslintrc.js和.prettierrc

      • vscode插件为：Prettier - Code formatter（prettier.io）

    • 统一定制内容：

      • 统一顶部组件封装：获取不同设备顶部通知栏高度，自适应顶部组件高度，具体可查看@\components\CommonHeader\index.vue。

      • 自定义指令：权限控制的自定义指令、自定义防抖指令等，具体查看@\directive\。。。

        权限：根据角色的权限去控制节点是否显示，节点包括页面，按钮等；实现逻辑是根据当前节点唯一路径，去总路径集合查找，是否存在权限，存在则显示，不存在则隐藏。总权限会在项目初始化就调用获取，然后缓存在本地。

      • 精制接口文件：一些精制平台方法，常用例子：等待精制初始化完成回调函数、是否横屏、是否自动旋转、打开相册，获取拍照后文件在手机的地址、获取用户信息等，具体查看@\src\utils\jingzhi.js

      • 精制环境配置：

        需等待精制加载完再去渲染vue项目，确保精制功能正常。

      • 网络请求工具axios封装：统一设置请求baseURL、统一设置请求头携带的验证信息，具体查看@\src\utils\request.js

    • 精制小程序版本控制文件AppManifest.json

    • 其他脚架内置工具：element-ui,vant-ui等ui框架、路由管理、vuex等

开发

根据需求自行开发。

精制配套方法示例：

  • 是否自动旋转

    •     // 是否精制环境判断
    if (window.flutter_inappwebview) {
        window.flutter_inappwebview.callHandler('AutoOrientation') // 自动旋转
    }

  • 精制加载完成回调

    •     // 需精制加载完成后，再加载项目，确保精制功能正常使用
    new Vue({
      el: '#app',
      router,
      store,
      render: h => h(App)
    })
    ​
    // 修改为：
    window.addEventListener('flutterInAppWebViewPlatformReady', function (event) {
      new Vue({
        el: '#app',
        router,
        store,
        render: h => h(App)
      })
    })

  • 精制缓存使用(常用)

    •     // 获取项目地址，例：http://192.168.103.89:8301
    localStorage.getItem('baseUrl') // 登录后精制会在localStorage存储当前项目的基地址，精制客户端根据网络环境获取最优地址，用于发送请求。
    ​
    ​
    // 在非精制浏览器开发情况需手动设置鉴权信息；精制环境则无需手动设置
    // token 和tokenType，获取到并在请求时拼接携带即可
    localStorage.getItem('Token-Type') // 登录后精制会在localStorage存储
    localStorage.getItem('Token') // 登录后精制会在localStorage存储
    // 请求头需携带验证信息
    config.headers['Authorization'] = getTokenType() + ' ' + getToken()
    ​
    // 用户信息
    localStorage.getItem('userinfo') // 登录后精制会在localStorage存储

接口调用流程

  • 生产环境

    • 在线小程序配置

      •     // .env.production文件中
    ENV = 'production'
    ​
    # 网络请求地址代理路径
    VUE_APP_NGINX_PATH = /factory/v1

    • 本地小程序

      •     axios的baseUrl获取的精制缓存中localStorage的baseUrl

  • 开发环境

    • 代理转发，帮助解决跨域问题。具体设置：

      // vue.config.js文件中  
​
// process.env.VUE_APP_NGINX_PATH，一般是 /factory/v1
// process.env.VUE_APP_BASE_API，.env.development中配置的测试服务器地址  
​
proxy: {
  [process.env.VUE_APP_NGINX_PATH]: {
    target: process.env.VUE_APP_BASE_API,
    ws: true, // proxy websockets
    changeOrigin: true, // needed for virtual hosted sites
    timeout: 3 * 60 * 1000,
    pathRewrite: {
      ['^' + process.env.VUE_APP_NGINX_PATH]: '' // rewrite path
    }
  }
}

    • 具体实现例子及流程：

      // 自定义axios
const request = axios.create({
  baseURL: process.env.VUE_APP_NGINX_PATH, // 一般是 /factory/v1
  ...
})
​
// api
export function getalarmdata(id) {
  return request({
    url: `/api/alarms/select`,
    method: 'get'
  })
}
​
// 代理设置，在上面vue.config.js
省略。。。
​
// .env.development
VUE_APP_BASE_API = 'https://192.168.103.90:8080/factory/v1'
      1. 调用getalarmdata，url为/api/alarms/select
      2. 由于自定义了axios的baseURL，实际为/factory/v1/api/alarms/select
      3. 触发代理，pathRewrite将/factory/v1/api/alarms/select中的/factory/v1替换为空。target为目标地址，值为https://192.168.103.90:8080/factory/v1，进行拼接。
      4. 所以最终到服务器的https://192.168.103.90:8080/factory/v1/api/alarms/select

      PS：

      • 控制台显示的一般是http://localhost:4004/factory/v1/api/alarms/select
      • 本地连接测试服务器一般携带/factory/v1，因为存在nginx反向代理。
      • 本地连接后端个人服务一般无需带/factory/v1
      • 本地开发本地小程序，需自己手动替换localStorage中的Token字段值和Token-Type字段值，因为非精制环境，不会自动注入。

打包

本地小程序运行脚本进行打包，然后修改精制小程序版本控制文件AppManifest.json，压缩成.dist文件

// AppManifest.json
{
  "applicationId":"yelink.add.essence",  // emc平台识别小程序的标识；规范：首个点号之前的字符是公司标识符，例如：yelink表示渊联，后面的是小程序名称。  
  "versionName":"3.20",  // 该次打包所属需求大版本。部署时以该版本号识别需求版本
  "versionCode":7, 
      // 该次打包版本。每次打包需要在最新补丁版本号上+1。
      // 切换版本号，现网默认显示当前版本号下最新的补丁版本。
      // 补丁版本升级到现网，则会无感更新到该补丁版本。
  "allRole":true // 精制权限控制的参数，根据实际需求是否设置全部人员拥有该小程序权限
}

部署

  • 边端部署（小程序管理上传）

    • 在本地小程序小程序管理 中，新增/更新本地小程序或者在线小程序

      • 本地小程序创建页面：

        本地小程序创建页面.png

      • 在线小程序创建页面：

        在线小程序创建.png

  • 云端部署（开发者平台上传）

    • 上传压缩包
    • 部署测试环境：开发者平台--组织一栏中绑定小程序
    • 部署生产环境：提交审核，上架小程序，EMC平台--组织一栏中绑定小程序

验证

可在小程序tab栏点击图标查看小程序版本号和补丁版本信息，确认是否正确部署。

查看版本号和补丁版本.png

常见问题

权限

  • 根据接口返回数据，是否存在该按钮，该页面权限，进行过滤页面或者页面节点。

    •     // 获取所有权限集合，有区分在线小程序权限和本地小程序权限，此处是本地小程序权限
     getPermission(appId) {
          this.$store.dispatch('permission/getAllPadsUserButtonPermissions', appId)
     }
    ​
    // 权限处理
    function checkPermission(el, binding) {
      const { value } = binding
    ​
      if (value && typeof value === 'object') {
        const action = binding.value.action  // 当前节点标识字符串
        // 按钮权限全部数据
        const authList =
          store.getters && store.getters.authList.map((auth) => auth.path)
          if (authList && authList.indexOf(action) === -1) {
            // 不具备权限
            const type = binding.value.effect
            if (type === 'disabled') {
              // 禁用按钮
              el.disabled = true
              el.classList.add('is-disabled')
            } else {
              // 删除按钮
              el.parentNode && el.parentNode.removeChild(el)
            }
        }
      }

文件上传

// 精制上传文件方法 
// 获取精制自动注入的基地址
const requestUrl = localStorage.getItem('baseUrl') 
const Authorization = {
    Authorization:
      localStorage.getItem('Token-Type') +
      ' ' +
      localStorage.getItem('Token')
}
​
// 调用精制上传文件方法
window.flutter_inappwebview
    .callHandler(
      'upFile',
      `${requestUrl}/api/resource/add`, // 上传地址
      files,
      Authorization
    )
    .then(function(res) { ... })

图片回显

// 使用localstorage中的wsAddress字段值，ws替换为http,再拼接图片地址即可。
// wsAddress字段值： wss://192.168.103.90:8080
// 替换为:          https://192.168.103.90:8080

防抖

可以使用自定义指令v-debounce

// 具体实现
export default {
  inserted(el, binding) {
    let timer
    el.addEventListener('click', () => {
      if (timer) clearTimeout(timer)
      timer = setTimeout(() => {
        binding.value()
      }, binding.arg || 300) // 默认防抖时间为 300ms
    })
  }
}
​
// 使用
// @click="handleConfirmMembersMaintain"
<el-button
  v-debounce:500="handleConfirmMembersMaintain"
  type="primary"
  size="small"
>
  保存
</el-button>

扫码

// 调用精制扫码方法，调起摄像头，
window.flutter_inappwebview.callHandler("qrCode").then((res) => {
      if (res) {
        this.baseInfoForm.batch = res;
      }
    });

主线回顾(上机准备)

  1. 环境准备

    1. 代码编辑器：

      推荐vscode

      下载地址：code.visualstudio.com/Download

    2. node环境：14.x版本

      下载地址：nodejs.org/download/re…

      验证安装：

      node -v  # 应显示v14.x.x
npm -v   # 对应版本为6.14.x[6,8](@ref)

  2. 下载demo包、自建项目、已有项目改造

    demo包地址：gitlab.yelinksaas.com/chenzejie/d…

    压缩包：资料里

  3. 改造

    1. 安装依赖npm install --registry=https://registry.npmmirror.com(使用淘宝镜像加速)
    2. 允许界面查看界面效果：npm run dev
    3. 改造：修改\view\overview\index输出为Hello World2!

  4. 修改版本控制文件

    修改AppManifest.json，自定义标识符applicationId，版本号：5.23，补丁版本：1

  5. 打包部署

    编译：npm run build:prod ; npm run compress:dist

  6. 精制内部署

    使用测试环境2，邀请码、账号密码等会发放

    加入组织.png

    找到小程序管理小程序，上传压缩包，部署。

  7. 验证小程序

链接网址

工业魔方导航页：help.yelinksaas.com/manuals/ope…

demo_本地小程序模板：gitlab.yelinksaas.com/chenzejie/d…

avatar
文章
阅读
粉丝