文章详情

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

请输入下面的图形验证码

提交验证

短信预约提醒成功

小程序的开发文档web-view怎么使用

2023-06-26 09:13

关注

这篇文章主要介绍“小程序的开发文档web-view怎么使用”,在日常操作中,相信很多人在小程序的开发文档web-view怎么使用问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”小程序的开发文档web-view怎么使用”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

web-view 的使用

应当指定一个特定的路径,用于打开任意的在业务域名白名单内的页面。页面目录

由于所在页面只会渲染 web 页面,其他任何组件都不显示,所以,在相应的 HTML 里就只包含这样的一个组件即可:

web-view/index.js 的主要逻辑如下:

Page({  data: {    url: '',  },  onLoad() {    const sysInfo = wx.getSystemInfoSync();    const version = new Version(sysInfo.SDKVersion);    // web-view 组件是 1.6.4 基础库开始支持的    // 但是其 JS-SDK 却是从 1.6.6 才开始支持    // 所以这里要求最低为 1.6.6    if (version.isLowerThan('1.6.6')) {      return wx.showModal({        title: '提示',        content: '当前微信版本过低,无法在小程序内打开网页,请升级到最新微信版本后重试。',        showCancel: false,        confirmText: '知道了',        success() {          wx.navigateBack();        }      });    }    // 可以拿到 URL 里的查询参数    if (options && options.__host) {      let url = decodeURIComponent(options.__host || '');      const query = Object.assign({}, options);      delete query.__host;      url += '?' + util.stringifyQuery(query);      this.setData({url});  }})

其他页面在想使用 web-view 时就可以这样,方式1:

通过web-view打开网页

或者方式2:

const url = 'https://your.host.name/path/to/page?query_1=value_1&query_2=value_2';wx.navigateTo({  url: '/pages/webview/index__host=' + encodeURIComponent(url)});

数据缓存

可以比较充分地使用小程序的 storage 接口,进行本地缓存。建议缓存的数据包括:

元数据用户登录后的基础数据,例如 userId,token设备ID

图片资源

由于小程序的样式表里无法使用相对路径引用图片文件,所以很多时候只好使用 base64 进行转码。

常用的类

用于网络请求的 request.js,支持 Promise 接口版本判断,Version.js时间日期格式化,类似于 moment.js,但是要更为轻量级URL 解析与序列化,url.js

兼容性

iOS 与 Android 平台下,即便相同的小程序,也有许多细节上的差异。在进行兼容性测试时需要按照 H5 的平台兼容性进行测试。

此外,还有微信各版本的兼容性测试。前端要基于 Version.js 判断微信小程序 SDKVersion,以便对低版本进行友好的提示。

到此,关于“小程序的开发文档web-view怎么使用”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注编程网网站,小编会继续努力为大家带来更多实用的文章!

阅读原文内容投诉

免责声明:

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

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

软考中级精品资料免费领

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

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

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

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

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

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

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