前端如何封裝sdk_前端用賬號+簽名怎麼調用sdk

① uniapp支付寶支付的前端開發經驗分享

首先在對項目開啟支付功能，在項目的manifest.json文件中勾選APP模塊配置中的Payment支付模塊，並且勾選支付寶支付和下面列出的ios和Android

根據需要在h5跟APP端都做支付寶的喚起支付，喚起orderInfo 的格式在APP和h5上有很大的差異，在這一點上浪費了一些時間,在此貼出支付寶的文檔

支付寶開發文檔

H5端喚起支付寶。所需要的參數是後端返回的一個form表單，獲取成功後端返回的內容以後將表單內容用v-html置入標簽中，然後提交表單便會執行喚起
針對於支付寶支付的使用，截取核心代碼如下

其實開發完成以後發現APP端喚起支付寶更為簡單，但是這個過程中踩過一個坑，我以為orderInfo的值可以參照文檔和後端給的一些鍵值對在前端自己拼接，但是總是喚起失敗，後來聯系支付寶的螞蟻技術支持中心的客服，經過溝通以後，才知道這個orderInfo必須在後端用支付寶SDK生成以後返回給前端，這樣一來，果然喚起成功。 加粗樣式

② taro 怎麼集成 android sdk

【CSDN 編者按】小程序這個由微信帶頭的產物，格外鮮明地體現了移動互聯網的「時機」這個詞，早在微信小程序之前，有力推輕應用的網路，有來自 HTML5 中國產業聯盟的 DCloud 所主張的流應用，但最終卻都已經淹沒在了移動互聯網的歷史長河之中。唯有微信小程序風生水起，更是帶動了巨頭們的爭相入場。
小程序迎來了專屬於中國移動互聯網的群雄逐鹿的時代。
本文作者王安即是流應用的創造者，作為移動領域的老兵，他依然在矢志不移地構建移動開發工具框架及生態，從原生應用到 HTML5 再到如今的小程序，他是這段歷史的見證者、參與者。從這篇文章中，我們能夠鮮活地看到小程序的技術演進歷程，以及對於所有開發者來說，終將去往何處。
作者 | 王安
責編 | 唐小引
封圖 | CSDN 付費下載自東方 IC
出品 | CSDN（ID：CSDNnews）
中國特色的移動互聯網時代
伴隨著QQ 小程序面向用戶開放，這個手機端月活 7 億的巨無霸正式入場。小程序，終於成為了超級 App 的標配。
盤點下已經支持小程序的超級 App：
微信、企業微信、QQ、支付寶、高德地圖、手機淘寶、網路、網路貼吧、網路地圖、今日頭條、抖音……
這些璀璨耀眼的名字，背後都是巨大的流量。
在這群超級 App 的支持下，中國的移動互聯網格局被徹底改變。
這個有中國特色的移動互聯網時代，被稱為「小程序時代」。
這是繼手機支付後，中國的移動互聯網領先世界的第二個代表事物。
中國的技術標准、開發者生態，第一次得到大規模的普及應用，而且很明顯，小程序在功能和體驗上均超過了 HTML5。
中國人能建立開發者生態嗎？這個命題曾一度讓人懷疑。
小程序完成了這一步突破，這是一場值得歌頌的中國技術生態發展史。
讓我們來回顧下這場技術生態革命，是如何開始，又將要去向何方。
羅馬不是一天建成的
小程序不是一天發明出來的
HTML5 於 2007 年在 W3C 立項，與 iPhone 發布同年。
喬布斯曾期待 HTML5 能幫助 iPhone 打造起應用生態系統。
但 HTML5 的發展速度並不如預期，它雖然成功地實現了打破 IE+Flash 壟斷局面的目標，卻沒有達到承載優秀的移動互聯網體驗的地步。
於是在 iPhone 站穩腳跟後，發布了自己的 App Store，開啟了移動互聯網的原生應用時代。
隨後的 Android，本來是基於 Linux 的 OS，與之同期的 MeeGo 等競爭對手採用 C + HTML5 的雙模應用生態策略，然而 C 的開發難度太大，HTML5 體驗又不行。Android 依靠 Java 技術生態，在競爭中脫穎而出。
於是在移動互聯網初期，應用生態被定了基調 —— 原生開發。
在那個時候，硬體不行，也沒有其他辦法，原生開發才能在低配硬體上帶來商用體驗。
但大家都在懷念 HTML，那種無需安裝更新、即點即用，直達二級頁面的特點，一直讓人迷戀。
圖源：CSDN 付費下載自東方 IC
國內有一批做瀏覽器的廠商，嘗試去改進 HTML5，他們提出了輕應用的概念。
通過給 WebView 擴展原生能力，補充 JS API，讓 HTML5 應用可以實現更多功能。
不過這類業務沒有取得成功，HTML5 的問題不止是功能不足，性能體驗是它更嚴重的問題，而體驗問題，不是簡單地擴展 JS 能力能搞定的。
這類業務發展的頂峰，是微信的 JS SDK。
作為國內事實上最大的手機瀏覽器，微信為它的瀏覽器內核擴充了大量 JS API，讓開發者可以用 JS 調用微信支付、掃碼等眾多 HTML5 做不到的功能。
微信 JS SDK 說明文檔
但微信團隊對這套方案的體驗仍然不滿意，微信錢包欄目里打車、理財等很多應用雖然嵌入了 JS SDK，但每次點擊要等半天白屏，讓人用著很痛苦，他們在業內開始尋找新的解決方案。
業內早有專業團隊看到了相同的問題。
與瀏覽器不同，Hybrid 應用是另一個細分領域。它們為開發者提供使用 JS 編寫跨平台應用的工具，為了讓 JS 應用更接近原生應用的功能體驗，這個行業的從業者做出了很多嘗試。
筆者所在的 DCloud 即是其中之一，我們提出了改進 HTML5 的「性工能」障礙的解決方案 —— 通過工具、引擎優化、開發模式調整，讓開發者可以通過 JS 寫出更接近原生 App 體驗的應用。
多 WebView 模式，原生接管轉場動畫、下拉刷新、Tab 分頁，預載 WebView……各種優化技術不停迭代，終於讓 Hybrid 應用取得了性能體驗的突破。
Hybrid 應用和普通的輕應用相比，還有一個巨大的差別：一個是 Client/Server，一個是 Browser/Server。簡單來說，Hybrid 應用是 JS 編寫的需要安裝的 App，而輕應用是在線網頁。
C/S 的應用在每次頁面載入時，僅需要聯網獲取 JSON 數據；而 B/S 應用除了 JSON 數據外，還需要每次從伺服器載入頁面 DOM、樣式、邏輯代碼，所以 B/S 應用的頁面載入很慢，體驗很差。
可是這樣的 C/S 應用雖然體驗好，卻失去了 HTML5 的動態性，仍然需要安裝、更新，無法即點即用、直達二級頁面。
那麼 C/S 應用的動態性是否可以解決呢？對此，我們提出了流應用概念，把之前 Hybrid 應用里的運行於客戶端的 JS 代碼，先打包發布到伺服器，制定流式載入協議，手機端引擎動態下載這些 JS 代碼到本地，並且為了第一次載入速度更快，實現了應用的邊下載邊運行。
就像流媒體的邊下邊播一樣，應用也可以實現邊用邊下。
在這套方案的保障下，終於解決了之前的各種難題：讓 JS 應用功能體驗達到原生，並且可即點即用、可直達二級頁面。
如今看來，這已經變成了常識。但在當年，先驅們做了無數艱辛探索。
這套技術，需要讓客戶端引擎提前預置在手機上，就像流媒體的普及，建立在 Flash 的裝機量巨大的基礎上，那麼普及這個客戶端引擎就變得很重要。
2015 年，360 和 DCloud 合作，在 360 手機助手裡內嵌了這個客戶端引擎，推出了業內第一個商用的小程序，360 稱之為 360 微應用。
微應用實現了在 360 手機助手的應用下載頁面，同時出現了「秒開」按鈕，點擊後直接使用。
並且在 360 手機助手的掃碼里，應用的分享里，都實現了掃碼獲得一個應用，點擊分享消息獲得一個應用。
在 360 手機助手 3.4 版本中上線的中國第一個小程序
為了做大生態，DCloud 把這套技術標准，捐獻給了 HTML5 中國產業聯盟，隨後，聯盟開始推動更多的超級 App 和手機廠商加入，共同推進動態 App 產業的發展。
然而事情並不順利，巨頭們有自己的利益訴求。雖然有一批廠商同意加入聯盟共建生態，但最關鍵的角色，真正的國民應用「微信」，最終決定自立標准、自研引擎，當然技術原理與流應用是基本一致的。
2016 年 1 月 11 日，微信公開課，張小龍罕見露面，公布了微信應用號的計劃，為這個大事件親自站台。
2016 年 9 月 21 日，微信宣布更名應用號為小程序，面向首批開發者內測。從此，這個詞被正式定了下來，「小程序」，成為後續一個時代的代名詞。而「流應用」、「微應用」則淹沒在歷史長河中成為一個令人唏噓的故事。
2017 年 1 月 9 日，微信公開課，小程序面向用戶正式推出。
從此後，阿里巴巴、手機廠商聯盟、網路、今日頭條，陸續推出了自己的小程序平台，其中也有很多波折與故事，在有偶然、有必然的過程中，形成了今天的局面。
小程序大潮捲入了更多人，並形成了更大的浪潮，最終迎來了不可逆轉的小程序時代。
生態難，難於上青天
發明能解決功能體驗和動態性的技術方案，雖然難，但不是最難的事情。
最難的是開發者生態的建設。
最初 HTML5 中國產業聯盟的策略是在 HTML5 上擴展強化，復用現有的 HTML5 生態。
當微信的標准完全自立重建時，業內人士都懸著一顆心。
在全球，基於 Web 的技術生態已經非常成熟，各種開發工具、框架、組件、模板...提升著開發者的效率。
小程序丟棄了國際標准組織 W3C 的 DOM 和 Window 標准，僅僅採用基礎 JavaScript。這意味著 HTML5 生態的各種輪子無法復用，要完全重造一個新的小程序開發生態。
當初微信推廣 JS SDK 時，是那麼地順其自然，開發者紛紛開始使用，因為對於開發者，只是在他們的 H5 版本上補充一些 API 而已。
而小程序初期，充滿了開發者的質疑聲：我的業務迭代那麼久，讓我重新做一個版本，你的生態到底能不能支撐我的投入？
微信用持續而快速的版本升級、高管的站台，告訴大家微信做小程序的決心，並最終通過 2017 年底的跳一跳，引爆了小程序。
從此大家的問題不再是我要不要做小程序了，而轉向了：既然要做，怎麼才能提升小程序的開發效率、降低開發成本？
任何一種技術，或者開發模式的演進，在不斷成熟的過程中，都遵循著類似的成熟規律：
技術標准 -> 基礎平台 -> 開發工具 -> 培訓市場 -> 框架誕生 -> 周邊生態逐步完善 -> 輪子之上的輪子
在 HTML5 生態里，已經發展到最終極的形態，比如 Vue 是一個重要框架，而基於 Vue 的各種豐富的 UI 庫、測試框架，則是輪子之上的輪子。
多層輪子代表著生態的繁榮，也意味著開發者的開發效率更高。
可微信的全新標准出現時，它把開發者推回了原始社會，一切都要重來。
這在當時看來，並不是一個必然會成功的事情（其實直到現在，比如圖表類輪子，小程序仍然比不過 HTML5）。
時至今日，討論這個標準的選擇對錯已經沒有意義。當支付寶、網路、今日頭條都開始參考這個標准做小程序時，時代已經不可阻擋。
所幸，最終的結果是，中國人做成了。在國際標准之外，在中國，終於建立起了自己的技術生態。
並且這個生態，給用戶帶來了更好的體驗，給開發者帶來了更多流量和變現效率的提升，這是一個比 HTML5 更優秀的生態。
野蠻的技術生態成長速度
兩年時間，中國的小程序開發者如何從原始社會進階到現代文明？這也是一段有趣的歷史。
我們來看看小程序技術生態是如何快速成長，走完上面所說的這套技術成熟路線，也就是從技術標准到輪子之上的輪子的。
在 Web 世界裡，已經成熟到了原生 JS 用量很少的時代了，開發人員大量使用 Vue 等框架，並且在 Vue 的基礎之上，又有更多輪子。
當中國的開發人員面臨重頭開始時，他們感受到效率對比的差距，既然時代已不可阻擋，那就擁抱它。勤勞的中國技術人開始蓬勃地建設起了小程序各種周邊技術生態。
其中比較重要的是開發框架的迭代，我們看看每個小程序開發框架為什麼會誕生、流行和衰落。
最初的微信小程序，一片荒蠻，一份文檔 + 一個難用的 IDE，很多效率工具比如 npm、預處理器這些都不支持，而這些已經是大型項目離不開的工具。
於是，第一個標志性的框架出現了 —— WePY。
WePY 緊隨微信小程序在 2017 年發布，原本是騰訊其他部門的一個個人工程師的作品。在那個年代，WePY 有效地解決了小程序不支持 npm、預處理器的痛點，被引爆後，騰訊官方才把這個框架收編到官方的 GitHub 下。
不過WePY也面臨很多問題，它使用了私有語法，這讓它在生態建設上面臨很大難度，IDE 著色、語法提示、語法校驗、格式化、人員招聘培訓等各方面問題制約著它的流行和普及。
面對這些問題，人們開始思考，有什麼更好的方式，可以復用現有技術生態來快速完善小程序生態？
這時候下一個重要框架借勢誕生，美團前端在 2018 年初開源了MPVue。
MPVue 採用 Vue 語法來開發小程序，通過對 Vue.js 的底層改造，實現了編譯到微信小程序。
MPVue良好地藉助了 Vue 的技術生態，周邊工具如 IDE、校驗器、格式化等支持直接復用、人員招聘培訓等生態建設壓力大幅下降，受到了大量開發者的歡迎。
看著熟悉 Vue 的開發者終於有了趁手的輪子，那熟悉 React 的開發者怎會無動於衷？
京東團隊是 React 的重度用戶，還自研了 JDreact，於是他們開發了 Taro 框架，一款基於 React 語法編寫小程序的框架。
但 Taro 並不是想簡單做一個MPVue在 React 世界裡的翻版，Taro 相比MPVue，想要解決更多重要問題。
Taro 面世較晚，此時微信、支付寶、網路、頭條都已發布或宣傳了自己的小程序，開發者面臨一個多端開發和適配的問題。
於是 Taro 率先支持多端開發，它甚至還能發布到 H5 和 App。
圖源：京東凹凸實驗室
當時小程序領域還有一個重要變化，微信開始支持小程序自定義組件。
組件是一個成熟框架不可缺的東西，不管是 Vue 還是 React 都有豐富的組件生態。
在過去，MPVue時代，是把 Vue 組件也編譯成頁面模板，這帶來一個很大的性能問題，在復雜頁面里（比如長列表）使用組件，更新組件狀態會導致整個頁面的數據全部從 JS 邏輯層向視圖層通訊一次，大量數據通訊會非常卡頓。
注意：小程序的邏輯層運行在 V8 或JSCore下，和視圖層是分離的，通訊阻塞很容易引發性能問題。
於是 Taro 把 React 組件編譯為新出的微信小程序自定義組件，這種組件在數據更新時，只會更新組件內部的數據，而不是整個頁面更新數據，從而大幅減少了數據通信量。
這一輪的後浪推前浪很猛，Taro 在性能和多端支持上，都超越了MPVue。
看著 React 陣營取得如此成績，Vue 陣營自然會繼續追擊。
我們基於 Vue 開發了 uni-app，它實現了自定義組件編譯模式，並在演算法上做了很多優化。另外，之前MPVue對 Vue 的語法支持度不太完善，比如過濾器等不支持，在 uni-app 中我們進行了解決。
同樣，uni-app 也看到了前浪的其他問題：Taro 雖然邁出了多端的第一步，但多端支持能力比較弱，每個平台仍然各自開發大量代碼。核心原因，是Taro 在 H5 端和 App 端，並不是一個完整的小程序技術架構，無法保持最大程度的統一。
於是 uni-app 在 App 端，使用了一個技術架構相同的小程序引擎，本身就可以直接運行小程序應用，這個引擎搭配小程序代碼打包為 App，開發者一行代碼不用改，可以同時發布小程序和 App。
當然，其 App 引擎從 Hybrid 應用起家，它提供的 API 要比小程序多很多，因為 App 的需求會比小程序豐富，它還支持把 WebView 渲染引擎替換為 Weex 渲染引擎。
之後 uni-app 又發布了 H5 版的小程序引擎，原理與小程序的 PC 模擬器相同，實現了良好的跨 H5 版的發布。於是 uni-app 比較完美地實現了開發一次，7 個平台發布。
第一層輪子就這樣迅速發展了起來，Web 世界裡最成熟的 Vue、React 技術生態被導入了小程序開發生態中。然後輪子之上的輪子開始如火如荼的建設。
以 UI 庫為例，之前的 UI 庫，有 Vue 庫、React 庫，有 PC 庫、H5 庫和小程序庫，種類繁多，甚至說混亂。
比如在 Vue 陣營中，Vant 和 iView 這兩個 UI 庫，都是同時維護兩個版本，它們即有 H5 版，又有小程序版。
不止框架作者麻煩，開發者想在多端使用這些 UI 庫時，會發現在不同端還需要引入不同的 UI 庫，寫法都不一樣，這讓開發者很崩潰。
既然已經可以多端開發應用，於是在多端開發的領域里，開始出現輪子之上的輪子，多端 UI 庫。
首先是 Taro 推出了 Taro UI，實現了 H5 和小程序 UI 庫的統一，不過可惜 Taro UI 不支持 App 端。
然後 uni-app 推出了 uni UI，這個 UI 庫同時支持多家小程序、H5、App。
由於 uni-app 和 MPVue 同屬 Vue 陣營，它們的組件是互通的。於是這兩家聯合舉辦了一場插件大賽，建立了插件市場。
在中國的前端開發者領域，有很多和國外不一樣的地方：一個是國內有小程序，第二個是國內 Vue 的開發者體量遠超過 React 和 Angular。這裡面很大的原因，是 Vue.js 的作者尤雨溪，是中國人。
Vue 和 React 網路指數對比
在龐大的 Vue 用戶體量支持下，uni-app 和 MPVue 的周邊生態迅速發展起來，開發工具、周邊輪子、教育培訓等生態快速完善。目前在 Vue 陣營下，開發者在 Web 生態下所需的輪子，在多端開發下基本也都有了。
短短兩年時間，小程序開發生態里幾撥迭代，輪子之上的輪子不斷涌現，快速進入了成熟期。
結語
產業還在繼續發展，每當底層有重大技術變更時，上層框架世界就會發生新機會。
當年 HTML5 標准不統一，瀏覽器兼容性問題嚴重，誕生了 jQurey 的機會。而在移動互聯網下半場，瀏覽器兼容已經不再是核心問題，jQurey 的地位被更適合移動互聯網的 Vue 替代。
我們不知道未來還會有什麼新的框架出世，但我們知道方向：
對於開發者而言，總是會向著更高的開發效率、更高的性能、更高的投入產出比前進。
對於開發商，目前的小程序，雖然發展了 2 年，但流量增長空間仍然巨大，微信之外，很多超級 App 的勢能將逐漸釋放，整個小程序產業的日活總量有數億的提升空間。
如果開發商能追上這撥紅利，就能獲得更多增長。而多端框架的出現，可以幫助開發商更好的把握這撥紅利。
中國的技術發展，此刻正在經歷一個分水嶺，從全面的技術進口，到開始建設自己的標准和開發者生態。遲早，會開始向外輸出，引領世界的進步。
不管中美是否開打貿易戰，這一轉變都是必須做的事情。
中國的移動支付、小程序、5G，很多領域已經走在了全球前面。中國人發明的 Vue 已經在影響全球。
雖然還有很多困難仍需克服，但我們每個開發者，都是新時代的見證者，更是新生態的建設者！
作者簡介：王安，DCloud 公司創始人，HTML5 中國產業聯盟秘書長。2003 年開始從事移動互聯網工作，十幾年編程和商業經驗，連續創業者。
聲明：作者獨立觀點，不代表 CSDN 立場

③ 前端vue引入第三方分享用sharesdk怎麼用

一般有兩種實現方法常見的像前端的SDK 比如一些JS插件模塊化之後可以簡單的選擇拼裝就行了
第二種就是後端的比如 PHP JAVA之類 java不是太懂就說PHP 一般把公共部分和依賴部分分離公共部分定義介面依賴部分來實現然後用自動載入來載入介面的不同的實現不知道這樣說的清不清楚
按你的例子來說在PHP里很容易實現一個公共的類定義了分享的介面
然後在分別定義幾個類如 qq、新浪、微信來實現分享的介面
在最後動態的載入這些類
至於怎麼實現動態載入各個語言實現方式不一樣就不多說了

④ 前端用賬號+簽名怎麼調用sdk

按照官方文檔一步一步來

⑤ ios 自己封裝的sdk引入了第三方庫，怎麼防止與外界的沖突

jQuery是目前使用最廣泛的前端框架之一，有大量的第三方庫和插件基於它開發。為了避免全局命名空間污染，jQuery提供了jQuery/ajax/libs/jquery/1/ajax/libs/jquery/1/ajax/libs/jquery/1/ajax/libs/jquery/1.6.4/jquery.min.js">  <script>var jquery164 = jQuery.noConflict( true );</script>  避免第三方庫的沖突以上的代碼片段展示了如何解決多版本jQuery的沖突。接下來，我們嘗試解決jQuery庫和第三方庫的沖突，下面出現的代碼片段在jQuery的官方文檔中都有，有興趣的程序猿可以仔細閱讀官方文檔體會其中的區別。直接使用No-Conflict模式使用No-Conflict模式，其實就是對jQuery進行重命名，再調用。  <script src="prototype.js"></script> <script src="jquery.js"></script> <script> var $j = jQuery.noConflict(); // $j 引用了jQuery對象本身. $j(document).ready(function() { $j( "div" ).hide(); }); // $ 被重新指向prototype.js里定義的對象 // document.getElementById(). mainDiv below is a DOM element, not a jQuery object. window.onload = function() { var mainDiv = $( "main" ); } </script> 使用自執行函數封裝使用這種方式，你可以在匿名函數內部繼續使用標準的$對象，這也是眾多jQuery插件採用的方法。需要注意的是，使用這種方法，函數內部無法再使用prototype.js定義的$對象了。  <script src="prototype.js"></script> <script src="jquery.js"></script> <script> jQuery.noConflict(); (function( $ ) { // Your jQuery code here, using the $ })( jQuery ); </script> 使用標准jQuery(document).ready()函數如果jQuery庫在其它庫之前引入，那麼jQuery內部定義的jQuery和$會被第三方庫覆蓋，這時候再使用noConflict()已經沒有什麼意義了。解決的方法很簡單，直接使用jQuery的標准調用方式。  <script src="jquery.js"></script> <script src="prototype.js"></script> <script> // Use full jQuery function name to reference jQuery. jQuery( document ).ready(function() { jQuery( "div" ).hide(); }); // 或者 jQuery(function($){ // Your jQuery code here, using the $ }); // Use the $ variable as defined in prototype.js window.onload = function() { var mainDiv = $( "main" ); }; </script> 下面給大家介紹jQuery noConflict() 方法 noConflict() 方法會釋放會 $ 標識符的控制，這樣其他腳本就可以使用它了。實例當然，您仍然可以通過全名替代簡寫的方式來使用 jQuery： $.noConflict(); jQuery(document).ready(function(){ jQuery("button").click(function(){ jQuery("p").text("jQuery 仍在運行！"); }); }); 實例您也可以創建自己的簡寫。noConflict() 可返回對 jQuery 的引用，您可以把它存入變數，以供稍後使用。請看這個例子： var jq = $.noConflict(); jq(document).ready(function(){ jq("button").click(function(){ jq("p").text("jQuery 仍在運行！"); }); }); 實例如果你的 jQuery 代碼塊使用 $ 簡寫，並且您不願意改變這個快捷方式，那麼您可以把 $ 符號作為變數傳遞給 ready 方法。這樣就可以在函數內使用 $ 符號了 - 而在函數外，依舊不得不使用 "jQuery"： $.noConflict(); jQuery(document).ready(function($){ $("button").click(function(){ $("p").text("jQuery 仍在運行！"); }); });

⑥ 把企業微信側邊欄的 JS-SDK 封裝了，還加上了所有 TS 類型

哈嘍，大家好，我是海怪。

在之前幾個月，我陸陸續續地寫了很多關於企業微信側邊欄的內容：

在前端方面，我已經出了 3 個模板了，每個項目都有一個 /lib 的文件夾專門放置 JS-SDK 的一些封裝內容。

這個 /lib 其實也只是封裝了一些常見的操作，並沒有非常健全的 TS 類型以及其它 API 的封裝，當時的想法是 API 太多了，一個個封裝太煩了（主要是懶）。

但是，這就導致了每個項目都要復制粘貼一次這個 /lib 文件夾。

所以，我最近又想到了一些 idea，把側邊欄 JS-SDK 里的 API 的 TS 類型（入參、返回）都寫了一遍，然後使用簡單幾個 API 來封裝和調用原來的 wx.fn 以及 wx.invoke('xxx') 。

整個封裝的最終效果就是今天要說的 wecom-sidebar-jssdk ，此 SDK 是專門針對企業微信側邊欄的 JS-SDK 進行封裝的。

它提供了以下功能：

[圖片上傳失敗...(image-2540a0-1639715215034)]

這個庫將所有的 API 的類型都寫全了（3.1.20）（如果有新的我可能也不知道，你可以提交一個 Issue 讓我再加上）。

所以說，就算你不想用這個庫的提供的 API，這個庫的 TS 類型聲明也能帶給你很好的開發體驗：

[圖片上傳失敗...(image-ac95c2-1639715215035)]

當然，你能用我自帶的 API 是更好了：

[圖片上傳失敗...(image-ee8584-1639715215035)]

[圖片上傳失敗...(image-43deb2-1639715215035)]

[圖片上傳失敗...(image-64c89d-1639715215035)]

說那麼多，不如先給大家看個示例：

上面就是 wecom-sidebar-jssdk 的簡單使用了。更多內容可見文檔。

如何大家有什麼建議或者發現的 Bug 都可以放到 Issue 來，最近一個月會關注這些 Bug 的問題，爭取發個 0.1.0 版本。

⑦ 前端sdk封裝(node)

場景:

在實際開發中，需要將後端介面封裝成sdk，可供前端直接調用，介面可實現頁面跳轉等

實際運用:

實際開發中，前端項目時基於node的項目，需要重新封裝一層後端介面，並實現頁面的可配置化跳轉。

實際調試中，注意node版本，版本不同，差異很大。我本地試的v8.9.4版本

1.node中獲取請求參數兩種方式:

        req.body獲取post請求參數，req.query獲取get請求參數，req.params獲取get請求參數，url中直接拼接參數的那種，如 http://localhost:8080/1

req.params["id"]獲取的就是1

2.sdk提供post和get兩種方式，需要校驗origin & referer

其中origin是post方式獨有的，origin顯示頁面的來源，包含協議和domain(根域地址)，不包含具體的路徑地址，不會包含用戶的敏感信息，相比referer更安全，可防止CSRF攻擊，一般存在於CORS跨域的請求中,response中可查看到Access-Control-Allow-Origin

referer存在於get和post請求中，告知服務請求方的原始資源的URI，包括協議+根域+參數，因為參數可能包含些敏感信息，可能會導致信息泄露

因此在模擬測試post請求時，而且需要origin時，並且需要測試頁面跳轉時，可模擬表單請求的方式來進行測試

在模擬get請求時可通過a標簽，設置好href為調用地址即可

3.因為是登錄的場景，需要寫入登錄狀態，而且涉及到B端賬戶和C端賬戶的關聯關系，因此需要將登錄態寫入到cookie中，而且因為有頁面的跳轉，因此要做到cookie的跨域傳遞(一般是根域情況下，默認跳轉的時候自動傳遞過去)

node在設置cookie的時候可通過以下方式來設置:

單個cookie:

    res.setHeader("set-cookie", `aticket=${aticket};path=/;HttpOnly;Domain=${domain};expires=${expires};`)

多個cookie設置:

    res.setHeader("set-cookie", [`aticket=${aticket};path=/;HttpOnly;Domain=${domain};expires=${expires1};`,`bticket=${bticket};path=/;HttpOnly;Domain=${domain};expires=${expires2}`])

默認在跳轉的時候，根域相同的情況下，cookie是可以傳遞過去的。如果是不同的根域，就需要自己寫一層代理，將cookie寫入到目標域中即可。

4.跳轉的時候url設置時，需將url通過encodeURIComponent進行編碼，然後通過decodeURIComponent即可

⑧ 怎麼講前端的代碼打包成web app

方法/步驟

下載安裝MyEclipse2014，Android SDK，eclipse(需配置Android開發環境)
Java和Android環境安裝與配置，將另寫經驗分享，讀者也可網路參考其他相關資料，自行安裝
打開MyEclipse2014，新建一個HTML5 Mobile Application Project，命名，例如：hello

html5程序在工程www目錄下編輯；
編輯好我們的html5程序，下面就要開始學習打包了

這里介紹兩種打包方式：1、PhoneGap Build Service 打包
PhoneGap官網有相關教程可參考，不具體介紹
2、android SDK +eclispe 打包

android SDK +eclispe 打包(前提已配置好，android開發環境)：
Step1、啟動eclipse，新建Android Application Project，即Android工程，命名，例如：hello

Step2、將前面Myeclipse2014中編輯好的HTML5程序(www整個目錄）拷至剛剛在eclipse新建hello工程對應assets目錄下面

Step3、下面要做的就是如何將我們的HTML5程序在Android應用中啟動，這里我們要使用Android系統自帶的WebView控制項（具體信息參考Adroid開發文檔）---在工程下找到res->layout->activity_main.xml並打開，向裡面插入WebView控制項，編輯好自己想要的樣式

Step4、在主程序入口，用剛剛編輯好的WebView控制項將HTML5程序引入，此時，主體功能已實現，編譯工程即可得到apk

⑨ 如何使用SDK開發站點

SDK目錄結構

如果您是通過網盤下載SDK的zip包，需要自行安裝JRE並且解壓。SDK的基本目錄結構：
bin目錄：管理工具啟動腳本程序。Windows操作系統，啟動NewStartServer.bat或者StartServer.bat。非Windows操作系統，啟動startServer.sh。特別提醒，確保操作系統中使用最新的JRE 6以上版本
conf目錄：SDK伺服器的配置文件，請不要隨意修改
db目錄：存放SDK本地資料庫文件，請不要隨意修改
lib目錄：SDK伺服器依賴的類庫文件，請不要隨意修改
sdk_open_api.php文件：SDK支持的開放API介面，屬於數據開放介面，TAE應用也可以使用
tae_open_api.php文件：TAE支持的開放API介面，為TAE提供基礎服務，作為sdk_open_api.php的補充
topclient.php文件：淘寶開放平台（TOP）的服務調用介面

啟動SDK工具

根據具體操作系統，啟動bin目錄中的啟動腳本。本例中使用的Windows操作系統運行的結果：

SDK將會自動啟動用戶偏好的瀏覽器：
注意：伺服器埠，與後面的訪問的時候的埠保持一致。

當前SDK工具沒有提供TAE APP的應用管理頁面，而是需要開發者手動綁定開發。接下來具體介紹如何開發TAE應用。
成功啟動後，目錄結構會發生變化：

不難發現，apps目錄被自動創建了，該目錄就是管理TAE 應用的目錄。

目錄結構及配置

首先，使用投票應用voteapp為例，其目錄結構如下圖：

從上圖中，可以初步了解一個應用APP的目錄基本結構，接下來，詳細詳細介紹各個目錄的作用以及規范。
靜態資源目錄：assets目錄，包括js、css和圖片文件。圖片文件均存放在imagse子目錄中，頁面渲染樣式CSS文件都存放在stylesheets目錄中，而Javascripts目錄則是管理JavaScript腳本文件。後面的章節會具體介紹如何訪問這些資源文件。
資料庫訪問目錄：目錄的文件復制資料庫訪問和sql的封裝。例如上圖中dbconfig.php則利用PHP的PDO技術，管理配置資料庫數據源，即PDO對象。其他的vote_xxx_.php則是資料庫訪問對象（DAO）的封裝。
應用服務目錄：service目錄管理封裝了相關的應用相關的核心業務邏輯PHP頁面。所謂的服務，就是為視圖頁面提供服務調用的介面，實現業務邏輯，減少代碼耦合度。
視圖文件目錄：view目錄是web層，負責頁面的布局、內容的展現和請求跳轉控制,tae web層的使用smarty模板引擎， tae自己實現了url的控制和映射，具體使用見配置文件。
app.yml是應用的配置文件，demo中具體的目錄可以通過配置文件統一配置，具體配置項見下文。

根目錄下app.yaml文件定義了該應用的具體組成部分，具體介紹如下：
!!com.taobao.tae.config.domain.Config
#應用元信息
title: voteapp
description: 投票應用新的結構
version: 1.0
language: php
author: shihong
thumbnail: /aaa.jpg

#type: 1 tae 模塊 2 獨立站點
type: 2

#全局css的配置
css: /assets/stylesheets/g.css

#首頁通過域名直接訪問的頁面如test.uz.taobao.com訪問時的頁面
index: /view/front/view.php

#http請求配置
urls:
#前端頁面
#url配置的是短域名，配置後可以訪問/view/front/view.php 相當於是 /d/index
- {handler: /view/front/view.php, url: /index}
- {handler: /view/front/report.php, url: /report}
- {handler: /view/front/report_jsonp.php, url: /reportJsonp}

#賣家管理頁面
- {handler: /view/admin/admin.php, url: /admin}
- {handler: /view/admin/itemlist.php, url: /itemlist}
- {handler: /view/admin/infolist.php, url: /infolist}
- {handler: /view/admin/vote_item_action.php, url: /voteItemAction}

#安全和許可權配置
#這個是前綴規則, url代表請求相對路徑的前綴。
#role代表安全級別，anonymous是任何用戶都可以訪問，
#developer是站點所有者才能訪問,
#shopcustomer 是表示登錄用戶可以訪問
security:
- {url: /view/front,role: anonymous } #表示/view/front下面的所有頁面是所有用戶都可以訪問
- {url: /view/admin,role: developer} #表示/view/front 下面的所有頁面是站點所有者才能訪問
- {url: /,role: anonymous }
開發簡單TAE應用
首先，讓應用開發人員更直觀的了解TAE 應用開發，引入一個HelloWorld應用工程來學習。

第一步：創建名為」hello_world」目錄第二步：建立應用的配置文件：app.yml

第三步：編寫應用配置文件內容(app.yml)!!com.taobao.tae.config.domain.Config

#應用元信息：用於

#應用名稱標題
title: HelloWorld
#應用描述信息
description: HelloWorld TAE應用的DEMO
#應用使用的語言，暫時支持PHP語言
language: php
#應用的作者
author: tae
#應用展示縮略圖
thumbnail: /assets/images/default-thumbnail.php

#type: 1 tae 模塊 2 獨立站點
type: 2

#全局css的配置 #目前一個應用只能有一個css文件
css: /assets/stylesheets/default.css

#首頁/index的配置，詳見下面的urls中的handler配置
index: /view.php

#http請求配置
urls:
#前端頁面,相對於應用根目錄
#以下幾種請求訪問方式URI均可：
#URI: / 需要進行index的配置
#URI: /d/index
#URI: /view.php
- {handler: /view.php, url: /index}

第四步：編寫首頁PHP文件（view.php）

在hello_world 應用目錄中，新建一個名為view.php文件。
請注意：頁面PHP文件是上一步中app.yml配置關聯的。非配置的PHP文件無法執行

⑩ 如何開發android sdk

在APICloud上看到android sdk開發指南，它們平台上叫功能模塊，摘要一些下來看你有沒有參考價值：

1.開發環境：

PC：Windows XP/Win7/8/Mac OS；

Eclipse3.7及以上；

ADT21及以上；

Android SDK 21（5.0）及以上；

JDK1.6或者1.7。盡量不要使用1.8，存在各種潛在問題；

其中Android環境推薦使用Google整合版的Eclipse：SDK ADT Bundle;

2.開發幫助參考

Android在線API文檔：

Javascript規范及入門：

JSON數據在線Viewer：

3. 框架設計

APICloud引擎以實現對操作系統底層能力的封裝和擴展，通過系統Webkit瀏覽器引擎開放API給Javascript調用的形式，實現了HTML+CSS+Javascript開發語言和Object-C/Java/C/C++等Native開發語言之間的橋接，極大的豐富和增強了標准Javascript的能力。令前端開發者通過JS即可調用移動設備的底層功能，如：電話、簡訊、定位、多媒體、跨域http請求等，並能將如網路地圖、支付寶等第三方廠商的SDK很容易的集成至App中來。

本SDK開放橋接機制，方便具有一定Android基礎的開發者自由開發定義Native擴展模塊，豐富JS的能力，提升App的用戶體驗。APICloud引擎框架橋接層設計如圖（2）：

4. 開發設計Native模塊

新建用於綁定映射至JS對象的類。在項目中新建Java類（以下以UZMoleDemo類為例，映射的JS對象為moleDemo），繼承自引擎Jar包中的APIMole或者UZMole類，並重寫相關函數。如下圖：

定義並聲明將被映射至JS類的Java函數。若想將Java類中的某個函數映射至JS對象供JS調用，需要將該函數聲明以「jsmethod_」開頭，並且聲明該函數為public，同時接收且僅能接受一個參數：UZMoleContext。

函數聲明格式：public void jsmethod_showAlert(final UZMoleContextmoleContext){}

前端如何封裝sdk

與前端如何封裝sdk相關的內容