前端如何封装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相关的内容