个人案例
- 天气er
查看天气的小程序
天气er扫码体验
- 识别动物
一个识别动物的工具小程序
识别动物扫码体验
- 教你解决showLoading 和 showToast显示异常的问题
问题描述 当wx.showLoading 和 wx.showToast 混合使用时,showLoading和showToast会相互覆盖对方,调用hideLoading时也会将toast内容进行隐藏。 触发场景 当我们给一个网络请求增加Loading态时,如果同时存在多个请求(A和B),如果A请求失败需要将错误信息以Toast形式展示,B请求完成后又调用了wx.hideLoading来结束Loading态,此时Toast也会立即消失,不符合展示一段时间后再隐藏的预期。 解决思路 这个问题的出现,其实是因为小程序将Toast和Loading放到同一层渲染引起的,而且缺乏一个优先级判断,也没有提供Toast、Loading是否正在显示的接口供业务侧判断。所以实现的方案是我们自己实现这套逻辑,可以使用Object.defineProperty方法重新定义原生API,业务使用方式不需要任何修改。 代码参考 [代码]// 注意此代码应该在调用原生api之前执行 let isShowLoading = false; let isShowToast = false; const { showLoading, hideLoading, showToast, hideToast } = wx; Object.defineProperty(wx, 'showLoading', { configurable: true, // 是否可以配置 enumerable: true, // 是否可迭代 writable: true, // 是否可重写 value(...param) { if (isShowToast) { // Toast优先级更高 return; } isShowLoading = true; console.log('--------showLoading--------') return showLoading.apply(this, param); // 原样移交函数参数和this } }); Object.defineProperty(wx, 'hideLoading', { configurable: true, // 是否可以配置 enumerable: true, // 是否可迭代 writable: true, // 是否可重写 value(...param) { if (isShowToast) { // Toast优先级更高 return; } isShowLoading = false; console.log('--------hideLoading--------') return hideLoading.apply(this, param); // 原样移交函数参数和this } }); Object.defineProperty(wx, 'showToast', { configurable: true, // 是否可以配置 enumerable: true, // 是否可迭代 writable: true, // 是否可重写 value(...param) { if (isShowLoading) { // Toast优先级更高 wx.hideLoading(); } isShowToast = true; console.error('--------showToast--------') return showToast.apply(this, param); // 原样移交函数参数和this } }); Object.defineProperty(wx, 'hideToast', { configurable: true, // 是否可以配置 enumerable: true, // 是否可迭代 writable: true, // 是否可重写 value(...param) { isShowToast = false; console.error('--------hideToast--------') return hideToast.apply(this, param); // 原样移交函数参数和this } }); [代码] 调整后展示逻辑为: 优先级:Toast>Loading,如果Toast正在显示,调用showLoading、hideLoading将无效 调用showToast时,如果Loading正在显示,则先调用 wx.hideLoading 隐藏Loading
2019-10-30 - [填坑手册]小程序web-view组件实战与踩坑
[图片] 首先,根据官网文档可以知道 只有非个人 的小程序才可以使用web-view组件,如果你的个人开发者,可以跳过这篇文章。 [图片] 一、使用web-view以及它的好处 1、己方账号(第三方)与小程序openId/UnionId的关联绑定,实现免登陆 比如你是某门户网站S,你要识别自己小程序上的用户与网站用户的关系,你可以通过三种方法绑定关系,公众号,小程序源生,小程序web-view内嵌跳转三种方法 2、内嵌H5的富文本,减少重复开发 比如你是门户网站,社区,以往有大量的新闻和帖子,里面带了各种css样式的富文本,小程序源生是无法直接读取的,需要大量转化,这时候直接内嵌这些H5新闻,大大降低开发成本 3、热更新,减少发布审核 某些需要经常更新的内容、公告、活动页,内嵌H5可以减少频繁提交小程序审核 二、小程序功能赋权 为H5提供各种小程序才有的功能,比如录音,扫一扫等。 注意事项 多场景判断,建议使用官方API: wx.miniProgram.getEnv H5唤醒一些小程序API有一定的延时,0.3~1秒 请调用小程序专用的JSSDK,同一个jssdk,但是webview的功能收到限制,和之前微信打开H5有所不同 小程序自动获取加载H5的title H5中iframe的url必须也是业务域名 web-view一定是撑满全屏的,自定义顶部菜单,悬浮的都没用 三、小程序和H5之前的互相通讯 1、 从小程序 ==>> h5 小程序控制H5,可以直接用src路径传参的形式,比如 [代码]<!-- 小程序端 HTML --> <web-view src="//URL?a=param1&b=param2"></web-view> [代码] 避免在链接中带有中文字符,在 iOS 中会有打开白屏的问题,建议加一下 encodeURIComponent。 2、 从 H5 ==>> 小程序 [图片] 这里我们知道bindmessage是小程序用来监听H5的推送的内容,但是这里不大不小的坑!就是它的三个出发场景: 小程序后退:使用接口名 wx.miniProgram.navigateTo,wx.miniProgram.navigateBack,wx.miniProgram.switchTab 等切换小程序页面/场景的API时候都会出发 分享:这个就是当你点分享小程序的时候,会接受到H5之前发送的postMessage 组件销毁,web-view组件销毁,类似 wx.miniProgram.redirectTo 都会触发。 [代码]<!-- 小程序端 HTML --> <web-view bindmessage="handleGetMessage" src="{{openUrl}}"></web-view> [代码] [代码]// 小程序端 JS --> Page({ /** * 页面的初始数据 */ data: { openUrl: "", }, /** * 获取请求数据 */ handleGetMessage: function (e) { console.log(e.detail.data); } }, }) [代码] [代码]<!-- h5端 HTML和JS --> <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script> <script> wx.miniProgram.postMessage({ data: { link: "//test.com", title: "一起学习,一起进步" } }); //wx.miniProgram.redirectTo({ // url:"/pages/inner/index?source=123" //}) wx.miniProgram.navigateBack({delta: 1}) </script> [代码] 注意事项 那些H5控制小程序的跳转路径必须是“/”开头,如 “/pages/xxx/xxx”,且路径必须在app.json里有,地址错误的话,有时不报错。 postMessage的json必须是data开始,不然接收不到数据。 [图片] 四、bindmessage接收到消息有3个重要特性(重点) 接收可以是H5之前几分钟前发送postMessage,不一定是即刻发出的。 之前发出的 postMessage的DATA信息会累加,当触发bindmessage接收的时候是一个数组。 [图片] 当bindmessage 再次 接收到数据,之前发送的数据不会被清空,将累加一起返回,获取时要判断好数组的角标 [图片] 五、Tips 1、在IDE工具中如何调试H5 [图片] 可以在 web-view 组件上通过右键 - 调试,打开 web-view 组件的调试。 2、内嵌H5缓存问题 web-view加载的H5具有很重的缓存,如果需要调试,可以通过在url后面加时间戳的方式解决。 3、小程序关闭,H5背景音乐仍然在播放问题 小程序已经关闭,但是H5自带的背景音乐仍然在手机后台播放的问题。这里可以利用一个属性: visibilitychange:页面可见性状态 简单的说,浏览器标签页被隐藏或显示的时候会触发visibilitychange事件。 [代码]var statusBeforeHide = true; //初始化页面的状态 var music = document.getElementById("xxx"); // 更改音乐播放状态 function setChangeMusic() { if (document[hiddenProperty]) { // 页面隐藏 if (statusBeforeHide) { music.pause(); // 暂停 } } else { // 页面显示 if (statusBeforeHide) { music.play() //如果statusBeforeHide是true, 继续播放 } } } let hiddenProperty = ('hidden' in document) ? 'hidden' : ('webkitHidden' in document) ? 'webkitHidden' : ('mozHidden' in document) ? 'mozHidden' : null; if (hiddenProperty) { let visibilityChangeEvent = hiddenProperty.replace(/hidden/i, 'visibilitychange'); let onVisibilityChange = () => { //console.log('visibilityChange'); setChangeMusic(); }; document.addEventListener(visibilityChangeEvent, onVisibilityChange); } else { console.log("不支持这个api"); } [代码] 总结,web-view还是非常实用的组件,且用且珍惜~ 往期回顾: 小程序自定义头部导航栏“完美”解决方案 小程序Canvas生成海报(一) 小程序新版订阅消息+云开发实战与跳坑
2021-09-13 - 微信小程序平台常见拒绝情形
除本微信小程序平台常见拒绝情形外,开发者还应遵守《微信小程序平台服务条款》及腾讯公布的相关规则、规范。 1.帐号基本信息1.1小程序名称、简介、logo、服务范围、服务标签、帐号基本信息文字均不得:(1)侵犯他人权益(著作权、商标权、肖像权、名誉权等)。包括但不限于,使用或包含不属于该小程序主体的品牌或商标、标识等内容或与之相似的内容、信息、特殊角标。示例:检查名称、简介中是否含有该小程序不属于该帐号的权益。 (2)含有商业化用语的、热门小程序名称、“国家级”、“最高级”等新广告法明令禁止或其他无关的词语。 (3)含有政治、色情、敏感、暴力血腥、恐怖、其他国家法律法规禁止的词汇及违法内容。 1.2特别规则1.2.1小程序名称、简介:(1)小程序的简介需明确介绍小程序的功能点,不能使用模糊的词义表达,比如:该小程序旨在提高用户的生活品味、该小程序旨在提高用户的购物体验。示例:能在简介中提炼该小程序的几个功能点。 (2)名称、简介的信息表达的意思必须有关联,具有一致性,并应与实际提供的功能一致,不含有与功能无关的搜索热词。示例:简介中能找到小程序名称或者分拆出来的词汇。 (3)小程序名称不能以电话、邮件、日历等广义归纳类、普遍且不具有识别性词语来命名。示例:名称不是是单词汇,必须是两个词以上的组合,当无法判断时,审核人员可主观判断。 1.2.2小程序头像logo:(1)小程序头像logo清晰度不够时,不予通过。示例:无法看清、分辨、识别图片中包含的各个元素,如:文字、物体、形状等。 (2)小程序头像logo应与名称、简介保持一致 1.2.3小程序的服务范围和服务标签:小程序所设置的服务标签,应与所选的服务范围保持一致。标签不能超出服务范围。示例:服务范围是家政,服务标签是美食。 2.服务类目审核服务类目是指开发者按照小程序所提供的服务类型和所涉及的服务内容,在平台提供的分类分级表格中选择对应的行业范围。 2.1 小程序的类目要和自身所提供的服务一致。2.1.1 小程序服务类目所对应的页面中的核心内容必须与该类目一致。 2.1.2 必须保证用户在该页面能使用该服务类目,不得隐藏,不得进行多次跳转。 2.2小程序的服务类目链接使用正常,不存在违法违规或不符合与腾讯所签署的相关协议、腾讯公布的相关规则、规范等内容。示例: (1) 小程序服务类目所对应的页面链接不能正常打开。 (2) 小程序服务类目所对应的页面链接加载非法信息。 (3) 小程序服务类目所对应的页面链接加载恶意、色情广告。 (4) 小程序服务类目所对应的页面链接加载侵犯他人权益的内容;含有商业化用语的、热门小程序名称、“国家级”、“最高级”等新广告法明令禁止或其他无关的词语、不含有政治、色情、敏感、暴力血腥、恐怖、其他国家法律法规禁止的词汇及其他违法内容。 3.小程序整体审核规则3.1小程序基本功能审核规范3.1.1 小程序所实际提供的功能点,需与小程序的简介一致。示例:功能包括但不限于简介中提炼的功能点; 3.1.2 小程序所提供的所有服务类目功能,必须在小程序首页得到体现,即在小程序首页必须能直达或者经过2次点击到达所有本文档2(服务类目审核)中提交的服务类目页面; 3.1.3 小程序实际所提供的服务不得属于尚未开放的服务范围。不应超出小程序平台已开放的类目库范围。示例:游戏、直播功能尚未开放。 3.1.4 小程序中若存在隐藏或付费功能(比如仅充值可见,仅会员可见等受限功能点),该功能的实现不得含有色情、暴力、政治敏感或其他违法违规内容,开发者提供的测试号需可完整呈现和体验该功能; 3.1.5 小程序的功能应具有使用价值,不能过于简单,示例:只有一个页面,只有一个按钮; 3.1.6 未经腾讯公司授权的情况下,不得在小程序中提供与微信客户端功能相同或类似的功能,示例:小程序功能不能包含朋友圈、漂流瓶等。 3.1.7 在未经允许或未经腾讯公司授权的情况下,不得展示和推荐第三方小程序。示例:不能做小程序导航,不能做小程序链接互推,小程序排行榜等。 3.1.8 小程序功能的使用,无需以关注或使用其他号为条件。示例:使用A小程序时,必须同时使用B小程序 3.2小程序页面内容审核规范3.2.1 小程序的页面内容中,存在诱导类行为,包括但不限于诱导分享、诱导添加、诱导关注公众号、诱导下载等,要求用户分享、添加、关注或下载后才可操作的程序,含有明示或暗示用户分享的文案、图片、按钮、浮层、弹窗等的小程序,通过利益诱惑诱导用户分享、传播的小程序,用夸张言语来胁迫、引诱用户分享的小程序,强制或诱导用户添加小程序的,都将会被拒绝; 3.2.2 小程序的页面内容中,主要为营销或广告用途(如内含空白广告位、招商广告等),将会被拒绝;示例:漂浮悬浮广告,含有功能使用的页面中的广告展示比例超过50%,广告遮挡功能。 3.2.3 小程序的页面内容中,存在对用户产生误导、引发用户恐惧心理、严重破坏用户体验或损害用户利益的谣言类等内容的,将会被拒绝; 3.2.4 小程序的页面内容中,不能存在测试类内容;示例:算命,抽签,星座运势等。 3.2.5 小程序的页面内容中不能存在虚假、欺诈类内容,包括但不限于虚假红包、虚假活动、宣传或销售侵害他人合法权益的商品,仿冒腾讯官方或他人业务,其他可能造成微信用户混淆的内容和服务等; 3.2.6 小程序的页面中不能含有传播骚扰信息、广告信息和垃圾信息等内容; 3.2.7 小程序的页面中不得含有可能违反与腾讯签订的、任何形式的服务协议、平台协议、功能协议的内容; 3.2.8 含有发布、传送、传播、储存违反国家法律法规的或含有以下信息内容的,将会被拒绝: 3.2.8.1反对宪法所确定基本原则的,危害国家安全、泄露国家秘密、颠覆国家政权、破坏国家统一 、损害国家荣誉和利益的小程序; 3.2.8.2任何带有虚假、欺诈内容等的小程序不予通过; 3.2.8.3任何召集、推销、鼓动犯罪或有明显侵犯社会善良风俗行为的小程序不予通过; 3.2.8.4任何包含法律法规禁止传播内容的小程序不予通过; 3.2.8.5小程序内容包含反政府、反社会或不符合主流政治的行为的,或存在煽动性的涉政言论或国家法律禁止的内容的,或含有散布谣言,扰乱社会秩序,破坏社会稳定信息的,不予通过; 3.2.8.6小程序内容不能含有色情素材(即旨在激发情欲,对性器官或性行为的明确描述或展示,而无关美学),或存在涉嫌宣扬传播淫秽、色情内容信息,包括暴露图片、挑逗内容等的,或包含非法色情交易的信息; 3.2.8.7小程序内容不能包含煽动民族仇恨、民族歧视、破坏民族团结的内容、破坏国家宗教政策、宣扬邪教和封建迷信的; 3.2.8.8小程序内容不能包含展示人或动物被杀戮、致残、枪击、针刺或其他伤害的真实图片,描述暴力或虐待儿童的,或包含宣扬暴力血腥内容的,或包含侮辱或者诽谤他人,侵害他人合法权益信息的,将会被拒绝; 3.2.8.9小程序内容不能包含赌博、竞猜和抽奖的。 3.2.9 小程序内的图片上不能含有广告、网址或虚假内容。 3.2.10 小程序代替用户发表、发送、转交任何内容前,必须征得用户明确同意和授权。 3.2.11 小程序的服务提供者必须提供过滤不当内容的措施。示例:设置对发布色情、赌博等涉嫌违法违规的词汇进行过滤提示的措施。 3.2.12 小程序页面中不能存在误导和错误暗示腾讯公司与该小程序有任何合作、投资、背书关系的内容,例如误导和错误暗示腾讯公司是该小程序运营者,或者误导和错误暗示腾讯公司以任何形式表示认可其质量、服务或与其存在合作关而该小程序事实上并非为腾讯公司运营。 3.3可用性和完整性3.3.1 提交的小程序须是一个完成品,要求可以打开,可以运行,且不可以是一个测试版。示例:不可运行、存在崩溃、闪退、按钮没有响应、文字表述不完整等。 3.3.2 本身会崩溃,或小程序程序会造成微信客户端崩溃的,将会被拒绝。 3.3.3 存在严重Bug的小程序(如无法添加和打开、无法返回和退出、卡顿严重等),将会被拒绝。 3.3.4 若小程序中存在帐号体系,需提供测试号,包含帐号和密码(可以体验所有功能)。 3.4用户隐私和数据安全3.4.1 在收集和使用用户任何数据时,必须明确告知用户该数据的用途,确保经过用户明确同意和授权,并应在用户同意和授权的范围内进行合理使用。在用户注销帐号后应相应删除相关数据。数据包括但不限于获取地理位置、用户通讯录、用户手机号码等。 3.4.2 不得在小程序任何页面请求或诱导用户输入微信用户的用户名或密码。 3.4.3 不得将搜索小程序功能加入小程序。 3.4.4 不得在页面中进行或将通过小程序收集到的用户数据私下进行出售、转交、交易、越权披露或泄露。 3.4.5 不得在未经用户授权同意的情况下,显示用户相关数据,比如:头像,昵称等信息。 3.4.6 小程序不得要求用户降低手机操作系统安全性(如要求iPhone 用户越狱、Android 用户ROOT 等)后,方能使用相关功能。 3.4.7 若小程序有需要追踪用户的地理位置的功能,则必须提供退出该位置追踪的功能和明确指示。 3.5技术实现规范性3.5.1 需要提供小程序文档和说明 3.5.2 禁止视频、音乐、语音等多媒体的自动播放 3.5.3 安装或运行其他可执行代码的程序,将会被拒绝 3.5.4 违规加载或更新代码,将会被拒绝 3.5.5 如果小程序有账户系统,必须提供能正常使用且易于发现的“退出”账户选项。 3.6UI 规范3.6.1 符合WeApp UI 规范 3.6.2 小程序页面内的浮层和弹窗可关闭 3.6.3 小程序的界面必须遵守微信的外观和功能,不得提供改变微信外观和功能的产品体验。 3.6.4 小程序的界面不得模仿系统通知或警告诱导用户点击。 3.6.5 小程序头像logo需使用透明或有色背景。若使用白色背景,需使用有色边框。 微信团队
2017-01-03