太阳集团5493conlogo

  • 微博
  • 微信
  • QQ好友
  • QQ空间
  • 百度
详细内容

你想知道的Kbone适配-杭州微信小程序开发为你转播

Kbone 推出已有一段时间了,使用 Kbone 的你有没有遇到一些问题呢?


今天小编带大家来探一探 Kbone 接入过程中你可能会遇到的情况~

请求



对小程序了解的同学应该都知道,小程序的请求使用的是 wx.request,而在 Web 中,使用的是 XMLHttpRequest,那用 Kbone 要怎么处理呢?


简单~直接使用 XMLHttpRequest (公测中)。
当然,如果你想做一些个性化的处理,也可以自己实现 adapter。

DOM/BOM




为了更好地适配小程序端接口,Kbone 在原有的 DOM/BOM 之上进行了扩展,当然,这些适配也不是完全的,比如 getBoundingClientRect 在小程序中只能通过异步的方式实现。或者是对于 Kbone 没有实现的接口,你可以通过 扩展 API 来适配~

 3.png


全局变量



Web 开发中,我们使用 window 的方法都是直接访问的,因为 window 是顶级作用域,但是在小程序中却不是,所以直接访问是会报错的。
为了解决这个问题,Kbone 允许注入全局变量,这里通过 generate.globalVars 来实现:
    // mp-webpack-plugin 配置{    generate: {        globalVars: [            ['TEST_VAR_STRING', '\'miniprogram\''],            ['TEST_VAR_NUMBER', '123'],            ['TEST_VAR_BOOL', 'true'],            ['TEST_VAR_FUNCTION', 'function() {return \'I am function\'}'],            ['TEST_VAR_OTHERS', 'window.document']       ],    },    // 其他配置...}

    样式




    开发页面中,样式必不可少。由于 Web 与小程序标签的差异,Kbone 在转化过程中会将标签选择器转换为类选择器,比如:


      // Webspan {}// 小程序.h5-span {}


      这里可能会带来选择器的权重被提升,所以依赖选择器权重这里需要手动调整一下。


      Tips:小程序不支持 ~ 选择器




      第三方UI库




      目前,第三方 UI 库存在兼容的问题,有些接口无法兼容,比如 getComputedStyle、getBoundingClientRect 等接口。所以,Kbone 推出 Kbone-ui 来解决兼容问题。

      4.jpg


      环境区分



      虽然是多端适配,但是总会有一些情况是要区分处理的,比如小程序有 map 组件可以使用,而 Web 端没有,这个时候需要我们从代码层面进行适配处理。
      对于开发者来说,我们可以通过 webpack 注入一个环境变量:
        // webpack.mp.config.jsmodule.exports = {    plugins: [        new webpack.DefinePlugin({            'process.env.isMiniprogram': true,        }),        // ... other options    ],    // ... other options}
        后续在业务代码中,就可以通过  process.env.isMiniprogram 来判断是否在小程序环境:
          if (process.env.isMiniprogram) {    console.log('in miniprogram')} else {    console.log('in web')}



          5.png



          关于 Kbone 你有什么使用问题或建议?
          欢迎来到 #Kbone官方框架 社区主页发帖交流





          阅读原文


          太阳集团2138手机版
          更多
          • 2022 Q4 用户最喜爱的朋友圈广告-

            2022 Q4 用户最喜爱的朋友圈广告-

            基于用户的互动行为及广告效果数据指标,我们找出了2022年第四季度用户最喜爱的朋友圈广告TOP 10(排名不分先后),期待更多好创意与你相见。TOP朋友圈广告用

          • 生活特辑 Vol.14 ᅵ

            生活特辑 Vol.14 ᅵ

            Good Life生活广告榜吃喝玩乐品生活,发现身边新乐趣。快来看看本季最受欢迎的身边广告。今天“吃”什么?吃喝福利,任你选新的一年不如用味觉拉开序幕不知道吃什

          • 速速集合,新年红包封面领取攻略来了-杭州

            速速集合,新年红包封面领取攻略来了-杭州

            新年怎样发红包姿势最帅?当然是用上最炫的红包封面!今年,红包封面又又又升级啦,全新动态红包封面上线,祝福更“动”人心。微信广告将携手众多品牌派发多款精美别致的红

          • 视频号互选好内容|11月-杭州网络公司为

            视频号互选好内容|11月-杭州网络公司为

            精选11月优秀视频号互选案例,为创作者指引好内容的风向,洞悉好商单的秘诀。理想汽车× 所长林超通俗科普,干货满满科技自主的路上,理想汽车的答案是什么。所长观察敏

          • 微信创作者营销价值与营销策略白皮书发布-

            微信创作者营销价值与营销策略白皮书发布-

            腾讯广告互选平台始于内容致远商业一图读懂微信创作者营销方法论微信创作者四大特点长久创作,深耕原创内容长久创作87.2%公众号运营超过2年垂类丰富体育 媒体 财经

          • 精华笔记|2022 腾讯广告创作者营销峰

            精华笔记|2022 腾讯广告创作者营销峰

            12月22日,腾讯广告以直播形式举办首届创作者营销峰会(以下简称“峰会”)。无论对广告主 / 代理商,还是创作者 / MCN机构,今年的峰会可谓是“一场及时雨”

          • 烟花贺岁:朋友圈点赞互动广告上线-杭州微

            烟花贺岁:朋友圈点赞互动广告上线-杭州微

            新年有新喜,微信广告全新推出朋友圈点赞互动广告,让品牌和用户一起放烟花,迎新年。品牌领赞,首枚烟花惊喜绽放;用户跟赞,个性化品牌烟花跃然出框;双向互动中激发更强

          • 即刻预约|2022 腾讯广告创作者营销峰

            即刻预约|2022 腾讯广告创作者营销峰

            连接放大价值腾讯广告创作者营销峰会2022/12/22邀请函尊敬的嘉宾:在内容创作者的黄金时代,无数品牌借力优质内容开辟出了商业增长新路径。作为微信商业内容官方

          • 搞笑与搞钱,这些创作者都很认真-杭州网络

            搞笑与搞钱,这些创作者都很认真-杭州网络

            在微信视频号上有着许多视频创作者,他们因为热爱,而创作出非常多有趣的视频。然而每一个视频背后,创作者都要付出无数的心血和努力。当粉丝达到一定数量,也具备相对成熟

          • 朋友圈橱窗广告上线-杭州APP开发为你呈

            朋友圈橱窗广告上线-杭州APP开发为你呈

            微信广告上线朋友圈橱窗广告,满足广告主更丰富的素材展示诉求。广告支持配置一个主素材和三个副素材,组合形式突破原生形态,更易吸引用户停留点击。朋友圈橱窗广告示意橱

          太阳集团5493con是一家专门致力于为企业提供全方位网站建设服务。年轻的我们带着梦想和对网络的热情走在互联网道路的前沿,一路走来,我们的努力和真诚得到了更多客户的认可。在未来的发在未来的发...

          浙公网安备:33010602011153

          seo seo