1、使用vue-cli搭建环境
浙政钉和浙里办一样,都要求前后端分离,所以我们的前端代码最后会托管到IRS上,因此这就要求我们前端的代码必须能够使用npm run build
关于uniapp怎么使用vue-cli搭建环境,请移步uniapp官方文档
2、调试
浙政钉有很多API必须在特定环境下才能运行,浙政钉的官方测试环境就是专有钉钉,专有钉钉开放平台-h5应用调试工具,
但是,我这个方法死活弄不起,因此我选择了用vconsole
+专有钉钉工作台应用
调试。
步骤一:安装vconsole
npm install vconsole
步骤二:在main.js
中引入vconsole
#ifdef H5
const vconsole = require('vconsole');
Vue.prototype.$vconsole = new vconsole();
#endif
注意:正式上线项目的时候记得注释掉vconsole哦
步骤三:测试机安装专有钉钉app,专有钉钉app下载
步骤四:专有钉钉开放平台右上角会有一个开发者平台点击进入(专有钉钉账号扫码登入,如果没有需要让甲方帮你配置一个
)
应用创建成功后,点击应用那行的
详情
地址就配我们本地地址就可以了,配置好了,在应用发布里选择发布应用即可,以上步骤的官方参考
完成以上步骤,我们就可以在专有钉钉的工作台上进行调试了,以上步骤是用于专有钉钉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一定要按照规范来设计哦~
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、开发文档
其实开发浙政钉应用,官方是有很多开发文档供我们参考的,所以最好一开始就让甲方把官方的开发文档给到我们,不然后期根据规范改写好的东西真的很不爽!!