uniapp 浙政钉h5微应用开发要点

1、使用vue-cli搭建环境

浙政钉和浙里办一样,都要求前后端分离,所以我们的前端代码最后会托管到IRS上,因此这就要求我们前端的代码必须能够使用npm run build

关于uniapp怎么使用vue-cli搭建环境,请移步uniapp官方文档

2、调试

浙政钉有很多API必须在特定环境下才能运行,浙政钉的官方测试环境就是专有钉钉,专有钉钉开放平台-h5应用调试工具,

image.png

但是,我这个方法死活弄不起,因此我选择了用vconsole+专有钉钉工作台应用调试。

步骤一:安装vconsole
npm install vconsole

步骤二:在main.js中引入vconsole

#ifdef H5
const vconsole = require('vconsole');
Vue.prototype.$vconsole = new vconsole();
#endif

注意:正式上线项目的时候记得注释掉vconsole哦

步骤三:测试机安装专有钉钉app,专有钉钉app下载

步骤四:专有钉钉开放平台右上角会有一个开发者平台点击进入(专有钉钉账号扫码登入,如果没有需要让甲方帮你配置一个

image.png

应用创建成功后,点击应用那行的 详情
image.png

地址就配我们本地地址就可以了,配置好了,在应用发布里选择发布应用即可,以上步骤的官方参考

完成以上步骤,我们就可以在专有钉钉的工作台上进行调试了,以上步骤是用于专有钉钉API(要先安装gdt-jsapi)的调试,如果是普通接口不需要调用专有钉钉API的,就让后端给一个本地的永久token,我们就像普通H5一样直接在浏览器上调试就可以了

注意:

1、每次更改应用配置都需要先把应用下架才能进行更改哦,改完后再发布即可,应用下架也是在应用发布里。
2、如果要在测试环境测试,那么我们需要再创建一个应用把地址改为测试服地址,就是本地调试有一个应用,测试调试有一个应用,两个应用是分开的,所以想调测试环境,我们需要打包上传至测试服+创建一个新应用。
3、想要调用专有钉钉API我们需要先安装npm install gdt-jsapi,安装成功后在manifest.json中引入

//全局注册dd
import dd from 'gdt-jsapi';
Vue.prototype.dd = dd

3、页面

对于浙政钉这种政务app是有很多UI规范的,所以在写页面之前,让UI一定要按照规范来设计哦~


image.png

4、上架

步骤一:修改package.json,将打包输出目录改为build UNI_OUTPUT_DIR='build'

 "build:h5": "cross-env UNI_OUTPUT_DIR='build' NODE_ENV=production UNI_PLATFORM=h5 vue-cli-service uni-build"

想要前端成功上传IRS,对于uniapp使用vue-cli搭建的项目,建议使用这种方式打包,而不是使用gbc.json更改打包路径那种方式,因为使用gbc.json,我们需要配置正确的打包后静态文件路径(确保所有的静态文件都在同一层级下,包括图片路径、js路径、index.html路径)

步骤二:修改manifest.json,添加h5配置

"h5": {
        "publicPath": "./", // 修改1 不修改此处会出现应用白屏的情况
        "router": {
            "base": "./", // 修改2 不修改此处会出现图片拿不到的情况
            "mode": "hash" // 修改3 浙政钉只支持hash路由
        }
    },

最后打包成功后,将源码压缩上传至IRS即可,node_modules这些不用一起压缩哈(IRS需要浙政钉APP扫码登录,自己和甲方沟通看哪个上传哈

5、钉钉群

在开发过程中,一定要加官方的钉钉群,有不会不清楚的一定记住去问官方人员,记住是在钉钉上加浙政钉的开发支持群,通常情况下甲方会把群号给你的,不给就去问到要

6、开发文档

其实开发浙政钉应用,官方是有很多开发文档供我们参考的,所以最好一开始就让甲方把官方的开发文档给到我们,不然后期根据规范改写好的东西真的很不爽!!

你可能感兴趣的:(uniapp 浙政钉h5微应用开发要点)