首页 > 网名 正文
〈怎样把微信名字改成国旗〉怎样把微信名字改空白!

时间:2023-05-27 作者:佚名

背景

2019年10月1日在祖国70周年大庆之际,微信朋友圈被大家纷纷@微信官方要国旗的景象给刷屏了,在为祖国庆生的同时,玩的不亦乐乎。

在9月25日,我心血来潮决定在国庆前开发一个换头像的微信小程序为祖国70周年献礼!最终在国庆前夕上线发布了制作头像的小程序-【海豚趣图】,帮助10000多名小伙伴成功换上了国旗头像。

小程序虽然已经上线,但在【海豚趣图】这个小程序开发过程中的一些有意思的技术点我希望能总结一下和大家进行分享。

主要步骤

  • 获取用户头像
  • 图片模板
  • 图片合成

获取用户头像

制作自定义头像的第一步就是先选择图片。在【海豚趣图】的交互设计中,用户有三种选择图片的方式:微信头像、本地相册和相机拍摄。获取用户头像的产品设计如下图所示:

由于微信官方不再支持通过 wx.getUserInfo 接口来获取用户信息,我们必须通过使用 button 组件并将 open-type 指定为 getUserInfo 类型来获取或展示用户信息。

为优化用户体验,使用 wx.getUserInfo 接口直接弹出授权框的开发方式将逐步不再支持。从2018年4月30日开始,小程序与小游戏的体验版、开发版调用 wx.getUserInfo 接口,将无法弹出授权询问框,默认调用失败。正式版暂不受影响。

上图中弹出底部菜单的交互方式无法通过 wx.showActionSheet 来实现(因为该接口只能指定字符串文本,不能使用 button, navigator 等组件)。

因此,只能通过自定义 actionSheet 组件来实现以上功能。

mmp-action-sheet 组件

以下是 mmp-action-sheet 组件的代码。

index.wxml

<view hidden="{{!actionShow}}" class="mask {{mask}}" bindtap="actionHide"> <view class="actionSheet animated {{animation}}"> <slot></slot> <button class="close" bindtap="actionHide">{{closeText}}</button> </view> </view>

通过 slot 在 action-sheet 中插入自定义的内容,比如 button、navigator 等。

index.wxss

.mask{ position: fixed; top: 0; left: 0; width:100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 999; } .actionSheet{ width: 100%; position: absolute; top: 100%; z-index: 1000; overflow: hidden; } .actionSheet button, .actionSheet navigator{ color: #000; text-align: center; background: #fff; border-radius: 0; line-height: 3.5; font-size: 32rpx; border-bottom: 1rpx solid rgb(236, 236, 236); opacity: 1; } .actionSheet button:active, .actionSheet navigator:active{ color:#000; background: rgb(236, 236, 236); } .actionSheet button::after, .actionSheet navigator::after { border: none; border-radius: 0; } .actionSheet .close{ border-bottom: none; border-bottom: 50rpx solid #fff; border-top: 16rpx solid rgb(236, 236, 236); } .animated { animation-timing-function: ease-out; animation-duration: 0.2s; animation-fill-mode: both; } @keyframes fadeInBottom { from{ transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -100%, 0); } } .fadeInBottom { animation-name: fadeInBottom; } @keyframes fadeOutBottom { from{ transform: translate3d(0, -100%, 0); } to { transform: translate3d(0, 0, 0); } } .fadeOutBottom { animation-name: fadeOutBottom; } @keyframes fadeIn { from{ opacity: 0; } to { opacity: 1; } } .fadeIn { animation-name: fadeIn; } @keyframes fadeOut { from{ opacity: 1; } to { opacity: 0; } } .fadeOut { animation-name: fadeOut; } index.js Component({ properties: { actionSheetStatus: { type: Boolean, value: false, observer(newVal) { if (newVal) { ({ actionSheetStatus: true, animationMask: 'fadeIn', animationSheet: 'fadeInBottom' }) } else { ({ actionSheetStatus: false, animationMask: 'fadeOut', animationSheet: 'fadeOutBottom' }) } } }, closeText: { type: String, value: '取消' } }, data: { animationMask: 'fadeIn', animationSheet: 'fadeInBottom' }, methods: { closeActionSheet() { ({ animationMask: 'fadeOut', animationSheet: 'fadeOutBottom' }) setTimeout(() => { ({actionSheetStatus: false}) }, 300) } } })

组件只有两个参数:

  • actionSheetStatus 指定组件的初始展示状态,默认为false,表示不显示组件。

  • closeText 指定关闭按钮的名字,默认为 取消。

index.json

{ "component": true, "usingComponents": {} }

接下来在页面中调用组件,在组件中插入了3个 button 组件来实现来获取用户头像:

<action-sheet actionSheetStatus="{{actionSheetStatus}}"> <button open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo">使用微信头像</button> <button bindtap="pickPic" data-source-type="album">使用本地相册</button> <button bindtap="pickPic" data-source-type="camera">拍照</button> </action-sheet>

以上我们通过自定义组件 mmp-action-sheet 就解决了原生的 actionsheet 无法指定 button,从而无法获取用户微信头像的问题。

该组件我已经发布到 npm 包,需要用到的同学可以通过 npm 安装,也可以在 github 上查看源码和使用文档。

图片模板

有了原图,接下来我们需要选择图片模板。如果模板数量不多或者模板变化不频繁,我们可以直接把模板放在本地。鉴于我提供的模板比较多,放在本地会增大小程序源码的大小,我把模板上传到了小程序的云存储中,通过云函数来动态获取图片模板,方便以后模板扩展。

云函数 tpl 的代码如下:

// 云函数入口文件 const cloud = require('wx-server-sdk') cloud.init() // 云函数入口函数 ex = async (event, context) => { const wxContext = cloud.getWXContext() // 1. 获取数据库引用 const db = cloud.database() const MAX_LIMIT = 100 // 2. 构造查询语句 const countResult = await db.collection('template').count() const total = coun // 计算需分几次取 const batchTimes = Ma(total / 100) const tasks = [] for (let i = 0; i < batchTimes; i++) { const promise = db.collection('template').skip(i * MAX_LIMIT).limit(MAX_LIMIT).get() (promise) } return (await Promi(tasks)).reduce((acc, cur) => { return { data: acc.da), errMsg: acc.errMsg, } }) }

页面中调用云函数拉取模板:

getTpl() { const self = this // 调用云函数获取图片模板 wx.cloud.callFunction({ name: 'tpl' }).then(res => { ({ templates: res.re }) }) }

问题

到这里模板的获取逻辑已经没有问题了,但在开发过程中遇到了一个问题。模板图片的链接我使用的是云文件ID,当有大量图片并行加载的时候,只有部分图片能够显示,我看了一下dom节点其实都已经存在了,image的src的地址也都是正确的。

微信官方自2.3.0开始已经支持在image中使用云文件ID。云文件ID的格式为: cloud://xxx.xxx/templates/01.png。

我猜测可能是对微信云存储并发请求过多导致的(有知道的同学可以告知),因为我试了一下将云文件ID换成正常的HTTPS的链接是没问题的。

由此可知,可以想到有三种可行的解决方案:

  1. 将图片模板存储到外部OSS,使用https协议的链接。
  2. 使用 wx.getTempFileURL 用云文件 ID 换取真实链接,也就是https形式的链接。
  3. 控制图的并行加载数量。我的实践是将并行加载数量控制在20,当用户滚动的时候再发起下一次请求。

总结

以上主要分享了用户头像获取以及图片模板功能的实现及所遇到的一些问题。关于图片的合成是整个小程序的核心功能,下一篇单独拉出来说一下实现思路和潜在的问题。敬请期待!

扫码体验

读者可以扫码体验我们所讲述的两个功能点:

  1. 自定义actionsheet组件
  2. 图片模板加载

本文信息为网友自行发布旨在分享与大家阅读学习,文中的观点和立场与本站无关,如对文中内容有异议请联系处理。

本文链接:https://www.paituo.cc/wangming/1022548.html

  • 相关阅读

    [怎样根据名字改微信名字]怎样把微信名字改空白

    怎样根据名字改微信名字,怎样把微信名字改空白,怎样改微信名字的昵称相关介绍,微信昵称/名字是什么?微信号又是什么? 今天帮帮给大家分享微信使用全都会第7讲:微信昵称/名字和微信号的区别是什么 ?如何设置自己的微信昵称/名字和微信号。 微信昵称/名字——是我们给自己微信起的名字

    怎样把微信名字改成国旗,怎样改微信的名字和称呼…

    怎样把微信名字改成国旗,怎样改微信的名字和称呼,怎样把微信名字改成自己的名字相关介绍,今天上午 不少网友发现 自己微信好友的头像上 突然多了一面飘扬的五星红旗 朋友圈都被满满的“爱国风” 刷屏了~~~ 更有网友还把 微信当成哆啦A梦…… 一时间 大家齐刷刷地在向微信官方呐喊: “给我一

    “改空白微信名字怎么改“怎样把微信名字改空白

    改空白微信名字怎么改,怎样把微信名字改空白,空白微信名字复制粘贴相关介绍,与万门有关的梦,到了梦醒时分。 文 | 陈梅希 编 | 园 长 没有人能联系到童哲。 在很长一段时间里,创始人童哲是万门大学最大的IP。他活跃在早前的人人网和后来的知乎,留下很多受人追捧的文字;他出现

    怎样空白微信名字怎样把微信名字改空白

    怎样空白微信名字,怎样把微信名字改空白,怎样让微信名字变空白相关介绍,在此之前,网络上还流行梗,我们周围最神秘的组织不就是各大App的人工客服吗?在应用程序中,很难找到客服入口,也找不到活着的人,只有一个聊天机器人机械地响应.对于我们每天使用的微信应用程序,畸形已经在网

    怎样把微信名字改成国旗、怎样改微信的名字和称呼!

    怎样把微信名字改成国旗,怎样改微信的名字和称呼,怎样把微信名字改成自己的名字相关介绍,点击确认后,一张自己穿着民族服饰的美美照片就已经生成了。 你可以长按照片进行保存,如果不要二维码,也可以利用手机的截图功能去进行保存(把二维码部分截掉就可以了)。 男装也是非常帅气: 这个时候,就可以

    『微信改名字怎样才好听女』怎样把微信名字改成自己的名字!

    微信改名字怎样才好听女,怎样把微信名字改成自己的名字,微信改名字好听相关介绍,悲伤的文章通常很漂亮,读起来优雅悦耳,其实微信的名字也不例外。下面小编为大家整理的女微信名字很好听。 脾气古怪无人爱 毕竟我不讨喜 作业注定与我命中相克 浅夏﹌雨中弥漫着忧伤 陌路繁华δ终成傷 人心可

    (怎样把微信名字改成国旗)怎样把微信名字改空白!

    怎样把微信名字改成国旗,怎样把微信名字改空白,怎样把微信名字改成自己的名字相关介绍,最近微信朋友圈屏幕完全刷完了! 想要新头像的@微信公式 有@微信官方女朋友男朋友。 那边@微信的负责人问我国庆节7天能不能铲猫。 但是更多的是@微信当局想要国旗。 以后,微信中的超级阿凡达也瞬间变成了

    (最好的微信名字带颜色)怎样起微信名字最好?

    最好的微信名字带颜色,怎样起微信名字最好,最好的微信名字大全女相关介绍,“大家都说我T区的红色太深了,这会和病情的严重程度有关吗?挺害怕的。”家住北京的洪女士就此向人民日报健康客户端留言提问。 近期,“晒阳”的行为逐渐在社交媒体上流行,越来越多的新冠病毒感染者选择在微信群