- mpvue构建小程序中保存图片到本地之线上环境不生效的问题----哈哈哈解决了
在本地开发微信开发工具和测试手机上保存图片都没有问题,可是等发布了之后却始终不能保存成功,任何提示也没有,刚开始我都以为我写的代码有问题,可是在本地是没问题的呀?然后又开始各种排查搜索,终于发现了原来是小程序的后台域名忘记配置了,首先打开微信开发小程序的后台,打开开发管理,然后打开开发设置如下图,最后配置一下wx.downloadFile合法域名然后关闭小程序进程,重新进去小程序就可以保存图片成功啦~~~希望对你们有帮助哈 [图片] [图片] [图片]
2021-03-11 - input键盘弹出时,滚动页面,输入框内容错位问题
在ios9.+的版本上,遇到了一个问题。在键盘弹出的时候,快速滚动页面,输入的内容或input提示语会错位。且有时无法恢复到原有位置。当然,前提是你这个页面是超过一屏需要滚动的时候 [图片] 解决办法: always-embed=true [图片]
2022-04-18 - 安卓兼容问题,scroll-view上拉导致input输入框上移
代码片段:https://developers.weixin.qq.com/s/9SbNDrmp77ha scroll-view没有上拉时是正常的 [图片] 上拉一部分时,input的输入位置上移的,但是实际input好像没有上移,input的灰色背景没有上来 [图片] 再往上拉,input输入位置又继续往上移了 [图片] ios系统没有出现这个问题...
2020-05-18 - input聚焦弹出键盘时, 防止自定义导航上移的一种解决方法
前提 在开发小程序的过程中,会经常使用到[代码]input[代码]组件,其聚焦的时候,会在必要时自动上移整个页面以便弹起的键盘不回遮住[代码]input[代码]组件 但是当页面应用自定义导航时,聚焦时会把自定义导航也上移,而这就不符合我们的预期,我们希望的是导航栏始终固定在顶部,下面的内容上移即可!参见该帖子 为了解决这个问题,我们只好自己来处理页面上移的事情了! 准备工作 首先我们需要先关闭掉输入框自动上移页面的功能 [代码]<input type="text" adjust-position="{{false}}" /> [代码] 接下来我们就要自己处理页面上移的工作了 为了让除了导航栏的区域整体上移, 我们需要先可以定义一个值(top)来表示上移距离 [代码]// index.js Page({ data: { top: 0 } }) [代码] 其次 需要固定好页面的结构, 如下: 我们要做的便是只上移[代码].cointainer[代码]这个组件, 故使用[代码]top: -{{top}}px[代码]来表示内容上移 [代码]// index.wxml <mp-navigation-bar background="#d8d8d8" title="导航栏标题"></mp-navigation-bar> <view class="container" style="position: relative; top: -{{top}}px"> 内容区域 </view> [代码] 计算上移距离 我们先思考什么情况下, 页面需要上移? 显然是[代码]input[代码]距离底部的距离小于弹出的键盘高度的时候需要上移, 而上移的距离便是距离底部的距离与键盘高度的差 那么只需要知道这两个值便可实现该功能了. 键盘高度 翻阅input的文档, 我们发现监听[代码]bindfocus[代码]或者[代码]bindkeyboardheightchange[代码]事件都可以获取到键盘的高度 [代码]// index.wxml # index.wxml <input id="input1" type="text" adjust-position="{{false}}" bindfocus="onHandleFocus" bindblur="onBlur" /> // index.js onHandleFocus (e) { console.log('focus', e) const keyboradHeight = e.detail.height } [代码] 距离底部的距离 首先我们需要货值输入框的位置, 这里可以使用[代码]SelectorQuery[代码]来获取输入框的位置 [代码] # index.js onHandleFocus (e) { console.log('focus', e) const keyboradHeight = e.detail.height const id = e.currentTarget.id this.createSelectorQuery() .select(`#${id}`) .boundingClientRect(rect => { console.log('==> rect', rect) }).exec() } [代码] 获取到的rect对象同DOM的[代码]getBoundingClientRect[代码], 然后我们再观察这张图片: [图片] 显然要计算输入框距离底部的距离只需用显示高度减去bottom即可 页面的显示高度可以用如下方法获得 [代码]const { windowHeight } = wx.getSystemInfoSync() [代码] 最后我们上诉思路整理成对应代码 [代码] # index.js onHandleFocus (e) { console.log('focus', e) const keyboradHeight = e.detail.height const id = e.currentTarget.id this.createSelectorQuery() .select(`#${id}`) .boundingClientRect(rect => { console.log('==> rect', rect) const { windowHeight } = wx.getSystemInfoSync() const bottom = windowHeight - rect.bottom if (bottom > keyboradHeight) { // 距离足够, 不需要上移 return } this.setData({ top: keyboradHeight - bottom }) }).exec() } [代码] 完整代码见该代码片段 尾声 该方法虽然能够解决标题所述的问题,当也存有其他问题: 页面结构必须固定结构(分为标题-内容两大块) 所有的[代码]input[代码]都必须加上[代码]id[代码],否则[代码]createSelectorQuery[代码]选择器没法找到对应的[代码]input[代码],且必须监听[代码]focus[代码]和[代码]blur[代码]方法。 最外层的内容[代码]view[代码]的[代码]top[代码]样式被占用 PS: 计算上移距离的这部分代码可以写成一个[代码]behavior[代码]方便其他页面直接引入
2021-04-22 - WeUI官方组件库:助力小程序高效设计与开发
原文来自「微信开发者」公众号。 本文主要介绍了WeUI官方组件库有什么,怎么用。 提起 WeUI,相信大家都不陌生,WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一。 不过,对于 WeUI 样式库,开发者就有疑问了。 [图片] 1 有什么 我们来看看 WeUI 组件库到底有什么可用的 UI 组件呢?WeUI 样式库有的各个元素,WeUI 组件库是基于 WeUI 样式库做了组件化处理,开发者可以便捷的使用,无需考虑组件层面的逻辑问题。 2 怎么用 有了心动的组件之后,大家肯定想知道 WeUI 组件库是怎么使用的。 第一步:引用 要使用 WeUI,首先要把 WeUI 引入我们的小程序项目,引入 WeUI 的方式有以下两种,使用其中一种即可~ 方法一:通过 useExtendedLib 扩展库 的方式引入,这种方式引入的组件将不会计入代码包大小。(推荐👍) 方法二:可以通过 npm 方式下载构建,npm 包名为 weui-miniprogram。 与方法一不同,npm 引入的方式需要多操作一步,在 app.wxss 中引用 weui.wxss。 // app.wxss @import '/miniprogram_npm/weui-miniprogram/weui-wxss/dist/style/weui.wxss'; 第二步:使用 引入之后,我们就要开始来使用了,WeUI 组件库是基于小程序自定义组件构建的,所以使用是以自定义组件的形式来使用。 下面通过几个例子来感受下 WeUI 组件库的使用。 由于是自定义组件的形式,所以使用组件都需要在页面配置中引入,像这样: // page.json { "usingComponents": { "mp-half-screen-dialog": "weui-miniprogram/half-screen-dialog/half-screen-dialog", "mp-searchbar": "weui-miniprogram/searchbar/searchbar" } } 引入组件之后,就可以直接在 wxml 中使用了,当然,为了让开发者接入更加简便,我们也加入了做了一些常见的实用性功能。 半屏弹窗 小程序提供了 wx.showModal、wx.showToast 供开发者进行页面交互,在开发过程中,可能需要自定义按钮相关的内容,所以 WeUI 提供了半屏弹窗让开发者可以有更多的自定义空间。 我们来看下代码,使用很简单,直接使用 mp-half-screen-dialog,配置相关属性即可。 // page.wxml // page.js data配置 buttons: [ { type: 'default', className: '', text: '辅助操作', value: 0 }, { type: 'primary', className: '', text: '主操作', value: 1 } ] 来看下半屏弹窗的效果~ u1s1,这交互体验真的爱了😍 [图片] Form 表单校验 Form 表单这里,除了基础的的功能之外,WeUI 组件库还提供了表单校验的能力,通过 rules 规则的配置(支持长度、手机号码、电子邮件、url 链接地址等),轻松解决表单校验问题。 [图片] 左滑删除 相比 Web 端,手机端的操作按钮更多的是通过⬅️左滑等来实现,考虑到左滑删除的普遍性,WeUI 组件库也是支持的。 在 mp-slideview 组件中设置 buttons属性即可。 [图片] 搜索组件 同样是基本功能的搜索,WeUI 组件库也封装了搜索组件,开发者只需配置搜索结果即可拥有搜索功能~ [图片] 除了这些组件之外,WeUI 组件库还提供了很多实用的组件,包括基础的 icon、loading,表单的 uploader、cell 等等。 第三步:适配DarkMode 伴随客户端、小程序对 DarkMode 的支持,WeUI 组件库也同步适配 DarkMode 的模式,让 WeUI 组件库的使用同学可以快速适配 DarkMode。 在根结点(或组件的外层结点)增加属性 data-weui-theme="dark" ,即可把 WeUI 组件切换到 DarkMode 的表现,如: ... 3 体验WeUI 最后,如果想体验 WeUI 组件库的效果,欢迎扫码下方二维码进行小程序示例体验👏及接入使用,使用过程中如有建议或者疑问,欢迎到微信开放社区与我们交流。 [图片]
2022-03-24 - 小程序基础库 2.18.1 更新
各位微信开发者: 小程序基础库 2.18.1 已经开始灰度开发者,请大家基于业务情况关注相关变更。如遇问题请及时在该帖下方留言或在小程序交流专区发表标题包含「基础库2.18.1」的帖子反馈。本次更新如下: 新增 框架 小程序/小游戏插件支持 WXWebAssembly更新 组件 小程序跳转小程序支持 short-link更新 组件 关注公众号组件场景值逻辑修改更新 API 云托管 api 支持传服务名作为参数更新 插件 小程序/小游戏插件支持 Worker更新 插件 支持 navigateToMiniprogram修复 框架 在 Behavior 中使用 observers 时可能导致 vdSync 错误修复 框架 开发版小程序 webview 组件能力限制对齐正式版修复 框架 从独立分包启动并进入主包,退后台后 App.onShow 不触发修复 组件 video 全屏下转屏问题修复修复 组件 page-container z-index 设置无效修复 组件 page-container 打开时所在页面会回到顶部 微信团队 2021年07月16日
2021-07-22