在官方文档：自定义组件-》组件与模板 小节看到这样的描述： 在以上例子中，组件的属性 [代码]propA[代码] 和 [代码]propB[代码] 将收到页面传递的数据。页面可以通过 [代码]setData[代码] 来改变绑定的数据字段。 注意：这样的数据绑定只能传递 JSON 兼容数据。自基础库版本 2.0.9 开始，还可以在数据中包含函数（但这些函数不能在 WXML 中直接调用，只能传递给子组件）。 [图片] 我理解的意思为父组件可以传递一个函数的引用给子组件，子组件可以在其内部调用。 但是尝试了很久，都不知道如何实现。 有没有大佬指点下。

[图片] [图片] [图片]

注：以下资料来自官方文档 相关内容具有时效性 仅适用发文章时点。 官方文档地址：传送门 官方常见备案问题：传送门 一、几个时间点 自2023年09月01日起，新的微信小程序，必须备案后才能上架； 在2024年03月31日前，所有小程序都必须完成备案； 于2024年04月01日起，对未备案小程序进行清退处理。 微信小程序备案系统已于9月4日上线。 二、备案流程 [找备案入口]–[填主体信息]–[填小程序信息]–[初审]–[短信核验]–[通管局审核] 1，在小程序后台找到备案入口 [图片] [图片] （1）新的未上架小程序，可以在小程序首页点击【去备案】进入。 （2）已上架小程序，可以在设置-基本设置中找到【去备案】入口。 或者在小程序后台顶部会出现补充备案的提醒，也可以进入备案。 注：截止文章发稿时，官方后台暂时尚未出现相关入口，应是9月1日后出现。 2，填写备案主体信息 （1）选地区、主办者性质（个人或企业）、相关证件与上传、通讯地址等。 （2）还需要填写主体负责人信息，应急联系人手机号等。 3，小程序信息填写 （1）小程序的APPID、名称，会自动显示，然后需要选服务标识，选择是否包括“互联网信息服务前置审批项”内容。 （2）若存在前置审批项（小程序从事新闻、出版、药品和医疗器械、网约车等），需提供业务对应前置审批文件。 （3）还需要填写小程序负责人信息，包括证件、手机号、应急手机号、邮箱，需要负责人人脸核身。 4，平台初审 平台将会在1-2个工作日内完成初审。 审核结果将以站内信、模板消息等形式通知管理员。 需保持相关人员电话畅通，平台可能会进行核验。 5，工信部短信核验 初审通过后，会收到工信部发送的核验短信（来自12381）； 你需要24小时内登录工信部备案首页完成短信核验。 核验成功后，备案进入通管局审核流程。 6，通管局审核 各省通信管理局将在1~20个工作日内完成审核。 审核结果以站内信、模板消息、短信等形式通知。 7，备案成功 管局审核通过后，将下发的小程序备案号。 三、相关证件与资料 1，个人主体 身份证（正反面上传，大小不超过200K，分辨率不低于15001100，证件有效期大于1个月） *通讯地址 *手机号（会验证码确认） *应急手机号（不得与负责人手机号相同） *人脸核身（背景应为纯白色，不遮挡面部） 2，非个人主体 *营业执照（或组织机构代码证等主体证件） *通讯地址 *负责人身份证 *负责人手机号（会验证码确认） *应急手机号（不得与负责人手机号相同） *负责人 人脸核身（背景应为纯白色，不遮挡面部） *涉及前置审批的，还需准备前置审批相关材料 四、其他 1，与网站ICP备案流程相似，可以参考。 2，小程序备案是免费的。 3，或许社区会出现小程序备案的小主页（然而并没有）。 4，建议关注社区负责备案问题的官方专员：小程序运营专员-wwen 5，存量小程序（即2023年9月4日前已上架发布的）的备案开放时间可能会在10月份，以官方通知为准。 6，当日备案小程序数量存在系统限制，估计备案的太多了。 7，即刻起小程序备案必须先进行微信认证才可以（官方理由是整治虚假备案与提交）。 8，服务商代备案接口：传送门 9，提示手机号不允许被多人使用，这是指同一个人允许为多个小程序备案，可以提交一致的手机号及邮箱，但不能出现不同人共用手机号/邮箱的情况。 10，提示同一主体不能同时备案多个。 是因为若备案主体从未在管局备案过，需首个备案小程序审核通过后才可以进行下一个小程序备案。 11，备案号会出现在小程序更多资料中，无需开发人员自行放置。 12，若近期新建企业，或近期有做信息变更，企业工商数据更新可能有延迟，建议过段时间（5~15天）再试。 13，若个体工商户无公章，需要主体负责人手写日期+签名+盖手印+身份证号码，同时请在主体备注处备注“个体工商户无公章”。 14，当个人主体小程序备案申请人的身份证证件地址与申请小程序备案的省份不一致时，需要提供暂住证或居住证等证明材料。 涉及省份包括：吉林、上海、江苏、浙江、安徽、山东、湖北、广东、四川、贵州、云南。 15，小程序备案主体负责人必须填写法定代表人吗？ [图片] 16，负责人姓名已填写为小程序管理员的姓名，为什么还是提示：负责人与小程序管理员不一致？ 出现这种提示一般都是第三方服务商协助创建的小程序未完善管理员实名信息，需补充管理员实名信息后才能进行备案，补充指引参考： 小程序MP后台-成员管理-管理员-修改。 验证原管理员-填写原管理员身份证信息-扫码验证。 绑定新管理员-填写【原管理员的信息】并提交，即完成管理员实名信息补充。 *请以官方文档、通知为准。 （2023.09.21）

在开发工具模拟器 以及真机调试都没问题，就是 预览 和体验版有问题（但是预览和体验版如果打开调试就又可以获取数据了） wx.getLocation({           type: 'wgs84',       success (res) {         const latitude = res.latitude         const longitude = res.longitude         const speed = res.speed         const accuracy = res.accuracy         console.log(latitude)         console.log(longitude)         console.log(speed)         console.log(accuracy)         that.setData({           latitude:latitude         })         var QQMapWX = require('../../libs/qqmap-wx-jssdk.js');         var qqmapsdk;         var qqmapsdk = new QQMapWX({           key: '*******' // 必填         });         qqmapsdk.reverseGeocoder({           sig:'********',           location: {             latitude: latitude,             longitude: longitude           },           success: function (res) {             console.log("获取地址成功：" + res.result.ad_info.city);             that.setData({               address:res.result.address,                          })           },           fail: function (res) {             console.log("获取地址失败" + res);           },           complete: function (res) {             console.log(res);           }         });       }     }) 在开发工具-模拟器的时候，是可以根据经纬度获取到地理位置信息的 [图片] 真机调试的时候也是Ok的 [图片] 但是，，预览 和 体验版就 获取不到address了 。 经纬度我测试了是可以获取的，但是地理位置根据api获取不到了好捉急。 但是预览和体验版只要打开调试模式就可以正常获取到地理位置address了。。 [图片] request合法域名我配置了， 不校验的那个√也是取消的。 找了蛮久找不到答案有点苦恼。

一般我们服务端接口返回的时间形式为： 2019-07-19 11:25:21 需要前端转换成时间戳，直接使用 [代码]new Date("2019-07-19 11:25:21") [代码] 在微信小程序开发中IOS上获取不到对应的时间对象。 解决方案： [代码]Date.parse("2019-07-19 11:25:21".replace(/-/g,"/")); [代码]

小程序自定义TabBar后如何实现keep-alive 前段时间写了小程序实现TabBar创意动画和小程序开发技巧后，有小伙伴提问到，自定义[代码]TabBar[代码]是可以做很多交互，但点击切换[代码]TabBar[代码]页面，都会伴随着组件的销毁和重建，这点确实会影响性能。这里就提供一个方案来实现“[代码]keep-alive[代码]”。如有更好的方案，欢迎评论区交流。欢迎点赞和收藏~ 自定义TabBar方案 虽然在之前文章提到过了，本次采用[代码]组件化实现[代码] 我们可以新建一个[代码]home[代码]文件夹，在[代码]home/index.wxml[代码]中写一个tabBar，然后把[代码]TabBar[代码]页面写成组件，然后点击TabBar切换相应的组件展示就可以。代码如下： wxml部分 [代码]<!-- home页面 --> <view id='index'> <!-- 自定义头部 --> <head name='{{name}}' bgshow="{{bgshow}}" backShow='false'></head> <!-- 首页 --> <index change='{{activeIndex==0}}'></index> <!-- 购物车 --> <cart change='{{activeIndex==1}}'></cart> <!-- 订单 --> <order change='{{activeIndex==2}}'></order> <!-- 我的 --> <my change='{{activeIndex==2}}'></my> <!-- tabbar --> <view class="tab ios"> <view class="items {{activeIndex==index?'active':''}}" wx:for="{{tab}}" bindtap="choose" data-index='{{index}}' wx:key='index' wx:for-item="items"> <image wx:if="{{activeIndex==index}}" src="{{items.activeImage}}"></image> <image wx:else src="{{items.image}}"></image> <text>{{items.name}}</text> </view> </view> </view> [代码] home页面的ts [代码]Page({ data: { activeIndex:0, tab:[ { name:'商品', image:'../../images/index.png', activeImage:'../../images/index-hover.png', }, { name:'购物车', image:'../../images/cart.png', activeImage:'../../images/cart-hover.png', }, { name:'订单', image:'../../images/order.png', activeImage:'../../images/order-hover.png', }, { name:'我的', image:'../../images/my.png', activeImage:'../../images/my-hover.png', } ] }, // 切换事件 choose(e:any){ const _this=this; const {activeIndex}=_this.data; if(e.currentTarget.dataset.index==activeIndex){ return }else{ _this.setData({ activeIndex:e.currentTarget.dataset.index }) } }, }) [代码] 上面代码不难理解，点击以后改变[代码]activeIndex[代码]从而控制每个组件的渲染和销毁，这样付出的代价还是比较大的，需要我们进一步的优化。 如何实现keep-alive 我们知道，这里主要是避免组件反复创建和渲染，有效提升系统性能。 实现思路 1.在[代码]tab[代码]每个选项增加两个值：[代码]status[代码]和[代码]show[代码]，[代码]show[代码]控制组件是否需要渲染，[代码]status[代码]控制组件[代码]display[代码] 2.初始化时候设置首页的[代码]status[代码]和[代码]show[代码]，其他都为[代码]false[代码] 3.当我们切换时:把上一个[代码]tab[代码]页面的[代码]status[代码]改为[代码]false[代码],然后把当前要切换页面的[代码]tab[代码]数据中的[代码]status[代码]和[代码]show[代码]都改为[代码]true[代码],最后再更新一下[代码]activeIndex[代码]的值。 wxml代码： [代码] <!-- 首页 --> <view wx:if="{{tab[0].show}}" hidden="{{!tab[0].status}}"> <index></index> </view> <!-- 购物车 --> <view wx:if="{{tab[1].show}}" hidden="{{!tab[1].status}}"> <cart></cart> </view> <!-- 订单 --> <view wx:if="{{tab[2].show}}" hidden="{{!tab[2].status}}"> <order></order> </view> <!-- 我的 --> <view wx:if="{{tab[3].show}}" hidden="{{!tab[3].status}}"> <my></my> </view> [代码] ts代码 [代码]Page({ data: { activeIndex:0, //当前选中的index tab:[ { name:'商品', image:'../../images/index.png', activeImage:'../../images/index-hover.png', status:true,//控制组件的display show:true, //控制组件是否被渲染 }, { name:'购物车', image:'../../images/cart.png', activeImage:'../../images/cart-hover.png', status:false, show:false, }, { name:'订单', image:'../../images/order.png', activeImage:'../../images/order-hover.png', status:false, show:false, }, { name:'我的', image:'../../images/my.png', activeImage:'../../images/my-hover.png', status:false, show:false, } ] }, choose(e:any){ const _this=this; const {activeIndex}=_this.data; //如果点击的选项是当前选中，就不执行 if(e.currentTarget.dataset.index==activeIndex){ return }else{ //修改上一个tab页面的status let prev='tab['+activeIndex+'].status', //修改当前选中元素的status status='tab['+e.currentTarget.dataset.index+'].status', //修改当前选中元素的show show='tab['+e.currentTarget.dataset.index+'].show'; _this.setData({ [prev]:false, [status]:true, [show]:true, activeIndex:e.currentTarget.dataset.index,//更新activeIndex }) } }, }) [代码] 这样基本就大功告成了，来看一下效果： [图片] 当我们点击切换时候，如果当前组件没有渲染就会进行渲染，如果渲染过后进行切换只是改变[代码]display[代码]，完美实现了需求，大功告成！ 实际业务场景分析 在实际使用中还有两种种情况： 情况1：比如某些数据并不希望他首次加载后就数据保持不变，当切换页面时候希望数据进行更新，比如笔者做的电商小程序，在首页点击商品加入购物车，然后切换到购物车，每次切换时候肯定需要再次进行请求。 情况2：像个人中心这种页面，数据基本请求一次就可以，没必要每次切换请求数据，这种我们不需要进行改进。 我们给组件传递一个值：[代码]status[代码],然后在组件中监听这个值的变化，当值为[代码]true[代码]时候，去请求接口更新数据。具体代码如下： wxml代码(只列举关键部分)： [代码]<!-- 首页 --> <view wx:if="{{tab[0].show}}" hidden="{{!tab[0].status}}"> <index change='{{tab[0].status}}'></index> </view> <!-- 购物车 --> <view wx:if="{{tab[1].show}}" hidden="{{!tab[1].status}}"> <cart change='{{tab[0].status}}'></cart> </view> [代码] 首页组件/购物车组件[代码]ts[代码]代码: [代码]Component({ /** * 组件的属性列表 */ properties: { change: { type: String,//类型 value: ''//默认值 }, }, observers: { //监听数据改变进行某种操作 'change': function(change) { if(change=='true'){ console.log('更新首页数据'+change) } } }, }) [代码] 来看一下最终效果： [图片] 结尾 目前能想到的实现方法就是这样，如果你有更好的方法，欢迎评论区交流，文章如有错误问题欢迎指正。

问题描述 当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

背景 俗话说，产品有三宝：弹窗、浮层加引导，足以见弹窗在产品同学心目中的地位。对任意一个刚入门的前端同学来说，实现一个模态框基本都可以达到信手拈来的地步，但是，当模态框里边的内容滚动起来以后，就会出现各种各样的让人摸不着头脑的问题，其中，最出名的想必就是滚动穿透。 什么是滚动穿透？ 滚动穿透的定义：指我们滑动顶层的弹窗，但效果上却滑动了底层的内容。 具体解决方案分析如下： 改变顶层：从穿透的思路考虑，如果顶层不会穿透过去，那么问题就解决了，所以我们尝试给蒙层加catchtouchmove，但是发现部分场景无效果，那么就不再赘述了。 改变底层：既然是顶层影响了底层，要是底层不会滚动，那就没这个问题了。 如何改变底层解决该问题呢？ 不成熟方案： 底部页面最外层view设置position: fixed;页面不可滚动，但是这个时候会导致页面回到顶部。 滚动时监听滚动距离，弹窗时记录滚动位置，关闭弹窗后使用wx.pageScrollTo回滚到记录的位置。 成熟方案 使用page-meta组件，通过该组件我们可以操作Page的style样式，类似于h5里body设置overflow: hidden; 控制页面不可滚动。文档地址：https://developers.weixin.qq.com/miniprogram/dev/component/page-meta.html 使用wx.setPageStyle设置overflow: hidden， 也可以实现给Page组件设置样式。） page-meta组件： 通过该组件我们可以直接操作[代码]Page[代码]组件 ，我们给它的wxss样式overflow动态设置[代码]hidden[代码]or[代码]visible[代码]or[代码]auto[代码] 就可以控制整个页面是否可以滚动。 [图片] wx.setPageStyle方法： 调用这个api，动态设置它为hidden/auto，用于控制页面是否可滚动，主要用于页面组件内使用，比如封装好的弹窗组件，就不用单独写page-meta组件了。。 [代码]wx.setPageStyle({ style: { overflow: 'hidden' // ‘auto’ } }) [代码] 老规矩，结尾放代码片段： https://developers.weixin.qq.com/s/U6ItgQmP7upQ 拓展 支付宝小程序虽然存在page-meta组件，但是由于内核为69版本，给page设置overflow: hidden 也无法控制底部元素不可滚动，目前已联系支付宝的底层开发同学提供API控制页面disableScroll，目前正在封装Appx，近期开放。

请问最顶部的时间、信号、电量的颜色怎么修改？

在微信小程序实现横向滑动时，使用scroll-view标签，然后给它设置一个scroll-x，感觉就可以实现元素的横向排列，可以左右滑动。 官网文档如下所示 https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html 但是在实际开发中会遇到各种问题，本文主要通过具体编写代码实现一个横向滑动的功能 本文背景最近在实现类似驾考宝典顶部题库切换的效果，但是跟驾考宝典不同的是，这里存在很多题库，所以需要用到scroll-view，横向滑动 刚开始实现起来有几个坑，这里捋一下 本文内容本文主要具体实现一个可横向滑动的功能，具体界面如下图所示 [图片] 需要注意的两点是： 1）给scroll-view 加以下样式  width: 100%;white-space: nowrap;   2）子元素display：inline-block； 这个地方在外面父元素就不要加flex布局的相关属性了。 具体的样式代码为 [图片] 代码片段为 https://developers.weixin.qq.com/s/annR87m87ElG [图片] 参考文档 Scroll-View 组件的scroll-x属性不起作用? - 微信开放社区 https://developers.weixin.qq.com/community/develop/doc/0000e080e18d800a66079775d51000 scroll-view横向滚动：客户端和开发工具显示不一样，客户端错位? - 微信开放社区 https://developers.weixin.qq.com/community/develop/doc/000c44af69c1006e1ce6de9805d800 本文总结 本文主要具体实现一个可横向滑动的功能 附 代码片段一 由于编辑器对wxml代码片段展示有问题，这段代码放在评论区。 代码片段二 const app = getApp() Page({ data: { arr: [] }, onReady: function () { const arr = [] for (let i = 0; i < 20; i++) arr.push(i) this.setData({ arr }) } }) 代码片段三 .scroll-box { width: 100%; white-space: nowrap; } .scroll-box .box{ display:inline-block } 其他

微信小程序虽然开放了自定义的tabbar 因为他用的是fixed定位布局 导致每个tabbar页都要去动态计算padding-bottom 或者bottom值，之前尝试过 wx.getSystemInfo({ success: function(res) { console.log(res) if (res.model.search('iPhone X') != -1) { that.globalData.isIphoneX = true } }, }) 在app.js中判断是不是iphone X ok这个时候是完美适配的 但是有一天测试同学拿着iphone 11 pro max找我 说页面的padding-bottom值会盖住，在我的排查中发现res.model.search('iPhone X') != -1 这句代码拿到的结果为-1 我之前是这么处理的 我判断机型为iphonex的时候 tabbar 页面的padding-bottom为100rpx+64rpx 但是iphone 11pro 系列手机在这个判断中无效 经过排查并反复改 终于拿到了完美适配的方案！！！！我们只需要在外层的view padding-bottom: calc(100rpx + env(safe-area-inset-bottom))就好了 有需要的同学点个关注吧！！！ 对了 再次说明下 custom-tab-bar.wxss 中.tar-bar里的height我自己改成了100rpx 微信官方的是50px