钉钉小程序 开发 PHP + 钉钉小程序 (企业内部应用)
应公司需求 需要结合钉钉开发小程序 由于公司自用 所以选择了 企业内部应用 我在做之前和做的过程中 查不到几乎可用的资料 我就把我遇到的 能想起来的,给要接触的童鞋们 参考一下吧
钉钉文档: https://ding-doc.dingtalk.com/
目前钉钉的文档还没有完善的类似微信 有很多微信有的 钉钉还没有 希望将来可以支持吧
搞不明白的去微信看看文档 基本能弄明白
1.缓存
微信 :
wx.setStorageSync("userid", data.data.userid)
wx.getStorageSync("userid", data.data.userid)
钉钉:(简直想死)
包括get 也不会让你失望(有点难受 这附近代码 我重写优化了好几次 真的 )
2.loading(钉钉文档里 在我开发时 我找遍了 没有,我拿着微信的代码 ,有loading 但无文字 我就试了一个content 就可以了 避避坑)
钉钉:dd.showLoading({content: '正在加载',})
微信:wx.showLoading({title: '加载中',})
3.钉钉中我没有找到弹框 于是让前端同事给我写了一个
<view class="lightbox" style="{{light}}"></view><view class="xx-tbox fl fd" style="{{box}}"> <view class="nr-zi1">录入签名提示</view> <view class="nr-zi2 bottom-x">是否去补齐签名?</view> <view onTap="cancel" class="link-1 fl right-x">取消</view> <view onTap="sure" data-userid="{{userids}}" class="link-2 fl">确定</view></view>
.lightbox{width:100%;z-index:101; height:100%;background-color:#333;filter:alpha(Opacity=20);-moz-opacity:0.2;opacity: 0.2; position: fixed; top:0px; left:0px;} .xx-tbox{ width: 60%; margin: 20%; background-color: #fff; margin-top: 40%; height: 130px; z-index: 999;} .nr-zi1{ width: 100%; font-size: 16px; text-align: center; line-height: 32px; margin-top: 15px;} .nr-zi2{ width: 100%; font-size: 12px; text-align: center; line-height: 22px; padding-bottom: 15px;} .link-1{ width: 49.5%; height: 46px; line-height: 46px; font-size: 14px; text-align: center; color: #333; } .link-2{ width: 49.5%; height: 46px; line-height: 46px; font-size: 14px; text-align: center; color: #71d398; } .right-x{border-right-width: 1px; border-right-style: solid; border-right-color: #f4f4f4; }
5.在开发调试阶段 建议增加一个 ClearCache 否则 你setData 里面清除不掉 造成其他影响 清除缓存 文档中有
写过小程序js 这句就当没看见 js中每一个方法{}, (花括号后跟英文逗号) 最后一个方法不加。
ClearCache(event){
dd.removeStorage({
key: 'info',
success: function(){
}
});
},
6.钉钉小程序 每个页要单独保存 后编译 但是设置中 有批量保存快捷键
微信小程序 是只要ctrl + s 就保存所有 + 编译
7.网络请求
dd.httpRequest({
url: 'http://url?userid='+userid,
method: 'POST',
data: { userid: userid},
dataType: 'json',
success: (res) => {
// console.log('emmm res======' + res);
},
})
8.获取到的数据 要this.setData({})
data值仅在当页生效
9.开发工具(钉钉这个模拟器 还比较满意 可以分离出开发工具 有点类似android 开发了的感觉 总让我有一种android studio 的感觉)
我应该没有暴露什么吧 emmm。。。。。。。。。。。。
10.登陆钉钉账号后 开发工具左上角要选择自己在开发者后台创建的应用类型
app.js 中 需要绑定企业id
App({ onLaunch(options) {
// 第一次打开
// options.query == {number:1}
console.info('App onLaunch');
console.info(options);
this.globalData.corpId = options.query.corpId;
},
onShow(options) {
// 从后台被 scheme 重新打开
// options.query == {number:1}
},
onHide() {
console.log('App Hide');
},
globalData: {
corpId: "", hasLogin: false,
},
});
11.获取token 我用的是TP5.1
/*** 查看缓存内是否存在token信息 并检测是否过期
* 如过期 则重新获取token
* JAM
* @return type $token
*/
public function getAccessToken()
{
$appkey = APP_KEY;
$appsecret = APP_SECRET;
$expire_time = Cache::get('expire_time');
$access_token = Cache::get('access_token');
//如果token緩存存在
if(!empty($access_token)){
if($expire_time < time()){
$token = $this->get_token($appkey,$appsecret,$token_file_name);
} else {
$token = $access_token;
}
} else {//否则token緩存不存在
$token = $this->get_token($appkey,$appsecret,$token_file_name);
}
return $token;
}
/*** 请求钉钉接口获取token
* JAM
* @param type $appkey
* @param type $appsecret
* @return type $token
*/
public function get_token($appkey,$appsecret)
{
$url = "https://oapi.dingtalk.com/gettoken?appkey=".$appkey."&appsecret=".$appsecret;
$get_result = json_decode($this->http($url),true);
if($get_result['errcode'] == '0'){
$new_token = (object)[];
$token = $get_result['access_token'];
$new_token->expire_time = time() + 7000;
$new_token->access_token = $token;
Cache::set("expire_time",time() + 7000);
Cache::set("access_token",$token);
// $this->set_php_file($token_file_name,json_encode($new_token));
} else {
$token = 'get_token_error';
}
return $token;}/*** 返回用户信息
* @return type $value 用户信息
*/
public function getUserInfo()
{
$code = input('param.authCode');
$token = getAccessToken();
$url = 'https://oapi.dingtalk.com/user/getuserinfo?access_token=' . $token . '&code=' . $code;
$result = http_request_get($url);
$res = json_decode($result,true);
//根据userid 单独获取钉钉用户个人info
$url1 = 'https://oapi.dingtalk.com/user/get?access_token=' . $token . '&userid=' . $res['userid'];$result1 = http_request_get($url1);
$res1 = json_decode($result1,true);
$info['code'] = $result?1:0;
$info['res'] = $res;
$info['res1'] = $res1;
return json_encode($info);
}
钉钉获取小程序免登授权码
dd.getAuthCode({
success:(res)=>{
var authCode = res.authCode
}, fail:function(err){
}
})
11.webview
我做了个类似银行签名的东西 单个字单个字签字 然后拼在一起 注意webview白名单
webview 在模拟器 无法写字 canvas 画不上去 手机就没问题了 ,不知道是不是需要对应的事件js
*服务端API若是调用不成功,看服务端ip地址是不是在白名单中,本地服务器测试的话,重启路由器后ip是会变,
不在白名单 去开发者后台配置一下 就ok 。
*钉钉开发 会涉及到一些 功能权限 需要就开一下 如果没权限就是用 会提示没有权限 注意一下就好。
一些常见的坑 我都列出来了 也有可能有我想不起来的 或者我没接触到的 如果有看到的 有不懂 留言我们探讨
后续 维护 如果碰到坑 在补充