背景
项目起始时间:2017-11-28 web-view 的使用应当指定一个特定的路径,用于打开任意的在业务域名白名单内的页面。 页面目录
由于 <web-view src="{{url}}"></web-view> 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: <navigator url="/pages/webview/index?__host=https://your.host.name/path/to/page&query_1=value_1&query_2=value_2"> 通过web-view打开网页 </navigator> 或者方式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,以便对低版本进行友好的提示。 |
初探微信小程序开发
发布:2018-05-04 15:31浏览: 次来源:网络 作者:cola
免责声明:本站所有文章和图片均来自用户分享和网络收集,文章和图片版权归原作者及原出处所有,仅供学习与参考,请勿用于商业用途,如果损害了您的权利,请联系网站客服处理。
相关文章
- 微信小程序app.json文件常用配置说明2021-07-09
- 微信小程序文字控制单行超过显示省略号2021-07-09
- 微信小程序参数传递的几种方法2021-07-09
- 微信小程序使用button按钮分享2021-07-09
- 微信小程序的setData2021-07-09
- 小程序分享,获取openid2021-07-08
- 微信小程序-实现tab2021-07-08
- 微信开发者工具新建和导入小程序2021-07-08
- 微信小程序实现点击拍照长按录像功能2021-07-08
- 微信小程序必知知识2021-07-08