- InnerAudioContext.destroy()是否真实销毁?
我在页面的onHide和onUnload方法中都调用了 this.innerAudioContext.destroy(); 但是页面切换后,有时音乐会继续播放,再次进入有音乐的页面后,音乐会重叠播放。 此问题没有稳定复现,所以我很好奇,为什么页面都切换了,都destroy了,还会继续播放
2019-12-03 - 腾讯的一小步,开发者的一大步:说一说Cloud.CDN
最近在文档中偶然发现了这么一段,测试完之后,居然情不自禁的想要夸一下腾讯: [图片] 故事是这样的: 很久之前,我们小程序上有图片上传前做安全检测的需求,选择的是云函数的实现方案,图片压缩后直接以Buffer的形式传递。刚上线的几个月,一切运行正常,可是突然某一天(几个月前)开始,陆续有用户反馈上传会失败,当然也不是100%失败,个别幸运儿还是可以成功的。排查发现,是小程序在调用云函数的时候报错了(为了写文章,异常都是最新截图的), 第一种形式的异常(安卓):errCode: -404012 polling exceed max timeout retry. 说“ 超过了超时重试的最大次数”,如果真的以为是暂时的网络不好或者云函数那边临时出了什么状况,等待你的将是现实的沉痛一击,因为它从此再也没有好过: [图片] 第二种形式的异常(iOS):errCode: -1 | errMsg: cloud.callFunction:fail Error: data exceed max size. 说“数据超限了”,意思是嫌弃传的图片太大了,恐怕这也是导致安卓上报超时的原因: [图片] 以前都是好的,突然从某一天开始就不行了,后来,终于在等待中明白,应该是腾讯收紧了cloud.callFunction的数据大小限制,再也没有放宽... 由于这个功能比较次要,用得也少,就一直没改,直到最近才腾出手来。本来已经决定要采取图片先临时传到COS,再把COS URL传给云函数的方案了,但是在做之前想搞明白callFunction的数据大小限制上限到底是多少,居然几十K的图片都传不了,以前的文档是啥也没写的,但出于习惯,我又翻了下文档,于是看到了那段让人惊喜的文字,它的意思是,我们准备要做的这个功能,腾讯用"wx.cloud.CDN"已经提供了!!! 跳到对应的文档链接,说是从2.12.0也就是最新版的基础库开始支持,虽然2.12.0现在占比只有60%多,但会一天天增加。 [图片]https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference-sdk-api/utils/Cloud.CDN.html 那就来看看它的效果如何吧,调用超级简单: [图片] 调用结果如下,图片会先传到CDN,然后再拿返回的临时图片URL传给cloud.callFunction: [图片] [图片] 完美!callFunction的传输上限我已经不再关心了~
2020-07-19 - security.mediaCheckAsync可以使用云函数调用吗?
使用云开发,录制音频安全校验可以使用云函数来调用嘛,文档没有很清晰的说明能或者不能,图片和文本的是可以使用云函数的,但是音频的可不可以?
2020-09-09 - security.mediaCheckAsync接口哪个返回值确定风险?
security.mediaCheckAsync接口哪个返回值确定风险?result.label=100为正常,其他值都是风险吗?还是怎么一样判断?文档没有明确指示。(还是我没发现)
2022-02-09 - 微信小程序云开发读取数据超过20,云函数读取超过100条限制,获取云开发数据库集合里的所有数据的方法
看过石头哥云开发基础课的同学肯定都知道,直接在小程序里请求数据每次最多只能返回20条数据,云函数里请求数据每次最多只能返回100条数据,如果想突破这个限制,最好的方式就是做分页,当然分页我在云开发基础里也有教大家。但是限制存在这么一个需求,如果我们想一次性的拿到数据库里存的所有数据呢,比如数据库里有1000条数据,我们想一下子全部拿到,该怎么做呢??? [图片] 今天就来教大家如何通过云函数每次最多返回100条的限制。 一,云函数突破100条的限制 [图片] 如上图所示,我的num集合里有103条数据,如果按照之前的分页思路,就是分两次请求,第一次请求1-100条,第二次请求101-103条。这样我们虽然是可以拿到103条数据,但是要做两次请求,我们该如何做,才能一次请求就可以获取这103条数据呢。 1-1,突破100条的原理 其实原理和我们分页的原理是一样的,只不过我们用for循环做多次请求,然后把这多次的请求组合到一起,然后把组合好的数据一次性全部返回。这样就通过一次请求获取所有数据。 1-2,代码实现 这里的代码是写在云函数里,操作步骤我都在注释里给大家写出来。 [图片] 如上图所示,我们只需要通过三个步骤,就可以拿到所有的103条数据了。 [图片] 这样我们就可以通过一次请求,获取所有的数据了。是不是感觉很简单。这里把代码贴出来给到大家。 [代码]// 云函数入口文件 const cloud = require('wx-server-sdk') // 云开发环境初始化 cloud.init({env: cloud.DYNAMIC_CURRENT_ENV}) exports.main = async (event, context) => { const db = cloud.database() // 1,获取数据的总个数 let count = await db.collection('num').count() count = count.total // 2,通过for循环做多次请求,并把多次请求的数据放到一个数组里 let all = [] for (let i = 0; i < count; i += 100) { //自己设置每次获取数据的量 let list = await db.collection('num').skip(i).get() all = all.concat(list.data); } // 3,把组装好的数据一次性全部返回 return all; } [代码] 1-3,注意事项 云函数单次返回的数据不能超过1M,如果需要超过1M,则需要使用小程序端的数据查询20条20条的进行组合了。所以如果你一次性要返回很多数据,可以考虑在小程序里直接请求数据库,然后做20条20条的组装。 我下面也会教大家在小程序里做组装。 二,小程序直接请求数据库突破20条 2-1,开启async和await 原理我们这里不在说了,和上面是一模一样的,只不过小程序里使用await需要做下简单的操作,也可以去看下我的另外一篇文章。 《小程序里使用async和await变异步为同步,解决回调地狱问题》 [图片] 现在最新版本的小程序开发者工具好像已经支持async和await方法了,好像不勾选增强编译也没事。但是安全起见,还是勾选下增强编译比较好。 2-2,权限修改 小程序里直接获取数据库里的数据,记得要把集合的权限改一下 [图片] 2-3,代码实现 [图片] 细心的同学肯定可以看出来,上面的代码和我们云函数里的代码基本上一模一样的。 [图片] 到这里我们就完美的突破了小程序的限制,返回我们想要的任何个数的数据了。 后面会总结更多的小程序知识点给大家,欢迎关注,欢迎留言。
2021-06-28 - 小程序无法访问后端,是公安网站备案导致的吗?
各位你好,域名备案后,配好域名和证书,通过nginx代理一直可以访问后端, 今天进行了全国互联网安全管理服务平台上的 公安网站备案申请后,小程序访问后端报错Caused by: org.apache.http.ProtocolException: Target host is not specified,是不是这个备案期间导致的?
2020-06-17 - 小程序域名需要公安备案吗?
小程序服务器的域名已经通过ICP的备案,还需要公安备案吗。没有实际网站,只是给小程序使用。
2020-12-16 - 小程序发布了现在如何提供测试账号给你们?
小程序的会员都是线下后台创建录取的,线上的小程序只是做一个展示会员信息,然后进行相关的操作,现在如何提供测试账号给你们测试小程序的功能(我可以提供我的手机号,微信号等相关会员信息给你吗?)
2020-09-17 - 云开发论坛类小程序是否还需要备案域名?
社交/社区论坛 如果使用云开发的话 是否还要单独购买一个域名备案后闲置在那
2019-11-07 - 云开发小程序,论坛类如何备案?
云开发小程序,论坛类需要提供备案信息,但是我是云开发如何备案?
2021-10-07 - 1分钟部署一个属于自己的网站,借助云开发静态网站部署属于自己的网站
作者:小石头 今天来教大家部署一个属于自己的第一个静态网站,因为这里借助小程序云开发的静态服务器资源,所以可以轻松的实现自己网站的部署,部署完以后可以在电脑浏览器,手机浏览器,微信公众号里面展示。 老规矩,先看效果图 简单起见,我这里写一个最简单的html静态网页 [图片] 然后把这个网页部署到云开发静态网站上 微信上访问效果如下 [图片] 手机浏览器上访问如下 [图片] 这也就意味着,我们的网站可以供用户在任何地方访问。下面就来教大家如何快速的部署一个属于自己的网站。 一,开通云开发 这里云开发开通开通云开发我们借助小程序开发者工具来实现快速开通。 1-1,注册小程序 这里我就不再多说了,只有注册过小程序的appid才可以开通云开发 [图片] 我们注册好小程序后,就可以拿到appid了,如上图 1-2,创建一个小程序项目 小程序项目的创建,我这里不再多说,我前面小程序基础课里有讲过很多遍。《小程序基础学习》 [图片] 这里强调一点,就是创建小程序项目时一定要用我们自己的appid不要用测试号。 [图片]在这里插入图片描述 如果你一开始是用测试appid创建的,也可以通过上图的方式更换成自己的小程序的appid。 1-3,开通云开发 这里是云开发开通,我就不做过多讲解了,我云开发课程里也讲过很多遍。大家可以去翻看下 [图片] 只需要点击开发者工具里的云开发按钮,跟着提示一步步操作就可以快速开通云开发。 二,开通静态网站功能 [图片] 我们上面云开发开通好以后,就可以在这里快速开通静态网站了。 [图片] 点击以后,直接点击开通即可 [图片] 这时候开通有个条件 [图片] 我们必须按照要求改变自己小程序的付费方式,把我们的付费方式改成按量付费即可。 [图片] [图片] [图片] 这个时候我们的静态网站功能就开通成功了。 [图片] 开通成功以后如下图。 [图片] 这个时候我们就可以把我们开发好的静态网页上传到网站供别人访问了。 三,部署网站 我们的静态html如下 [图片] 点击上传文件,把我们的index.html文件上传到静态网站 [图片] 这样就代表上传成功了。 访问我们的网站 上面把网页部署成功以后,我们就可以通过云开发为我们创建的默认网址来访问了。 [图片] 点击上图所示的详情,就可以拿到访问我们网站的网址如下 [图片] 上图箭头所示的网址,就是我们网页的访问网址。 [图片] 如果你的html是以index命名的,我们使用云开发为我们分配的域名,就可以直接访问我们的网站。 [图片] study-gas4x-1258760189.tcloudbaseapp.com 就是云开发为我分配的网站域名,以后用户就可以直接通过这个域名访问我们的网站了。 其实到这里我们就可以成功的部署属于我们自己的网站了,无非就是你网页写的比石头哥再好看些。 但是有些同学觉得官方给分配的域名太长,不好记,想使用自己的域名。那么我们该如何配置自己的域名呢? 四,配置域名(选看) 其实前面3步就可以成功的部署自己的网站了,如果你有自己的域名,并且也成功的备案了,再来跟着石头哥学习这一节。如果没有自己的域名,那么你就要先去注册自己的域名,并备案了。所以这一节作为一个选学。 4-1,在网站配置里添加自己的域名 [图片] 如我在这里点击添加域名,然后添加自己的备案域名。 [图片] 但是我们这里要想https来安全访问,就必须配置自己的ssl证书。 [图片] 点完以后,我们这里可以直接申请免费证书。免费证书有效期1年,1年后我们再重新申请新的证书就可以了,所以这里免费的就够用了。 [图片] 如实的填写自己的备案域名和其余信息。 [图片] 提交完资料,我们这里需要验证下自己的域名,验证方式选择DNS就可以 [图片] 点位DNS验证,我们就需要给我们的域名配置访问的解析值了(这里的知识点比较深奥,大家需要自己课下恶补下域名解析的相关知识点)如果不想学习,直接根据提示配置也行。 [图片] 配置好以后,就可以点击验证先进行验证了 [图片] 验证通过后,可以看到如下 [图片] 云开发控制台也会显示部署中,我们耐心等待部署就可以了。 [图片] 启动成功会有如下标识 [图片] 虽然已经启动成功,我们如果想通过自己的域名访问自己的云开发静态网站,还需要配置下CNAME进行重定向,也就是访问我们域名的时候我们要重定向到云开发给我们分配的域名。 [图片] 这里理解起来有点晦涩,官方给的文档也是没有讲明白,我也是试了很多遍才知道是这样配置的。这里都配置好以后,我们就可以直接通过自己的域名访问网站了。 [图片] 大家也可以去访问下石头哥的云开发静态网站试一试。 到这里我们的网站部署就讲完了,后面我会用vue写一些炫酷的网站,然后部署到线上供大家观赏。 产品介绍 云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为开发者提供高可用、自动弹性扩缩的后端云服务,包含计算、存储、托管等serverless化能力,可用于云端一体化开发多种端应用(小程序,公众号,Web 应用,Flutter 客户端等),帮助开发者统一构建和管理后端服务和云资源,避免了应用开发过程中繁琐的服务器搭建及运维,开发者可以专注于业务逻辑的实现,开发门槛更低,效率更高。 开通云开发:https://console.cloud.tencent.com/tcb?tdl_anchor=techsite 产品文档:https://cloud.tencent.com/product/tcb?from=12763 技术文档:https://cloudbase.net?from=10004 技术交流加Q群:601134960 最新资讯关注微信公众号【腾讯云云开发】
2021-06-10 - 小程序云开发开通了静态网页,有默认域名,请问这个域名可以拿去备案吗?
[图片] 小程序开通了云开发,在云开发控制台里开通了静态网页,配置了一个默认域名。我想开通论坛资质,请问这个默认域名可以申请备案吗?
2021-08-02 - 关于微信小程序部分类目报备审核说明
自微信小程序平台上线以来,为了保障小程序内容合规,发布时事新闻、具有社交属性或以视频、电台为载体的小程序需在上线前,完成向省/自治区/直辖市属地网信部门申请报备的工作。特别是,为避免小程序违法违规风险,UGC小程序需要对用户发布的内容做好安全审查措施。 对于开发者们持续以来关注的报备审核相关疑问,做以下说明: 报备审核范围 经与主管部门确认,以类目为范围界定需要报备的小程序,具体报备类目如下: [图片] 社交类目的小程序帮助用户与用户之间产生连接,为用户提供即时通讯、互动、交友、UGC内容发布与分享、直播、直播答题等功能;文娱-视频、文娱-FM/电台类目指小程序内有以视频、电台为载体的内容。时政信息类目小程序内发布政治(含法律法规)、经济、军事、外交、农业、历史、社会突发事件等各种类型的文章/图片/视频/音频的新闻报道; 平台在代码审核环节会确认内容和类目的一致性。如果小程序内涉及有关内容,却没有相关类目,会造成审核不通过并要求补充相应类目。 [图片] 报备审核流程 [图片] 1. 微信侧小程序代码审核:确认是否进入报备审核 在小程序涉及报备类目的版本首次提审时,微信侧审核通过后,自动进入报备审核流程。若微信侧审核不通过,不会进入报备审核流程,下次通过微信侧审核时小程序将自动进入报备审核流程。 小程序涉及报备类目的版本更新提审时,若小程序特定类目曾完成过报备审核,新版本未涉及其他报备类目,无需进入报备审核流程。 撤回代码审核将中止流程,再次提交时若涉及敏感类目会重新进入报备审核。 2、进入属地网信部门复核 开发者在小程序MP后台通知中心收到以下通知,代表小程序进入报备审核流程。从该通知发出时间起,7个自然日内将完成报备审核(境外非企业主体小程序除外)。 [图片] 属地网信部门工作人员会根据当前小程序的主体信息及代码提审信息进行安全审核。也可能会通过开发者预留在微信小程序MP后台的手机号主动联系开发者确认或补充材料。建议开发者在进入报备审核流程后,及时关注和接听来访电话,避免遗漏审核信息,影响报备审核流程。 若开发者收到当地网信部门联系时,请注意核实对方身份,先与其确认真实性后(可通过对方来电、微信、QQ、邮箱等方式询问确认),再提供相关材料。 3、审核周期及预上线说明 报备审核需7个自然日审核周期(不包括境外非企业主体小程序),暂无加急渠道。如遇紧急上线等特殊情况,建议开发者自行联系省/自治区/直辖市属地网信部门。因属地不同,无法列举联系方式,建议自行查看属地相关政府网站查找联系方式。 7个自然日审核周期开发者若未收到审核结果,将收到预上线通知,则开发者可进行版本发布。境外非企业主体小程序无预上线流程。 [图片] 在预上线期间,属地网信部门仍然可能对小程序进行报备审核反馈。预上线的小程序若存在违规或未允许内容,未通过报备审核,将以站内信的形式通知开发者。未通过报备审核的开发者需要及时下架小程序服务,整改小程序内容。 报备审核前重要准备 提供UGC自定义发布内容功能的小程序,需要在小程序内接入官方“内容安全检测接口”校验用户输入的文本/图片,拦截政治、色情、违法等敏感词。用户自定义发布的内容包括:昵称/花名、个人资料签名/日志/聊天/评论、头像/表情/相片、直播等各种场景。其格式内容包括但不限于短文本、长内容、图片或视频等。请开发者做好小程序内容安全识别工作,接入微信公众平台内容安全API(imgSecCheck、msgSecCheck、mediaCheckAsync)能力,以及通过其他技术或人工审核手段做好内容审核,校验用户输入的文本/图片,拦截政治、色情、违法等敏感词,保证用户上传的内容安全健康。 为辅助小程序顺利通过报备审核,代码审核环节会针对小程序的安全保障能力进行敏感类关键词检测,未接入官方“内容安全检测接口”的小程序将无法通过代码审核。开发者需提前做好小程序内容安全识别工作,以免小程序无法通过审核延误版本迭代。若小程序发布后出现UGC内容安全违规问题,也将按平台规则进行处置。 为了满足网信部门的监管要求,平台希望开发者能够明晰小程序报备审核流程,合理规划小程序上线周期,主动预留时间,做好审核准备,配合平台完成向省/自治区/直辖市网信部门报备的工作,保障小程序服务的准时上线。
2022-01-14 - 免费ICP备案攻略。不花1分钱拥有一台云服务器并顺利ICP备案。
写在前面: 大家不要将ICP证和ICP备案搞混了。 ICP证指的是【电信增值业务经营许可证】,这个资质需要企业主体至少100万注金,去工信部办理,比较难办理;社交-交友需要ICP证。 而ICP备案,【非经营性互联网信息服务备案核准】仅仅是指企业主体的域名备案,可以简单的按以下步骤免费办理成功,其他社交类目如社区、论坛、笔记等,只需要ICP备案即可。 1、在腾讯云注册一个账号并认证企业主体(不吹不黑,开发小程序当然首选腾讯云,好用)。http://www.qcloud.com/ 如果你是个人主体,就不要往下看了,没必要折腾了。 2、找到腾讯云免费活动页:https://cloud.tencent.com/act/free?from=10107 3、选择一款云服务器,180天免费试用。 云服务器申请成功后,它的使命就完成了,没用了,让它自生自灭吧。 在整个备案过程中,也不需要部署网站(域名都没有备案,哪来的网站?)。 [图片] 云服务器180天到期后,可以自己决定是否续费,每个月也才99元,促销期甚至更低,完全可以接受吧。 备案成功后,该服务器就没什么作用了,让它180天后自然欠费销毁得了。 服务器销毁后会有什么影响?答:没有任何影响。 但是。。。。。 你备案的域名最后还得指向一个网站,因为腾讯云会应工信部的要求定期检查网站是否合规,所以你还是要建一个简单的网站,(备案期间,可以暂时不管网站的事,等将来需要的时候再管理)。 至于有多简单,答,多简单都行。此时你可以在七牛、腾讯云、阿里云租点免费的对象存储空间,做个简单的网站。 4、在进行ICP备案之前,你需要在腾讯云注册你的域名地址,如果你已有域名,但不在腾讯云,建议先将要域名过户到腾讯云的账号上。 5、进入控制台,开始ICP备案,这个流程就不介绍了,因为完全一看就懂。而且现在使用备案小程序后,不需要幕布或现场拍照了,极其方便,大家跟着流程走就一点问题没有,有人脸识别和在线拍一段小视频。另外,大家可以随便作,随便填,填错或者填得不合适也不用怕,会有专门的备案客服打电话告诉你哪哪要改,还会告诉你应该怎么填才更容易通过工信部的审核,客服的态度好得发指。 仅说一点其中的几个小坑: a、人脸识别的时候,白色背景、白色背景、白色背景,笔者在人脸识别的时候,满世界找白墙,结果还被打回来重拍了3次。 b、网站用途一律写:公司官网,好通过工信部审核。 6、腾讯云提交资料到工信部审核。这是一个漫长的让人无语的等待,20-30天。笔者最近两次都是20天才过审;不要幻想会有可能提前完成审核,这是政府部门在审核,提前完成说明某政府人员的工作安排有问题,会犯错误的。 7、备案成功后,会有短信通知你,但是,你需要去工信部网站查询结果,并将结果切屏拷贝下来,因为小程序类目审核需要上传这张图片。http://beian.miit.gov.cn/publish/query/indexFirst.action [图片] 把上面这张图片保存好,小程序类目审核的时候需要上传。收到通知后,如果在这里查不到结果,也别急,据说需要24小时。 8、接下来是小程序上线审核。 因为ICP备案的小程序内容肯定涉及到社交,最后小程序上线时还要提交到工信部审核,还需要7天左右的时间,加上前面ICP备案的时间,加起来怎么也得30-40天。大家估计时间,别影响小程序上线。这7天也是政府部门在审核,不要幻想会提前。 9、计算一下时间: 腾讯云注册账号和认证:1-3天; 域名备案:腾讯云环节:1-3天; 域名备案:工信部环节:20-30天; 小程序添加服务类目:社交类目审核:1-3天; 小程序上线审核:腾讯环节:1-2天; 小程序上线审核:工信部环节:7+天; 总天数:30-40天; 10、节省时间的一些建议: 在开发小程序之前,就开始备案工作,小程序可以同时开发,相互不影响; 在开发完成之前一、两星期之内,先发布一版小程序,别管功能是不是完整,能通过审核就行,这样会有7天的等待类目审核的时间,这个时间里,小程序可以照常开发,不影响进度; 只要是社交类,基本需要有文字和图片安全检查功能,别忘了加上,别到时审核通过不了。 11、结束。 [图片]
2021-01-19 - Swiper、video等组件自适应高度的办法。
用过swiper和video等组件的人都知道,这几个组件的高度是无法自适应屏幕高度的,也退style="height:100%"是无用的。 以下是解决组件自适应高度的办法,代码如下: <view style="height: 100%;display: flex;flex-direction: column;"> <swiper style="flex:1"> </swiper> </view> 这样,这个swiper就能自适应高度了。
2021-03-29 - 小程序使用Grid和css变量实现瀑布流布局
前言 要实现如下瀑布流效果,动态图片,动态高度 [图片] 我知道使用JS能够实现完美瀑布流,但小程序不比web,坑点会比较多,因此我决定先使用CSS看能不能解决,最后实在不行在使用JS来实现 根据网上的教程尝试使用css的方式(column和flex)实现效果,但排列顺序都是竖排而不是横排,不符合产品需求,实现效果如下 [图片] GRID瀑布流 如此看来只剩grid这一条路了,还好成功了 基础版 下列摘自网上使用GRID实现瀑布流的实例 模板 [代码]
1/view> 2/view> 3/view> 4/view> 5/view> 6/view> ... /view> [代码] wxss [代码].waterfall { display: grid; grid-template-columns: repeat(2, 1fr); // 指定两列,自动宽度 grid-gap: 0.25em; // 横向,纵向间隔 grid-auto-flow: row dense; // 是否自动补齐空白 grid-auto-rows: 20px; // base高度,grid-row基于此运算 } .waterfall .item { width: 100%; background: #222; color: #ddd; } .waterfall .item:nth-of-type(3n+1) { grid-row: auto / span 5; } .waterfall .item:nth-of-type(3n+2) { grid-row: auto / span 6; } .waterfall .item:nth-of-type(3n+3) { grid-row: auto / span 8; } [代码] 效果 [图片] 基础版的问题 看看上面的css是如何使用grid实现 [代码].waterfall .item:nth-of-type(3n+1) { grid-row: auto / span 5; } [代码] 上述代码指定[代码]1,4,7,10...[代码]等item的高度,[代码]auto[代码]为grid自动设置该item的起始位置,[代码]span 5[代码]则指定该item的高度为[代码]grid-auto-rows * 5[代码], [代码]grid-auto-rows[代码]在CSS的设定中为20px,在源码中我做了说明,它是一个基础高度 [代码].waterfall .item:nth-of-type(3n+2) { grid-row: auto / span 6; } [代码] 上述代码指定[代码]2,8,11,14...[代码]等item的高度,[代码]auto[代码]为grid自动设置该item的起始位置,[代码]span 6[代码]则指定该item的高度为[代码]grid-auto-rows * 6[代码] [代码].waterfall .item:nth-of-type(3n+3) { grid-row: auto / span 8; } [代码] 上述代码指定[代码]3,6,12,15...[代码]等item的高度,[代码]auto[代码]为grid自动设置该item的起始位置,[代码]span 8[代码]则指定该item的高度为[代码]grid-auto-rows * 8[代码] 基础版虽然看上去基本符合我们的产品需求,但由css可以知道,它的问题是__高度固定__,但业务上我们并不确切知道每个item的高度及所包含的图片的高度。所以接下来我们要解决__动态高度__设定的问题,让每一个item都自动计算自己的高度,而不是通过CSS来手动指定 css变量登场 微信小程序swiper的自适应高度 小程序中使用css var变量,使js可以动态设置css样式属性 上面两篇文章是之前写得关于css变量的一些巧妙的用法,css变量确实能够解决很多之前很棘手的问题,此时我脑海里面迸发出了一个绝佳的IDEA 仔细观察这段css [代码].waterfall .item:nth-of-type(3n+2) { grid-row: auto / span 6; } [代码] 唯一不确定的就是[代码]6[代码],对,它应该是一个变量而不是一个恒量,它应该是一个与高度关联的比值,而我们可以通过css变量动态设置这个比值,它大概应该长这样 [代码]page{ --item-span: x // 需要使用setData设置x值 } .waterfall .item { grid-row: var(--item-span); } [代码] 考虑到需要设置每个item的高度,应该为每一个item设定独立的样式 [代码].waterfall{ --item-span-1: x; // 使用setData设置x值 --item-span-2: y // 使用setData设置y值 } .waterfall .item-1 { grid-row: var(--item-span-1); } .waterfall .item-2 { grid-row: var(--item-span-2); } [代码] 原理 到此我们就可以讲通如何实现的原理了 注意:下面的例子使用内联样式代替上面的样式设定,因为内联样式可以由JS动态输出 模板 [代码] .../view> /view> .../view> /view> /page> [代码] Page [代码]Page({ data: { waterStyle: '', items: [...] }, onReady(){ let query = wx.createSelectorQuery().in(this) query.selectAll('.waterfall .item').boundingClientRect(ret=>{ let styleStr = ''; ret.forEach((ele, ii) => { let height = ele.height let span = parseInt(height/ 20) // 20 = grid-auto-row styleStr += `--item-span-${ii}: auto / span ${span};` }) this.setData({ waterStyle: styleStr }) }) } }) // 注释一 // 所有item的css变量合集 waterStyle /* xn在onReady方法中计算得出 --item-span-1: auto/span x1; --item-span-2: auto/span x2; --item-span-3: auto/span x3; ... */ [代码] 使用内联样式而不是.item-n [代码][代码]item元素使用内联样式,因为我们不确定item的数量。 高度计算 通过query我们可以获取所有item子元素的rect属性(长宽高…),计算height属性与grid-auto-row的比值,即我们需要的设定值 waterStyle 参考上述代码的注释一(动态计算每一个item的span比值),通过setData方法设置生效(设置在父级[代码]view.waterfall[代码]上),如此grid会自动设置每一个item子元素的位置 优化 以上基本将如何使用grid实现瀑布流的原理阐述了一遍,实际代码中需要注意[代码]grid-auto-row[代码]值的设定,在我们的项目中省略了此项css属性的设置,即span比值实际是由[代码]height/grid-gap[代码]得出,反而效果更好,具体原因我也一脸懵逼,如果有知道的留言告诉我 [图片] 2020-08-15 - 内容管理CMS 怎么管理之前的数据库和云存储?
需要解决: 1.原环境中的云存储和数据库内容 移植到新的环境里; 2.开通了CMS文件管理,怎么管理之前的数据库和云存储?
2021-03-07 - 小程序端调用云函数,上传date格式的参数,云函数接收时,date类型到参数变成了string类型
小程序端 [图片] [图片] typeof 后是object类型 到了云函数那里接收后,成了字符串类型 [图片][图片]
2020-03-20 - 直播----小程序开发心得分享
首先很开心,我司小程序获得第一波直播权限,我已经开发加好了直播,请确认你的小程序有直播资质,如果你有在开发中碰到什么问题,欢迎留言 一、引入直播插件 打开 app.json 文件 如果你代码有区分 分包 请记得将以下代码 放到 root 根文件夹 如果没有请忽略 以下代码 放到 "pages": ["pages/index/index"], 的同级地方 plugins": { "live-player-plugin": { "version": "1.0.2", "provider":"wx2b03c6e691cd7370" } }, 其中 live-player-plugin 是插件名字 version 是版本号码 二、引入直播开播 订阅组件(如果你不想引入,可以跳过) 在你要引入的页面 json 中添加组件 "usingComponents": { "subscribe": "plugin-private://wx2b03c6e691cd7370/components/subscribe/subscribe" } 注意不用改动 页面引入 room-id 属性一定要添加 就是后台会返回给你的 live_status 是用来判断状态 因为有时候我们都添加上订阅按钮 点了后会消失 是因为这个状态已经是过去的直播了 无法订阅 ps:这个插件目前有个 bug 就是 不管我有么有订阅这场 都是未订阅状态 但是点击去直播间的订阅按钮却是状态对的 并且我切换下 小程序 前后台(onShow onHide 切换)状态又是对的 三、页面跳转 你可以在图片上添加函数 也可以直接 navigator 跳转 goDetail(e) { var room = e.currentTarget.dataset.room; wx.reLaunch({ url: '/plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=' + room, }) } 或者 直接 navigator 跳转 四、页面分享 以下是我的页面分享 假设你的是卡片展示 或者图片展示 /** * 用户点击右上角分享 */ onShareAppMessage: function (res) { var idx = res.target.dataset.idx; const listInfo = this.data.listInfo[idx]; return { title: listInfo.name, imageUrl: listInfo.anchor_img, path: '/plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=' + listInfo.roomid } }, 五、订阅插件样式更改 /* 订阅 */ .subscribe--live-player-subscribe__btn{ width: 200rpx !important; height: 21px !important; line-height: 21px !important; font-weight: 200; font-size: 20rpx !important; text-align: center; background: #fff!important; color: #2d79ab!important; border-radius: 4px; pointer-events: auto; margin: 0 auto; } 写在最后-------------------------注意,开发工具目前是无法进入直播页面的,但是真机可以,你们可以上传到体验版然后通过微信后台开个直播,扫码体验就能进入直播间。 以上就是我的分享,谢谢大家观看~~,如果你觉得有用,点个赞吧
2020-04-03 - 云开发http请求的两种写法
对于简单的GET表单请求 可以直接将参数封装在url中 [代码]// 云函数入口文件 const cloud = require('wx-server-sdk') var request = require('request') // 云函数入口函数 exports.main = async (event, context) => { //qz return new Promise((resolve, reject) => { request({ url: event.URL, method: "POST",//GET json: true, headers: { "content-type": "application/json", "token": event.token }, }, function (error, response, body) { if (!error && response.statusCode == 200) { try { resolve(body) } catch (e) { reject() } } }) }) } [代码] 对于POST请求 参数不好封装的 [代码]// 云函数入口文件 const cloud = require('wx-server-sdk') var request = require('request') cloud.init() // 云函数入口函数 exports.main = async (event, context) => { //这里写普通话成绩查询方式 return new Promise((resolve, reject) => { request({ url: event.url, method: "POST", json: true, headers: { "content-type": "application/json", "token":event.token }, body: event.body }, function (error, response, body) { if (!error && response.statusCode == 200) { try { resolve(body) } catch (e) { reject() } } }) }) } [代码] body中填写需要的参数 body是json形式 [代码]{ xxx:xxx } [代码] 请求头可以根据自己的需要进行修改。
2019-05-28 - 【已解决】云函数内request第三方access_token并存入集合中咋整?
[图片] //这个是返回的字符串 小程序云开发云的函数中用request-promise请求了一个access_token,这个access_token的时效性的俩天,所以我想让他请求完后直接更新到集合中去,前端只需要读取这个集合里的access_token就可以了,让后用定时触发器每一天更新一次,求大佬显神通 const cloud = require('wx-server-sdk') cloud.init() var rp = require('request-promise'); var options = { method: 'POST', uri: 'https://www.bigiot.net/oauth/token?client_id=901&client_secret=35e0e688c1&username=12841&password=11b945045d&grant_type=password',//id、password等数据不加引号 body: { }, json: true }; // 云函数入口函数 exports.main = async (event, context) => { return rp(options) .then(function (res) { console.log(res) return res }) .catch(function (err) { console.log(err) }); } //下面的是返回到前端的数据
2020-06-02 - 正确理解云开发定时触发器以及开发常见问题
需求: 有个场景需要生成一系列邀请码用来激活会员用的,怎么大批量生成10000个邀请码是今天的需求,其实方案很多 今天为了学习定时触发器,那么就用触发器来实现 定时触发器官方文档 https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/functions/triggers.html 定时触发器好比定时器,用于定时调用云函数,所以首先要有云函数,但是具体怎么控制定时触发要注意。 1 第一步:新建云函数,命名为GenerateSOmeCode [图片] 第二步:配置定时触发器规则 在本次学习定时触发器,设置触发规则为每10秒执行一次,具体设置如下所示。 [图片] 第三步:上传云函数、上传触发器 这是定时触发器关键一步,对于正确理解定时触发器非常重要,定时触发器载体是云函数,没想到触发机制还是在云函数内控制的,其实我本来以为是通过云开发控制台设置的,但是没有,最后发现是在云函数config.json里面设置的 然后我们监控下 [图片] 3 [图片] 4 常见问题: 用于执行的云函数上传了,为什么没有执行? 这个我刚才遇到了,这是因为没有上传触发器,仅仅上传了云函数,上传云函数和上传触发器是配套使用的 最后回归需求本身,通过云开发控制台导出csv,将邀请码导出,先交付100个。 1 [图片] 2
2020-05-23 - 小程序云开发时效数据刷新和存储 (access_token等)
小程序云开发时效数据刷新和存储 (access_token等) 1.问题描述 小程序中经常有需要进行OCR识别,或者使用外部api例如百度AI识别等接口,请求调用这些接口需要令牌,即一些具有时效性的数据。本文以小程序云开发使用百度API接口为例,介绍access_token定时刷新和请求机制。 下面是百度调用身份证识别的一段需求,需要传的参数需要有access_token。 请求示例 HTTP 方法:[代码]POST[代码] 请求URL: [代码]https://aip.baidubce.com/rest/2.0/ocr/v1/idcard[代码] URL参数: 参数 值 access_token 通过API Key和Secret Key获取的access_token,参考“Access Token获取” access_token 是具有时效性的数据,每次请求一次接口就进行一次请求刷新,显然是对计算机资源的极大浪费,且影响效率。 2.问题解决方案 [图片] 2.1.云数据库配置 新建一个云数据库名为setconfig。作为配置型信息存储数据库,类似access_token的数据都可以向其中存储。 对access_token配置下列字段: _openid (你的openid* 必填) config_name (配置名,填access_token) value (access_token的值,默认为null) id会自动生成,配置完效果如下(这个value是已经更新后的值) [图片] 2.2 定时云函数配置 阅读access_token获取的文档,可知,我们需要请求一个地址来获取access_token的值。 获取Access_Token 请求URL数据格式 向授权服务地址[代码]https://aip.baidubce.com/oauth/2.0/token[代码]发送请求(推荐使用POST),并在URL中带上以下参数: grant_type: 必须参数,固定为[代码]client_credentials[代码]; client_id: 必须参数,应用的[代码]API Key[代码]; client_secret: 必须参数,应用的[代码]Secret Key[代码]; 例如: [代码]https://aip.baidubce.com/oauth/2.0/token?grant_type=client_credentials&client_id=Va5yQRHlA4Fq5eR3LT0vuXV4&client_secret=0rDSjzQ20XUj5itV6WRtznPQSzr5pVw2&[代码] 实现 我们需要在云函数中模拟请求,并根据返回结果刷新云数据库中的access_token值。 想要运行通过该程序,需要开发者自己去百度创建账号并创建应用。 云函数index.js [代码]// 云函数入口文件 index.js const cloud = require('wx-server-sdk') cloud.init({ env: cloud.DYNAMIC_CURRENT_ENV }) const db = cloud.database() var request = require('request') // 定时器 exports.main = async(event, context) => { const appkey = '填写你的百度AppKey'; const appsecret = '填写你的百度AppSecret'; var url = 'https://aip.baidubce.com/oauth/2.0/token?grant_type=client_credentials&client_id=' + appkey + '&client_secret=' + appsecret; return new Promise((resolve, reject) => { request({ url: url, method: "POST", json: true, headers: { "content-type": "application/json", }, }, function(error, response, body) { if (!error && response.statusCode == 200) { console.log('通行证为' + body.access_token) resolve(body.access_token) //记得修改.doc('xxx') 中的内容 db.collection('setconfig').doc('aaaf5a56-1dd9-4e50-974b-34688fa47b20').update({ data: { value: body.access_token } }).then(res => { console.log('调用完成') console.log(res) }) } }) }) } [代码] docid是setconfig生成的,每个人不同注意修改 还有一种更新写法,不过更推荐使用上面的方法,效率更高,且稳定。 [代码]db.collection('setconfig').where({ config_name:'access_token' }).update({ data: { value: body.access_token } }) [代码] 云函数config.json(定时触发器功能实现) [代码]{ // triggers 字段是触发器数组,目前仅支持一个触发器,即数组只能填写一个,不可添加多个 "triggers": [ { // name: 触发器的名字,规则见下方说明 "name": "myTrigger", // type: 触发器类型,目前仅支持 timer (即 定时触发器) "type": "timer", // config: 触发器配置,在定时触发器下,config 格式为 cron 表达式, //现在为每天凌晨两点触发 "config": "0 0 2 * * * *" } ] } [代码] 云函数整体结构为: [图片] 然后上传并部署(云端安装依赖)。 2.3 小程序端获取Access_token 在小程序进入相应界面的时候,请求云数据库,获取access_token [代码]onLoad: function (options) { //页面初始化 var that = this; db.collection('setconfig').where({ config_name:'access_token' }).get({ success(res){ that.setData({ access_token:res.data[0].value }) //console.log(res.data[0]) }, fail(res){ wx.showToast({ title: '请求失败,无法通过扫描填充数据', }) } }) }, [代码] 3. 参考资料 [1]百度AI鉴权认证机制 [2]微信小程序云开发数据库update函数更新不了数据的问题 [3]小程序云开发定时触发器
2020-03-06 - 开发了一个完整的小程序,用的是云开发。涉及的技术比较多,就不一一写了。看看有没有你需要的技术,给我留言,我会一一解答。
一,云开发端: 1,图片和文字的内容安全检测。 2,将数据导出Excel表, 3,定时触发器(定时器), 4,订阅消息。结合定时触发器,可实现定时推送。 5,生成数据表在云端的好处 6,生成带参数小程序码 7,模糊查询 8,数据实时更新 二,小程序端: 1,用的是原生开发 2,自定义导航栏,且可监听点击右上键箭头,可配置,可弹窗。 3,分享生成的canvas图片 4,统一报错处理, 5,请求封装,状态统一处理。 6,过期头像检测 7,小程序端没啥写的,自己去看页面吧。 三,其它: 1,接入广告流程 四:小程序体验(带有参数的小程序码 + canvas绘图) [图片]
2020-05-08 - 小程序直播查询直播列表40001错误?
[图片] 查询直播列表报错,后台直接访问的,先获取token 再用token查询直播列表,总是说token不对
2020-05-09 - 小程序直播后台获取直播列表一直提示access_token问题?
后台请求到了access_token无误,格式也正确,dump出来之后是提示 string(113) "{"errcode":40001,"errmsg":"invalid credential, access_token is invalid or not latest hints: [DfgcWfuhE-vlquQA!]"}" appid:"wx6a1fee8b5f4e6266" 获取access_token接口地址:https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=appid&&secret=appsecret 请求直播列表地址:https://api.weixin.qq.com/wxa/business/getliveinfo?access_token=tokens [图片]
2020-05-13 - 小程序云函数调用http或https请求外部数据
我们使用小程序云开发的时候,难免会遇到在云函数里做http获取https请求外部数据,然后再通过云函数返回给我们的小程序。今天就来教大家如何在云函数里做http和https请求。 老规矩,先看效果图 [图片] 通过上图,可以看到我们在云函数里成功的访问到了百度的数据。下面就来讲下实现步骤。 一,定义云函数 关于云函数如何创建,这里我就不多说了。不知道如何创建的同学可以去看下我的云开发基础视频:https://study.163.com/course/courseMain.htm?courseId=1209499804 二,使用npm安装request-promise库 使用npm命令行之前,我们需要先安装node.js,node的安装网上搜一下就行。 下面我就来讲下在小程序里使用npm安装类库的步骤。 1, 右键我们的云函数,然后点击在终端中打开 [图片] 2,在打开的终端中输入 npm install request-promise [图片] 3, request-promise安装成功的标示如下 [图片] 三,编写我们的云函数代码 [图片] 把代码给大家贴出来,代码很简单,里面也有相应的注释,我们这里以请求百度的数据为例。 [代码]// 云函数入口文件 const cloud = require('wx-server-sdk') //引入request-promise用于做网络请求 var rp = require('request-promise'); cloud.init() // 云函数入口函数 exports.main = async (event, context) => { let url = 'https://www.baidu.com'; return await rp(url) .then(function (res) { return res }) .catch(function (err) { return '失败' }); } [代码] 到这里我就成功的在云函数里实现了http和https请求了,这里使用的是get请求,至于post请求如何使用,自己去百度下“ request-promise post请求”即可。 再来看下我们请求成功的效果图 [图片] 是不是很简单,有任何关于小程序,云开发相关的问题,都可以留言或者私信我,我看到后会及时解答的。
2019-09-23 - 直播 进入房间总是报传入的房间id有误?
[图片] list里的数据是根据获取房间列表接口读取的 [图片] 但是一直报错 [图片] appid: wx6dc881d413bd27aa 通过小程序插件管理接口查询,直播组件插件也是申请通过的了[图片]
2020-06-04 - 获取直播房间列表的参数如何设置?
获取直播房间列表接口需要以下两个参数:Request { "start": 0, // 起始拉取房间,start = 0 表示从第 1 个房间开始拉取 "limit": 10 // 每次拉取的个数上限,不要设置过大,建议 100 以内 } 调用这个接口一般是在后台调用,我是在后台直播间列表放一个按钮,点击就调用该API,参数应该如何设置比较好? 如果每次点击都是调用start:0,limit:10,那每次获取都是前10的直播间。如果第一次参数是start:0,limit:10,将获取的数据记录到缓存,下一次调用接口的参数则为start:10,limit:10(以此类推)就可以获取不同的直播间,但这时,如果前10的房间信息有所变更了(开始时间,结束时间等)。这样小程序端显示的还是旧的数据。有什么好的办法?谢谢
2020-03-26 - 【云开发】用云开发实现订阅消息
背景 10月12日微信官方发布了小程序模板消息能力调整的通知 https://developers.weixin.qq.com/community/develop/doc/00008a8a7d8310b6bf4975b635a401 相比之前的有了较大的调整,主要的调整就是从开发者主动下发消息改为用户自主订阅,也就是说必须要用户手动订阅才行,而订阅消息又分为了一次性订阅消息和长期性订阅消息,长期性订阅消息需要有特定公共服务业务这里就不介绍了,本文主要讲的是一次性订阅消息。 开发准备 如果还没有开通订阅消息的要在小程序后台里开通订阅消息后添加需要的模板,添加完后的红框中的变量就是订阅消息接口要用到的data了 [图片] [图片] 编写云函数 新建云函数,appid跟secret填你自己的即可, 由于订阅消息需要access_token,所以在使用订阅消息接口前要先获取access_token,这里我把他们都放在一个云函数里了 新建好后要安装依赖,这里用到了[代码]request-promise[代码]模块,所以要在该目录下[代码]npm install request-promise[代码] 代码如下 [图片] [图片] 页面调用 [图片] 传入对应的参数即可 返回结果 [图片] [图片] 总结 总的来说并不难,只是有个地方要注意一下,由于之前没怎么用过云开发,不知道它返回的数据结构会有差异,比如在获取access_token的时候发现一个特别之处,在小程序里进行调用的时候,成功的话返回是下图这种格式的 [图片] 但是本地调试的时候返回又是这种格式的 [图片] 少了外面一层object,导致我判断access_token一直报错,调试了好久才发现,好在最后是可以成功获取到。 再来说这次调整,作为用户的我来说我觉得是很ok的,起码我可以选择不接收订阅消息,不像之前那样莫名其妙的就收到了一个订阅消息还不知道是哪个程序的,我是很反感这种的。但是对于一些企业来说可能就不是那么友好了,降低了触达用户的机会。但是不管怎样,身为开发者的可是有得忙了。 代码就不放了,都在图片里,自己动手敲一遍比较好 相关接口 订阅接口 获取access_token接口 下发消息接口
2019-10-14 - 没有服务器,云开发怎么获取access_token实现模板消息推送?
没有服务器,云开发怎么获取access_token实现模板消息推送?
2019-10-06 - 巨佬们,怎么在云开发serverless的云函数里请求access token?
各路大神下午好,我这个access token想要在sererless的云函数上请求,但总是返回null。 我只了解一点wx.request,对request不是很熟悉。求指点迷津。在这里磕头了,砰砰砰。谢谢!(request包已经npm了) [图片] 'use strict'; const appid = ''; // APPID const secret = ''; // Secret const request = require('request') exports.main_handler = async (event, context, callback) => { request({ url: 'https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=' + appid + '&secret=' + secret, method: 'POST', header: { 'content-type': 'application/json' }, success(res) { return res // return res.data.access_token }, fail(err) { return err }, }) } ===end===
2020-04-08 - 云函数里发送 http post 请求?
在云函数里使用require('request');发送post请求总是出现 Required request body is missing 的错误。 然后我看到很多人都使用request-promise 或者got。请问倒是使用什么比较好?
2020-05-07 - 云函数发送Http的post请求时,json格式错误!?
我利用云函数把我的data发送到云函数上,发生了服务器显示JSONdecodeERROE,json的解码错误 [图片] 说明我的发送post请求的时候,发送出去的json格式出错了 我的云函数 [图片] 我调用云函数的代码 [图片] 调用此函数时network的表现 [图片] 从上面那个request payload可以看出发送的时候的格式 [图片] 我通过python发送的请求是可以使用的 [图片] 所以问题不在服务器中
2020-03-12 - “小程序直播”接入指引
各位微信开发者: “小程序直播” 功能正在公测中,具体接入指引请参考《小程序直播产品介绍及操作指引》。 一、功能简介 小程序直播是微信官方在2020年2月公测推出的产品能力,帮助商家在自有小程序中实现直播互动与商品销售的闭环。 [图片] 二、商家准入要求 满足以下条件,即可开通小程序直播: ①属于小程序直播开放类目,具体见《微信小程序直播功能准入要求》 ②主体下小程序近半年没有严重违规; ③小程序近90天内,有过支付行为; 三、具体产品功能及操作指引 具体接入指引请参考《小程序直播产品介绍及操作指引》,以下为商家操作步骤: 1. 开通权限 1) 登录“小程序后台”(mp.weixin.qq.com),在左侧导航栏找到“小程序—功能—直播”,点击开通。 小程序直播需要基于小程序,如若开发者还未创建小程序,可按照《小程序接入指南》流程指引创建小程序并完成开发。 2) 符合上述开放范围的即可开通。 2.功能开发 小程序直播需要实现【直播组件】与【后台配置】两个部分,其中组件部分需要在小程序中进行配置开发。 具体开发文档,请参考《小程序直播开发文档》。 2.直播间配置 开发完成后,商家可通过小程序后台设置直播计划、开通、设置抽奖等操作。具体操作指引,请参考《小程序直播产品介绍及操作指引》。
2020-08-26 - 小程序直播从开通到开播全过程——开发篇
本文因为社区编辑器markdown功能暂有问题,格式上比较混乱,大家将就看吧: 目前小程序支持的直播方式有两种,一种是纯原生方案(小程序提供推流拉流服务器,主播端和收播端页面都已提供好,你直接使用即可),一种是自己搭建推流服务器(只是使用小程序端提供的live-pusher和live-player组件而已,里面的直播页面和功能都自己独立开发!),这里说的是第一种方案: 一、准备工作 1、一个已经申请开通和正常使用的实实在在的小程序 PS:如果开通了直播功能,但是没有审核上架成功过,直播间分享出去的二维码点击会提示页面不存在!!!原因很简单,因为你新开发的直播页面正式版的小程序上并没有新加进去,必须要提审上架到正式版才能生效! 二、小程序直播准入门槛 微信小程序直播功能准入要求(官方文档链接>>) 一、类目要求: 1. 小程序开发者为国内非个人主体开发者; 2. 小程序开发者为下述类目品类,类目具体信息可参考《微信小程序开放的服务类目》: 1)电商平台:电商平台 2)商家自营:百货、食品、初级食用农产品、酒/盐、图书报刊/音像/影视/游戏/动漫、汽车/其他交通 工具的配件、服装/鞋/箱包、玩具/母婴用品(不含食品)、家电/数码/手机、美妆/洗护、珠宝/饰品/眼镜 /钟表、运动/户外/乐器、鲜花/园艺/工艺品、家居/家饰/家纺、汽车内饰/外饰、办公/文具、机械/电子 器件、电话卡销售、预付卡销售、宠物/农资、五金/建材/化工/矿产品; 3)教育:培训机构、教育信息服务、学历教育(学校)、驾校培训、教育平台、素质教育、婴幼儿教 育、在线教育、教育装备、出国移民、出国留学、特殊人群教育、在线视频课程; 4)金融业:证券/期货投资咨询、保险; 5)出行与交通:航空、地铁、水运、城市交通卡、打车(网约车)、顺风车(拼车)、出租车、路况、 路桥收费、加油/充电桩、城市共享交通、高速服务、火车、公交、长途客运、停车、代驾、租车; 6)房地产:房地产、物业管理、房地产经营、装修/建材; 7)生活服务:丽人、宠物(非医药类)、宠物医院/兽医、环保回收/废品回收、摄影/扩印、婚庆服务、 搬家公司、百货/超市/便利店、家政、营业性演出票务、生活缴费; 8)IT科技:硬件与设备、基础电信运营商、电信业务代理商、软件服务提供商、多方通信; 9)餐饮:餐饮服务场所/餐饮服务管理企业、点餐平台、外卖平台、点评与推荐、菜谱、餐厅排队; 10)旅游:旅游线路、旅游攻略、旅游退税、酒店服务、公寓/民宿、门票、签证、出境WiFi、景区服 务; 11)汽车:养车/修车、汽车资讯、汽车报价/比价、车展服务、汽车经销商/4S店、汽车厂商、汽车预售 服务; 12)体育:体育场馆服务、体育赛事、体育培训、在线健身 二、运营要求: 1、主体下小程序近半年没有严重违规 2、小程序近90天存在支付行为 以上2个运营条件和类目同时满足的前提下,下面3个条件满足其一即可 3、主体下公众号累计粉丝数大于100 4、主体下小程序近7日dau大于100 5、主体在微信生态内近一年广告投放实际消耗金额大于1w 以上准入要求于 2020 年 02 月 24 日进行公示生效。为营造良好健康的微信生态,腾讯公司有权对《微信 小程序直播功能准入要求》不时予以调整并公布,请予以关注。 腾讯公司 tip:如果你的小程序刚刚满足上面门槛,请T+2后刷新再试试。 三、进入小程序后台直播,创建直播间 [图片] 如果你的小程序满足了第二点。小程序后台会有一个直播的入口(没有的话自己找找原因) 点击进入后->创建直播间 按提示操作(要输入主播人的微信号,对方初次使用要活体检测+实名认证)即可成功创建直播间。(注意点:开播时间最早不能早于当前时间10分钟后) 创建成功后,会有一个开播码。注意这个开播码是给主播用的,主播开播的入口小程序码。主播可以扫码进入直播间开播。 [图片] 四、小程序端开发 完成上面3步算是完成主播端的配置了,接下来是收播端(观看直播的小程序端)的开发了。这个是要小程序开发者完成的。所以下面操作都在小程序开发端完成。下面就简单介绍开发逻辑和顺序,具体的要用到的API和接口都不细说,在后面相关链接里面可以点击官方链接查看!(小程序直播 | 微信开放文档)https://developers.weixin.qq.com/miniprogram/dev/framework/liveplayer/live-player-plugin.html) (1)引入直播插件(直接按官方介绍文档操作) 正常引入后开发者工具会弹出这个窗口,如果不弹出请认真,静下心来按照官方文档检查自己的引入代码: [图片] (2)开发后端(如果你没有小程序端自建直播列表和直播间入口的需求2、3、4都可以跳过,届时你的小程序直播间可以用分享方式进入) 后端目前官方只提供了2个接口。一个是获取直播间列表,一个是获取直播间直播完后的相关回放信息,其中第一个接口必须先完成。就是获取到直播间列表,列表里面有带返回直播间的roomid,小程序端必须需要接收到这方面的返回才能接下来的开发。 (3)进入直播页面 引入直播插件后并对接第二步的后端接口后,你可以直接编码进入直播页面了。像进入普通页面一样,可以通过wxml里面的navigator url="xxxx"的方式和js里的wx.navigateTo跳转页面代码进入直播页面。但是他这个url比较特殊,是下面这样的格式: url: `plugin-private://${provider}/pages/live-player-plugin?room_id=${roomId}&custom_params=${encodeURIComponent(JSON.stringify(customParams))}` provider:插件appid(1)小步里面获取到的 rommId:直播间id(2)小步里面获取列表后里面的roomId customParams:自定义的进入页面参数。(根据需要自己定义的传入直播间收播页面的参数) 进入直播间收播页面后的开发量为0,因为这个是由直播间插件接管并完成相关功能。 (4)几个注意点: 4.1、后端获取直播间列表接口几个跟官方文档介绍不一致的地方 [图片] 4.2、 livePlayer.getLiveStatus获取直播间状态这个API官方介绍:首次获取立马返回直播状态,往后间隔1分钟或更慢的频率去轮询获取直播状态。实际使用过程中建议也这么干,如果需要轮询直播间状态,建议间隔时间1分钟以上,如果少于这个值,基本上就是卡在这里后面的代码都不执行了。还有,有时候即使超过1分钟后再轮询,也会偶发性出现获取不到卡住的情况。解决方法,大家可以看看开发者工具里面的本地Storage相关的值,然后后面怎么做你懂的。。 4.3订阅组件subscribe的样式问题。不多说,你懂的,你加上去就能看到效果 4.4后端接口每日调用次数限制的问题。要做好相关缓存到本地的架构设计。 4.5运营上一定要注意,按要求直播。别整那些没用的,很容易被禁播的。 (5)回放功能开发 1.0.4版本后支持0开发的回放功能了。参考后面新增的专门介绍回放功能的使用教程。 五、跑路 这里的跑路是指代码写累了,带上口罩和吉娃娃去公园跑一圈路回来继续码。 最新:1.0.4版本后的回放功能说明,回放功能是这样的 1、后台开启该直播间的回放功能 [图片] 2、收播端还是原来的直播入口进行回放,小程序端是 plugin-private://${liveplayId}/pages/live-player-plugin?room_id=${roomId}&custom_params=${encodeURIComponent(JSON.stringify(customParams))}` 这里的页面链接,链接到回放页面。获取分享方式,分享出去的直播页面,点击后进入回放。 [图片] 还有一个口,点击原来的分享链接后的直播完成页面,也有一个查看回放的入口,如上图。 Tip:如果刚刚直播完可能需要稍等生成回放视频后再次进入相关页面才能看到回放。 相关链接: 小程序直播 | 微信开放文档(开发必看,而且要熟读,基本有所有你要的开发资料) https://developers.weixin.qq.com/miniprogram/dev/framework/liveplayer/live-player-plugin.html 微信小程序直播功能准入要求 | 微信开放文档 https://developers.weixin.qq.com/miniprogram/product/live/access-requirement.html “小程序直播”接入指引 | 微信开放社区 https://developers.weixin.qq.com/community/develop/doc/0008ce654c4450244c1a7e5de5b801?highLine=%25E7%259B%25B4%25E6%2592%25AD%2520%25E6%25B1%25BD%25E8%25BD%25A6 相关知识科普: 小程序直播单日直播上限是50场,同时直播上限50场,单场的直播时长上限是12小时。
2020-06-23 - 如果小程序区分客户端和管理端,如何实现?
准备开发一款小程序,分为客户端和管理端,在小程序上如何实现?
2019-02-14 - 微信小程序图片放大预览效果的实现
近期很多刚学习小程序的同学,想做哪种图片点击放大,然后可以左右滑动预览的效果。我也特意去研究下,发现直接用微信程序自己的api就可以很方便的实现。今天就来教大家如何实现小程序图片点击放大的效果。 老规矩,先看效果图 [图片] 效果图有点快,但是可以大致看出来效果了。我再给大家描述下吧 一个页面有3张图片,点击其中任意一张都可以放大预览。然后在预览的时候,左右滑动,还可以看另外两张图片。 话不多说,直接上代码 1,首先定义一个页面image.wxml [代码]<!--pages/image/image.wxml--> <image src="{{imgList[0]}}" bindtap="preview" data-src="{{imgList[0]}}"></image> <image src="{{imgList[1]}}" bindtap="preview" data-src="{{imgList[1]}}"></image> <image src="{{imgList[2]}}" bindtap="preview" data-src="{{imgList[2]}}"></image> [代码] 这个页面很简单,就是放三个image用来显示imgList数组里的三张图片。 2,实现图片放大效果的核心方法如下。 [图片] 上图是官方的示例。我们来看下实际中是如何使用的。 3,把image.js的完整代码贴出来。 [代码]Page({ data: { imgList: [ "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=508387608,2848974022&fm=26&gp=0.jpg", "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3139953554,3011511497&fm=26&gp=0.jpg", "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1022109268,3759531978&fm=26&gp=0.jpg" ] }, //预览图片,放大预览 preview(event) { console.log(event.currentTarget.dataset.src) let currentUrl = event.currentTarget.dataset.src wx.previewImage({ current: currentUrl, // 当前显示图片的http链接 urls: this.data.imgList // 需要预览的图片http链接列表 }) } }) [代码] 这里也很简单,就是定义一个imgList图片数组。然后定义一个方法,在点击图片时实现图片放大预览的效果。 其实代码就这么多,我们就可以轻松的实现小程序图片的点击放大效果了。 是不是很简单。 我也有录制视频讲解:https://edu.csdn.net/course/detail/25749
2019-08-29