小程序开发实战概述：框架、API、组件、应用

框架

运行机制及更新机制

运行机制：

“小程序启动”有两种情况，一种是“热”开始”。如果用户已经打开了某个小程序，然后在某个时间再次打开它，此时不需要重新启动它。将后台小程序更改为前台。这个过程是热启动；冷启动表明用户第一次打开小程序或者被微信主动销毁后重新打开时，必须重新加载并启动小程序。

• 小程序没有重启概念。
• 当小程序进入后台时，客户端会保持运行一段时间。一定时间后（目前为5分钟），会被微信主动销毁。
• 短时间内（5秒）收到两次以上系统内存报警，小程序将被销毁。

更新机制：

冷启动时如果发现新版本小程序，会异步下载新版本代码包，并与客户端本地包同时启动，即，新版本的小程序还得等。它仅在冷启动后应用。如果需要直接应用最新版本，可以使用wx.getUpdateManager API来处理。

这部分虽然文档中有说明，但是比较隐蔽，需要强调一下。了解了运行机制就可以解释为什么刚刚关闭的小程序在打开后仍能保持之前的状态。了解更新机制就会有意义。新发布的小程序版本是否必须删除旧版本然后下载新版本才能使用新版本的内容？

如何清除小程序缓存？

• 通过胶囊空间'...'按钮清除 - 打开调试 - 控制台 - 微信 - wx.clearStorage() 方法。该方法删除存储中的数据。
• 使用微信“查找”选项卡-小程序-长按或向右滑动即可删除指定小程序。该方法会移除所有小程序，并删除所有内容，包括缓存数据、场景值以及存储中的页面。堆栈等

预览和远程调试的区别

调试小程序的方式有很多种，要么通过预览，要么通过远程调试。两者有什么区别？

将生成的两个二维码修改为URL：

• 预览URL为：https://mp.weixin.qq.com/a/~~xxt10QprXmU~rsguk7Cm9P3v2MCXJdpacg~♻远程调试URL为：:https:// /mp.weixin.qq.com/a/~~Rot_QPKUIn8~mzI5kQoA3w4QN0H6nkejvQ~~

可见其工作方式是将本地小程序打包上传到微信，扫码访问远程小程序服务。区别总结如下：

• 可以同时预览多台真机，但只能使用一台真机进行远程调试。
• 预览会忽略断点，远程调试会断点。
• 预览时可以忽略一些错误，有错误则远程调试将无法进行。

生命周期

生命周期分为页面生命周期和组件生命周期。以页面生命周期为例，不同的生命周期会对应不同的生命周期方法。

• onLoad：页面加载，页面只会被调用一次。
• onShow：显示页面，每次打开页面时都会调用。
• onReady：页面初始渲染完成。它只会为页面调用一次，这意味着页面已准备好并且可以与视图层交互。
• onHide：页面隐藏，当navigateTo或底部选项卡改变时调用。
• onUnload：页面卸载。

在对页面进行编码之前，应该考虑哪些数据应该只加载一次（放入onload中），哪些数据应该在每次关闭页面时实时更新（放入onShow中执行）。

Api

setData：

赋值操作是常见操作，但不同数据类型的赋值方法略有不同：

• 设置一个值到字符串：:对象属性赋值： ['obj.prop']:'value'
• 数组中对象属性的赋值：['arr[0].prop']:'value'

需要注意的是setData方法是：异步方法，一不小心，渲染页面会引发异常，所以不要把页面上的所有数据都放入data对象中，只需将页面视图层的数据放入data中即可，其他数据放入不需要全局显示的只在这。

chooiceVideo视频封面问题：

在wx.chooseVideo回调函数中，res中会有一个thumbTempFilePath属性值，即封面图片。问题是在模拟器中可以获取到这个属性但是在真机中却无法获取到这个属性。目前捕获封面图像的方法通常是通过后端处理。

组件

视频

• 级别：视频等原生组件具有最高级别。如果z-index设置不正确，导航框被视频遮挡，或者图标停留在被遮挡页面的某个位置，就会出现问题。处理方法见下文。
• 封面图：设置封面图一般有两种方式：通过海报属性设置封面图。这样，开发工具中的图像就会闪烁并消失。另一种方法是在视频标签上加上上限。 view、cover-img，问题是视频的宽高是300*200，img的宽高是200*150，但是这是一张宽高为300*200的图片（与视频相符），模拟器中没有问题。真机上的图像无法拉伸，保证原生播放按钮和时间。
• 播放视频：如果要播放视频，需要获取视频组件，通过wx.createVideoContext(videoId,this)获取视频对象。文档中的描述是：

创建并返回视频上下文的videoContext对象。在自定义组件中，第二个参数被传递到该组件实例以对该组件内的“视频”组件进行操作。

需要注意的是，自定义组件中必须传入第二个参数。其他情况不使用。同时，获取视频组件并运行play方法后，你会发现视频在模拟器中无法播放。困惑了半天，发现在机器上可以进行实际的Playback动作，是不是很意外？ ！ ！走过这个坑，再次印证了那句警世之言——“一切未经真机验证的自测都是流氓！”

cover-view

cover-view已正式制作用于控制原始“无法无天”的一组组件包括：地图，视频，画布，相机，直播播放器和直播推送器。它确实覆盖了组件，但封面显示本身有一些非常烦人的缺陷。

• 无法实现部分样式效果：仅支持基本位置、布局和文本样式。不支持设置单边边框、背景图片、阴影、overflow:visible等。
• 如果子节点超过了父节点，超出的部分就会莫名其妙的死亡。建议子节点不要超出父节点。
• 如果将自定义组件附加到封面视图，则自定义组件插槽及其父节点现在不支持通过wx:if进行显示控制和隐藏，否则封面视图将不会显示。
• 属性仍然没有得到很好的支持。页面底部的固定按钮可以随着页面滚动而上下“传送”。组件

Scroll-view

上有一个向左滚动属性。该属性可以指定向左滚动的距离，但是这个距离没有单位。我忍不住想知道这个距离的单位是什么，我做了以下测试：屏幕宽度 750 rpx。将每个小块的宽度设置为 150 rpx。在 iphone5、iphone6 和 iphone6plus 上将向左滚动设置为 150。页面性能如下：

• 初始状态：

• iPhone 5 上的性能

• Iphone6 上的性能

• Iphone6 上的性能​​​​​​plus

您会发现，滚动空格超过 5 倍，6p 中恰好有两个空格，6p 中少于两个空格。不难理解，左滚动单位是 px ，不同机型由于不同机型单位转换不同，性能也不同：

• iPhone6 ​​​​​​​​​​​​加上：1rpx = 0.552px 150px = 271.5rpx
• phone : 1rpx = 0.5px 150px = 300rpx
• phone5: 1rpx = 0.42px 150px = 357rpx

因此，除非您自己更改单位，否则scroll-left属性不太实用。

应用

下拉刷新问题：

• 场景：需要下拉页面重新加载数据，刷新页面，小程序开启下拉刷新时，修复了当顶部标签栏（水平栏）被下拉时出现在ios侧。故障，显示背景，Android没有这个行为。
• 解决方案：由于Android和iOS之间的变现差异太大，因此在需要更新的页面上应该避免页面顶部的固定标签栏。您可以自定义页面的标题，并在标题中编写自定义选项卡栏。

那么你如何管理你的头脑呢？通过在app.js中设置navigationStyle属性，默认值为'default'，自定义值为'custom'。

• 默认头部样式如下：

• 自定义头部样式如下：

可以看到，调整头部样式时，头部只存储了胶囊，其他的都存储在头部中。零件可以。自我强加的。

视频级别问题：

• 场景：页面有视频标签，会有弹框，页面底部有固定按钮。这两个部分不允许视频报道。
• 解决方案：覆盖视频组件的官方方法是通过封面视图，但由于封面视图对样式的支持不足以及其自身的问题（见上文），我们不使用封面视图处理。处理方法是采用图像和视频交替显示的方法。初始显示的是图像，点击播放时，会打开视频组件进行显示。当页面滚动并出现弹出框时，它会隐藏视频组件。请注意，它是隐藏的。它是通过hidden属性隐藏的，而不是直接用wx:if关闭。由于视频播放中途暂停，下次播放必须从上次结束位置开始。 、if wx:如果使用的话，无疑会增加实现的难度。

总结：

本文从框架、API、组件、应用四个方面入手，讲解开发过程中遇到的问题。问题分析比较简单，但是比较实用。