【浙政釘】微信-專有釘釘小程式-開發踩坑實記
⭐【浙政釘】微信-專有釘釘小程式-開發踩坑實記
最近有個需求，要將微信小程式轉為浙政釘小程式進行開發。一開始的思路是先將微信小程式轉為釘釘小程式。（至於為什麼，我只能說釘釘的開發文件寫的要比專有釘釘的詳盡多了）本是採用外掛，想一步到位，但是轉化後的產物並不理想。並且釘釘小程式開發工具，似乎不能很精準的定位錯誤，很容易造成系統崩潰（not found xxxxx），即找不到該頁面，這一點，極大地提升了找bug的難度。因此，決定直接手改。
提一句，在我們修改bug之前，存在兩個IDE供我們選擇，
其一，是政務釘釘開發工具。 【傳送門】
該開發工具，在編譯速度上不及釘釘，但是離我們的最終需求是最貼近的
其二，是釘釘開發工具，官網最顯眼的是這個IDE 但，在開發中，我們發現，這邊釘釘小程式的樣式跟轉到專有釘釘的小程式樣式出入很大，後來，我們選擇元件開發的這款 IDE 該IDE比起上面編譯要快很多。
⭐ 建立專案
這邊我們採用的開發策略是： 先在第二款IDE中，將微信小程式大致改好，然後在政務釘釘的開發工具中進行功能測試和微調，當然，也可以直接在政務釘釘的開發工具中進行開發。。 下面進入開發階段：
開啟開發工具，選擇專有釘釘，然後一直下一步就可。
接下來就是轉化階段，關於微信和釘釘 具體可參考其開發文件。下文有提及。
⭐ 轉化方案
釘釘轉專有釘釘
關於釘釘和專有釘釘，其實最大區別就在於 介面呼叫， 專有釘釘的api呼叫是 my.xxxx 與支付寶幾乎一致，在開發中可參考 支付寶開發文件， 而釘釘的api呼叫是 dd.xxxx 。只需安裝一個依賴 jsapi 即可：
在專案根目錄下執行
npm install gdt-jsapi
// 方式一 import dd from 'gdt-jsapi' dd.getLocation().then(ret => { console.log(ret) }).catch(err => { console.error(err) }) // 方式二，不需要引入，直接使用 my 進行呼叫 my.getLocation({ success (ret) { console.log(ret) }, fail (err) { console.error(err) } })
關於專有釘釘呼叫釘釘介面：
下面列幾個特殊的寫法
① wxs & sjs
微信 ：
<wxs src="/utils/xxxx.wxs" module="filter"></wxs>
專有釘釘
<import-sjs from="/utils/xxxx.sjs" name='filter' />
② 自定義導航欄
微信： navigationStyle:custom 採用自定義導航欄
// xxx.json
{
"navigationStyle":"custom",
"navigationBarTextStyle": "white"
}
專有釘釘： transparentTitle 這個屬性控制導航欄透明度
// app.json
"window": {
"defaultTitle": "",
"titleBarColor": "#ffffff",
"pullRefresh": false,
"transparentTitle": "always",
"titlePenetrate": "YES"
}
// xxx.json 想要採用原生導航欄
{
"defaultTitle": "我的評論",
"transparentTitle": "no",
"pullRefresh": true // 若要實現下拉重新整理，必須開啟這個屬性
}
③ 底部導航欄
微信
"tabBar": {
"custom": true
}
專有釘釘
暫時還沒找到解決方案，目前採用的是：在 app.json直接不寫 tabbar 屬性
④ 儲存獲取
微信
wx.setStorageSync('openid', res.data.user.openid)
let openid=wx.getStorageSync('openid')?wx.getStorageSync('openid'):getApp().globalData.openid;
專有釘釘
// ddInfo: {openid:xxxx}
dd.setStorageSync({
key: "ddInfo",
data: res.data.data
});
let openid = my.getStorageSync({
key: 'ddInfo'
}).data ? my.getStorageSync({
key: 'ddInfo'
}).data.openid : app.globalData.openid;
⑤ 網路請求
微信
wx.request({
method: type,
dataType: 'json',
url: getApp().globalData.Url + url,
data:param,
header: {
'content-type': 'application/json',
},
success: function (res) {
callback(res.data);
}
})
專有釘釘
my.httpRequest({
method: type,
url: app.globalData.Url + url,
data: param,
success: function (res) {
callback(res.data);
},
fail: function (err) {
console.log(err)
}
})
⑥ 分享 傳參
微信
onShareAppMessage:function (res) {
let news_=this.data.news;
let title=news_.gj_title;
let imgurl=news_.tb_img;
let newsId=news_.news_id;
let openid=wx.getStorageSync('openid')? wx.getStorageSync('openid'):getApp().globalData.openid;
return {
title: title,
path: '/pages/xxxx/xxxx?id='+newsId+'&oid='+openid,
imageUrl: imgurl,
success: (res) => {
console.log("轉發成功", res);
},
fail: (res) => {
console.log("轉發失敗", res);
}
}
}
專有釘釘 注意 %3F 是?的url編碼，官網給出的例子，似乎跑不通
onShareAppMessage() {
let news_=this.data.news;
console.log(news_)
let title=news_.gj_title;
let imgurl=news_.tb_img;
let newsId=news_.news_id;
let openid = my.getStorageSync({
key: 'ddInfo'
}).data ? my.getStorageSync({
key: 'ddInfo'
}).data.openid : getApp().globalData.openid;
return {
title: title,
path: 'pages/xxxx/xxxx%3Fid='+newsId + '&oid=' + openid,
imageUrl: imgurl,
success: (res) => {
console.log("轉發成功", res);
},
fail: (err) => {
console.log("轉發失敗", err);
}
}
⑦ 點選事件、for迴圈等
微信
bindchange、bindtap、 bindxxxxx
wx:for="{{ xxxxx }}" wx:for-item="item" wx:key="index"
釘釘
onChange、onTap、 onXxxxx
a:for="{{xxxxx}}" a:key="index" a:for-index="index"
⑧ 畫布canvas
微信 canvas-id
<canvas class="hide" canvas-id="share" style="width:480px;height:854px;"></canvas>
專有釘釘 id
<canvas class="hide" id="share" style="width:480px;height:854px;"></canvas>
⑨ 互動showToast等
⭐ 政務釘釘除錯
關於 政務釘釘除錯，需設定白名單，才能進行真機除錯、預覽等
⭐ 上傳發布
點選詳情
進行應用釋出， 還需管理員在工作臺管理頁面，將其稽核新增。
另有一個巨坑， 還得在控制檯上設定一下
不然釋出了，在工作臺也找不到該應用。
關於專有釘釘小程式的官方開發文件，著實有點亂。
這篇記錄暫且到這裡，後續再補充。