初探微信小程序开发，宝安微信小程序开发
来源：未知 浏览量：172次
背景
项目起始时间：2017-11-28
前端人数： 3
页面数： 6
一期上线时间：2018-01-16
在我们开发的过程中小程序的生态也不断变化。例如 最开始不支持其打开的 web 页面调起小程序页面后来则新增了 JS-SDK 并在高版本的基础库里支持了这样的功能；再例如它的 IDE 不断优化升级关键词布局后来则新增了 JS-SDK 并在高版本的基础库里支持了这样的功能；再例如它的 IDE 不断优化升级开发体验变好；页面的5级跳转限制高质量外链资源开发体验变好；页面的5级跳转限制改为了10级；小程序体积限制由 1MB 扩大为了 2MB …… 总体来说一直在朝着好的方向发展。
应当指定一个特定的路径高质量外链资源一直在朝着好的方向发展。
页面目录
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 接口高质量外链资源方式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 接口进行本地缓存。建议缓存的数据包括：
元数据 用户登录后的基础数据例如 userIdtoken 设备ID 图片资源由于小程序的样式表里无法使用相对路径引用图片文件所以很多时候只好使用 base64 进行转码。
常用的类 用于网络请求的 request.js支持 Promise 接口 版本判断Version.js 时间日期格式化类似于 moment.js但是要更为轻量级 URL 解析与序列化url.js 兼容性iOS 与 Android 平台下即便相同的小程序也有许多细节上的差异。在进行兼容性测试时需要按照 H5 的平台兼容性进行测试。