文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

微信小程序兼容性问题怎么解决

2023-06-26 08:15

关注

这篇文章主要介绍“微信小程序兼容性问题怎么解决”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“微信小程序兼容性问题怎么解决”文章能帮助大家解决问题。

微信小程序兼容性问题怎么解决

运行环境差异

微信小程序运行在三端:iOS、Android 和 用于调试的开发者工具。

三端的脚本执行环境以及用于渲染非原生组件的环境是各不相同的:

在 iOS 上,小程序的 javascript 代码是运行在 JavaScriptCore 中,是由 WKWebView 来渲染的,环境有 iOS8以上 
在 Android 上,小程序的 javascript 代码是通过 X5 JSCore来解析,是由 X5 基于 Mobile Chrome 53/57 内核来渲染的 
在 开发工具上, 小程序的 javascript 代码是运行在 nwjs 中,是由 Chrome Webview 来渲染的 
}, 尽管三端的环境是十分相似的,但是还是有些许区别:

ES6 语法支持不一致 语法上开发者可以通过开启 ES6 转 ES5 的功能来规避。

wxss 渲染表现不一致 尽管可以通过开启样式补全来规避大部分的问题,还是建议开发者需要在 iOS 和 Android 上分别检查小程序的真实表现。

ES6 转 ES5

在 0.10.101000 以及之后版本的开发工具中,会默认使用 babel 将开发者 ES6 语法代码转换为三端都能很好支持的 ES5 的代码,帮助开发者解决环境不同所带来的开发问题。

样式补全

开启此选项,开发工具会自动检测并补全缺失样式,保证在低版本系统上的正常显示。尽管可以规避大部分的问题 ,还是建议开发者需要在 iOS 和 Android 上分别检查小程序的真实表现。

兼容

小程序的功能不断的增加,但是旧版本的微信客户端并不支持新功能,所以在使用这些新能力的时候需要做兼容。

文档会在组件,API等页面描述中带上各个功能所支持的版本号。

可以通过 wx.getSystemInfo 或者 wx.getSystemInfoSync 获取到小程序的基础库版本号。

可以通过 wx.canIUse 来判断是否可以在该基础库版本下直接使用对应的API或者组件

获取系统信息

同步

let res = wx.getSystemInfoSync()console.log("同步获取系统信息:" + res);console.log(res);

异步:

wx.getSystemInfo({success: function(res) {console.log("异步获取系统信息:");console.log(res);},})

版本比较

微信客户端和小程序基础库的版本号风格为 Major.Minor.Patch(主版本号.次版本号.修订号)。 开发者可以根据版本号去做兼容

function compareVersion(v1, v2) {v1 = v1.split('.')v2 = v2.split('.')var len = Math.max(v1.length, v2.length) while (v1.length < len) {v1.push('0')}while (v2.length < len) {v2.push('0')} for (var i = 0; i < len; i++) {var num1 = parseInt(v1[i])var num2 = parseInt(v2[i]) if (num1 > num2) {return 1} else if (num1 < num2) {return -1}} return 0} compareVersion('1.11.0', '1.9.9')// 1

该基础库版本下直接使用对应的API或者组件的API

wx.canIUse(String)判断小程序的API,回调,参数,组件等是否在当前版本可用。此接口从基础库 1.1.1 版本开始支持。

String参数说明: 使用{API}.{method}.{param}.{options}或者{component}.{attribute}.{option}方式来调用,例如:

{API} 代表 API 名字  {method} 代表调用方式,有效值为return, success, object, callback  {param} 代表参数或者返回值  {options} 代表参数的可选值  {component} 代表组件名字  {attribute} 代表组件属性  {option} 代表组件属性的可选值

例子:

wx.canIUse('openBluetoothAdapter')wx.canIUse('getSystemInfoSync.return.screenWidth')wx.canIUse('getSystemInfo.success.screenWidth')wx.canIUse('showToast.object.image')wx.canIUse('onCompassChange.callback.direction')wx.canIUse('request.object.method.GET') wx.canIUse('live-player')wx.canIUse('text.selectable')wx.canIUse('button.open-type.contact')

Javascript 标准库兼容性问题

微信小程序的兼容性问题除了微信本身的 Bug 外,大部分是目标平台对 JavaScript 标准库支持程度不同造成的。像我最上面遇到的问题就是Javascript 标准库兼容性问题。对于这类问题我们可以打补丁,从其他地方找到比较完善的js代码,然后我们拷贝到我们的项目中。

关于“微信小程序兼容性问题怎么解决”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注编程网行业资讯频道,小编每天都会为大家更新不同的知识点。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     801人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     348人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     311人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     432人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     220人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯