![](https://img-blog.csdnimg.cn/04953134c0a74cf1bb58470b3859198e.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
Mini Program
微信小程序是一种新的开放能力,开发者可以快速地开发一个小程序。小程序可以在微信内被便捷地获取和传播,同时具有出色的使用体验。
aiguangyuan
要全身心的投入,程序才会有些感觉!
展开
-
微信小程序性能与体验优化
1. 合理的设置可点击元素的响应区域大小;比较常见的是页面的点击按钮太小,用户点击不到按钮,这样用户体验很不好。2. 避免渲染页面耗时过长;当页面渲染时间过长的话,会让用户感觉非常卡顿,当出现这种情况时,我们应该检查一下当前渲染的页面是不过大。3. 避免执行脚本耗时过长;执行脚本耗时过长,用户也会感觉到非常卡顿,体验非常不好,如果出现这种问题,我们应该检查一下脚本的执行逻辑是否有问题,需要对脚本的执行逻辑进行相关的优化。原创 2024-07-02 23:50:44 · 451 阅读 · 0 评论 -
微信小程序的运行机制与更新机制
小程序运行在微信里面,小程序中有视图层、逻辑层还有Native系统层,当开发者用小程序开发工具开发完小程序以后,会把小程序编译发布到对应的微信服务器上,当小程序首次加载时,会把小程序的包从微信服务器上下载到微信里,这个时候就可以第一次的看到微信小程序了。当用过一次微信小程序以后,如果当前启动小程序为冷启动,这个时候会去读取缓存以及检查小程序是否有新版本更新,如果开发者在小程序后台发布了新版本之后,因为小程序的更新是异步的, 如果当前小程序在本地存在历史版本的话,那么打开的版本可能还是旧的……原创 2024-07-01 18:09:31 · 456 阅读 · 0 评论 -
微信小程序渲染层与逻辑层交互原理
在渲染层中触发相关事件时,事件并不是直接传递给逻辑层,而是从渲染层把事件传给系统层,系统层把事件转发给对应的逻辑层,逻辑层进行相对应的业务操作,将处理完成的数据返回给系统层,系统层把数据传递给渲染层,渲染层用于展示,这就是渲染层与逻辑层的交互关系。所以在小程序中有一个很忌讳的操作,不能频繁的去进行setData,否则小程序会卡死。另外如果一个变量不会影响页面渲染,就不应该放在data里,这样在更新数据时会过多的消耗系统资源。原创 2024-07-01 16:16:47 · 291 阅读 · 0 评论 -
微信小程序传统开发登录和云开发登录的区别
传统开发登录流程:用户端调用wx.login从微信服务器获取code;用户端用wx.request将获取的code传递给后端服务器;后端服务器将拿到的code传给微信服务器,换取openid和session_key;后端服务器将获取到的信息返回给用户端……原创 2024-06-26 00:44:22 · 205 阅读 · 0 评论 -
微信小程序图片懒加载如何实现?
微信小程序开发时,对于有图片的列表在加载时,为了用户体验更好,必需要对图片做懒加载。如下图所示,页面在打开时,图片会按需加载,这样用户体验没有那么生硬。以下将介绍图片懒加载的步骤:1.构建NPM:在小程序目录下初始化npm;2.安装插件:在项目根目录下执行以下命令,安装插件;3.使用插件:在要使用懒加载的页面引入组件......原创 2024-05-27 20:30:35 · 825 阅读 · 0 评论 -
微信小程序实现吸顶、网格、瀑布流布局
微信小程序开发通常是在webview模式下编写,但是对小程序的渲染性能有一定的追求,就需要使用Skyline模式进行渲染,同时在这种模式下有也有一些特殊的组件,可以轻松的实现想要的效果,本文将介绍在Skyline模式下如何实现吸顶、网格、瀑布流布局。原创 2024-02-03 18:04:36 · 2137 阅读 · 0 评论 -
微信小程序自定义弹窗组件 action-sheet
最近公司在开发短剧小程序,短剧的剧集展示交互需要用到组件 action-sheet,小程序自带的有这个组件,但是这个组件支持的功能比较单一,相当于是一个选择表一样,不能自定义很多内容,只能自定义一个组件来使用,以下是组件的实现。原创 2022-12-14 17:27:01 · 1084 阅读 · 4 评论 -
微信小程序中限制激励式视频广告位显示次数
微信小程序自从支持激励式视频广告位以后,很多小程序为了变现都加入了此广告位,广告正常观看结束的次数越多就越赚钱,但是观看次数的比率过高也会面临封号的风险,那么如何才能规避这个风险呢?实现思路:限制每个用户当天观看激励式视频广告位的次数,如果用户当天观看广告位超过了一定的次数就不再显示广告位,用户第二天打开小程序时清空第一天观看广告的次数,下面用实例代码来说明。第一步:在小程序的 onLau.........原创 2019-12-05 19:12:56 · 8346 阅读 · 0 评论 -
微信小程序中将图片与音乐制作成MV
最近一直在开发一个类似于小年糕的微信小程序,在开发制作MV功能时,花费了一些心思,其间主要遇到了以下一些问题点:1. 上传图片的动画效果如何像播放视频一样实现播放与暂停?2. 用户上传的图片数量不确定,在音乐没有播完之前,上传图片太多或太少将如何处理?3. 如何让展现的歌词与当前播放的那一句保持同步,即唱哪一句就显示哪一句?4. 当前音乐的播放时间如何与自定义进度条的进度保持......原创 2019-11-30 01:35:04 · 1611 阅读 · 2 评论 -
如何反编译小程序,亲测有效
微信小程序自诞生以来,高歌猛进,实现了很多的业务场景,也取代了APP的一些市场份额,现在各种微信小程序层出不穷,下面给大家介绍一下如何反编译小程序。工具与环境1. 安装node.jshttps://nodejs.org/en/,注意选择版本,一个是推荐版本,一个是最新版本,建议选择推荐版本,稳!2. 获取反编译脚本https://github.com/qwerty4721......原创 2020-01-11 09:19:08 · 5567 阅读 · 7 评论 -
微信小程序上传多张图片
开发微信小程序时,时常会用到多图上传的情况,由于微信API的特性,一次只能上传一张图片,然而实际的情况是我们通常会要求一次上传多张图片,所以只能通过循环调用 wx.uploadFile 来实现上传多张图片,下面展示一段之前写的代码,并且添加了注释,提供大家参考。wx.chooseImage({ // 最多可以选择的图片张数 count: 9, // original原......原创 2019-10-29 14:14:40 · 7873 阅读 · 2 评论 -
微信小程序分享路径传参的问题
最近在开发一个类似于小年糕的视频工具类的小程序,在写分享功能的时候需要实现以下两种场景1. 当点击某个视频分享出去时,好友打开到视频详情页播放视频,返回时跳到首页。2. 当在用户主页点击分享时,好友打开到用户的主页,返回时也跳到首页。以上实现的方法基本为分享时,分享的路径为首页并且传递一些参数,当好友打开时,通过获取传递的参数,来确定跳转到哪个页面。注意,之所以要从首页跳过去,是因为用......原创 2019-09-28 20:03:52 · 3041 阅读 · 0 评论 -
微信小程序中toLoaclDateString的问题
熟悉JS的码农都知道,在JS里有这样一个API,叫做toLoaclDateString,这个API可以快速的把从后端返回的时间戳转换为便于识别的时间格式,但是这个API在微信小程序却并不友好,在部分安卓机下面会发现经过它转换的时间格式月份是用英文展示的,看着蛋疼,所以还是老老实实的写一个方法分别获取年、月、日等信息后拼接来实现,下面记录一个封装好的方法,方便在以后的项目中重复使用,减少写一些重复代......原创 2019-09-26 16:47:13 · 493 阅读 · 0 评论 -
微信小程序实现保存影集和图片到相册
最近在开发一个视频和工具类的小程序,类似于小年糕,需要实现将用户制作的影集保存到本地手机的相册上,页面效果如下:实现的逻辑如下:1. 获取用户授权,如果之前已授权直接下载。2. 如果用户之前没有授权,则调起用户授权界面,让用户授权,用户同意则下载,不同意则提示。3. 如果之前调起授权了,但是用户拒绝了,打开设置界面,引导用户开启授权。以下是代码实现,欢迎大家复制粘贴和吐......原创 2019-09-26 15:36:21 · 3807 阅读 · 2 评论 -
微信小程序scroll-view在安卓机上出现横向滚动条的解决办法
最近在开发一款类似小年糕的微信小程序,应测试人员要求,要去除scroll-view在安卓机上有横向滚动条现象,经过一番捣鼓、折腾,其实主要还是百度,发现下面这个方法还是挺管用的,如下图红色方框里的代码。为了方便大家,特此将代码放到下面,欢迎大家复制粘贴及吐槽。::-webkit-scrollbar{ width: 0; height: 0; color: t......原创 2019-09-21 15:24:42 · 2576 阅读 · 1 评论 -
微信小程序中WebSocket的运用
近期在开发一个类似于小年糕的小程序,当用户在合成影集后会立马跳到个人中心的影集列表,但是立刻跳过去,服务端并没有马上制作完成,所以会有个“影集正在制作中”的提示,为了避免用户退出页面重新请求查看影集是否制作完成,决定前后端通信采用websocket通信的方式,当有影集制作完成时,服务端可实时向用户推送消息。websocket在实现时需要注意以下几点:1. 微信小程序同时只能有一个 WebS......原创 2019-08-27 17:41:11 · 6727 阅读 · 6 评论 -
微信小程序组件调用和传值
微信小程序像Vue和React一样赋于了组件的开发能力,支持组件的调用和传值,同时由于小程序上传时限制在2MB以内,对于稍微大一点的小程序组件的使用就特别重要了,下面给大家介绍下小程序的组件用法。1. 封装子组件在项目根目录下定义components文件夹,新建一个header和footer的文件夹,像小程序的页面一样分别定义js、wxss、wxml、json文件。header子组件的.........原创 2019-07-06 21:03:12 · 8495 阅读 · 0 评论 -
微信小程序插件wxParse的使用
由于微信小程序不支持后台富文本编辑器编辑的html,需要使用wxParse 这个插件来解析,下面介绍一下这个插件的使用方法。1. 下载插件在GigHub上面找到插件Demo,地址为https://github.com/icindy/wxParse,把Demo里面的wxParse目录拷贝到项目里面.2. 在当前页面的JS里引入wxParse.jsvar WxParse = req......原创 2019-07-06 16:45:09 · 4411 阅读 · 0 评论 -
微信小程序动画效果方法封装
微信小程序的动画如何实现?归纳起来主要有以下几步,下面通过代码来一一说明。首先需要在wxml中为需要添加动画的元素绑定动画属性,如下所示:<image animation="{{animationData}}" bindtap="bindViewTap" src="{{userInfo.avatarUrl}}"></image>说明:animation与js里......原创 2019-06-15 04:27:34 · 1407 阅读 · 0 评论