微信小程序开发探索之路
时间:2022-04-23
本文章向大家介绍微信小程序开发探索之路,主要内容包括背景、web-view 的使用、数据缓存、图片资源、常用的类、兼容性、基本概念、基础应用、原理机制和需要注意的事项等,并结合实例形式分析了其使用技巧,希望通过本文能帮助到大家理解应用这部分内容。
背景
项目起始时间: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,以便对低版本进行友好的提示。
- Java基础-21(02)总结字符流,IO流编码问题,实用案例必做一遍
- DeDeCMS v5.7 密码修改漏洞分析
- Java基础-20(01)总结,递归,IO流
- 一个Oracle bug的手工修复(r6笔记第59天)
- 由drop datafile导致的oracle bug(r6笔记第56天)
- Java中static关键字的作用
- Java基础-20(02)总结,递归,IO流
- Hive四种数据导入方式
- 34c3 部分Web Writeup
- 原来Oracle也不喜欢“蜀黍"(r6笔记第54天)
- Java基础19(01)总结IO流,异常try…catch,throws,File类
- 使用shell生成orabbix自动化配置脚本(r6笔记第53天)
- 现在 tensorflow 和 mxnet 很火,是否还有必要学习 scikit-learn 等框架?
- 数据的标准化与中心化以及R语言中的scale详解
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法