微信小程序代码优化会带来什么新体验

众所周知，开发微信小程序需要小程序代码。如果能优化代码，结果会不会不一样？接下来小编会告诉你微信小程序代码优化会给小程序开发带来什么样的新体验。

1、提高页面加载速度——前端永恒的话题

小程序环境下如何提高页面加载速度？这是个大问题。我具体说一下。我们如何缩短从用户链接到新页面打开的时间？这里抛出一个核心关键点：

页面响应用户的行为，开始跳转，到触发新页面上的onload事件之间有一个延迟，大约是100-300ms (android响应比ios慢)。

这个延迟不短。我们可以利用这段时间提前发起新页面需要的网络请求。这样可以节省100-300ms(或者一次网络请求时间)。

知道这个差距，代码怎么实现？

说白了就是实现一个在a页上预加载b页数据的功能。然而，这种跨页面的小程序调用很容易使逻辑复杂化，并将不同页面的逻辑耦合在一起。因此，我们希望以不可见的方式隐藏预加载的逻辑，而不增加页面到页面的耦合和开发复杂性。

下面以腾讯视频小程序为例，说明小程序开发技术的实现。

当用户海报图片时，将执行以下代码(仅一行):

onplay:函数(e) {

这个。$route('/pages/play/index？cid='这个。_ cid)；

}

接下来，程序将加载播放页面：

接下来，程序将加载播放页面：

fetchdata:函数(查询){

},

onnavigate:函数(res) {

这个。$put('play-detail '，this . fetch data(res . query))；

},

onload:函数(查询){

这个。$ take(' play-detail ')| | this . fetch data(查询)；

}

可以看出，无论是外部页面的调用，还是实际逻辑的实现，都非常简洁。在第二页，我们扩展了page的生命周期函数，并添加了onnavigate方法。当页面即将创建但尚未开始创建时，将执行该方法。

老司机可能会发现这里有些奇怪。当主页时，根本不创建播放页面，对象也不存在。怎么访问里面的方法？

这里我们就来说说微信的页面机制。

当小程序启动时，所有调用page方法的对象都将存储在一个队列中(如下所示)。每次访问一个页面，微信都会重新创建一个新的对象实例(其实就是深度复制)。也就是说，当在页面a上执行click response事件时，页面b的实例还没有创建，此时调用的onnavigate方法实际上是页面对象的原型(applet启动时创建的那个)。而马上要创建的b页是另一个对象。因此，在onnavigate和onload方法中，该指针不引用同一个对象，因此临时数据不能存储在当前对象上。所以我们封装了一对全局缓存方法，$put和$take。

为了通用性，页面上常用的方法，比如$route、$put、$take，都是在页面的一个基类中定义的。基类还同时保存所有页面的列表，这样就可以根据页面名称调用特定页面的onnavigate方法。当然，不是每个页面都需要实现onnavigate方法。如果没有定义onnavigate方法，$route函数将跳过预加载链接，直接跳转到页面。所以对于开发者来说，不需要关心其他页面实现了什么，对外界完全透明。

2.用户行为预测

在上面的例子中，我们实现了用户主动页面并提前加载下一页数据的方法。在某些场景下，用户的行为是可以预测的，我们可以在用户之前预加载下一页的数据。让下一页在几秒钟内打开，进一步提升体验的流畅度。

以腾讯视频小程序为例，主界面分为三个选项卡(大部分小程序都是这样设计的)。通过简单的数据分析发现，进入首页的用户有50%会访问第二个标签页。因此，预加载第二页卡片的数据可以大大提高用户下一页的打开速度。

同样，让我们先看看代码实现。主页上预加载频道页面的姿态：

onready:函数{

//预加载频道页面

这个。$preload('/pages/channel/index ')

}

频道页面的实现方法：

onpreload:函数(req){

//拉数据

this.fetchdata({

id: req.query.channelid？req . query . channelid : defaultid，ispreload: true

})

}

类似于第一个例子，这里定义了$preload方法，onpreload事件被扩展到页面。页面调用$preload后，基类会自动找到该页面对应的onpreload函数，通知页面执行预加载操作。与第一个示例不同，这里的预加载数据将存储在存储器中，因为用户可能不会立即访问页面，而将数据存储在全局变量中会增加小程序占用的内存。微信会毫不犹豫的干掉占用内存太大的小程序。

也许对于大多数有app开发经验的同学来说，更常见的是先在页面上显示比较后缓存的数据，然后实时拉新的数据，再刷新页面。这种方法在小程序中可能体验不好，因为小程序的性能和页面渲染速度都不如原生应用。将大量数据传输到ui层是一项繁重的操作。因此，不建议使用这种方法。

3.减小默认数据的大小

如前所述，微信在打开新页面时会深度复制一个页面对象。因此，我们应该比较小化默认数据的大小，并减少对象中的自定义属性。有图有：

以一个有100个属性的数据对象为测试用例，在iphone6上页面创建时间会增加150ms。

4.组件化方案

微信没有为小程序提供组件化方案(我相信一定要实现)。但是不讨论组件化，写更多的代码是没有用的。下面是一个简单的基于组件的实现。

以腾讯视频回放页面为例。该页面定义如下：

其中p函数是自定义基类。这是一个很有用的东西，可以写基类中所有的常用逻辑，包括pv统计，源码统计，扩展生命周期函数，组件化等等。

函数的第一个参数是作为页面关键字的页面名称。第二个是page对象，其中扩展了comps数组，该数组包含所有要加载的组件。

以播放器组件/comps/player/index.js为例：

组件定义与普通页面对象完全一样，包括数据属性、onload、onshow等事件，以及页面响应的回调方法。wxml模板中定义的事件一一对应js事件。

基类所做的是将这些组件对象的属性和方法复制到页面对象(浅层复制)。其中数据属性被合并在一起。微信预定义的生命周期功能(包括自扩展功能)打包成队列，按顺序执行。比如系统调用onload方法时，实际执行所有组件的onload方法，比较后执行页面的onload。

以上是代码部分。至于wxml模板和wxss部分，将手动导入。

wxml:

wxss:

以上四点都是微信小程序代码优化后小程序开发的新体验。你可能需要自己操作每一个具体的点才能感受到。更多相关信息，请关注源社网小节目频道。

下面是题目的开头。如何做店铺小程序吸粉？标题到此结束

由于微信平台庞大的用户群，现在很多实体店选择申请店铺小程序进行推广。店铺小程序吸粉不仅可以增加微信小程序的用户数量，还可以对实体店起到引流作用。但是商店小程序吸粉应该怎么做呢？主要是通过线上线下的结合。

众所周知，微信作为一个大流量的平台，拥有超过9亿的用户，所以没有人愿意错过这种线上小程序流量红利。现在只要大家一谈电商，首先想到的就是淘宝，天猫，京东等。虽然微信的电商属性不如这些平台，但是从去年开始，微信已经在努力进入电商行业。比如微商城。当然，微信小程序也是作为电商行业出现的。如果能把微信微信账号和微信小程序结合起来，企业和商家比较终会通过这种结合获得大量流量。对于一些传统的零售业务，可以从线下转移到线上。但只要有微信小程序，就不需要app开发成本，不需要依附于平台，不需要大规模调整商业结构来开辟电商在线渠道。

1.线下：微信支付覆盖面广

此前由于小节目入口的限制，引流效果不明显。自从从微信支付完成页面打开直接进入商户小程序的功能后，用户爆款式增长。微信支付广泛覆盖线下，尤其是对于很多中老年人手机用户，微信支付比支付宝支付更常用。微信支付小程序模式允许传统零售业充分利用线下门店原有优势推广自己的小程序。

2.线下：物流lbs自动匹配

“邻近小程序”列表作为小程序比较重要的条目之一，不仅为用户使用小程序提供了方便，也为传统零售配送提供了参考。根据地理位置，用户可以从列表中输入的小程序都在一定的地理范围内，可以直接过滤掉分布范围过远的用户，提高用户的物流体验。同时，在线电子商务模式可以为远方的用户服务。

对于传统零售业来说，低成本开辟线上渠道转型新零售是不错的选择，但并不是所有的小程序都能满足商家对小程序的要求。所以选择定制开发是一个不错的方法，在移动零售店中拿下o2o小程序支持定制开发，这样小程序更适合你店铺的开发需求。

店铺小程序吸粉比较直接有效的方式就是线上线下结合，利用小程序为商家带来更多的利润。大家都学会了吗？如果想获得更多相关信息，请关注源社网的小节目频道。

这是第一段的结尾。下面是如何在比较后添加吸粉小程序。目前已经获得了538网友的青睐！正文到此结束