微信小程序开发探索之路

背景

项目起始时间:2017-11-25 前端人数: 3 页面数: 6 一期上线时间:2018-01-16 在我们开发的过程中,小程序的生态也不断变化。例如 最开始不支持其打开的 web 页面调起小程序页面,后来则新增了 JS-SDK 并在高版本的基础库里支持了这样的功能;再例如它的 IDE 不断优化升级,开发体验变好;页面的5级跳转限制,改为了10级;小程序体积限制由 1MB 扩大为了 2MB …… 总体来说,一直在朝着好的方向发展。

web-view 的使用

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

页面目录

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

<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,以便对低版本进行友好的提示。

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏北京马哥教育

Python操作OpenOffice

OpenOffice是一个免费的、开源的办公套装,集成了允许开发者用不同语言进行开发的API。Python-UNO让你可以在Python环境下使用OpenOff...

1.1K80
来自专栏大闲人柴毛毛

架构高性能网站秘笈(五)——Web组件分离

什么是Web组件? 网站的静态网页HTML、JavaScript脚本、CSS样式、图片、动态数据称为网站的Web组件。也就是说,一个Web应用由各种各样的We...

41480
来自专栏腾讯Bugly的专栏

打造“微信小程序”组件化开发框架

导语 Bugly 之前发了一篇关于微信小程序的开发经验分享,小伙伴们在公众账号后台问了很多关于小程序开发方面的问题,精神哥在查阅相关内容的时候,发现了龚澄同学自...

50730
来自专栏FreeBuf

WordPress插件Google Analytics by Yoast存储型XSS漏洞(含POC)

WordPress著名插件Google Analytics by Yoast插件中曝出存储型XSS漏洞,该漏洞能够让未被授权的攻击者在WordPress管理面板...

269100
来自专栏我和PYTHON有个约会

Django来敲门~第一部分【6.2 HTML视图模板】

天下难事必作於易。天下大事必作於细。是以圣人终不为大,故能成其大 ——老子《道德经》

23520
来自专栏乐百川的学习频道

配置和美化OpenSuse Tumbleweed

在我的前一篇文章在虚拟机安装OpenSuse Tumbleweed中,介绍了如何在虚拟机中安装OpenSuse Tumbleweed。但是虚拟机上面并不过瘾,正...

41790
来自专栏建站达人秀

如何搭建 OpenLiteSpeed 面板

OpenLiteSpeed 是 LiteSpeed Technologies 开发的开源HTTP服务器。OpenLiteSpeed 具有高性能和轻量级的特点,并...

71210
来自专栏地方网络工作室的专栏

打造前端 Deepin Linux 工作环境——配置 XAMPP 集成环境

打造前端 Deepin Linux 工作环境——配置 XAMPP 集成环境 虽然前后端分离开发的我们,已经很少需要跑一个 apache+php+mysql 的集...

28450
来自专栏腾讯云商业智能分析团队的专栏

BI 产品中过滤器设置

在展示数据的组件上均可实现对数据的过滤,对已绑定数据的组件才能设置过滤条件。这里介绍一下常见过滤器的设置。

39310
来自专栏更流畅、简洁的软件开发方式

js的动态加载、缓存、更新以及复用(一)使用范围:遇到的问题:目标:页面结构:正文

使用范围:   OA、MIS、ERP等信息管理类的项目,暂时不考虑网站。 遇到的问题:   完成一个项目,往往需要引用很多js文件,比如jQuery.js、ea...

45750

扫码关注云+社区

领取腾讯云代金券