?【浙政釘】微信-專有釘釘小程序-開發(fā)踩坑實記

最近有個需求，要將微信小程序轉(zhuǎn)為浙政釘小程序進行開發(fā)。一開始的思路是先將微信小程序轉(zhuǎn)為釘釘小程序。（至于為什么，我只能說釘釘?shù)拈_發(fā)文檔寫的要比專有釘釘?shù)脑敱M多了）本是采用插件，想一步到位，但是轉(zhuǎn)化后的產(chǎn)物并不理想。并且釘釘小程序開發(fā)工具，似乎不能很精準(zhǔn)的定位錯誤，很容易造成系統(tǒng)崩潰（not found xxxxx），即找不到該頁面，這一點，極大地提升了找bug的難度。因此，決定直接手改。

提一句，在我們修改bug之前，存在兩個IDE供我們選擇，

其一，是政務(wù)釘釘開發(fā)工具。 【傳送門】

該開發(fā)工具，在編譯速度上不及釘釘，但是離我們的最終需求是最貼近的

其二，是釘釘開發(fā)工具，官網(wǎng)最顯眼的是這個IDE 但，在開發(fā)中，我們發(fā)現(xiàn)，這邊釘釘小程序的樣式跟轉(zhuǎn)到專有釘釘?shù)男〕绦驑邮匠鋈牒艽螅髞?，我們選擇組件開發(fā)的這款 IDE 該IDE比起上面編譯要快很多。

? 創(chuàng)建項目

這邊我們采用的開發(fā)策略是： 先在第二款I(lǐng)DE中，將微信小程序大致改好，然后在政務(wù)釘釘?shù)拈_發(fā)工具中進行功能測試和微調(diào)，當(dāng)然，也可以直接在政務(wù)釘釘?shù)拈_發(fā)工具中進行開發(fā)。。 下面進入開發(fā)階段：

打開開發(fā)工具，選擇專有釘釘，然后一直下一步就可。

接下來就是轉(zhuǎn)化階段，關(guān)于微信和釘釘 具體可參考其開發(fā)文檔。下文有提及。

? 轉(zhuǎn)化方案

釘釘轉(zhuǎn)專有釘釘

這是官方給出的方案 ，其實不用這么麻煩：

關(guān)于釘釘和專有釘釘，其實最大區(qū)別就在于 接口調(diào)用， 專有釘釘?shù)腶pi調(diào)用是 my.xxxx 與支付寶幾乎一致，在開發(fā)中可參考 支付寶開發(fā)文檔， 而釘釘?shù)腶pi調(diào)用是 dd.xxxx 。只需安裝一個依賴 jsapi 即可：

在項目根目錄下執(zhí)行

npm install gdt-jsapi

二者接口轉(zhuǎn)換格式參照如下（官網(wǎng)）

// 方式一 import dd from "gdt-jsapi"dd.getLocation().then(ret => {  console.log(ret)}).catch(err => {  console.error(err)})// 方式二，不需要引入，直接使用 my 進行調(diào)用my.getLocation({  success (ret) {    console.log(ret)  },  fail (err) {    console.error(err)    }})

關(guān)于專有釘釘調(diào)用釘釘接口：

詳見官網(wǎng)文檔

下面列幾個特殊的寫法

① wxs & sjs

微信 ：

<wxs src="/utils/xxxx.wxs" module="filter">wxs>

專有釘釘

<import-sjs from="/utils/xxxx.sjs" name="filter" />

② 自定義導(dǎo)航欄

微信： navigationStyle:custom 采用自定義導(dǎo)航欄

// xxx.json{  "navigationStyle":"custom",  "navigationBarTextStyle": "white"}

專有釘釘： transparentTitle 這個屬性控制導(dǎo)航欄透明度

// app.json "window": {    "defaultTitle": "",    "titleBarColor": "#ffffff",    "pullRefresh": false,    "transparentTitle": "always",    "titlePenetrate": "YES"  }

// xxx.json 想要采用原生導(dǎo)航欄{  "defaultTitle": "我的評論",  "transparentTitle": "no",  "pullRefresh": true // 若要實現(xiàn)下拉刷新，必須開啟這個屬性}

③ 底部導(dǎo)航欄

微信

"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;

⑤ 網(wǎng)絡(luò)請求

微信

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("轉(zhuǎn)發(fā)成功", res);        },        fail: (res) => {        console.log("轉(zhuǎn)發(fā)失敗", res);        }       }  }

專有釘釘 注意 %3F 是?的url編碼，官網(wǎng)給出的例子，似乎跑不通

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("轉(zhuǎn)發(fā)成功", res);      },      fail: (err) => {        console.log("轉(zhuǎn)發(fā)失敗", err);      }    }

⑦ 點擊事件、for循環(huán)等

微信

bindchange、bindtap、 bindxxxxxwx:for="{{ xxxxx }}" wx:for-item="item" wx:key="index"

釘釘

onChange、onTap、 onXxxxxa: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等

詳見文檔

? 政務(wù)釘釘調(diào)試

關(guān)于 政務(wù)釘釘調(diào)試，需設(shè)置白名單，才能進行真機調(diào)試、預(yù)覽等

? 上傳發(fā)布

點擊詳情

進行應(yīng)用發(fā)布， 還需管理員在工作臺管理頁面，將其審核添加。

另有一個巨坑， 還得在控制臺上設(shè)置一下

不然發(fā)布了，在工作臺也找不到該應(yīng)用。

關(guān)于專有釘釘小程序的官方開發(fā)文檔，著實有點亂。

這篇記錄暫且到這里，后續(xù)再補充。

【轉(zhuǎn)載請放鏈接】https://blog.csdn.net/weixin_45530599/article/details/121303475