首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

微信活动小程序性能优化实践

作者:louiszhai,腾讯增值服务项目管理员工 背景 为了满足日益复杂的小程序活动需求,腾讯增值服务项目组开发了一款Ulink活动小程序,该小程序以游戏社交圈为依托,提供游戏玩家基本的社交功能,如发帖...第二步,小图片base64入包,避免发送网络请求,大图片利用腾讯云压缩后下载,同时在微信小程序支持http2之前,我们合并了接口请求,提升了请求加载性能。...用户原始的相册图片比较大,经过一轮qq和微信压缩客户端压缩后,通常大小在1~2M之间,乘以9后,最坏的情况是,有18M的图片需要上传,18M还是太大了,为此,引入了canvas画布,通过对原图的宽高进行等比缩小...内存优化 渲染优化后,Ulink活动小程序整体上快了很多。我们注意到,发现页支持无限下拉加载,列表可能很长,随着用户图片增多,有没有可能导致小程序crash?...可以看到,Ulink活动小程序,内存峰值比初始值仅高了68M,内存维持在350M左右,而微博小程序,内存峰值比初始值已经高了180M,内存还在持续增长。

6.6K60

【微信小程序】---- redux 在原生微信小程序的使用实例

目标 学会 redux 在原生微信小程序的使用; 学习和思考微信小程序中封装 Provider; 2....createStore, combineReducers, applyMiddleware, bindActionCreators, compose }; 修改 redux 源码适配微信小程序...,收集; 由于微信小程序的逻辑层和视图层通信需要使用 setData 函数,但是调用太频繁,消耗性能,因此收集需要订阅的全局状态,统一将数据通知视图层。...最后在页面卸载函数中监听 unsubscribe 是否存在,存在就在页面卸载的时候执行unsubscribe函数。...订阅生成,但是如果不取消,就会一直存在,在修改全局状态时,会执行 listeners 中所有的订阅。但是页面卸载后下次进入就会生成新的 id,新的页面,所以需要重新订阅。

5.8K10
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    在微信小程序里,我们要怎样做数据分析

    近期本来打算系统的写一下App数据分析的套路,但忽然“微信小程序”发布了。作为一名信仰互联网和做数据分析多年的“老司机”,看到新事物我也是很兴奋的。...不过我还没看到有关于微信小程序里,如何进行数据收集和分析的讨论,所以还是抛砖引玉,自己先写几篇文章吧。...微信自己的数据统计 既然做了小程序平台,微信必然会有自己的数据统计功能,就像订阅号的统计一样。但小程序的交互可比阅读文章复杂得多,“与原生App一样的体验”当然也需要同样强大的数据分析系统。...GA如何在微信小程序里部署 开头我们就说过,常规的统计系统恐怕无法在小程序里部署。...也许有朋友不太熟悉GA,我的建议是赶紧学,网上随便搜一下都有N多教程文章,如果能找到老司机带路更好,在小程序的时代一定要在数据方面做好准备。

    3.6K60

    做微信小程序为什么要用微信公众号接口

    在微信小程序上线以来,很多用户都觉得小程序后台无所不能,基本能替换APP,不管是商城购物还是会员管理,还是产品展示等等,什么功能都可以做到,的确,小程序开发成本相对APP要低的多的多,但是小程序目前的成熟度相对公众号还是差了年份...1513584278480976.jpg 不过也不同担心,现在市场上的很多的开发公司已经做到了公众号小程序数据互通,所以小程序能呈现的内容就会更丰富些,小程序在实现比较复杂的开发的时候就很大一部分程度上都需要用到对接公众号的接口来呈现小程序...,目前小程序呈现的页面很多程度上都必须通过公众号的接口。...1513047778896870.jpg 如果这个时候你的小程序要求广泛,内容相对复杂,呈现给客户的是多样化的,那就需要让已经做了数据互通的一些公众号小程序开发公司了。...1467705130704451.jpg 所以当你想要做小程序的时候,如果觉得自己的需求相对多样化的情况,前期不要去自己注册小程序,因为当需要用到公众号小程序互通的后台的情况下,那就直接去注册一个公众号然后再在公众号后台去注册小程序

    5.8K20

    微信群报名怎么弄?这个小程序有新招

    小程序体验师:高童 在人人有微信的今天,「有事微信」被很多人挂在嘴边。 除了聊天,也有不少人喜欢直接在群里发起活动,收集报名信息。...然而,多个微信群跨群报名很麻烦,群消息里的报名信息也没有一个统一的归集处,整理起来劳心费力。 如何使用一键接龙?...打开「一键接龙」小程序,会看见首页下方有「新建」、「我发布的」、「帮助」三个按键,分别对应「发起接龙」、「查看或收集报名信息」以及「新手指南」功能。...而你的小伙伴进入分享卡片后,在底部的输入框内输入接龙文字(默认是 +1),点击「接龙」,即可参与报名了。 ? 如何收集报名信息? 这款小程序的一个优点,就是能方便地收集报名信息。...快在你的微信群发布一个接龙,一键群报名,和你的小伙伴约起来吧! ?

    4.7K30

    使用微信附近小程序优势 腾讯小程序怎么开发在哪里开发小程序

    “附近的小程序”的优势就在于: 微信小程序的本质,解决线下流量的问题,解决传统门店在移动互联网时代的困惑。...这就是我们常说的附近小程序,打开微信小程序,第一列就是附近小程序,随着越来越多的商家发现并开放了小程序,附近小程序栏目的数量逐日增多。 帮助商家提供更有效服务的工具。...就好比我把附近的小程序看成微信小程序的一个工具。能够给有效客户进行服务:提供地理位置信息、会员功能等等。 刚需的用户能够便捷享受服务。服务信息+地理信息让服务更近一步。...对于附近的小程序微信肯定还要继续开放,真正的服务于小程序本质目标用户,通过能力开放帮助更多传统线下门店转型。...借助速成应用微信第三方服务商,几千元钱就可以拥有一个互联网公司专业制作出来的微信小程序。 如果你对小程序开发、小程序加盟有兴趣的话,可提前进入速成应用小程序体验

    4.3K10

    微信小程序商城开发怎么做?企业如何做商城小程序

    今天珍奶bb给大家简单唠唠微信小程序商城开发怎么做?企业如何做商城小程序?在唠微信小程序商城制作流程前,先给大家科普一下当前的实体经济环境是如何的?制作一个微信小程序商城是否存在它的必要性。...换店铺肯定是因为做不下去了,投入产出比低,才选择结业或者换地方的。那么微信小程序商城能带来什么帮助?你说微信小程序商城能给你带来客户,不错,的确可以,但是这里的量很少。...一定要找可以签合同,开发票的公司或者平台,实地考察也不错,我在第一步推荐的☞第三方微信小程序商城制作平台就满足签合同、开发票、实地考察这三个条件。...如果是选择用小程序商城模板来做微信小程序制作的企业,则需要选用比较合适的微信小程序模板以及结合平台给的素材,来完成微信小程序页面的设计了。...由于微信商城小程序需要收款,因此企业们还需要再开通一个微信商户号进行收款,这个也是在微信公众平台上操作。

    3.7K00

    微信小程序微信登录

    image.png 开发接口 登录 wx.login wx.checkSession 签名加密 小程序登录 小程序可以通过微信官方提供的登录能力方便地获取微信提供的用户身份标识,快速建立小程序内的用户体系...登录流程时序 小程序,开发者服务器,微信接口服务 wx.login()获取code wx.request()发送code 登录凭证校验接口 appid+appsecret+code session_key...+openid等 自定义登录 与openid,session_key关联 image.png image.png image.png 微信登录授权: wx.authorize 提前向用户发起授权请求...,调用后会立刻弹窗询问用户是否同意授权小程序使用某项目功能或获取用户的某些数据,但不会实际调用对应的接口,如果用户之前就已经同意授权,则不会出现弹窗。...} }) }, bindGetUserInfo (e) { console.log(e.detail.userInfo) } }) image.png image.png 小程序登录

    30.9K30

    微信小程序 this.setData(微信小程序setstorage)

    微信小程序setData()使用: ##Page.prototype.setData(Object data, Function callback) setData 函数用于将数据从逻辑层发送到视图层...,赋值为:“初始化” }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { } }) 在页面中显示...: 在onLoad()函数中调用setData() onReady: function () { this.setData({ value:"调用setData()修改后的值"...,所以我们可以在onLoad()中定义一个变量that ,将this赋值给that,那么此时的that代表相对于onLoad()的当前对象,然后在success回调函数中直接使用that.setData...参考资料:微信公众平台 发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/125390.html原文链接:https://javaforall.cn

    25.5K30

    微信小程序Ⅳ

    https://blog.csdn.net/u011415782/article/details/79556117 前言 作为常见的项目开发习惯了,复用度高的代码都想提取出来,哪里需要就进行传参调用就可...初涉微信小程序的圈子里,毕竟会受新的规范限制,在此整理一下简单的 外部公共 js文件的引用、使用 使用方法 以个人开发项目中页面跳转的功能为例,简化其中的代码,参考步骤如下: ①....可自行定义需要的函数,重点在于,后面需要使用 module.exports,进行方法的暴露才能被其他 js 文件使用 exports: 通过该属性,可以对外共享本模块的私有变量与函数 推荐参考文章: 微信小程序...在 js 业务逻辑处理的位置,进行外部方法的调用(注意是否需要相关参数的传递) ? ③....{{imgServer}}/dbfl.jpg">我的 参考代码只是为了传参的使用,想了解的就多多参考官方文档 咯 附录 对于全局函数的配置,可参考文章 —— 微信小程序

    32K20

    微信小程序Ⅴ

    https://blog.csdn.net/u011415782/article/details/79559639 ♩ 背景 其实这篇文章几个月前就写完了,但是这段时间,微信小程序官方文档有了更新...运行效果如下: 注意观察我的数据获取情况,你会发现其中包含了 "unionID",这是因为我在微信开放平台进行了绑定操作,如果你没有这样的操作,那么就不会有这个数据 ?...具体参看 UnionID机制说明 注意配置信息的填写,需要正确填写自己的数据哦,应该歧义不大 二、新方法获取用户信息 如果你接触小程序时间较早,应该会知道,微信小程序官方之前是使用接口 wx.getUserInfo..."code",在本地服务器中请求微信的接口地址,从而得到"session_key" >接口地址为:"https://api.weixin.qq.com/sns/jscode2session?...♬ 附录 ♦ 推荐参考: 微信小程序登录数据解密以及状态维持 微信小程序登录逻辑整理 微信小程序:全局变量和本地存储什么时候用那个 ♥ 源码下载 ▽ CSDN-源码链接 欢迎指摘

    13.6K20

    微信小程序的下一站在哪里?

    微信官方对「推动小程序」问题所给出的答案是:更多的线下场景。可是线下为什么需要通过小程序来做入口?...看上去,线下是不是也没有那么需要小程序?这个结论还不能下的太早。 在几年前,二维码随微信普及时,不少人(包括我)对二维码的安全性问题提出质疑。...因为所有的小程序需要经过微信审核,这也在无形中教育用户:小程序是更安全的。 小程序确实能让用户获得更高的安全性,只是微信需要承担更多的责任了。...我曾经在小程序刚刚发布的时候写过一篇文章,当时我认为微信可以通过搜索入口来支持小程序,从而挑战百度的搜索流量。 到今天我都觉得这个特别合理,但可惜的是,现在微信里的小程序搜索基本没什么用。...相信微信在过去一年里也在不断迭代小程序的定位,今天也一样不会停止。谁也没法预测微信在哪一天又会放什么大招出来。 写在最后 「用完即走」是一种良好的用户体验,但应该还不是小程序的最终愿景。

    1.2K50

    微信小程序

    好久没有发布文章了,最近都在学习微信小程序 微信小程序非常的火,开发起来非常快,而且小程序是跨安卓端和苹果端的,被越来越多的创业公司所采用(成本低啊),了解一下很有好处 小程序的优势: 一、背靠巨大流量池...,强社交属性,易传播 二、不用安装,即开即用,即用即走 三、场景的连接、扩张和重构 四、更有效的营销 传统的前端页面是用html+js+css,微信小程序用的是wxml+js+wxss,就是把html和...css改装了一下 小程序官方文档地址:https://developers.weixin.qq.com/miniprogram/dev/framework/ 小程序官方demo(我拷贝到自己的仓库了):...微信开发者工具IDE做的也是很不错的 ? 工程结构如下 ?...在app.json的pages中注册一个页面后,左边pages下就会生成对应的文件夹,每个文件夹都包括js/json/wxml/wxss,每个模块已经独立好了,非常清晰 我自己写的demo地址https

    12.8K40

    微信小程序Ⅱ

    https://blog.csdn.net/u011415782/article/details/79544277 ☺前言 进行微信小程序的开发,有时需要设置全局变量,以方便在其他界面对同一数据的调用...举个例子: 在开发测试 阶段,比如自己网站的图片服务器网址,接口服务器域名等,不一定后期会有多大的变动,此时可以进行全局变量的设置,而后期有所变动只需更改一处即可....微信小程序,设计强烈要求项目的简洁性,对于图片文件尽量都使用网络资源请求,避免相对路径的资源引用,所以此时配置全局变量就显得极为方便、重要了 ☹ 配置/使用 初始创建小程序时,你就应该会注意到项目初始化的框架中...首先,需要获取应用实例 const app = getApp() 直接对需要的数组赋值,然后正常使用即可 imgServer: app.globalData.imgServer 当然,也可以在

    13.1K50

    微信小程序

    微信小程序今天正式上线了,但是怎么看到呢? 第一:升级微信到最新的版本:6.5.3 第二:在微信中搜索“小程序示例”,在搜索结果中找到黑色图标S形状点开它,进入这个页面也就激活了小程序。...第三:回到微信菜单栏发现,你会看到最下面一栏多了小程序的功能。...进入小程序就可以搜索小程序相关的例子了,下面介绍几款小程序例子: 腾讯视频 京东购物 猫眼电影 自选股 滴滴出行DiDi 等...... 如何开发小程序?...准备: 1.注册小程序账号 注册地址: https://mp.weixin.qq.com/cgi-bin/home?...t=201715 3.下载示例代码 下载地址: https://github.com/BeanDu/wxdemo 小程序包含一个描述整体程序的 app(由三个文件组成小程序逻辑--app.js,小程序公共设置

    19K100

    微信小程序

    什么是小程序 “小程序” 是一种不需要下载即可使用的应用,它实现了应用‘触不可及’的梦想, 用户扫一扫或者搜一下即可打开应用。 这也体现了‘用完即走’的理念,用户不用关心是否安装太多应用的问题。...小程序能干什么? 了解了什么是 “小程序”,所以我想大家已经意识到它能干什么了。 可以看得出来,“小程序” 的初衷不仅仅是一个 “小程序” 那么简单, 它的想法是给一些优质服务提供一个开放的平台。...在代码层面,我们来看看 “小程序” 的语言长什么样子: ? ? ?...看了上面几段代码,你可能会觉得很熟悉,没错,它们就是使用web端相关知识实现的,或许这对于熟悉web开发的前端人员又是一次机会,因为它的学习成本并不高,相对于原生APP开发(安卓或IOS开发)而言,微信...“小程序” 在应对许多商业级APP功能开发时,的确是一个较低成本的新选择;但对于交互频繁、功能复杂的程序,例如一些游戏APP,在短时间内它还是比不上原生APP的。

    46.8K81

    微信小程序Ⅷ

    前言 微信小程序,作为一个前端为主的语言,涉及到的页面布局自然跟 HTML、CSS 有很大的耦合性 此处作为日常的小知识积累 不定期,补充更新 ♫. 积累 ①....地址三级联动 *小程序 地址三级联动效果实现 ? ⑤....图片上传、删除、预览 微信小程序实现图片上传、删除和预览功能的方法 当然也可以参看官方 Demo ,但是其中没有删除功能 ⑥. open-data userAvatarUrl 头像做圆角 推荐文章...- 小程序之open-data userAvatarUrl头像做圆角 首先,你测试会发现这样一点:小程序open-data中的头像,我们是不能对其做圆角之类的处理 其中,我的前端代码为 :...小程序显示富文本 注意,这也是个重点,毕竟我们多数的后台对于文章内容啥的,都是用UEditor等编辑器生成的富文本内容,所以,在小程序页面上更要很好的适配显示 微信小程序之HTML富文本解析

    5.7K10
    领券