- 地理位置接口新增与相关流程调整
一、地理位置接口新增说明 由于精确地理位置接口只允许部分类目的小程序申请使用,为了满足开发者在更多场景使用地理位置接口,自 2022 年 7 月 14 日起,新增获取模糊地理位置接口(wx.getFuzzyLocation)。同时为保障用户合法权益,该接口调用前需进行准入开通申请,该接口准入规则与 wx.chooseLocation 一致。 wx.getFuzzyLocation 接口说明: 1、该接口返回的是经过模糊处理的经纬度坐标; 2、该接口支持返回 wgs84 或 gcj02 两种类型的坐标; 3、该接口需要用户授权 scope.userFuzzyLocation。 二、app.json 的配置指引 为了开发者能够正常使用获取模糊地理位置等接口,以及后续对于代码提审环节的优化(见「三、地理位置接口使用流程」),自 2022 年 7 月 14 日起,开发者在使用地理位置相关接口时(共计 8 个,见表1),需要提前在 app.json 中进行配置。 1、需配置的接口列表 [图片] 表1 2、配置规则 1)在代码中使用的地理位置相关接口(共计 8 个,见表1),开发者均需要在 app.json 中 requiredPrivateInfos 配置项中声明,代码格式如下: [图片] 2)表1中模糊位置信息(序号1)和精确位置信息(序号2-5)是互斥的,即声明了模糊位置信息就无法声明精确位置信息。若同时声明模糊位置信息和精确位置信息,则在编译代码时出现错误; 3)注意:自 2022 年 7 月 14 日后发布的小程序,如果未在 app.json 中声明表1中的相关接口,则小程序调用这些接口(表1)时会出现错误,在 2022 年 7 月 14 日之前发布的小程序不受影响; 4)对于第三方开发者,需要在上传代码时通过参数在 ext.json 中声明其需调用的地理位置相关接口,配置规则和普通小程序的配置规则相同。 三、地理位置接口使用流程 自 2022 年 7 月 14 日起,开发者如需在最新版本发布后使用地理位置相关接口,除需完成接口权限开通外,还需在 app.json(或ext.json)配置环节,具体如下: 1、接口权限开通 以下 8 个接口需完成准入开通流程:wx.getFuzzylocation、wx.getLocation、wx.onLocationChange、wx.chooseAddress、wx.choosePoi、wx.chooseLocation、wx.startLocationUpdate、wx.startLocationUpdateBackground 1)普通开发者:需要在 “小程序管理后台 -「开发」-「开发管理」-「接口设置」” 中完成权限申请; 2)第三方开发者:可通过 apply_privacy_interface 接口完成权限申请。 2、app.json(或 ext.json)配置 1)普通开发者:需在 app.json 中声明其需调用的地理位置相关接口,具体配置流程见「二、app.json 的配置指引」; 2)第三方开发者:需要在上传代码时通过参数在 ext.json 中声明其需调用的地理位置相关接口(配置方式:可通过 commit 接口配置)。 同时,为了提升开发者体验,平台在代码提审环节会协助开发者对地理位置接口进行检测,如检测出代码中包含未完成准入开通的地理位置接口,平台将再次提醒开发者确认是否需使用相关接口。 1)普通开发者:若无需使用,开发者可在提审时确认不使用该接口,即可正常进行代码提审。小程序审核通过且新版本发布完成后,平台将对小程序确认不使用的接口关闭使用权限; 2)第三方开发者:若无需使用,可在提审时通过参数声明不使用该接口(声明方式:可通过 submit_audit 接口配置),即可正常进行代码提审,审核通过后发布上线,将对其声明不使用的接口关闭使用权限。 以上调整将仅对所有小程序生效。 微信团队 2022年6月1日
2023-09-26 - 自定义组件内循环同一个插槽时控制台持续打印警告(无法停止)
问题表现:开发者工具控制台持续输出警告,并且操作卡顿。 复现条件: 1.自定义组件内循环同一个插槽 2.动态变更循环的数据 3.循环的数据条数较大(比如 100) 4.基础库 2.18.1 类似问题:https://github.com/dcloudio/uni-app/issues/2782
2021-08-09 - (5)小程序插件
背景 小程序插件简介小程序插件是可以被开发者添加到小程序内直接使用的,能为用户提供具体服务的功能组件。 插件开发者可像开发小程序一样开发插件,除了在自己的小程序内使用,还能提供给其他小程序直接使用。 插件使用者无需独立开发小程序内的所有服务,无需理解插件内部逻辑和实现方式,可直接使用别人开发好的插件,为用户提供相应服务。 推出小程序插件的原因小程序的初衷是希望更好地连接用户和服务。自上线以来,越来越多的商户、开发者开发自己的小程序。 早晨起来在小区电梯内,扫小程序码,即可叫个早餐外卖; 走到门口,扫共享单车的二维码,骑车即走; 到了公司,即可打开小程序轻松打卡,开始美好的一天上班生活…… 随着小程序的普及,越来越多的路边小摊、餐饮小店、夫妻店也希望接入小程序。许多商家会给我们留言: “我只会简单开发,不会做复杂的功能怎么办?” “我也想给餐馆小程序做一个预约订餐功能,要怎么搞?” “客户可以在我的小程序里查询快递信息吗?” “我没有数据,可以在小程序里做地图查找功能吗?”…… 我们总结出大家目前遇到的几个难题: 1.开发技术有限,实现复杂功能难度大 2.人力、设备、资源有限,实现服务成本高 3.缺乏某些类目的资质,如电商、打车 小程序插件的应用1.开发共享,避免重复开发 在小程序内使用插件,可免去小程序开发者重复开发,一定程度上减少了开发工作量。 如:在旅游景区的小程序可以使用地图插件,开发者无需在小程序内独立开发地图内导航、出行指引、周边服务推荐等能力,直接使用地图插件即可为用户提供导航服务,免去很大量的开发工作。 2.插件可提供针对行业的完整服务,同时覆盖线上线下 商家希望借助小程序更好地连接用户和服务,包括线上、线下服务。线下服务往往人力成本、硬件设备等要求较高,商家在小程序内提供完整服务的门槛较高。而插件不仅可以解决线下服务的问题,还能针对特定行业提供全套完整服务。 以景区服务小程序为例,使用门票购买插件,用户可在小程序内完成门票线上预订、购买等流程,在到达景区后,通过插件服务提供商提供的移动终端或硬件设备,可完成门票兑换、核销。 而对于餐饮、零售等线下行业而言,插件更是极大降低了商家的成本,商家可以使用预订、排队、外卖等插件,由插件开发者提供线下服务,商家只需在小程序内引用插件,即可使用由插件开发者提供的预订、外卖等服务,节省了成本。 3. 降低服务门槛的问题,实现“服务共享” 具有开发能力及服务资质的开发者,可将自己的服务封装成插件,提供给其他小程序使用,实现“服务共享”。 插件的技术原理插件本身的技术原理并不复杂。插件代码由一些自定义组件和 JS 代码文件构成,插件开发者在发布插件时,这些代码被上传到微信后台保存起来。 当小程序使用插件时,使用者需填写插件的 AppID 和版本号,以便从后台获取相应的插件代码。小程序代码编译时,插件代码会被嵌入到小程序中,与小程序一起编译运行。 小程序与插件的交互根据需要,插件代码可以提供 JS 接口或自定义组件供小程序调用。JS 接口可以用于界面无关的逻辑,自定义组件可以嵌入界面中展示。 对于插件使用者来说,插件的调用方法很简单。 1.使用插件 JS 接口 与普通 JS 文件间 [代码]require[代码] 的方式一样,只需要将[代码]require(FILE_NAME)[代码] 改成[代码]requirePlugin(PLUGIN_NAME)[代码] 这样的调用形式。 2.使用插件提供的自定义组件 与使用普通自定义组件的方法非常相似。在[代码]json[代码]文件的 [代码]usingComponents[代码] 段落中,按照[代码]plugin://PLUGIN_NAME/COMPONENT_NAME[代码] 的形式使用即可。 对于插件开发者而言,这里给出几点建议: 1.提供充分的接口文档和示例,方便插件使用者了解插件的使用方法; 2.注意保持插件不同版本间接口的稳定,使插件使用者能顺利升级插件; 3.计算小程序代码包大小时,插件代码也会一并计算在内,所以应当控制好插件代码的大小。 插件代码运行环境插件代码的运行环境与小程序代码有一定的区别,主要是以下两点: 1.插件可以发起网络请求的域名与小程序不同,因此插件开发者需要注意在插件后台的设置中正确配置网络请求域名。 2.插件可以调用的 API 有一定的限制,并不是所有的接口插件都可以调用,如页面跳转相关的接口是不允许插件调用的。插件开发者在使用一些特殊接口前,请查询文档中的插件可调用接口列表。 此外,目前一个小程序最多可使用5个插件,赶紧将插件用起来,节约开发者成本吧。 详情可参考《小程序插件接入指南》。
2018-08-17 - 社区每周 |小程序相关接口调整、1月突出贡献者及上周问题反馈(2.15-2.19)
各位微信开发者: 以下是小程序登录与用户信息相关接口调整说明、社区1月突出贡献者名单公示及上周我们在社区收到的问题反馈与需求的处理进度,希望同大家一同打造小程序生态。 小程序登录、用户信息相关接口调整说明 为优化用户的使用体验,平台将进行以下调整: 2021年2月23日起,通过wx.login接口获取的登录凭证可直接换取unionID2021年4月13日后发布新版本的小程序,无法通过wx.getUserInfo与<button open-type="getUserInfo"/>获取用户个人信息(头像、昵称、性别与地区),将直接获取匿名数据(包括userInfo与encryptedData中的用户个人信息),获取加密后的openID与unionID数据的能力不做调整。新增getUserProfile接口(基础库2.10.4版本开始支持),可获取用户头像、昵称、性别及地区信息,开发者每次通过该接口获取用户个人信息均需用户确认。具体接口文档:《getUserProfile接口文档》请使用了wx.getUserInfo接口或<button open-type="getUserInfo"/>的开发者尽快适配。开发者工具预计将于2021年3月3日后在nightly版开始支持,此前开发者可通过真机调试进行适配。 详情可查看原公告:《小程序登录、用户信息相关接口调整说明》 上周问题反馈和处理进度(2.15-2.19) 已修复的问题反馈公众号文章赞赏按钮页面问题 查看详情 开发工具无法正常更新新版 查看详情 修复中的问题 oppo 手机textarea maxlength设置200后,可粘贴超过200的文字 查看详情 安卓 wx.chooseImage 使用相机 部分机型无法唤起闪光灯 查看详情 调用 setScreenBrightness 接口调节屏幕亮度后,手动调节亮度会失效的问题 查看详情 使用腾讯地图的点位聚合功能,有时候出现小程序闪退 查看详情 需求反馈需求评估中video组件触发bindpause时event对象中能否提供一个判断是否由用户点击触发暂停的字段的需求 查看详情 map组件的moveAlong方法不能使地图随着marker一起移动吗的需求 查看详情 社区2021.1月度突出贡献者名单公示 以下为上个月(2021年1月)社区月度“突出贡献者”名单,具体用户主页可从社区小程序主页右侧公示版块中进入: [图片] 为了鼓励大家持续为社区生产优质内容,以上社区月度突出贡献者将获得如下奖励: 一份微信官方正版周边礼物小程序极速审核奖励*注:极速审核机制说明:在获得突出贡献者前已绑定(作为管理员或开发者)的小程序,在本月7号后至月底可享受极速审核的奖励。小程序将在2小时内审核完毕,工作时间:周一到周五,9点-21点;周六周日,9点-19点; 微信团队 2021.2.26
2021-02-26 - 微信支付手续费的问题?
我从网上看到文章,说是疫情期间,微信支付手续费可以申请下调,我想问问在哪里申请?
2020-04-25 - 【12.21更新】微信小商店常见问题汇总
一、小商店是什么 1.小商店是什么? 微信小商店是小程序团队提供的一项新能力,无需开发、免费开店,帮助商家快速生成卖货小程序。小商店将降低商家在微信经营和卖货的门槛,让更多中小微企业和个体创业者可以低门槛的进入小程序生态尝试经营,开展电商业务。 2.小商店有几种类型? 小商店有四种类型: (1)企业/个体店 企业营业执照类型为:有限责任公司、股份有限公司、合伙企业、个人独资企业等。 个体营业执照类型为:个体工商户 (2)个人店 按电商法规定无须进行市场主体登记的个人主体。 (3)事业单位 是国家为了社会公益目的,利用国有资产设立的,从事教育、科技、文化、卫生等活动的社会服务组织,如旅游、报社、杂志社、学校等机构。 (4)其他组织 不属于个体户、企业、政府/事业单位的组织机构,如民办非企业、社会团体、基金会、合作社等组织。 3.“企业/个体店/事业单位/其他组织”与“个人店”有什么区别? (1)功能差异 目前企业店功能更加完善,支持直播、优惠券、数据中心等功能,个人店的功能也在同步完善中,敬请期待。 (2)收款限额 个人店正常日收款上限额度为10万,若交易良好则自动提升至20-30万/日,若交易异常则自动下降至5万以下/日。信用卡单日收款上限不超过1千,信用卡单月收款不超过1万。 二、如何开通一个小商店 1.开通流程包括哪些?需要准备什么材料? (1)搜索“小商店助手”小程序,点击“免费开店”,选择开店类型 (2)企业/个体/事业单位/其他组织店 pc登录网址: https://shop.weixin.qq.com/ https://mp.weixin.qq.com/ 扫码登录小商店,完成开店任务(共四步),即可卖货经营 -经营信息填写:营业执照(营业执照照片并填写相关信息)/事业单位法人证书(证件照片并填写相关信息)/相关登记证书(证件照片并填写相关信息)、经营者/法人信息(身份证正反面照片)、超级管理员信息(姓名、身份证号、手机、邮箱) -验证账户:法人扫描二维码验证/小额打款验证,两种方式任选其一即可 -基础信息填写:小商店头像、名称、店铺简介;品牌与类目信息(如有品牌,提供商标注册证相关信息) -签约开张:用超级管理员的微信扫描二维码即可完成签约 (2)个人店 -完善经营者信息:身份证正反面照片 -签约开张/协议签署 2.没有营业执照可以开通小商店吗? 如果没有营业执照,可以开通个人小商店,请搜索“小商店助手”小程序,点击“我要开店”,选择开店类型“个人”。 3.开通小商店有数量限制吗? (1)企业/个体/事业单位/其他组织店:一个微信号能申请3个“企业”,“个体”,”事业单位“和”其他组织“主体的小商店。 (2)个人店:一个微信号仅能申请1个“个人”主体的微信小商店。 4.开店后还可以变更店铺类型吗?从企业店改为个人店? 目前暂不支持变更店铺类型,如果需要开设其他类型的店铺,需重新申请。 三、如何登录小商店 1.小商店怎么登录? (1)企业/个体/事业单位/其他组织店: pc端登录网址: https://shop.weixin.qq.com/ https://mp.weixin.qq.com/ 用微信扫描二维码,在移动端选择对应小商店,即可跳转小商店后台。 (2)个人店:搜索“小商店助手”小程序,点击“进入我的店” 2.可以支持手机登录小商店管理后台吗? 已实现双端互通,个人店和非个人店均支持网页端、移动端登陆及管理。 3.谁可以扫码登录小商店? 注册小商店的微信号、超级管理员、添加的其他管理人员。 四、开店任务常见问题 (一)主体信息 1.营业执照/事业单位法人证书/相关登记证书信息审核不通过怎么办? 请根据营业执照/事业单位法人证书/相关登记证书驳回原因,仔细核对填写的相关信息是否准确。保证:营业执照/事业单位法人证书/相关登记证书证书未过期、清晰可见、如有二维码,尽量保证二维码可扫描。如果核对之后未发现错误,请至小商店后台,点击联系客服,我们将尽快跟进排查。 2.普通营业执照/事业单位法人证书/相关登记证书为什么要提交组织机构代码证? 个体工商户的工商营业执照和2015年10月1日前企业申请的工商营业执照及事业单位法人证书/其他组织相关登记证书,不包含组织机构代码信息,为非三证合一类营业执照/证书,因此商家提交该类证件时需要补充组织机构代码证。参考图例: https://developers.weixin.qq.com/miniprogram/product/mini-store/yingyezhizhao/putong.html 3.商户简称怎么填? 商户简称会在支付完成页向买家展示,填写商户名称即可。个体工商户,若营业执照上商户名称为空或为“无”,填写“个体工商户+经营者姓名”即可。 (二)超级管理员信息 1.超级管理员要填谁? 超级管理员信息需要填写注册微信号时的身份信息。 2.超级管理员可以更换吗? 小商店后台暂时不支持更换超级管理员。 3.填写超级管理员的时候要注意什么? 填写超级管理员信息时,务必注意填写真实姓名、身份证号,否则无法完成校验。 4.小商店可以多人管理吗?怎么进行多人管理? 企业/个体/事业单位/其他组织店支持多人管理(个人店暂不支持)。在“店铺-成员管理”中,添加成员即可,可以添加不同岗位,设置岗位权限。 (三)验证账户 1.怎么验证账户? 验证账户有两种方法,任选其一即可。 (1)法人验证:使用法人微信号扫描二维码即可验证成功。 (2)汇款验证:根据页面提示小额打款至指定账户,验证成功后,打款金额会原路退回。 2.验证账户有有效期吗? 若30天内一直未完成验证,将自动驳回申请单。若未超过30天,申请单被审核驳回,可再次提交申请单,完成账户验证流程。 (四)基础信息填写 1.店铺名称可不可以重名? 小商店不会出现店铺同名的情况,以下几点请各位商家注意: (1)小商店是小程序的一种类型,所以小商店不能和现有小程序同名,即使是同一主体也暂不支持。 (2)如果小商店和现有公众号同名,需保证二者是同一主体。 2.店铺名称、头像、简称、介绍可以修改吗? 小商店的名称和头像都可以修改。 个人店请至移动端店铺后台,点击“我-店铺信息” 企业店请至pc端后台,点击“店铺管理-基础信息” 修改次数限制如下: (1)店铺名称:企业/个体每年5次,个人每年3次 (2)店铺头像:企业/个体/个人每年5次 (3)店铺简称:企业/个体每年2次,个人每年3次 (4)店铺介绍:企业/个体/个人每月5次 3.店铺名称补充材料是什么? 当店铺名称命中一些品牌、旗舰店保护词之后,需要提交相关资质材料,请根据页面提示上传相应材料。 (五)品牌申请 1.如何申请品牌? 开店任务中可以申请品牌,需要依照页面提示上传相应资质。 开店任务完成后,在“店铺-品牌与类目”模块中,可以申请新品牌。 2.品牌有哪几种类型?申请不同类型的品牌需要什么资质? 品牌分为三种类型:自有品牌、代理品牌、无品牌。不同类型品牌需要不同的资质,详细规则可以点击链接查看。 自有品牌:https://developers.weixin.qq.com/miniprogram/product/mini-store/pinpai/ziyou.html 代理品牌:https://developers.weixin.qq.com/miniprogram/product/mini-store/pinpai/daili.html 3.如果是自有品牌,但商标主体和小商店主体不一致怎么办? 如果属于以下情况,我们支持提交相关证明材料。详情请点击链接至(开通品牌常见问题)查看。 https://developers.weixin.qq.com/miniprogram/product/mini-store/#三、微信小商店品牌开通规则 五、在小商店可以卖什么 (一)开放类目范围 小商店共开放超过2000个类目,一级类目包括:宠物生活、厨具、家用电器、手机通讯、数码、电脑&办公、服饰内衣、鞋靴、个人护理、母婴、美妆护肤、家纺、家居日用、家具、家庭清洁&纸品、家装建材、工业品、汽车用品、玩具乐器、运动户外、箱包皮具、酒类、食品饮料、钟表、农资园艺、生鲜、二手、生活服务、图书、艺术品、教育培训 详细类目开放范围请点击链接查看: 非个人主体店:https://developers.weixin.qq.com/doc/ministore/minishopspecification/leimuzizhi/qiye.html 个人店:https://developers.weixin.qq.com/doc/ministore/minishopspecification/leimuzizhi/geren.html 为什么我的类目列表里没有xx类目? 小商店部分类目需要资质,不会直接显示在“新增商品”的类目列表里,需要到“店铺-品牌与类目”模块申请所需类目,并上传相应资质。 (二)类目资质要求 哪些类目需要资质?这些资质有示例吗? 小商店部分类目需要资质,当你在“新增商品”过程中,发现没有某个类目时,可以到“品牌与类目”模块申请类目,如果选择了需要资质的类目,页面会提示上传相应资质。 整体类目及商品资质如下,请点击链接查看,具体资质证照可以点击跳转查看示例 非个人主体店类目资质: https://developers.weixin.qq.com/doc/ministore/minishopspecification/leimuzizhi/qiyeleimu.html 非个人主体店商品资质: https://developers.weixin.qq.com/doc/ministore/minishopspecification/leimuzizhi/qiyeshangpin.html 个人店商品资质: https://developers.weixin.qq.com/doc/ministore/minishopspecification/leimuzizhi/gerenshangpin.html (三)类目/商品审核 1.我的商品还没通过审核怎么办? 2.我提交了资质,对审核结果有异议怎么办? 3.希望开设更多类目,对现有类目的资质要求有异议怎么办? 如果你出现以上情况,可以通过后台的联系客服途径,反馈问题,客服人员会尽快跟进处理。 六、有什么营销功能 (一)怎样让人看到我的小商店? 小商店曝光渠道:任务栏、发现入口、客服消息、小程序码、搜索、对话分享、群分享、APP分享、模板消息、公众号Profile页/文章插入、LBS广告、微信广告 商品曝光渠道:对话分享、群分享、APP分享、小程序互跳、公众号自定义菜单/文章插入、二维码、模板消息 [图片] (二)优惠券 1.优惠券有哪几种类型? 目前小商店支持的优惠券功能,包括店铺优惠券和指定商品优惠券,每一种类型的优惠券都会分为直减券、满减券和折扣券。所有券支持两种发放渠道,小商店内推广发放和自定义渠道推广发放。 2.店铺内推广发放和自定义渠道发放的区别? (1) 小商店内推广发放: 商家在管理后台制作优惠券并生效后,优惠券会自动出现在小商店的各个位置,如小商店首页、商品详情页出现优惠的特殊样式,下单页也会出现简易的凑单提示。 商家可设置“仅该商品可以使用的优惠券”,在视觉样式上提升该商品的下单转化率,或设置一些合理的梯度满减优惠券,在给用户更多优惠的同时提高单用户单次访问的购买订单消费总额。 (2)渠道优惠券: 当商家开通小商店并将商品分发给其他人进行售卖时,可配置专属优惠券,当其他人员售卖商品时,商家在后台的优惠券详情明窗看到专属优惠券具体产生了多少次购买,了解该人员带来的订单量。 3.优惠券创建创建之后可以取消吗? 商家发布优惠券时可设置有效期,生效后的优惠券,用户已领取,则暂时不支持作废用户已领的优惠券。 (三)公众号 1.小商店怎么关联公众号? 登陆公众号后台-小程序管理-关联小程序搜索-输入小商店名称 2.小商店的带货商品链接怎么插入公众号推广? 带货商品链接支持插入公众号文章和自定义菜单进行推广,具体步骤请查看下方链接: https://developers.weixin.qq.com/community/business/doc/0000e265b90e00615a2b7c6c75b00d (四)带货 1.如何查看佣金的打款时间? 带货佣金需要等待对应平台打款后,才能打款给商家。 可点击「带货收入」查看佣金,进入「待打款佣金」页面,显示「预估X月20日可打款」栏有金额显示,如果填写的银行卡信息正确,到日期后就会进行打款。一般下单到最终收到佣金需要45-60天; 显示「平台未打款」栏,即对应第三方平台并未打款至小商店,可查看到预计的佣金款项。 更多小商店带货能力结算规则,请查看: https://developers.weixin.qq.com/community/business/doc/00064631af05c0783d8b3e9955b00d 2.商品接入范围? 鉴于微信小商店对带货平台、带货商品的资质有严格的审核要求,目前链接搜索仅支持京东、拼多多、有赞的符合小商店售卖规定的商品,其它平台暂未支持;其他平台(包括唯品会和当当)上仅支持部分已经进入商品库的商品。 3.带货成功后需要我联系供应商发货吗? 不需要。只需负责带货,生成订单后,供应商主动发货,售后问题由该带货商品的平台、供应商负责。 4.带货商品也可以在视频号售卖吗? 是的,带货商品上架小商店之后也可以在视频号直播的时候进行选择添加并售卖。 5.怎么带货? 小商店带货指引详情请见 https://developers.weixin.qq.com/community/business/doc/0000a210138b70c91c2bc32f35180d 更多关于小商店带货能力推广问题,请查看: https://developers.weixin.qq.com/community/business/doc/00084c90ecc3b0983a8b23c8156c0d 6.企业店支持带货吗? 现阶段暂时只支持个人小商店带货,企业店带货能力敬请期待。 7.为什么带货订单里看到的佣金,和我分享的时候显示的不一样? 在带货的时候看到的佣金为预估佣金,由于买家下单时可能会使用京豆、京东余额等虚拟货币,导致记佣金额减少,进而导致订单收益变少。 8.订单取消、订单已完成、平台未打款,分别是什么意思?哪些情况下我可以收到打款? 订单取消,是指因为用户主动取消订单、或第三方平台审核失败等原因,导致订单失效无法记佣。这种情况下无法收到打款。 订单已完成是指买家已经收到货并确认,但第三方平台还没有和腾讯结算,还不能收到打款。 平台未打款,是指京东、拼多多等第三方平台还没有和腾讯结算,还不能收到打款。 9.买家收货后,我什么时候可以收到打款? 买家收货并且没有发生退款及其他售后纠纷等行为的情况下,第三方电商平台会将该笔订单标记为审核通过的订单。腾讯公司会在每个月20号左右和第三方平台对当月审核通过的订单进行结算,并在次月20号左右完成打款。通常这一周期为30~60天。 更多关于小商店带货能力收入管理问题,请查看: https://developers.weixin.qq.com/community/business/doc/0002aea8e94a58f83b8be95ea5600d (五)导购分销 导购分销已开放给所有企业/个体店(个人店不支持) 1.导购被添加后,无法登录手机端后台管理?商家如何正确添加导购? 如果「店铺管理」中没有添加导购管理员,只在「导购分销」中添加导购,则导购是无法成功登陆后台导购管理体系的。 (1)方法一:商家需先在「店铺管理」-「成员管理」中添加导购管理员,商家或已被成功添加的导购管理员进入「营销中心」-「导购分销」添加导购分销员。 注:添加导购管理员和导购分销员,需在小商店后台由管理员主动添加,暂不支持增加自主申请成为导购。 (2)方法二:需要该导购删除「小商店助手」小程序后,重启该小程序。 2.导购如何推广带货商品? (1)导购分销员可通过生成「海报」和「复制链接」的推广方式,引导客户进入小商店购买,链接可挂在公众号或其他小程序中使用(链接分享至视频号不支持结算分成)。 (2)现已支持通过小程序转发记佣。导购通过在推广商品中点击进入程序,直接分享该小程序商品页面,也算该导购的。 3.导购员分享商品且交易完成,但后台没有给导购员提成? (1)情况一:该导购进行了无效推广 若客户在导购A的有效客户关系中,通过导购B推广的链接购买商品,该客户直接从B的链接购买,则计算给B。 (2)情况二:该商品被设置的结算规则有误 需确认该商品被设置的结算规则,有以下两种结算方式。 交易完成后结算——客户确认收货后,即订单完成后,该订单的相应提出才能结算给导购。 无法发起退款后结算——用户无法发起退货退款后才能结算。 (3)情况三:被同店其他导购抢客 顾客A通过导购A分享的商品海报或链接进店后,无立即购买到商品,又通过同一家店的导购B海报或链接扫码进店,购买商品,则会形成被同店导购B抢客的情况,如不在有效客户关系内购买,导购员无法获得提成。 4.商家如何管理业绩? (1)导购等级实时升降,不再与提成结算时间一致,而是在订单交易后即提升相应的业绩,相应的订单发生退款时,也会减少业绩。 (2)「营销中心」-「导购分销」中分销的佣金结算能力已支持自动结算给导购分销员。 (3)如有线下结算需要,后台支持导购业绩批量导出,方便对账。 更多导购分销疑问,请点击链接查看 https://developers.weixin.qq.com/community/business/doc/000cc6f0030558c19f2be29365100d (六)店铺直播 1.怎么开通直播功能? 成功开通的小商店(企业/个体店)自带直播能力,商家只需同时满足已开张、且商品库中有成功发布的商品,后台的直播页面将会自动开通直播功能,商家点击管理直播跳转到直播管理后台,可创建直播间、指定主播、设定直播开播时间。 Tips:建议商家在直播间选货之前,先在小商店上传好商品,直播间选品时会自动同步小商店已经上传并且发布成功的商品,提高直播的效率。 2.怎么让用户看到商家直播? 商家可直接以直播间小程序码的形式进行分享,也可以把商家的小商店主动分享给用户,凡是设定了直播的商家,小商店主页都会看到直播入口,用户点击可进入直播间观看或订阅直播。 在直播将开始时,直播间会自动给预约的用户发消息提醒,为商户提供定时召回用户的功能。直播间还会完整展示主播推荐的商品、讲解和抽奖能力,并设有直播浮窗的功能,保证用户边看边买的流畅体验。 3.店铺直播与视频号直播的区别? (1)店铺直播是小商店自带的微信小程序直播,帮助商家在自有小程序(小商店)中实现直播互动与商品销售闭环,提高转化率。店铺直播优势为低门槛、快运营,一键分享、一键订阅。 更多小程序直播信息可查看以下链接:https://developers.weixin.qq.com/community/business/doc/000e28dbfd8a8082282a60d6f5b80d (2)视频号直播作为视频号的重要能力之一,现已与微信小商店打通,商家或导购可以在直播时添加在架商品,进行引流、带货。视频号优势在于可以快速突破熟人圈,拓展更广阔的私域流量。 (七)视频号 1.视频号怎么关联小商店? 视频号关联/取消关联小商店的具体步骤请查看下方链接: https://developers.weixin.qq.com/community/business/doc/000ce0f5014a186f871bf21b459c0d?page=2#comment-list 2.视频号直播怎么带货? 视频号直播可支持带货小商店在架商品,视频号关联小商店后,即可在视频号添加带货商品,具体步骤请查看以下链接: https://developers.weixin.qq.com/community/business/doc/000ce8f5688b4873a72b2d6c15ac0d (八)后续营销能力规划 小商店是一种卖货小程序,未来,用户可以从下方图片中展示的场景,比如任务栏、会话框、扫码、搜索、分享等进入小商店。小商店将持续与微信生态的场景实现更紧密地结合,为商家提供更多连接用户的方式。 七、服务提升 1.运费险(卖家版)保障什么?保障周期是多久? 运费险是帮助买家适当减少退换货运费损失的一种服务,卖家为买家购买运费险,当买家退换货的时候,保险公司会向用户赔偿部分运费。 运费险从卖家发货开始生效,到买家确认收货/到期系统自动确认收货为止,总时长不超过90天。 2.如果同一笔订单,发生多次退换货行为,商家需要多次投保吗? 一笔订单对应一笔运费险,因此商家只需购买一次运费险。 3.运费险理赔金额标准怎么定? 理赔金额是根据用户的收货地址和商家在系统里预留的退货地址的距离进行首公斤价格赔付的,具体以实际赔付金额为准。 更多运费险疑问,请点击查看 https://developers.weixin.qq.com/community/business/doc/0006a651408b80b12dda778cd5180d 八、订单物流 1.订单是否支持改价? 商家可修改「待付款订单」的价格(目前仅支持调低价格)、减免运费。 用户拍下商品但未付款前,商家可以在订单管理中找到对应订单并修改订单价格(可直接输入修改后的价格或折扣,系统会自动计算)及选择是否减免运费,设置完成后点击确定; 用户微信上会收到订单价格已修改的服务通知,点击后可按修改后的价格进行付款; 2.如何确定收货? 目前统一的确认收货规则为:用户可手动对订单确认收货,若不手动确认收货,在商家发货15天后系统将自动确认收货。若订单中有商品发生了退款/售后,订单自动确认收货的倒计时将停止。 3.小商店支持的物流方式有哪些? 目前仅支持快递物流配送,上门自提、同城配送、无需物流模板正在开发中,敬请期待。 4.商家快递单号填写错误后,是否影响正常收货流程? 只要快递顺利到达买家手中,就不会影响正常收货。修改物流单号的功能正在开发中,敬请期待。 九、怎么结算 1.小商店结算账户是什么? 开通小商店,将自动开通一个全新的微信支付商户号。该商户号暂时不支持更换。商家可以直接在小商店后台进行经营对账,客户的每一笔货款都会直接到达商家自己的微信支付商户号账号中。 2.什么时候可以提现? 到账的款项无特殊情况均为待结算状态,商家将在客户确认收货后,可对该笔款项进行提现至银行账户操作。 3.收款提现多长时间到账? 收款提现后,无特殊情况下,24h内到账。 4.收款可以提现到私人账户吗? 如果是企业,会自动提现至对公账户,不支持提现到私人账户; 如果是个体工商户,可以选择对公或者对私账户; 个人主体的直接结算到绑定的对私银行账户。 5.小商店的结算费率0.6%指的是? 微信支付收取每笔订单实际销售金额的千分之六; 小商店不收取手续费,免费开店、免费提现至银行账户。 十、客服 1.商家客服添加多名客服后,是否只有开通小商店的微信收到顾客咨询信息? 添加多名客服后,只要绑定客服帐号的微信都可以收到顾客的资讯信息。 2.商家客服可以手机接收到消息吗? 企业/个体店,在小商店后台-客服与售后模块中,点击添加,可以绑定客服帐号,绑定后,扫描下方二维码,即可在移动端小程序客服进行客服沟通。 客服消息指南如下:https://developers.weixin.qq.com/miniprogram/introduction/custom.html#网页版客服工具 [图片] 十一、服务商 1.小商店支持服务商吗? 毋庸置疑,我们需要服务商一起参与,小商店将开放店铺、商品、订单、物流、客服等一系列API接口供第三方介入,完善小商店能力。未来,小商店会开放接入ERP/CRM、智能客服、店铺装修、营销等经营工具,和第三方合作伙伴共同帮助商家经营成长。 2.小商店开放接口在哪里? 微信官方文档-小商店板块中,已上线小商店开放组件介绍,请点击查看:https://developers.weixin.qq.com/doc/ministore/minishopopencomponent/Introduction.html
2021-02-05 - 第三方小程序首单提审不做quota限制
随着小程序服务商生态的壮大和平台面向服务商提审机制的优化,现阶段小程序服务商的提升质量有了稳步的提升,考虑到服务商自身业务的拓展对提审额度提升的效率及数量需求,为鼓励服务商拓展商户新增业务,平台对当前提审额度的限制能力进行优化:对在平台注册的第三方小程序首单提审不做quota限制,详细规则如下: 1) 第三方小程序属于首次在小程序平台内提审时不消耗提审quota 2) 当月quota已用完的情况下,属于首单提审的不受限制,可以继续提审 3) 首次提审后撤回再次提审仍算首单提审,但第二次撤回后,再次提审就不能享受这个政策 备注:即使小程序是首次授权给服务商的第一次提审,如在授权前已经自行提审或者被别的服务商提审过,则不算首单。 友情提示:部分服务商在商家注册时有自动提审机制,此时商家的内容往往未配置完全,容易驳回,请加强对商家提审的控制,避免浪费首单提审机会。 Quota基于服务商提审质量分配的原则依然不变,此外,被平台评估为滥用首单机制的服务商,将会被限制该能力,各服务商需要继续关注对商户的运营和控制,减少驳回和违规情况。 未来我们会针对服务商提供更多的激励,如平台评价优秀的小程序提审不消耗quota且审核优先安排等措施,期待第三方服务商和平台能建立良好的生态合作共赢关系,帮助商户通过小程序为更多的用户提供更优质的服务。
2021-09-10 - 登录优化:2.0:让你的小程序与用户做朋友
上一篇小程序登录相关的学院课程,我们围绕小程序如何通过优化登录“拉好感”提了几点建议。 前方再次预告,开发人员请及时到场:9月1日起,小程序登录规范规则正式开始执行,未满足登录规范要求的小程序将会被代码审核拦截,请尽快优化。 下面,我们来复习下正确的登录优化姿势。 从陌生人到“知己” 想要“拉好感”并不难,秘诀就在于跟用户做朋友。开发者可以站在用户的角度体验小程序,从而更了解自己的产品。 攻略一:互相认识从自我介绍开始。对于线上仅提供注册功能,服务依赖其他方式提供的小程序,可先让用户知悉小程序功能,再引导用户进行授权。 下面这个ETC小程序,就“秀”了一波:用户可在首页了解小程序相关功能及使用帐号登录的原因,并可先办理ETC再登录。 [图片] [图片] [图片] [图片] [图片] 攻略二:做完介绍,先别急着登录,让对方花点时间了解你。对于服务范围开放的小程序,可先让用户体验了解小程序功能,与其只给用户一个登录选项,不如用“个人魅力”吸引他们。 例如,在这个DJ小程序中,用户可先听音乐蹦迪授权登录后,还能关注作者、风格及电台,或购买周边商品,享受更多服务。 [图片] [图片] [图片] 不过,如果服务范围是特定的,可以直接让用户登录,毕竟你和用户已经是知根知底的“老熟人”了。 攻略三:退一步,给对方留点拒绝的余地。在小程序登录页提供可取消或拒绝的选项按钮,反而更能留下好印象。 以这个拼单小程序为例,用户可先浏览商品信息,查看商品详情。如果用户心动了,点击“我的”进入个人中心授权登录即可下单;如果用户犹豫不决,还可以退出登录页面继续逛。 [图片] [图片] [图片] [图片] 登录优化的Q&A 对规则仍然有疑惑的开发人员,我们也补充了详细的问题解答,希望对你们有帮助—— Q:9月1日后,开发者该如何获得用户的UnionID?用户不登录就没有UnionID,怎么办? UnionID是作为微信体系内,用户帐号在同一主体下不同公众号、小程序及App之间实现数据互通的识别凭证,这个信息本身是匿名化、不敏感且不可反推的。但用户如果在不知情的情况下被获取,并且开发者完成了跨平台或者跨产品的打通,会使得用户产生困惑,为什么同一个用户在帐号A的信息会在帐号B中被展示。 站在用户体验和隐私保护的角度来看,每个人都不希望自己的个人信息在不知情的情况下被获取。因此,开发者要在用户授权登录后,才能获取UnionID 如果用户曾经授权登录过同主体App或关注了同主体公众号,则表示用户已经知情并同意登录,这时开发者可以直接获得UnionID。点击这里查看详情。 如果用户未授权登录,开发者可根据前面的攻略,进一步优化登录体验,让用户更乐意登录使用你的小程序。 unionid就像大型连锁超市(微信内同主体帐号)给客户(用户)发放会员卡(nionid),客户持有会员卡可在连锁超市内享受会员权益。 而用户不知情即被获取unionid,就好比在连锁超市购物后,没有任何信息说明,超市就要求留下手机号码等身份凭证识别信息。下次用户去另一家连锁超市时,超市已清晰记录用户之前的消费记录。这是我们不提倡的。 因此,我们希望在用户对小程序的业务有了解之后,开发者明确告知用户会在什么功能或业务使用unionid打通不同帐号之间的数据。 Q:怎么划分服务范围开放和服务范围特定呢? 举个简单的例子,当你在餐厅、商店消费时,服务员不会要求查看你的身份证明,再为你提供服务,但当你进入学校或公司时,则需先登记才能进去。 因此,服务范围开放是指完全对外开放注册,无需进行特殊身份验证,注册后即可提供线上服务体验的小程序,例如电商、外卖等小程序;服务范围特定则需要进行特殊身份验证,且线上服务仅供特殊身份用户体验,例如学校教学系统、公司员工系统等小程序。 Q:服务范围开放的小程序,可以使用仅提供注册功能小程序的调整方案吗? 如果小程序服务范围属于完全开放,线上仅提供注册功能,其他服务均需以其他方式提供的,例如ETC小程序,可以在首页介绍小程序的服务功能,说明要求使用帐号登录功能的原因后,让用户主动选择登录。 反之则需要让用户进入小程序体验并了解平台功能,在使用需要注册登录才能体验的功能时,才触发登录注册流程。 Q:如果小程序不调用微信个人信息授权,只使用帐号密码或手机号码登录,需要优化吗? 小程序帐号登录,是指开发者在小程序内提供的帐号登录功能,包括但不限于手机号登录、getuserinfo形式登录、邮箱登录等形式。因此,开发者也需根据规范进行优化 再次划重点,请未满足小程序帐号登录规范的开发者们尽快完成优化,为你的小程序增加更多好感度。 未来,我们还将不断优化小程序使用体验,希望开发者与我们一起,让平台生态更加绿色健康。如果你对新规范还有什么疑惑,欢迎在评论区聊聊。
2021-06-23 - 小程序“订阅消息”终于来了!
全新小程序订阅消息,七天后也能触达用户。 作者丨Suvi & Tsai [图片] 就在刚刚,微信发布了小程序模板消息能力调整的通知。此前的模板消息接口将停止使用,而我们翘首以盼的小程序订阅消息接口将正式上线! 新上线的小程序订阅消息,同时支持一次性和长期性订阅消息,用户可以主动订阅或退订。所有消息由“服务通知”下发,并附带小程序外链入口,支持用户点击消息进入小程序。 订阅消息会带来哪些商业机会?它和小程序模板消息又有什么不同? 01 订阅消息 vs 模板消息 订阅消息,顾名思义,就是小程序可向用户推送消息。但我们所熟知的小程序模板消息,似乎也能做到这一点。那么,这二者,有什么区别? 模板消息,是小程序触达用户的一个重要入口,它基于用户的主动行为被触发。用户在小程序内完成特定交互行为(主要是支付)后,小程序可在后续7天内向用户推送1-3条模板消息。 [图片] ▲模板消息 模板消息内含小程序入口,且能够搭载优惠券、促销活动等营销信息,能够帮助商家大大提高运营能力。但是模板消息也有其局限性。 首先,模板消息虽然是由用户的行为触发,但实际上用户是被动接受者,事先对推送内容并不知情。由于用户事先没有选择权,所以贸然推送的消息很有可能对用户构成骚扰,起到反效果。尽管推送次数有限,不至于形成“轰炸骚扰”,但是依然有可能造成负面的用户体验。 其次,模板消息推送的时间限制过于严格,只有7天。对模板消息推送时效设限,在预防过度营销、优化用户体验等方面,有其合理性。但对于一些服务周期较长的小程序来说,7天的限制使得它们无法提供完整的服务。 例如机票类小程序,如想在用户出行前一天推送一条延误风险提醒,很有可能无法实现——用户从订票到出行,这之间的时间间隔大概率会超过7天。 [图片] ▲订阅消息示例 | 来源:微信公开课 而这两点局限性,新上线的「订阅消息」,或许就能解决。 02 订阅消息能做什么 能够让用户像关注公众号一样,自主按需订阅通知提醒,是「订阅消息」一大亮点。很多时候,“服务”与“骚扰”之间,只隔着一层很薄的“窗户纸”。同一条推送,愿意看的用户,认为这是服务周到的体现;而没兴趣的用户,收到提醒之后只想拒收。 在信息爆炸的当下,正确的营销策略,并非一厢情愿地给用户推送“想让他看的”,而是有选择性的给用户提供内容,给他看“他想看的”。用微信官方的说法,这就是所谓的该收到的用户收到消息,让不该收到的用户不收到。 许多小程序运营者有一个误区,生怕“浪费”任何一个触达用户的机会。例如,有的小程序会在用户首次下单后赠送优惠券,并通过后续的消息推送持续提醒用户用券。这样的策略本无可厚非,但如果将“7天3次”的机会全部用掉,且全都是营销提醒,并不是最明智的做法。 事实上,用户是否愿意回购,第一次提醒后大概率就能见分晓。更多的用户并非“忘记了”,而是根本没有产生消费欲望。反复单一的券过期提醒,并不能有效地刺激消费,还会产生反效果。 [图片] ▲一次性订阅消息示例 | 来源:微信公开课 「订阅消息」上线之后,这种“一厢情愿”的营销方式有望得到改善。商户可以在小程序内对用户进行“订阅引导”,了解用户真正的兴趣点,确保下一次通知推送给用户的消息能够吸引对方回到小程序中,从而真正做到“不浪费”每一次触达用户的机会。 例如,对于商城小程序来说,可以引导用户订阅心仪的商品的“降价通知”;内容类小程序,可以引导用户订阅其感兴趣的话题等;游戏类小程序,也可以引导用户对游戏动态进行订阅。 此外,模板消息的另一个局限性,就是推送的有效期只有7天。对于类似机票、保险等特殊行业的小程序,7天根本不够用:7天内,找不到合理的推送节点;7天之后,已经丧失了推送机会。 「订阅消息」没有时效限制。在经过用户的明确授权之后,商家小程序可以在任意时间给用户推送一条订阅消息,“航班延误提醒”等功能也因此有了用武之地。更宽松的时效限制、辅以合适的推送内容,这使得订阅消息有望在召回“沉睡用户”、提高小程序留存转化方面发挥巨大作用。 03 推送与骚扰的“平衡” 作为一款国民级超级app,微信的每一项新更改都会有着深远的影响。而订阅消息,就像一把双刃剑:运用得当,是商家的营销利器,微信、商户、用户皆大欢喜;但如果被滥用,则会降低用户体验,给微信用户带来骚扰。 所以,在「订阅消息」能力上,微信又一次展现了它的克制。从模板消息,到一次性订阅消息,微信的尝试非常谨慎,其至今都没有开放通知推送的条数限制就是一条例证。 微信官方团队也坦言,如何既赋予开发者灵活丰富的通知营销能力,又能够最大程度地杜绝滥发消息,是他们还在思考和探索的课题。未来,微信也将在这方面进行更多的尝试。 不过,对于小程序运营者们来说,倒不必思考太多。真正有效、有用的消息推送,就是在对的时机、推送对的内容,「订阅消息」显然已经能够满足这两点。
2019-10-14 - 小程序与小游戏获取用户信息接口调整,请开发者注意升级。
为优化用户体验,使用 wx.getUserInfo 接口直接弹出授权框的开发方式将逐步不再支持。从2018年4月30日开始,小程序与小游戏的体验版、开发版调用 wx.getUserInfo 接口,将无法弹出授权询问框,默认调用失败。正式版暂不受影响。开发者可使用以下方式获取或展示用户信息: 一、小程序: 1、使用 button 组件,并将 open-type 指定为 getUserInfo 类型,获取用户基本信息。 详情参考文档: https://developers.weixin.qq.com/miniprogram/dev/component/button.html 2、使用 open-data 展示用户基本信息。 详情参考文档: https://developers.weixin.qq.com/miniprogram/dev/component/open-data.html 二、小游戏: 1、使用用户信息按钮 UserInfoButton。 详情参考文档: https://developers.weixin.qq.com/minigame/dev/document/open-api/user-info/wx.createUserInfoButton.html 2、开放数据域下的展示用户信息。 详细参考文档: https://developers.weixin.qq.com/minigame/dev/document/open-api/data/wx.getUserInfo.html 请各位开发者注意及时调整接口。
2018-04-16 - 如何用小程序实现类原生APP下一条无限刷体验
1.背景 如今信息流业务是各大互联网公司争先抢占的一个大面包,为了提高用户的后续消费,产品想出了各种各样的方法,例如在微视中,用户可以无限上拉出下一条视频;在知乎中,也可以无限上拉出下一条回答。这样的操作方式用户体验更好,后续消费也更多。最近几年的时间,微信小程序已经从一颗小小的萌芽成长为参天大树,形成了较大规模的生态,小程序也拥有了一个很大的流量入口。 2.demo体验 那如何才能在小程序中实现类原生APP效果的下一条无限刷体验? 这篇文章详细记录了下一条无限刷效果的实现原理,以及细节和体验优化,并将相关代码抽象成一个微信小程序代码片段,有需要的同学可查看demo源码。 线上效果请用微信扫码体验: [图片] 小程序demo体验请点击:https://developers.weixin.qq.com/s/vIfPUomP7f9a 3.实现原理 出于性能和兼容性考虑,我们尽量采用小程序官方提供的原生组件来实现下一条无限刷效果。我们发现,可以将无限上拉下一篇的文章看作一个竖向滚动的轮播图,又由于每一篇文章的内容长度高于一屏幕高度,所以需要实现文章内部可滚动,以及文章之间可以上拉和下拉切换的功能。 在多次尝试后,我们最终采用了在[代码]<swiper>[代码]组件内部嵌套一个[代码]<scroll-view>[代码]组件的方式实现,利用[代码]<swiper>[代码]组件来实现文章之间上拉和下拉切换的功能,利用[代码]<scroll-view>[代码]来实现一篇文章内部可上下滚动的功能。 所以页面的dom结构如下所示: [代码]<swiper class='scroll-swiper' circular="{{false}}" vertical="{{true}}" bindchange="bindChange" skip-hidden-item-layout="{{true}}" duration="{{500}}" easing-function="easeInCubic" > <block wx:for="{{articleData}}"> <swiper-item> <scroll-view scroll-top="0" scroll-with-animation="{{false}}" scroll-y > content </scroll-view> </swiper-item> </block> </swiper> [代码] 4.性能优化 我们知道view部分是运行在webview上的,所以前端领域的大多数优化方式都有用。例如减少代码包体积,使用分包,渲染性能优化等。下面主要讲一下渲染性能优化。 4.1 dom优化 由于页面需要无限上拉刷新,所以要在[代码]<swiper>[代码]组件中不断的增加[代码]<swiper-item>[代码],这样必然会导致页面的dom节点成倍数的增加,最后非常卡顿。 为了优化页面的dom节点,我们利用[代码]<swiper>[代码]的[代码]current[代码]和[代码]<swiper-item>[代码]的[代码]index[代码]来做优化,控制是否渲染dom节点。首先,仅当[代码]index <= current + 1[代码]时渲染[代码]<swiper-item>[代码],也就是页面中最多预先加载出下一条,而不是将接口返回的所有后续数据都渲染出来;其次,对于用户已经消费过的之前的[代码]<swiper-item>[代码],不能直接销毁dom节点,否则会导致[代码]<swiper>[代码]的[代码]current[代码]值出现错乱,但是我们可以控制是否渲染[代码]<swiper-item>[代码]内部的子节点,我们设置了仅当[代码]current <= index + 1 && index -1 <= current[代码]时才会渲染[代码]<swiper-item>[代码]中的内容,也就是仅渲染当先文章,及上一篇和下一篇的文章内容,其他文章的dom节点都被销毁了。 这样,无论用户上拉刷新了多少次,页面中最多只会渲染3篇文章的内容,避免了因为上拉次数太多导致的页面卡顿。 4.2 分页时setData的优化 setData工作原理 [图片] 小程序的视图层目前使用[代码]WebView[代码]作为渲染载体,而逻辑层是由独立的 [代码]JavascriptCore[代码] 作为运行环境。在架构上,[代码]WebView[代码] 和 [代码]JavascriptCore[代码] 都是独立的模块,并不具备数据直接共享的通道。当前,视图层和逻辑层的数据传输,实际上通过两边提供的 [代码]evaluateJavascript[代码] 所实现。即用户传输的数据,需要将其转换为字符串形式传递,同时把转换后的数据内容拼接成一份 [代码]JS[代码] 脚本,再通过执行 [代码]JS[代码] 脚本的形式传递到两边独立环境。 而 [代码]evaluateJavascript[代码] 的执行会受很多方面的影响,数据到达视图层并不是实时的。 每次 [代码]setData[代码] 的调用都是一次进程间通信过程,通信开销与 setData 的数据量正相关。 [代码]setData[代码] 会引发视图层页面内容的更新,这一耗时操作一定时间中会阻塞用户交互。 [代码]setData[代码] 是小程序开发中使用最频繁的接口,也是最容易引发性能问题的接口。 避免不当使用setData [代码]data[代码] 应仅包括与页面渲染相关的数据,其他数据可绑定在this上。使用 [代码]data[代码] 在方法间共享数据,会增加 setData 传输的数据量,。 使用 [代码]setData[代码] 传输大量数据,通讯耗时与数据正相关,页面更新延迟可能造成页面更新开销增加。仅传输页面中发生变化的数据,使用 [代码]setData[代码] 的特殊 [代码]key[代码] 实现局部更新。 避免不必要的 [代码]setData[代码],避免短时间内频繁调用 [代码]setData[代码],对连续的setData调用进行合并。不然会导致操作卡顿,交互延迟,阻塞通信,页面渲染延迟。 避免在后台页面进行 [代码]setData[代码],这样会抢占前台页面的渲染资源。可将页面切入后台后的[代码]setData[代码]调用延迟到页面重新展示时执行。 优化示例 无限上拉刷新的数据会采用分页接口的形式,分多次请求回来。在使用分页接口拉取到下一刷的数据后,我们需要调用[代码]setData[代码]将数据写进[代码]data[代码]的[代码]articleData[代码]中,这个[代码]articleData[代码]是一个数组,里面存放着所有的文章数据,数据量十分庞大,如果直接[代码]setData[代码]会增加通讯耗时和页面更新开销,导致操作卡顿,交互延迟。 为了避免这个问题,我们将[代码]articleData[代码]改进为一个二维数组,每一次[代码]setData[代码]通过分页的 [代码]cachedCount[代码]标识来实现局部更新,具体代码如下: [代码]this.setData({ [`articleData[${cachedCount}]`]: [...data], cachedCount: cachedCount + 1, }) [代码] [代码]articleData[代码]的结构如下: [图片] 4.3 体验优化 解决了操作卡顿,交互延迟等问题,我们还需要对动画和交互的体验进行优化,以达到类原生APP效果的体验。 在文章间上拉切换时,我们使用了[代码]<swiper>[代码]组件自带的动画效果,并通过设置[代码]duration[代码]和[代码]easing-function[代码]来优化滚动细节和动画。 当用户阅读文章到底部时,会提示下一篇文章的标题等信息,而在页面上拉时,由于下一篇文章的内容已经加载出来了,这样在滑动过程中会出现两个重复的标题。为了避免这种情况出现,我们通过一个占满屏幕宽高的空白[代码]<view>[代码]来将下一篇文章的内容撑出屏幕,并在滚动结束时,通过[代码]hidden="{{index !== current && index !== current + 1}}"[代码]来隐藏这个空白[代码]<view>[代码],并对这个空白[代码]<view>[代码]的高度变化增加动画,来实现下一篇文章从屏幕底部滚动到屏幕顶部的效果: [代码].fake-scroll { height: 100%; width: 100%; transition: height 0.3s cubic-bezier(0.167,0.167,0.4,1); } [代码] [图片] 而当用户想要上拉查看之前阅读过的文章时,我们需要给用户一个“下滑查看上一条”提示,所以也可以采用同上的方式,通过一个占满屏幕宽高的提示语[代码]<view>[代码]来将上一篇文章的内容撑出屏幕,并在滚动结束时,通过[代码]wx:if="{{index + 1 === current}}"[代码]来隐藏这个提示语[代码]<view>[代码],并对这个提示语[代码]<view>[代码]的透明度变化增加动画,来实现下拉时提示“下滑查看上一条”的效果: [代码].fake-previous { height: 100%; width: 100%; opacity: 0; transition: opacity 1s ease-in; } .fake-previous.show-fake-previous { opacity: 1; } [代码] 至此,这个类原生APP效果的下一条无限刷体验的需求的所有要点和细节都已实现。 记录在此,欢迎交流和讨论。 小程序demo体验请点击:https://developers.weixin.qq.com/s/vIfPUomP7f9a
2019-06-25 - 腾讯直播内测ing,又是一个离钱近的功能!
[图片]阅读时间:6m 最懂 小程序生态商业 的自媒体 “关于怎样鼓励产生更多优质内容是公众平台下一步要面临特别大的问题,对于内容的形式可能大家也会做一些尝试,比如说视频化展现等等。” ——张小龙于2019年微信公开课PRO 前阵子,公众号直播功能内测的消息像一颗石子被投入水中,惊起一滩鸥鹭。 公众号直播的呼声喊了很多年,千聊、荔枝、小鹅通这些第三方直播服务商也一直做的风生水起,说明需求一直很旺盛。 这一次,难道正如张小龙所说,微信要尝试为公众号增添直播这种新的内容形式? 但又为何有很多运营者并不看好,认为这个功能与公众号有些“格格不入”,至少还得“3、4年之后”才能实现? 让我们来聊一聊这件事。 APP+小程序 公号主的福音 首先要强调,公众号直播功能内测确有其事,但并非微信团队推出。 3月8日,公众号“腾讯直播Tencent Live”发布文章《“腾讯直播”内测,基于小程序开放能力提供直播服务》,表示最近热议的“腾讯直播”是腾讯直播团队针对公众号提供的一套直播解决方案,形式分为语音直播和视频直播两种,现在正面向少量公号主进行测试。 [图片] 从具体的使用流程来看: 公号主→在“腾讯直播APP”端创建直播并生成小程序码。 粉丝→根据小程序码海报,跳入“腾讯直播”小程序进行预约、观看、互动。 [图片] 可以说相比于第三方直播服务,“腾讯直播”的接入方式上比较简便,公号主使用门槛较低。对粉丝而言,整场直播的都在微信生态内进行,体验也很自然流畅。 但更详细的规则还没有公布,大家仍有许多疑问,比如,如果只是在公号里粘贴小程序码,粉丝扫码预约观看,那非公号粉丝一样可以直接扫码预约,直播带来的新用户无法直接转化为公号粉丝,二者关联度很低。 当然,“腾讯直播”毕竟是官方出品,未来跟公众号的结合深度还有很大的想象空间。 其实,早在2016年,晓程序观察(yinghoo-tech)就曾经对公众号直播功能进行过预测,当时我们猜测可能会有两种玩法: 1. 在已有的公号里,由运营者提交申请直播功能接口; 2. 在订阅号、服务号、企业号之外,再开辟一个“直播号”。 那时我们判断,第一种更有想象空间,因为实现难度更低,另外,以微信一贯谨慎的作风,每次直播有可能也要算作一次推送机会。 多年后一语中的,只不过最终以APP加小程序的模式出现,并非是推送。 目标瞄准了公号的两个痛点 那么,“腾讯直播”这套直播解决方案的推出,到底是为了解决什么问题? 1. 直播:审美疲劳的新思路 首先要想,为什么是直播? 前文提到,张小龙曾说要尝试更多内容形式,反过来理解,也说明公众号现有的内容展现形式略显单薄。 大多数公号每年的推文都以图文为主,也偶有“局部气候调查组”这样一图到底的模式,还有部分公号会每天推送视频、音频,但长此以往,粉丝未免审美疲劳。 [图片](以长图、视频为主的局部气候调查组) 另外,许多公号运营者也反馈,囿于公号规则所限,对话题讨论的互动性不够。比如粉丝想跟作者多次交流,只能每次重新留言,而粉丝之间也不过是“点赞之交”,无法回复别人的评论。 因此,内容形式有限,粉丝互动性差是公号运营者一直头疼的地方。 为了解决这些问题,他们大都会将粉丝引导至微信群,每天将文章转发到群,然后在群里激发大家的讨论。 也有另外一些新形式,比如以公号内容为基础,建立起一个社区小程序,像笔记侠团队出品的「更新一下」,就将“笔记侠”公号长期积累的内容转移至小程序,变成一间庞大的“内容仓库”,粉丝可以按照分类对过往文章进行检索以及讨论。 [图片] 但这些形式的问题在于,内容互动与讨论都是粉丝自发的,因为太过分散,很难在短时间内引起广泛而集中的讨论。 而一场直播活动,就可以通过音视频的方式,对一个话题进行深入的描述,再加上跟观众的即时互动,沟通,能够很好地弥补公众号对于内容深度挖掘不够,粉丝互动性差的缺点。 2. 第三方直播繁琐且贵 正因如此,由第三方开展的公众号直播业务也有了些年头。 一位曾举办过多次直播活动的公号运营者对我们说,市面上现有的公众号直播玩法有很多,基本上以语音和视频为主。 语音直播经常运用于知识付费领域,一般直播活动会提前在公号发文,由客服把粉丝拉入社群,再将直播链接发送至社群中,整条链路比较长。 直播形式如下图,上方是PPT滚动播放,下方是直播者的语音介绍,单独划一块区域作为粉丝讨论的地方。 [图片] 另外一种就是大家熟悉的视频直播,但视频直播在人员素质,直播软硬件,内容质量等方面要求都更严格,举办成本更高,因此多以扩大影响力为主,经常是将链接生成二维码,直接插入公号推文中。 另外,视频直播价格不低,有的公号选择第三方提供的直播服务,一场线下大型活动可能需要上万元。还有一种是利用代码,将直播模块嵌入公众号,这样一套直播源码价格也在千元以上,还不包括模块搭建的费用。 所以,这次的“腾讯直播”同时提供了语音及视频两种直播形式,还是让大家特别期待,加上官方的背书,相信会对现有的直播市场产生较大的冲击。 谁将收益? 我们再来看看,公众号直播功能推出后,谁将受益? 前文提到的知识付费产业首当其冲,既可以借用现有的社群以及粉丝习惯,又免去了第三方产品的支出,无疑对公众号内容变现是一大推手。 此外,直播卖货这种形式也很有想象空间。 小程序直播卖货早已有人尝试,蘑菇街小程序就曾上线了“购物台”功能,如下图所示,主播一边展示商品,一边跟粉丝实时互动,而旁边一栏就是货架,点击即可加入购物车。 [图片] 蘑菇街高级副总裁黄映洁在我们的案例分享会上表示:“直播里面最常见的是展示商品,教大家化妆,教大家怎么穿搭,做一些质检一样的工作,电商有一个致命的点,就是摸不着,这里直播可以转两圈给你看,非常直接,甚至有买家把羽绒服剪开给你看,过去这些再怎么拍也无法表现出来。” 正是这种最直观的体验,让小程序的转化率以及复购率都很高,“直播业务在第二个月的复购率是80%左右,六个月的复购率可以达到60%”。 不过,还有不少人对公众号直播持保守意见。 “对于大部分公众号来讲,最适合的直播是离钱最近的,比如电商;或是强展示的,这些群体会比较急迫,急于扩大的公众号。 但我认为当前成熟且不是很急迫的团队,会先观望,因为本质上这只是基于公众号提供的功能插件,那些已经使用第三方或自己开发直播软件的公众号,会更注重稳定性。”一位资深公号运营者如此表示。 另外,也有人调侃“别再折磨新媒体小编了,又要学视频剪辑和拍摄”,这说明引进直播业务相关人才,也是公号主们要考虑的问题。 当然,目前“腾讯直播”仍然处于内测中,这个产品也在依靠不断的测试,来探明公众号直播的最佳姿势,等到正式上线的那一天,一切答案都将揭晓。 大家如果有兴趣可以复制打开以下链接进行内测资格申请: https://wj.qq.com/s2/3278299/999a/
2019-03-18 - 一种小成本的线下定位方案 ---2019腾讯数字文创节小程序开发有感
去年的TGC小程序,我们采用了小成本的智能印章来连接线上线下(点此查看知晓程序的报道),今年,我们利用了成本更低的ibeacon设备,来做室内定位。先放码: [图片] 介绍下今年的TGC小程序 今年的2019腾讯数字文创节(以下简称TGC)的举办地点是在世界最大的单体建筑----成都环球中心里面,整个场馆区域非常大,同时场馆内有很多商区,为了能更加突出打卡TGC的整体性,我们将整个TGC所有的场馆地点设计在一个全场地图上,玩家可以很清楚的看到所有打卡点的分布和场馆的具体位置: [图片] 每年的TGC小程序我们在尝试一些新的技术形式的加入。今年TGC整体升级为腾讯数字文创节,整个活动以展会形式为主,整个TGC共设为值四大展区-----IP主题(该主题展区内有每个游戏ip单独布置的展区)、传统文化、竞技文化和未来探索,相较于去年的形式,今年更加侧重在和传统文化进行集合,所以我们在玩法上还是和去年一样,采用打卡的方式,但是在形式上,则采用了更加适合玩家感受游戏文化和传播内容的拍照打卡。通过打卡得积分、分享打卡照邀请好友点赞得积分和积分抽奖的方式,来带动活动线下的参与以及线上的传播。整体的效果图如下: [图片] 既然是玩家参观TGC场馆打卡得积分,那么如何验证玩家是否在该打卡点内呢? 小程序ibeacon ibeacon简介 ibeacon是2013年苹果提出来的一套可用于室内定位系统的协议,它可以以指定频率广播自身信号,信号本身带有设备的数据帧,只要手机设备支持解析这个数据帧,处于ibeacon信号广播范围的手机设备可以接收到这些数据信息,详细介绍请点击这里。 小程序ibeacon API提供的数据信息包含以下部分: UUID 设备的唯一通用标识符,一般不同的厂商不同的批次,这个编号也不一样,具体是设备厂商自己设置 Major 设备的主ID,这个一般代表设备的型号,同一批次的ibeacon设备,这个编号一般也一样 Minor 设备的次ID,每隔设备的这个编号都不同,一般用来指代唯一性 Accuracy 设备的距离,单位为米 Rssi 接收到的设备信号强度 设备就是联系供应商提供的,价格是45到60左右,成本非常低,就是这个小白盒子: [图片] 首先,因为活动的举办地点是在商场,可以预见的是,商场本身会有些商家会部署ibeacon设备来做活动营销(微信摇一摇),所以如何保证小程序接收到的ibeacon设备信息就一定是我们部署的ibeacon设备发射出来的呢?答案就是通过上面提到的Major。 收到设备后,我们首先设置这一批ibeacon设备的Major为我们特定的数字,在接收到的ibeacon信息后过滤掉不是我们制定Major号的设备信息即可。通过在数据库绑定打卡地点和设备Minor的关系,玩家手机接收到ibeacon设备的信号的时候,就可以通过接收到设备的Minor号判断玩家当前是在哪个体验点。坑爹的是,设备的厂家在出厂这些设备的时候,每个设备的Major和Minor号都是随机,幸好网上有很多ibeacon设备信息查看更改软件,推荐使用 “摇一摇助手”,app store和安卓应用商店都可以下载。 [图片] ibeacon踩坑 1、通常市面上的ibeacon设备是可以设置ibeacon设备的广播频率的,默认一般是500ms。为了提升感应玩家当前所在的地点的精度,我们会去调高ibeacon设备的广播频率。设备的广播频率是可以通过专门的ibeacon设置软件调整(PS:会导致设备更加费电,但是现在的ibeacon设备基本都可以用个好几年,如果不是长期使用的话,可以不care这个),但是小程序ibeacon API读取设备广播信息的频率是系统控制,也就是说,其实我们调整设备的广播频率是起不到作用的,因为最终读取ibeacon的广播信息频率是由系统所决定的,请教过微信的同学,安卓的是500ms,iOS 这边跟着系统走,目前观测是 1秒1次。 [图片] 2、接收ibeacon信息的API需要在wx.startBeaconDiscovery成功的回调中调用才能拿到ibeacon的设备信息。 [代码]wx.startBeaconDiscovery({ uuids: ['B9407F30-F5F8-466E-AFF9-25556B57FE6D'] // ibeacon uuid }).then((res) => { wx.onBeaconUpdate(() => { console.log('onBeaconUpdate') wx.getBeacons().then((res) => { let beacons = res.beacons, len = beacons.length, i = 0, nearbyBeacons = [], if (len === 0) { return } for (; i < len; i++) { if (beacons[i]['major'] !== 700) { continue } else { if (beacons[i]['accuracy'] > 0 && beacons[i]['accuracy'] < 8) { // 读取周围ibeacon设备的精度,可根据现场情况动态调整 nearbyBeacons.push(beacons[i]['minor']) } } } let _nearbyBeaconsResult = that.data.nearbyBeaconsResult if (_nearbyBeaconsResult.length >= 4) { _nearbyBeaconsResult.shift() } _nearbyBeaconsResult.push(nearbyBeacons) that.setData({ nearbyBeaconsResult: _nearbyBeaconsResult }) }) }) }) [代码] 在实际的开发过程中,我们发现,少数ibeacon设备的信息读取到的距离信息(accuracy)会出现负数,这个是因为之前提到的设备的广播频率的原因,如果在小程序内接收到设备的广播信息恰好出现在设备的广播周期之外,那么这个设备的的信息其实算作没读取到。为了规避这个问题,我们设置一个数组,这个数组存储最近4次接收到的ibeacon数据,按照一般ibeacon的广播频率的话,也就是2s的时间内,接收到的ibeacon设备信息。同时,我们在线下会针对体验点的区域的大小的不同,部署不同数量的ibeacon设备,这样可以大大的降低玩家接收不到ibeacon信息的概率。 现场方案执行 最基础的技术方案也想对容易实现一些,但是往年的线下活动的经验告诉我们,问题往往不是出现在实现的技术方面,我们需要考虑的往往是一些非技术侧的问题: 1、现场地形复杂,在什么地方部署ibeacon设备才算合适呢,不同的展区部署多少个点才算合适? 2、ibeacon的信息接收需要依赖蓝牙,玩家的手机因不明原因无法开启蓝牙或蓝牙功能失效了,如何处理? 第一个问题,我们在活动开始的前一个多礼拜,就带着我们做好的小程序测试版本去到了活动举办地成都环球中心进行了测试。 [图片] 实地的测试主要是对每个体验点的区域进行确定,再根据体验点的大小来决定需要放置多少ibeacon设备。 第二点在有了去年的经验,其实处理起来也有成熟的方案可以去执行。TGC的每个线下体验店会有我们Part Time(场馆负责人),还会有全场的巡视人员,我们只需要做一套后备方案,在少数玩家因设备问题无法打卡时,让现场我们的工作人员赋予玩家特殊的权限,可以让玩家不需要因设备的限制进行打卡即可。所以,我们做了一套玩家扫码打卡的后备方案,在活动开始之前,我们给予管理员特殊权限,它们可以在小程序的管理端选择打卡点二维码,玩家扫一扫即可完成定位打卡,当然每个小程序二维码只能够用一次,剩下的工作就是和现场的Part time进行培训。 [图片] 小程序云 这次活动的开发排期十分紧张,后台的开发人力又无法及时跟进项目,所以这次的整个活动的开发我们十分大胆的尝试了小程序云。其实在小程序云内部测试的时候,我们就已经有预研过小程序云。 小程序云提供了云存储、云函数和数据库,提供了较为完整的云端支持,还搭配了一套基础运维体系,开发者无需关心服务器搭建和代码部署。关于一些基础的类似云函数提供了鉴权的内容啥的,这里受限篇幅也就不再阐述,可自行查看开发者文档,这里讲下我在开发过程中的小总结吧。 1、小程序云环境 每个小程序账号开通了小程序云能力后会默认得到一套云开发环境,每个小程序账号最多可以创建两个云开发环境,一个云环境用于开发环境,一个云环境用于线上环境。 小程序端只需要在小程序云初始化函数配置当前运行的环境ID即可: [代码]// app.js App({ ...... globalData: { wxCloudEnv: 'tgc-production-xxxx' // 当前运行环境ID } }) // index.js wx.cloud.init({ env: app.globalData.wxCloudEnv }) [代码] 但是小程序云上,即使云函数当前运行的云环境不一样,也需要在每个云函数上显式的配置当前运行的云环境ID,要不然可能会在线上环境的云函数也会调用到测试环境的数据库和云存储。 现在每个云环境默认是基础的资源配额,可以自行发邮件申请. 2、小程序云的权限控制 小程序云提供的API分为小程序端API和服务端API,顾名思义,一套是在小程序的代码里调用的,一套是在服务端云函数调用的,两套API都可以进行数据库操作、云函数调用和云文件的操作。 [图片] 小程序端的数据库API在添加一条数据库记录的时候,该条数据库记录会默认加上_openid字段,值为该条记录创建者(也就是用户)的openid,而如果是服务端数据库API进行同样的操作就不会带上该字段。小程序云数据库的集合默认的权限都是设置为"仅创建者和管理员可读写",在小程序端如果通过数据库API访问数据库某个集合的数据时,只能访问到用户自己在小程序上调用数据库API创建的数据,写的逻辑也是一样,另外几个权限也是很好理解。小程序云管理后台可以设置数据库的操作权限,不同的用户对数据的读写权限不同,通过这个操作,可以灵活的调整数据库中的数据使用场景。 3、小程序云的局限性 小程序云暂时还不支持数据外部调用,所以,如果运营人员需要有很强的数据配置和数据管理的功能的话,小程序云想对做起来会很吃力(预计是年后会支持,大赞小程序云的团队)。而且,我们暂时还只能使用其提供的几项能力,如果我们想继续扩展我们的应用且需要在服务器上部署一些其他的服务的话,在小程序云上暂时还是做不到的。小程序云的数据库查询支持还是较为基础的,一些例如在关系型数据库常见的连表查询啥的还不支持,所以在做一些复杂的查询的时候,为了效率通常需要再一个数据库集合中增加一些冗余字段。 感觉小程序云还有很大的发展潜力,后续这些功能应该都会逐步的开放出来,相信小程云也会变得越来越强大。 线上结合线下ibeacon的优势 1、统计当前玩家所在的区域,绘制全场的玩家分布热力图,及时做好访问量较低的现场场馆引导。 [图片] 2、成本极低。成都环球中心在周末高峰时段是可以达到5~6w的人流量,在那么大的人流量下,我们也只需要在现场近20个体验点布置将近100个设备,就能覆盖我们全部的打卡体验点,按照每个设备本身价格近45元算,整个总成本可想而知。而且设备本身可以回收继续再利用,技术方案也是可以继续复用。 总结 今年是参与TGC小程序开发的第二年了,这种线下的项目最大的挑战在于需要对接的需求方非常之多,涉及到线上、线下、供应商等等多个角色。在开发周期如此紧张的情况下又需要同时兼顾前后端开发情况,对于个人来说是个非常大的挑战,但也是一个非常好的锻炼机会。有了去年TGC小程序的参与经验,今年在线下的部分也较为顺利的执行下去,但是也还是出现了一些线下培训细节没有勾兑清楚地额沟通问题。接下来,我也会写一篇开发线下项目的经验分享,也非常欢迎和期待各位小伙伴与我们在小程序上有更多的交流合作和技术探讨。
2019-03-19 - 模态窗以及弹出层相关ui布局的一个小技巧
场景:在web开发以及一般的小程序中遇到模态窗或者弹出层等ui布局的时候,会有在遮罩层上滑动引发下面页面的滑动这一问题。在小程序上这一问题可能还会导致下拉刷新或上拉加载的回调触发。 现有解决方案:1.手动阻止滑动事件(这样需要做在弹层上其他事件的兼容处理)2.特殊处理布局(当有弹出层的时候最外一层的高度设为100vh并overflow:hidden)。 优化方案:弹出层以及内部的组件都用cover-view以及cover-image实现。 原理:cover-view是原生组件,当用它实现铺满整个页面的遮罩层时,滑动事件是发生在原生视图层面上的,不会触发在webview渲染层页面的滑动,自然就不会出现上述问题。
2019-01-08