浙政钉小程序开发指南

吉林纲丝 發表於 2023-3-6 13:43:00

<h1 id="使用uni-app开发浙政钉小程序指南">使用uni-app开发浙政钉小程序指南</h1>
写在前面：本篇文章为浙政钉小程序开发流程，非H5微应用。
本文参考自博主@晓峰666的文章https://blog.csdn.net/qq_44766377/article/details/120953452，本文针对一些常见问题进行补充，方便后续查阅。
<h2 id="主要开发流程">主要开发流程</h2>
1.让公司的专有钉钉超级管理员给开发人员权限
2.使用uniapp创建项目
3.下载开发工具(小程序开发者工具，专有钉钉App) 配置专有钉钉开发环境
4.实现免登（开发前期可先通过手动登录，写完业务逻辑后再写免登）
5.根据业务开发
6.专有钉钉上线（开发环境）
7.配置专有钉钉工作台（这个需要公司专有钉钉超管来配置）使用者可在专有钉钉App工作台看见该小程序
8.上线浙政钉，填写上线材料交给业主让业主去提交内网工单
9.工单通过会有专门的人员联系业主或者开发人员将正式的appke 和一些参数给到开发人员
10.配置浙政钉开发环境（让业主在他们的系统里面给你创建一个浙政钉账号，或者叫业主单位给你一个他们部门闲置的账号）
11.将正式环境的参数替换，埋点
12.浙政钉上线
接下来我将分3个部分来写，分别是专有钉钉开发上线阶段、正式上线浙政钉阶段、常见问题
<h1 id="专有钉钉开发上线阶段">专有钉钉开发上线阶段</h1>
<h1 id="一首先你得有一个-专有钉钉的账号">一.首先你得有一个专有钉钉的账号</h1>
叫你们公司的开放平台的管理员给你注册一个你的账号，你再去拿着你的注册的手机号和你的姓名去激活（注册成功会发短信提醒你）在短信链接里面去下载专有钉钉进行激活（还有就是，你开发中用到什么权限，记得叫管理员给你授权）
专有钉钉下App载地址
https://dg-work.cn/download/?spm=a2q2b.13441934.0.0.26d86fbaf4kgen
专有钉钉门户地址
https://openplatform-portal.dg-work.cn/portal/?spm=a2q2b.13441934.0.0.6e7d6fbao4SMsZ#/helpdoc?apiType=QUICK_START&docKey=3355321
<h1 id="二超管给开发人员添加权限">二.超管给开发人员添加权限</h1>
按照文档操作即可，不再过多赘述
<img src="https://img2023.cnblogs.com/blog/2273512/202303/2273512-20230306133244371-473626027.png" alt="" loading="lazy">
<h1 id="三在专有钉钉-创建你要的项目">三.在专有钉钉创建你要的项目</h1>
登录专有钉钉门户
创建应用，应用类型选择小程序
创建完毕后如下图所示
<img src="https://img2023.cnblogs.com/blog/2273512/202303/2273512-20230306133344299-308290374.png" alt="" loading="lazy">
然后把一起开发的小伙伴也拉进来
<img src="https://img2023.cnblogs.com/blog/2273512/202303/2273512-20230306133515095-1220380813.png" alt="" loading="lazy">
<h1 id="四下载开发工具和配置文件-创建小程序">四.下载开发工具和配置文件创建小程序</h1>
<img src="https://img2023.cnblogs.com/blog/2273512/202303/2273512-20230306133521985-726395583.png" alt="" loading="lazy">
这个配置文件是有用的，先下载下来。
<h3 id="1开发uni-app需要使用hbuilder-x编辑器请自行下载">1.开发uni-app需要使用Hbuilder X编辑器，请自行下载</h3>
<h3 id="2创建一个uni-app项目以下两种方式都可以">2.创建一个uni-app项目，以下两种方式都可以</h3>
tip：题外话，如果开发的是H5微应用，请用方式二vue-cli创建
方式一：使用Hbuilder X
<img src="https://img2023.cnblogs.com/blog/2273512/202303/2273512-20230306133604502-642598080.png" alt="" loading="lazy">
方式二：使用vue-cli创建
<pre><code class="language-js">//使用vue-cli创建，我用的是vue2开发，命令如下
vue create -p dcloudio/uni-preset-vue my-project
</code></pre>
<h3 id="3运行项目">3.运行项目</h3>
首先设置Hbuilder X的运行配置，把刚刚下载的小程序开发者工具的安装路径写上去
工具->设置->运行配置
<img src="https://img2023.cnblogs.com/blog/2273512/202303/2273512-20230306133631873-169614820.png" alt="" loading="lazy">
运行->运行到小程序模拟器->支付宝小程序开发者工具
<img src="https://img2023.cnblogs.com/blog/2273512/202303/2273512-20230306133637477-1532130023.png" alt="" loading="lazy">
选mPaas->小程序
<img src="https://img2023.cnblogs.com/blog/2273512/202303/2273512-20230306133642041-198888364.png" alt="" loading="lazy">
登录
<img src="https://img2023.cnblogs.com/blog/2273512/202303/2273512-20230306133650097-60194542.png" alt="" loading="lazy">
把刚才下载的配置文件上传上去
<img src="https://img-blog.csdnimg.cn/5b3a994598c54d348480f322fa722c0e.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAcXFfNDQ3NjYzNzc=,size_16,color_FFFFFF,t_70,g_se,x_16" alt="img" loading="lazy">
<h3 id="4白名单配置不配置就无法真机调试">4.白名单配置（不配置就无法真机调试）</h3>
让公司专有钉钉超级管理员查看一下你的UID
<img src="https://img-blog.csdnimg.cn/da5e37d5a91a4c23836b54722b46bda9.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAcXFfNDQ3NjYzNzc=,size_20,color_FFFFFF,t_70,g_se,x_16" alt="img" loading="lazy">
如果要添加多个UID 请用,隔开（英文的半角逗号）
<img src="https://img-blog.csdnimg.cn/da5e37d5a91a4c23836b54722b46bda9.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAcXFfNDQ3NjYzNzc=,size_20,color_FFFFFF,t_70,g_se,x_16" alt="img" loading="lazy">
<img src="https://img2023.cnblogs.com/blog/2273512/202303/2273512-20230306133745390-816358548.png" alt="" loading="lazy">
<h1 id="五免登录">五.免登录</h1>
专有钉钉API地址其中H5微应用和小程序的API是通用的
先安装专有钉钉的API
<pre><code class="language-js">npm install gdt-jsapi
</code></pre>
调用免登API
<pre><code class="language-js">import * as dd from 'gdt-jsapi'
...
dd.getLocation().then(ret => {
console.log(ret)
}).catch(err => {
console.error(err)
})

</code></pre>
<h1 id="六根据业务开发">六.根据业务开发</h1>
根据业务开发小程序的功能
<h1 id="七专有钉钉上线">七.专有钉钉上线</h1>
开发完成后上传版本
<img src="https://img-blog.csdnimg.cn/0370aad47f08420fa2c5346b857b5aff.png" alt="img" loading="lazy">
上传完后，在专有钉钉开放平台将项目上线
<img src="https://img-blog.csdnimg.cn/0d2fbfabe7bd497f83d53c9fea89189d.png" alt="img" loading="lazy">
<h1 id="八配置专有钉钉工作台">八.配置专有钉钉工作台</h1>
让管公司钉钉超级理员登录下面链接
统一登录中心
https://console.dg-work.cn/console/home#/dashboard
<img src="https://img-blog.csdnimg.cn/2441ae4916c04693867f640371262766.png" alt="img" loading="lazy">
点击应用管理
<img src="https://img-blog.csdnimg.cn/5e1ca7165a01482bb71f5ebfaa4bc1ef.png" alt="img" loading="lazy">
将应用添加上去
<img src="https://img-blog.csdnimg.cn/098767ab4f354542a4cb86f05cd8bcad.png" alt="img" loading="lazy">
然后回到刚才工作台点击配置
<img src="https://img-blog.csdnimg.cn/0b8f5a755958451a9a4e14c6e52b3c72.png" alt="img" loading="lazy">
保存好以后就可以了
打开手机专有钉钉
点击工作台
左上角点击切换工作台（切换到你应用在那个工作台上线就切换到那个）
然后就能看见你的应用了。
到此专有钉钉开发流程结束
<h1 id="浙政钉开发上线阶段">浙政钉开发上线阶段</h1>
上线需要提交一些材料，让对接的同事去做就行了。
<h1 id="一配置浙政钉开发环境">一.配置浙政钉开发环境</h1>
配置文件就是登录时用到的那个，上线浙政钉需要用正式环境的配置文件，让对接的同事去要一下
<img src="https://img-blog.csdnimg.cn/a67962247628447099d1a27e5dbc4473.png" alt="img" loading="lazy">
上传配置文件
<img src="https://img2023.cnblogs.com/blog/2273512/202303/2273512-20230306133951464-337318629.png" alt="" loading="lazy">
此时登录二维码变成浙政钉扫码登录（需要业主给你浙政钉账号或者让业主来扫码）
问业主要他们的UID，把UID填入白名单，这里的UID要业主的（开发流程第十条）关联应用
<img src="https://img2023.cnblogs.com/blog/2273512/202303/2273512-20230306134039323-2102817265.png" alt="" loading="lazy">
<h1 id="二项目改造-埋点">二.项目改造埋点</h1>
项目改造就是你用到的钉钉api使用的appkey 什么参数之类的都得替换为正式环境的
埋点网上教程很多，可参考下面这篇博客
https://blog.csdn.net/qq_21113235/article/details/126641979
<h1 id="三浙政钉上线">三.浙政钉上线</h1>
用浙政钉登录，关联应用后将代码上传
<img src="https://img-blog.csdnimg.cn/0370aad47f08420fa2c5346b857b5aff.png" alt="img" loading="lazy">
上传完成后找到浙政钉对接人
把应用标识给他请他上架一下项目后续更新项目也是如此
到此差不多就完成了，埋点是否成功得每周一才能看你（找对接人给你地址自己查）
<h1 id="常见问题">常见问题</h1>
FAQ
Q1：小程序模拟器上使用该api报错：无效参数？
<img src="https://img2023.cnblogs.com/blog/2273512/202303/2273512-20230306134118489-296210408.png" alt="" loading="lazy">
<blockquote>
A1：目前模拟器暂不支持该api的调试，请使用IDE右上角的真机调试。
</blockquote>
Q2：为什么我找不到设置白名单的地方
<img src="https://img2023.cnblogs.com/blog/2273512/202303/2273512-20230306134125245-1254415870.png" alt="" loading="lazy">
<blockquote>
A2：左上角选择mPaas 
<img src="https://img2023.cnblogs.com/blog/2273512/202303/2273512-20230306134129074-493892911.png" alt="" loading="lazy">
</blockquote>
Q3：为什么真机调试构建失败了
<blockquote>
A3：可能是没有配置白名单
</blockquote>
Q4：为什么真机调试手机上一直在loading或者转圈
<blockquote>
A4：真机调试编译前先点开项目详情，把启用小程序基础库2.0构建的勾去掉 
<img src="https://img2023.cnblogs.com/blog/2273512/202303/2273512-20230306134146947-975012007.png" alt="" loading="lazy">
</blockquote>
Q5：真机调试或项目上线后，底部的tabBar导航栏不见了
<blockquote>
A5： 
<img src="https://img2023.cnblogs.com/blog/2273512/202303/2273512-20230306141610260-1090324872.png" alt="" loading="lazy">
</blockquote>
Q6：真机调试或项目上线后，安卓机部分页面(一般是非tabBar页面)顶部的navigationBarTitleText变成了ip网址（ios正常）
<blockquote>
A6：目前不知道什么原因，我通过以下方式解决
<pre><code class="language-js">onShow(){
uni.setNavigationBarTitle({
title: '页面标题'
});
}
</code></pre>
</blockquote>
Q7：为什么我给顶部导航栏设置背景色（navigationBarBackgroundColor）后在ios上还是显示白色背景，安卓机却正常显示
<blockquote>
A7：经测试ios自定义导航栏背景颜色在专有钉钉无法正确显示，建议使用默认的颜色。 
补充：专有钉钉小程序不支持自定义导航栏，有这个想法的建议放弃。
</blockquote>
Q8：为什么扫码登陆后关联不了应用
<blockquote>
A8：不管什么环境，都需要应用管理员来扫码，专有钉钉环境可在专有钉钉门户的后台添加应用管理员。浙政钉环境只能去找浙政钉环境的应用管理员扫码了。 
<img src="https://img2023.cnblogs.com/blog/2273512/202303/2273512-20230306153108997-928770561.png" alt="" loading="lazy">
</blockquote> 
来源：https://www.cnblogs.com/hongxinc/p/zzdxcx.html

頁: [1]

琼殿技术论坛's Archiver

浙政钉小程序开发指南