- 走出焦虑并不难
负面情绪多,压力大,焦虑,失眠自习室。
2023-03-15 - 【实战记录】短信跳小程序
需求背景: 产品同学希望我们做美团这种短信跳小程序的功能,如下图所示,需求描述这里就不多介绍了,大家应该都能明白了。 [图片] 需求分析: 咋一看这需求好像跟前端同学没啥关系,但我们后端同学反馈,可以接口去生成scheme码,但腾讯云的短信模版不可以设置动态连接,又因为scheme码有限制只能一个用户访问。综上所述,后端同学搞不定了,谁让咱们是一个团队呢,于是,前端开始接锅,经调研,采用h5跳小程序的方案,文档请参考https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/staticstorage/jump-miniprogram.html 具体实现:(uniapp项目) 1、开通云开发,开通静态网站,新建云函数 2、将官方示例中的jump-mp.html上传到云端 3、开始配置uniapp项目 App.vue onLaunch: function (options) { wx.cloud.init({ // env 参数说明: // env 参数决定接下来小程序发起的云开发调用(wx.cloud.xxx)会默认请求到哪个云环境的资源 // 此处请填入环境 ID, 环境 ID 可打开云控制台查看 // 如不填则使用默认环境(第一个创建的环境) //env: '你的环境ID', env: '***', traceUser: true, }) } 在项目的跟目录下新建cloudfunctions,然后将示例中的public文件复制到cloudfunctions vue.config.js const path = require('path') const CopyWebpackPlugin = require('copy-webpack-plugin') configureWebpack: { plugins: [ new CopyWebpackPlugin([ { from: path.join(__dirname, 'cloudfunctions'), to: path.join(__dirname, 'dist', process.env.NODE_ENV === 'production' ? 'build' : 'dev', process.env.UNI_PLATFORM, 'cloudfunctions') } ]), ] } manifest.json "mp-weixin": { "cloudfunctionRoot": "cloudfunctions/", } 都配置完以后,发现cloudfunctions文件上面并没有小云朵的图标,也就是说,并没有配置成功,于是就开始找原因,先是发现uniapp打包之后 的文件怎么没有project.config.json了,找到开发者工具,选择”小程序模式“,它出来了,但是一搜索,并没有cloudfunctionRoot,我吐了, 于是手动把 "cloudfunctionRoot": "cloudfunctions/"加了进去,就好了,最终也完成了短信跳小程序。 [图片]
2022-12-30 - 如何找微信公众号平台人工客服
如何找微信公众号平台人工客服
2022-08-28 - 人工服务电话?
人工服务电话有吗?
2021-01-22 - 解答疑问 | 公众号文章中为什么不能添加外部超链接?
在编辑排版公众号文章时,咱们能经常遇到文章中需要添加外部超链接,但是有的公众号是无法添加外部超链接,这到底是什么回事呢?是有什么条件限制吗?懂点君查阅相关资料给大家归纳整理了一下,让大家了解的更清楚! 超链接的类型 我们可以把超链接分为两类,一类是公众号内部的链接,包括本公众号和其他公众号群发的文章、发布的文章、话题和页面模板的链接地址,另一类是非公众号内部链接,也就是其他外部链接,比如企业官网链接、活动H5链接、H5商城链接等。 [图片] [图片] [图片] 公众号的分类 公众号的分类按照类型、认证情况、微信支付开通情况来进行区分,分别是根据类型分为服务号和订阅号,根据认证情况分为已认证和未认证,根据微信支付开通情况分为已开通和未开通,这样就可以组合出多种情况的公众号,并且罗列出他们支持外部链接的情况,详见如下表: [图片] 大家可能会问,这个表格不太懂看,懂点君举一个例子,横向开通支付,纵向已认证订阅号,两者的交叉点就是结论:支持其他外部链接。 温馨提示 既是认证的公众号,又开通了微信支付,还是无法添加外部链接,这个是由于某些超链接系统会不支持,具体的原因不是很清楚,大家知道一下就行。 另外,到目前为止订阅号仅支持政府、媒体类型的账号申请开通微信支付,其他类型的订阅号暂时不支持申请开通微信支付(引用微信支付官方回复)。
2021-11-29 - 小程序中如何修改 svg 图片的颜色
已知小程序 <image /> 支持 svg 图片渲染;但是在开发场景中,如果我们需要修改 svg 图片原有的颜色,往往需要去修改 svg 文件本身。这样修改既不优雅,也不利于 svg 图片的复用。有没有一种方法可以更加优雅地去修改 svg 图片的颜色呢? 一、可行性探讨 svg 源码修改 既然要在原 svg 文件的基础上修改颜色,让我们先看一下 svg 源码是如何的,下面是一个三角形的 svg 源码: [图片] 我们可以发现在源码中,<path> 中的 fill 属性便是我们需要修改的颜色。如果我们能读取源码,修改对应属性,便能修改 svg 图片的颜色了;但开发过程中,我们的 svg 源文件往往是网络资源,并不能直接修改,有没有一种方法可以将 svg 源码直接在小程序进行渲染呢? svg 源码渲染 小程序原生虽然不支持 <svg> 渲染的,但我们可以通过 background-image 样式属性对 URL 资源进行加载;我们只需要将修改后 svg 源码进行 URL 编码,即可将我们想要的效果渲染出来。 方案总结 1、读取 svg 文件 2、匹配 Hex 字段并进行修改 3、将修改后的 svg 数据进行 URL 编码 4、将 URL 数据通过 background-image 样式属性进行渲染 二、技术实现 调用方式:组件 为方便调用,将其封装自定义组件,组件命名 svg,承接 svg 渲染能力,后续可在此基础上丰富 svg 的能力。 入参:src <string>,colors <string[]> 通过 src 参数传递 svg 图片链接; svg 图片可能包括多个元素,这个时候就需要我们对不同的元素定义各自的颜色。 默认属性 由于 svg 自身不存在尺寸,我们可以将其宽高同时设置成 100%,这样就可以通过承载其的父元素决定 <svg /> 的渲染尺寸。 三、<svg /> 组件代码 代码片段,点击进入 四、更多功能扩展 自定义 svg 渲染 前面我们修改 svg 图片是通过修改其 fill 属性实现的;更进一步我们完全可以不依赖外部资源,自定义 svg 节点,按照 svg 的规范进行图片的绘制,感兴趣可以尝试尝试。
2022-06-22 - 微信登录API,unionid改变
https://developers.weixin.qq.com/doc/oplatform/Mobile_App/WeChat_Login/Authorized_API_call_UnionID.html 微信登录接口,同一个微信登录同一个应用openid相同,但是unionid改变了,这是什么原因?[图片]
2022-06-20 - wx.upLoadFile上传图片不同机型返回的数据格式不一样?
我们在用wx.upLoadFile上传图片时,返回的data数据存在格式不同的情况,目前只能代码里兼容一下,请问是什么原因? 大概能锁定是不同机型上返回的data数据不同,请官方给出回答。 下图为开发者工具和一部分机型上返回的数据 [图片] 下图为另一部分机型上传成功返回的数据 [图片]
2022-06-20 - 请问处方药服务类目对所需《互联网药品信息服务资格证书》的服务性质有要求吗?
《互联网药品信息服务资格证书》的服务性质有非经营性和经营性两种,请问处方药服务类目需要哪种服务性质的《互联网药品信息服务资格证书》,还是两种服务性质的都可以?
2022-01-09 - 小程序性能优化实践
小程序性能优化课程基于实际开发场景,由资深开发者分享小程序性能优化的各项能力及应用实践,提升小程序性能表现,满足用户体验。
10-09 - 如何实现加入购物车的抛物线效果
一、场景分析 在一些如商城、点餐小程序中实现购物车抛物线效果可以提升界面趣味性增加小程序用户体验。 二、效果预览 效果图压缩后速度有点快,请下载代码片段预览 [图片] 三、实现原理 当用户点击物品时记录当前触摸点,根据触摸点计算抛物线运动的顶点位置,通过触摸点、顶点、购物车的位置计算出抛物线运动轨迹,然后控制 icon 运动。 计算购物车在当前手机内的位置 [代码]/** 设置购物车的坐标位置 **/ wx.getSystemInfo({ success: (res) => { let busPos = {} // x y 坐标分别取屏幕百分之八十的位置 busPos['x'] = res.windowWidth * 0.8 busPos['y'] = res.windowHeight * 0.8 this.setData({ busPos }) } }) [代码] 商品点击事件的处理 点击物品后记录点击的位置,然后根据点击位置计算出抛物线的顶点位置,计算方式为点击位置的上方+150,右边+150(需要根据点击位置是否在购物左边还是右边进行判断)。 根据点击,顶点,购物车三个位置计算出抛物线运动轨迹 以3个控制点为例,点A、B、C、AB 上设置点 D、BC 上设置点 E、DE 连线上设置点 F,则最终的贝塞尔曲线是点F的坐标轨迹; 计算相邻控制点间距; 根据完成时间,计算每次执行时 D 在AB方向上移动的距离,E 在 BC 方向上移动的距离; 时间每递增 100ms,则 D、E 在指定方向上发生位移,F 在 DE 上的位移则可通过 AD/AB = DF/DE 得出; 根据 DE 的正余弦值和 DE 的值计算出F的坐标。 开启定时器,依次按照贝塞尔曲线位置做动画位移 使用定时器将抛物线运动轨迹做动画位移。 定时器执行完动画后将购物车角标+1 老规矩,结尾放代码片段 https://developers.weixin.qq.com/s/PnYfitmG7Hxv
2022-03-04 - 公众号分享到朋友圈的外链,只有自己可以看到,好友看不到,公众号也没有看到异常,违规,求帮助解决下?
https://m.wfsidao.com/xh/tcbj_cxk/
2022-05-16 - 小程序横屏兼容处理
背景 在h5开发中可用的css适配单位有 em/百分比/rem/vw/vh/vmin/vmax,小程序提供了 rpx: 可以根据屏幕宽度进行自适应,规定屏幕宽为750rpx。 日常小程序开发中,一般设计图尺寸为 750 * 1334 px,则在小程序中一般 1px 直接写为 1rpx ,当小程序为竖屏([代码]"pageOrientation": "portrait"[代码] 默认为竖屏)时,根据 rpx 可以直接还原UI图,但是当小程序为横屏([代码]"pageOrientation": "landscape"[代码])时,根据 rpx 适配就明显比较大,不符合UI图,因为 rpx 是根据屏幕宽度适配的。 这个时候就需要一种既能适配不同屏幕大小,又能以设计图为准,快速布局的方式。通过了解 em/百分比/rem/vw/vh/vmin/vmax 这几种方式,明显 vmin 更符合,vmin 是vw和vh中比较 小 的值。 vw: Viewport宽度, 1vw 等于viewport宽度的 1%。 vh: Viewport高度, 1vh 等于viewport高的的 1%。 所以 100 vmin = 750px。 [代码].wxss[代码] 文件处理 当设置某个元素的宽度为 100px 时,根据 [代码]100px / 750px = x / 100vmin[代码] ,则对应的 vmin 值为 100vmin / 7.5 ,当单位为 rpx 时, vmin 值为 100vmin / 7.5 ,即 [代码]100px = 100vmin / 7.5[代码] 或者 [代码]100rpx = 100vmin / 7.5[代码] ,但是每次都写 [代码]vmin / 7.5[代码] 又有点麻烦,所以就写了个小工具 rpx2vmin ,支持将 rpx/px 转译为 vmin,这样布局的时候依然写 rpx/px ,最后再转译一下就可以了。 将需要转译的 [代码].wxss[代码] 文件复制粘贴到 [代码]input[代码] 文件下,在项目目录下执行如下命令行 ,会在 [代码]ouput[代码] 目录下生成对应的文件名称,需要提前安装 nodejs。 [代码]# 安装依赖 npm install # 将 rpx 转译为 vmin npm run rpx2vmin # 将 px 转译为 vmin npm run px2vmin [代码] 主要处理的如下: [代码]font-size: 12rpx; height: 60rpx; padding: 12rpx 16rpx; border-left: 2rpx dashed #5DA5FF; width: calc(100vw - 50rpx - 80rpx); [代码] 转移为 [代码]font-size: calc(12vmin / 7.5); height: calc(60vmin / 7.5); padding: calc(12vmin / 7.5) calc(16vmin / 7.5); border-left: calc(2vmin / 7.5) dashed #5DA5FF; width: calc(100vw - 50vmin / 7.5 - 80vmin / 7.5); [代码] 或者是: [代码]font-size: 12px; height: 60px; padding: 12px 16px; border-left: 2px dashed #5DA5FF; width: calc(100vw - 50px - 80px); [代码] 转移为 [代码]font-size: calc(12vmin / 7.5); height: calc(60vmin / 7.5); padding: calc(12vmin / 7.5) calc(16vmin / 7.5); border-left: calc(2vmin / 7.5) dashed #5DA5FF; width: calc(100vw - 50vmin / 7.5 - 80vmin / 7.5); [代码] js 中的处理 某些时候我们可能需要通过 js 计算设置,这个时候可以通过 wx.getSystemInfo() 得到 [代码]windowWidth[代码](可使用窗口宽度,单位px) 和 [代码]windowHeight[代码](可使用窗口高度,单位px) , [代码]100vmin = Math.min(windowWidth, windowHeight)[代码], [代码]1px = Math.min(windowWidth, windowHeight) / 750[代码] ,其中750为布局的时候可视窗口的最小宽度,其他尺寸乘以比例即可得到对应的 px 值或者 rpx 值。
2022-04-12 - 自动化测试有多难?拥有它们就不难!
随着小程序在日常生活的广泛应用,小程序需要承载越来越多的功能,意味着更多的页面数量、更复杂的逻辑关系,也意味着更庞大的测试工作量。 为了减轻测试压力,微信团队一直致力于自动化测试能力的研发,从 小程序自动化 SDK 到 录制回放,不断降低测试门槛,提升自动化测试效率。已上线的「录制回放」能力结合「小程序云测试能力」,通过腾讯云医小程序等多个项目落地验证: 0 代码编写能力要求UI 自动化编写耗时缩短85%支持所有人同时维护用例支持单独的增量用例测试支持迭代中的需求测试阶段[图片] 自动化测试意味着更少的手动干预、更标准化的测试流程,最终实现编写及运行耗时的降低。除了耗时缩短等效果,录制回放和小程序云测能力还支持 0 代码编写以降低测试开发门槛,支持所有人同时维护用例以提升测试效率,覆盖更多的测试阶段需求。以腾讯云医小程序为例,录制回放与小程序云测能力主要在以下 2 个阶段被重点应用: [图片] 需求测试阶段:录制回放不仅能够测试存量用例,还能够针对增量用例建立自动化用例池,每次修改 bug 提交代码均可单独进行测试,省时省力。回归测试阶段:需求测试完成后,测试人员需要维护增量用例。录制回放能够针对性地辅助进行增量用例回归,节省大量回归测试时间。 [图片] 录制回放与小程序云测能力的结合能够大大提升小程序测试效率,打破测试环节所需的人力、代码能力限制,推动小程序测试又快又好地进行。 [图片] [图片] 既然自动化测试如此便利,基于基础库 2.18.1 以上版本,更新微信开发者工具至最新稳定版本(点击下载地址),跟随以下步骤使用录制回放,开启小程序测试第一步! Step 1: 进入录制 选择微信开发者工具菜单栏,选择【工具】-【自动化测试】,即可进入录制回放界面。 [图片] Step 2: 添加用例 点击【添加用例】自定义用例名,建议采用【小程序名_页面或者功能模块_具体功能或者操作】格式,方便后续用例管理(注意:录制前后均可自定义修改用例名)[图片] Step 3: 录制用例 点击【开始录制】进行用例录制,点击【停止录制】完成录制。录制回放支持以下特性: 支持普通编译支持录制过程中断言支持添加编译模式直接编译到指定页面进行录制支持所有小程序框架,包括 uniapp 和 mpvue[图片] Step 4: 断言操作 录制用例过程中,用户可进行断言操作,各个断言功能如下: 选择【data 快照】或【wxml 快照】,用于回放时匹配校验选择【检查元素】,用于校验元素是否存在或 innertext 是否相等选择【检查页面路径】,用于检查当前操作所在页面是否符合预期[图片] Step 5: 回放用例 录制回放支持在工具和真机回放当前用例和全部用例。 [图片] Step 6: 导出用例 右键点击【用例】栏即可导出用例,用例将以 zip 包形式保存在本地。 [图片] [图片] 针对批量测试任务,小程序云测能力 支持配置自动化测试计划和任务,自动执行录制脚本实现测试过程的回放,实现自动化云端回放! 前提: 使用虚拟账号进行录制回放 选择微信开发者工具菜单栏,选择【工具】-【自动化测试】进入录制回放界面后,点击左上角头像切换至虚拟账号[图片] Step 1: 安装云测插件 选择微信开发者工具菜单栏,选择【工具】-【插件】选择【其他插件】-【云测】点击【获取】按钮即可安装插件安装完毕后,检查工具栏是否出现【云测】按钮[图片] Step 2: 新建测试计划 通过小程序云测的新建测试计划,测试人员能够高效管理测试项目。具体步骤如下: 点击微信开发者工具的【云测】按钮进入云测弹窗后,选择左上角的【测试用例管理】选择下拉选项的【录制回放用例】选择【同步用例】(注意:同步案例仅支持使用虚拟账号录制的用例)用例同步完成后,选择【测试用例管理】-【测试计划】选择【新建测试计划】,管理测试内容[图片] Step 3: 配置自动化测试任务 建立测试计划后,配置自动化测试任务,即可实现定时运行或通过其他脚本、流水线自动触发。运行完成后,测试人员可通过小程序云测平台查看运行结果、日志、性能分析等数据。具体配置步骤如下: 选择【自动化测试任务管理】进入测试任务页面后,选择【新建任务】在新建测试任务弹窗中,选择【录制回放】并填写所需信息,即可实现自动化测试[图片] [图片] 通过录制回放和小程序云测能力,测试工程师花费更少时间,减少手动干预,自动化操作省时省力,开启测试自由新体验!
2022-04-18 - 长期订阅怎么申请?
怎么申请长期订阅
2022-05-12 - 云开发入门
重磅打造的小程序学习路径课,从微信小程序到微信云开发体系化的学习,带来更加顺畅的学习体验。
2021-11-19 - 请问小程序的人脸核身api收费吗?我是申请邮件发送至腾讯工作邮箱 wx_city开通的
请问小程序的人脸核身api收费吗?具体收费标准是什么
2022-04-29 - 微信电脑端小程序连接websocket设置请求头无效?
微信版本:3.6.0.18 小程序基础库:2.24.0 新版的微信电脑端小程序连接websocket设置请求头无效?设置了header,在手机端,开发者工具连接,可以正确设置。但是在电脑端的小程序中(使用真机调试),看发送的连接请求,没有包含自定义的请求头。 开发者工具: [图片] 真机调试 [图片]
2022-04-29 - 在(ios)使用wx.createInnerAudioContext() 播放MP3没有声音?
let innerAudioContext = wx.createInnerAudioContext() 微信版本号8.0.20 基础库版本号2.23.0 innerAudioContext .onError(res =>{ //安卓是可以播放的!!! //打印的错误res为 : {errMsg: "INNERERRCODE:-11800, ERRMSG:这项操作无法完成", errCode: 10001} })
2022-04-29 - 微信开放社区成长中心
[图片] [图片]
2019-12-23 - 微信公众号H5页面缓存无法更新?
vue项目编译部署之后,部分手机无法更新到最新的版本,访问的还是之前的版本,试过多种方法都无法清除缓存,请问要怎样才能清除缓存呢
2021-03-05