抛开软件功能不谈，在交互体验上，打造一款能和原生APP相媲美的微信小程序，是我这样的微信开发者的梦想。想在技术上想实现原生的功能，开发成本是非常巨大的。但感谢微信小程序推出的渲染引擎Skyline，让我可以轻松实现原生app的交互体验。 目前，小程序已上线运行半月，虽有bug，但瑕不掩瑜。如果您对于使用webView开发还是Skyline开发还有疑虑的话，希望以下介绍对于有选择困难症的同学们有所帮助。接下来，我想借助自己开发的小程序，向大家推荐与介绍Skyline渲染引擎（当然也希望向大家推荐我所开发的小程序 -- 「 NONZERO COFFEE 」）。 如有错误或遗漏，欢迎在评论区批评指正，不胜感激。 小程序效果演示 [图片] 对小程序感兴趣的也可以加我好友讨论技术： [图片] 开发文档中对于Skyline的介绍，有以下几个重要的增强特性：worklet 动画、手势系统、自定义路由（预设路由）、共享元素动画。对于他们的使用和说明，我就不过多说明了，具体可以参照：https://mp.weixin.qq.com/s/dRz2PnkwHxYVL2kCexQ7WQ。 接下来我会介绍这些特性在小程序中，是怎么变成我的奇淫巧技，让小程序也可以更加优美。 worklet 动画：丝滑与复杂的页面元素展示 当页面滚动时，我们通常会希望根据页面不同的滚动状态或位置，灵活的展示或改变某些元素的状态，那么借助scroll-view的worklet:onscrollupdate时间和worklet动画可以完美实现效果~ [图片] 1、展示中可以看到背景图片会随着下拉放大，但是上滑时却是跟随上滑，完美实现不同状态 2、为了优化顾客点单体验，主要菜单栏（点单、外卖、商城）需要在上滑至离开屏幕时，顶部需要弹出备用菜单栏. 以上效果如果通过简单的wx:if判断，那么动画效果势必会很突兀，如果使用worklet 动画的timing()与spring()函数，可以轻松实现动画的流畅效果。 附上简单代码：  这里是置顶的点单菜单栏 这里是页面内容和   onLoad(options) {         // 背景图片的高度和缩放         this.bgimgTop = shared(0)         this.bgimgSca = shared(1)         // 顶部点单栏透明度         this.topfunOp = shared(0)     },    onReady() {         // 背景图片动画监听        this.applyAnimatedStyle('.bgimg', () => {           'worklet'            return {top: `${this.bgimgTop.value}px`,transform:`scale(${this.bgimgSca.value},${this.bgimgSca.value})`}        })        // 顶部点单栏动画监听       this.applyAnimatedStyle('.fixtopview', () => {           'worklet'           return {opacity: `${this.topfunOp.value}`}       })     },       scrolling(e){         "worklet"         let scrollTop = e.detail.scrollTop         if(scrollTop <= 0){ //向下滚动             this.bgimgTop.value = 0             this.bgimgSca.value = 1 +  (-scrollTop  /  800)             this.topfunOp.value = 0         }else{ //向上滑动             this.bgimgTop.value = - scrollTop             this.bgimgSca.value =   1             let opTemp = (scrollTop / 200)             this.topfunOp.value = opTemp >= 1 ? 1 : opTemp         }     }, Tip:由于代码量较大，以下说明不会附上详细代码，待后续整理好源码，会开源的 手势系统：提升用户留存率，神之一手 [图片] 这个实例呢，和第一个非常相似，是因为其中也 用到了worklet动画，换句话说，如果使用了Skyline框架，那么worklet将萦绕整个开发进展，它即代替了wss和css动画。 另外，更重要的是这个实例运用了手势系统，概而述之，就是使用<pan-gesture-handler><vertical-drag-gesture-handler>去更精细化的代理使用和监听<scroll-view>组件。  一、首页由<pan-gesture-handler>判断页面状态，状态1：往上拖动，不处理滚动事件，而是负责顶部搜索按钮和搜索框的动画效果、背景图片的缩放效果、以及整个容器的高度变化；状态2：向下滑动,则处理滚动事件 二、当判断向下滑动，处理滚动事件时，先由<vertical-drag-gesture-handler>判断<scroll-view>是否触顶，接下来也有两种状态，状态1：触顶，则改变由<vertical-drag-gesture-handler>接管，处理容器下滑的动画；状态2：没有触顶，则是<scroll-view>的正常滑动。 自定义路由 ：小程序焕然一新，媲美原生 示例一： [图片] 这个详情弹出页的效果和webview下的 <page-container>组件的效果基本相似，如果这里简单的使用跳转新页面，则不符合UI设计稿，使用页面弹出组件时，又会发生用户的返回操作直接退出商品列表页，所以这里使用的自定义路由,并且还利用了worlklet和手势系统，实现了手势下滑与左滑时，如果下滑距离和下滑速度足够，则退出，不足够，则回弹恢复。 示例二： [图片] 这里的自定义路由，效果不明显，但是恰恰就需要这种效果。简单来说就是用户点击搜索框，需要跳转到搜索页面，但是设计稿中需要这种跳转是无感的，而自定义路由中将transitionDuration跳转时间设置为10或者更短，并且将handlePrimaryAnimation跳转效果设置成空值，即可完美实现。以下是简单的自定义路由配置代码： const ShopSearchRouteBuilder = (customRouteContext) => {     console.info('skyline: half page route build')     /**      * 1. 手势拖动时采用原始值      * 2. 页面进入时采用 curve 曲线生成的值      * 3. 页面返回时采用 reverseCurve 生成的值      */     const handlePrimaryAnimation = () => {         'worklet'         return {         }     }     return {         opaque: false,         handlePrimaryAnimation,         transitionDuration: 10,         reverseTransitionDuration: 10,         barrierDismissible:true,         canTransitionTo: false,         canTransitionFrom: false,     } } 共享元素 ：我的奇奇怪怪的使用 [图片] 如果没有看出这个例子的共享元素是如何使用的，那么我用webview的页面来分解一下。 [图片] [图片] 这里的商品列表页和购物车其实是两个页面，但是底部的购物车按钮元素，又需要在两个页面跳转时，无感展示，所以这里是最适合使用共享元素的，我个人认为，这比跳转页面时使详情图片在不同页面间飞跃更加高级和实用。 但是既然说到了图片飞跃的效果，下面我也来展示几个实用例子： [图片] [图片] 这里的两个例子也都是列表页跳转至详情页时，实例图片的飞跃。 当然小程序中的动画效果可不止以上罗列的这么几个，总而言之，使用了Skyline之后，以上的动画效果在小程序中随处可见，如果不是本人的代码能力有限，我想小程序的整体效果完全可以媲美APP的原生效果。 希望以上这些能够为即将进行微信小程序开发，而苦恼于是否使用Skyline的同学们，带来新的思路。 Skyline的bug：背刺与惊喜 新技术需要有勇气去使用，去克服遇到的一切问题我遇到了很多bug，虽然他总会在我意料不到的地方背刺我一刀，但是Skyline的效果实在让我欲罢不能，万分庆幸的是我真的要非常感谢微信团队的老师们，给了我很多建议与帮助。 还没有经过老师同意上图，暂时先打个码。 [图片] [图片] 好了，接下来说一下，现在还没有解决的bug，希望微信团队能尽快修复。 1、小程序使用的是自定义tabbar，在ios下，相隔较长时间再重新打开小程序，会出现白屏的现象，是完全不显示任何元素，但vconsole是可以看到各生命周期已经正常允许了的。这里实在不好上传相关代码，因为首页代码很复杂。还关联了全局状态管理。 与其他同学沟通过，发现并不是我的单一案例，也有人复现了。 解决方案：万幸我使用的是自定义tabbar，小程序启动首页被我设置成了某一个单页面，然后从单页面跳转到tabbar首页，并且这个单页面还能设置成宣传海报首页，这也算是一个自洽的解决方法。 2、wx.switchTab()方法：前提依旧是自定义tabbar，假设tabbar有A、B、C、D首先进入了tabbar首页A页面,然后跳转到其他页面，如果这时使用wx.switchTab()跳转至B\C\D页面，会出现tabbar栏不出现的情况。 解决方案：全部跳转至A首页，或者tabbar页面底部安置一个假的tabbar栏。 3、最麻烦的问题：如果我不考虑兼容的问题，那么即代表我需要抛弃一部分没有升级微信版本习惯的用户，因为低版本的微信无法正常使用Skyline框架开发的小程序。 解决方案：如果您的开发成本和时间足够，完全可以慢慢兼容、如果还在纠结，建议您单页面慢慢升级Skyline，Skyline支持单页面渲染（这可真是太棒了），但是对于我这种有代码强迫症的人来说，这是硬伤，我不能忍受一个页面是webview，另一个是skyline，我只能慢慢熬过用户更新的阵痛期。 最后，我还想说几句话： 1、开源这件事，我已经做好了准备，但是开源成本太大，我还没考虑好是否花时间进行开源，总之，有需要的同学，可以写个评论支持下。 2、开发： （1）前端：有80%以上的图片与文字，都是通过后台数据渲染的，也就是说部署后，基本不需要修改小程序代码，但是自由度极高。 （2）后台框架：考虑到是小项目，只使用了java的springboot，数据库使用的是mySql，缓存则也是通过代码实现的（不使用redis，是因为云托管不支持，单独买太贵了），存储使用的腾讯的COS。 （3）后台部署：我抛弃了传统服务器，拥抱了微信云托管。 （4）管理admin页面：使用的是antd admin（vue2）,部署方面同样也是使用的云托管的静态资源存储。

[图片]有淡淡的颜色边 .i-mdi-home { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M10 20v-6h4v6h5v-8h3L12 3L2 12h3v8z'/%3E%3C/svg%3E") } .block { display: block } .flex { display: flex } .min-h-screen { min-height: 100vh } .justify-center { justify-content: center } .bg-\[\#43ffff\] { --tw-bg-opacity: 1; background-color: rgb(67 255 255 / var(--tw-bg-opacity, 1)) } .bg-slate-950 { --tw-bg-opacity: 1; background-color: rgb(2 6 23 / var(--tw-bg-opacity, 1)) } .p-8 { padding: 2rem } .text-2xl { font-size: 1.5rem; line-height: 2rem } .text-\[200px\] { font-size: 200px } .text-\[\#234fff\] { --tw-text-opacity: 1; color: rgb(35 79 255 / var(--tw-text-opacity, 1)) }

场景回忆： [图片] [图片] 修改前 修改后 当你在自己的小程序使用自定义组件的时候却发现苹果端ios的picker会被其遮盖 而安卓端却可以正常使用，你十分头疼却没有想出其他办法 统一一个自定义picker组件吧？要转移的数据太繁杂，过程太麻烦 调试一下tabbar吧，发现频频报错，bug！修一个出现十个 我这里有一套解决方案： 思路：在自己的tabbar添加一个wx：if，当用户点击picker的时候就将tabbar改为false；当用户点击确定的时候将tabbar改为true 自定义tabbar（只展示就不贴代码了大家自己发挥） [图片] 在对应的tabbar页面的wxml加上一个wx：if [图片] 后面变量加个showBar 在有官方picker组件的页面加一个bindtap，picker能够实现子view的bindtap [图片] 点击之后 触发dechange方法： [图片]  dechange()    {     this.getTabBar().setData(       {         showBar:false       }     )     }, 在picker的bindcancel（bindcancel就是用户点击picker的取消的时候触发的事件）的对应方法里 加上[图片]  dcancel()    {    console.log("取消了")    this.getTabBar().setData(     {       showBar:true     }   )    }, 让变量为true 导航栏回归 在picker的bindchange（bindchange就是用户点击picker的确认的时候触发的事件）的对应方法里 加上[图片] 让变量为true 导航栏回归 以上就是解决此问题的答案，虽然有点简陋但是能够小小止火 甲方爸爸看了都喜笑颜开！ 编者第一次上传文章，有点仓促如果有问题请指出！ 有冲突才会成长！ 加油！代码人

前言 今天在写微信小程序前端页面，想引入weui组件库来完成开发。结果按着官方文档来遇到了一堆问题，最后靠着不断百度查资料才最终解决。所以将过程记录一下，避免后面再遇到这类坑。 注意：本文默认读者已知道怎么使用npm 1. 初始化 以管理员身份运行命令行窗口（cmd），在cmd中进入项目的根目录。然后输入以下命令： [代码]npm init [代码] 后面一路按回车健即可，最终会在项目的根目录中创建出一个名为package.json的文件。 2. 安装weui组件库 在cmd中紧接着输入以下命令： [代码]npm install weui-miniprogram [代码] 命令执行完毕后会多出来一个node_modules文件夹，里面包含了weui组件库。 3. 构建npm 在微信开发者工具中，选择“工具”->“构建npm”。如无意外会出现类似“没有找到可以构建的NPM包……”这样的报错。 这时就需要在项目根目录找到package.config.json文件，修改相关的配置如下： [代码]{ ... "setting": { ... "packNpmManually": true, "packNpmRelationList": [ { "packageJsonPath": "./package.json", "miniprogramNpmDistDir": "./" } ] } } [代码] 继续在开发者工具中的“详情”->“本地设置”里检查是否勾选上“使用npm模块”选项，若没勾选则勾选上。 完成上述配置后，重新构建npm，即可构建完成。 4. 重启项目 在开发者工具中“项目”->“重新打开此项目”，完成对项目的重启。 注意：这一步非常重要！！！否则引入组件会提示找不到文件！！！ 5. 引入wxss 在app.wxss中，引入weui库的wxss文件 [代码]@import 'miniprogram_npm/weui-miniprogram/weui-wxss/dist/style/weui.wxss'; [代码] 引入时要根据实际情况调整路径，但最长后缀均为 [代码]/weui-miniprogram/weui-wxss/dist/style/weui.wxss [代码] 6. 引入组件 在想要使用组件的页面对应的js文件中，对组件进行的引入。一定要注意自己项目的目录结构！！！ [图片] 而官方文档的写法是 [图片] 如果直接照搬官方文档的写法，则忽略了目录结构，会报错！！ 接着在要使用组件的页面对应的wxml文件中使用该组件即可 [代码]<mp-dialog title="test" show="{{true}}" bindbuttontap="tapDialogButton" buttons="{{[{text: '取消'}, {text: '确认'}]}}"> <view>test content</view> </mp-dialog> [代码] 效果如下： [图片] 后记 不得不说，前端开发的坑实在是太多了，上面记录的过程我摸索了一个多小时。看来平时一定要多注意总结才行，不然真的非常消耗时间！！！ 创作不易，觉得有用麻烦点个赞，谢谢~~~

title没有自适应宽度了，以前都好好的，样式如下[图片]

Skyline 一定需要应用到整个小程序吗？ 不需要，Skyline 支持按页面粒度开启，建议开发者逐个页面适配   在 Skyline 模式下，为什么使用真机调试会显示空白并且工具报错？  目前 Skyline 模式下暂不支持真机调试，建议使用真机预览完成调试，平台在尽快支持真机调试能力。    在 Skyline 模式下，为什么微信开发者工具热重载无响应？   Skyline 模式暂不支持热重载，建议先关闭热重载，重新编译来预览渲染结果。后续平台将支持热重载能力。 开启 Skyline 后布局错乱 大多是由于没有全局滚动而导致挤压，以及 flex-direction 默认为 column 造成。前者只需要加上 scroll-view，后者可以在声明了display:flex  但又没指定 flex-direction的地方显示指定flex-direction:row。推荐开发者开启默认 Block 布局。 切换 Skyline后，为什么顶部原生导航栏消失？ 不支持原生导航栏，需自行实现，或使用 weui 组件库 伪类及伪元素部分支持 对于伪类，目前只支持常用的 :first-child 和 :last-child 。其它伪类可通过按需添加 class 替代，如 :active 则手动给点击状态下的节点加个.active class 对于伪元素，目前只支持 ::before 和:after。其它伪元素建议用真实 WXML 节点实现。 全局固定元素失效 因不支持 fixed 导致，但由于没有全局滚动，在页面根节点下使用 absolute 即可达到 fixed 的效果，倘若封装原因无法移至页面根节点，可使用 root-portal 组件包裹 切换 Skyline 后，为什么 position: absolute 相对坐标不准确？ 在 Skyline 模式下，所有节点默认是 relative，可能导致 absolute 相对坐标不准。建议开发者修改节点 position 或者修改相对坐标。 多段文本无法内联 因不支持 inline 布局导致，需改成 flex 布局实现，或者使用 text 组件包裹多段文本，而不是用 view 组件包裹，也可以使用 span 组件包裹 text 和 image 混合内联。如 、<span><image /></span>，<span><view style="width: 50px;"/></span> 多行文本的省略样式失效 在单行文本省略的基础上，通过 text 组件的 max-lines 属性设置最长行数，即 <text max-lines="{{2}}"></text> z-index 表现异常 这是由于 Skyline 不支持 web 标准的层叠上下文所致，只有在同层级的节点之前应用 z-index才有效，可根据实际情况调整取值 weui 扩展库无法使用 平台正在支持扩展库，预计近期上线。建议开发者使用 npm 安装 weui 组件库 后，将 node_ modules/weui-miniprogram 下的miniprogram_ dist 替换为 链接 中的 miniprogram_dist，然后在微信开发中工具中构建 npm 即可。 不支持组件 animate 动画接口 暂不支持组件 animate 动画接口。如需实现相关效果，可使用 worklet 动画机制 实现 svg 渲染不正确 Skyline 上的 SVG 不支持 <style> 选择器匹配，可自行转成内联的方式；不支持 rgba 格式，可使用 fill-opacity 替代；建议用 SVGO 在线工具优化 scroll-view 横向滚动不生效 横向滚动需打开 enable-flex 以兼容 WebView，同时 scroll-view 添加样式 display: flex; flex-direction: row;，scroll-view 子节点添加样式  flex-shrink: 0; icon-font 图标不显示 最新版本已支持伪元素，低版本可参考 代码片段 实现图标

Skyline 一定需要应用到整个小程序吗？ 不需要，Skyline 支持按页面粒度开启，建议开发者逐个页面适配   在 Skyline 模式下，为什么使用真机调试会显示空白并且工具报错？  目前 Skyline 模式下暂不支持真机调试，建议使用真机预览完成调试，平台在尽快支持真机调试能力。    在 Skyline 模式下，为什么微信开发者工具热重载无响应？   Skyline 模式暂不支持热重载，建议先关闭热重载，重新编译来预览渲染结果。后续平台将支持热重载能力。 开启 Skyline 后布局错乱 大多是由于没有全局滚动而导致挤压，以及 flex-direction 默认为 column 造成。前者只需要加上 scroll-view，后者可以在声明了display:flex  但又没指定 flex-direction的地方显示指定flex-direction:row。推荐开发者开启默认 Block 布局。 切换 Skyline后，为什么顶部原生导航栏消失？ 不支持原生导航栏，需自行实现，或使用 weui 组件库 伪类及伪元素部分支持 对于伪类，目前只支持常用的 :first-child 和 :last-child 。其它伪类可通过按需添加 class 替代，如 :active 则手动给点击状态下的节点加个.active class 对于伪元素，目前只支持 ::before 和:after。其它伪元素建议用真实 WXML 节点实现。 全局固定元素失效 因不支持 fixed 导致，但由于没有全局滚动，在页面根节点下使用 absolute 即可达到 fixed 的效果，倘若封装原因无法移至页面根节点，可使用 root-portal 组件包裹 切换 Skyline 后，为什么 position: absolute 相对坐标不准确？ 在 Skyline 模式下，所有节点默认是 relative，可能导致 absolute 相对坐标不准。建议开发者修改节点 position 或者修改相对坐标。 多段文本无法内联 因不支持 inline 布局导致，需改成 flex 布局实现，或者使用 text 组件包裹多段文本，而不是用 view 组件包裹，也可以使用 span 组件包裹 text 和 image 混合内联。如 、<span><image /></span>，<span><view style="width: 50px;"/></span> 多行文本的省略样式失效 在单行文本省略的基础上，通过 text 组件的 max-lines 属性设置最长行数，即 <text max-lines="{{2}}"></text> z-index 表现异常 这是由于 Skyline 不支持 web 标准的层叠上下文所致，只有在同层级的节点之前应用 z-index才有效，可根据实际情况调整取值 weui 扩展库无法使用 平台正在支持扩展库，预计近期上线。建议开发者使用 npm 安装 weui 组件库 后，将 node_ modules/weui-miniprogram 下的miniprogram_ dist 替换为 链接 中的 miniprogram_dist，然后在微信开发中工具中构建 npm 即可。 不支持组件 animate 动画接口 暂不支持组件 animate 动画接口。如需实现相关效果，可使用 worklet 动画机制 实现 svg 渲染不正确 Skyline 上的 SVG 不支持 <style> 选择器匹配，可自行转成内联的方式；不支持 rgba 格式，可使用 fill-opacity 替代；建议用 SVGO 在线工具优化 scroll-view 横向滚动不生效 横向滚动需打开 enable-flex 以兼容 WebView，同时 scroll-view 添加样式 display: flex; flex-direction: row;，scroll-view 子节点添加样式  flex-shrink: 0; icon-font 图标不显示 最新版本已支持伪元素，低版本可参考 代码片段 实现图标

如文档 里所述 weui 扩展库无法使用 平台正在支持扩展库，预计近期上线。建议开发者使用 npm 安装 weui 组件库 后，将 node_ modules/weui-miniprogram 下的miniprogram_ dist 替换为 链接 中的 miniprogram_dist，然后在微信开发中工具中构建 npm 即可。

小程序里面要实现聊天的功能，目前遇到的一个问题。 1、点击输入框后，页面往上移动了，最新聊天的文字被覆盖。尤其是刚开始创建对话 2、textarea获得焦点后移动小键盘上方过程缓慢与input表现不一致，不能与微信一样同步弹出。肉眼看上去明显，体验糟糕

 1.首先在wxml的输入框里面添加adjust-position="{{false}}"   2.监听focus事件，通过获取e.detail.height(即弹出的软键盘的高度)，      把input的输入框的bottom=e.detail.height * 2 + 'rpx'；还须把content      的内容高度减去键盘的高度（值须setData下）。  3.监听失焦（blur）事件，在该方法里，把input输入框的bottom重置为0；      且内容高度为原本的内容高度即可（值须setData下）。 以上三步可完美解决

用的Taro，输入框的adjustPosition已设为false，现是采用网上通用的onKeyboardHeightChange来获取键盘高度，动态设置input的位置来实现上推输入框。但是会有延迟的，这该怎么解决？ 亦或是有什么别的办法思路来实现这种业务吗？

介绍小程序中自定义icon组件的四种方式 小程序官方提供了一个icon组件，但是改组件只有10种类型。在日常开发中，难免会需要自定义一些icon组件。本文带你实现四种自定义icon组件的方式，并且概述每种方式的优劣点 一、image图片 利用小程序原生image标签就能实现一个自定义的icon组件。这种方式通过切图，然后对其设置宽高便能实现想要的icon组件。但这种图片方式无法方便的修改icon颜色，并且图片缩放过大后容易失真，并且图片会占用一次http请求 实现代码如下 [代码]<image src="./close.png" style="display: inline-block;" class="image"/> [代码] [代码].image { width: 25rpx; height: 25rpx; } [代码] 二、css3方式 小程序wxss原生支持css3。所以可以通过css3方式实现自己想要的自定义icon。但这种方式实现一些比较复杂的icon比较困难，且用css的方式实现需要耗费一定的工作量 实现代码如下 [代码]<view class="icon-close"></view> [代码] [代码].icon-close { display: inline-block; width: 17rpx; height: 2rpx; background-color: red; transform: rotate(45deg); } .icon-close::after { content: ""; display: block; width: 17rpx; height: 2rpx; background-color: red; transform: rotate(-90deg); } [代码] 三、字体文件方式 小程序wxss支持加载远程字体文件。阿里巴巴矢量图标库(iconfont.cn)可以在线选择想要的icon图片，并且可以修改样式，然后生成cdn的字体文件。然后再通过css加载改字体文件便能实现自定义icon。这种方式比较便捷，图标种类繁多，而且修改样式也比较灵活 实现代码如下 [代码]<icon class="iconfont icon_01" /> [代码] [代码]@font-face { font-family: 'iconfont'; /* Project id 2361238 */ src: url('//at.alicdn.com/t/font_2361238_cxshqh1m3m7.woff2?t=1642320886173') format('woff2'), url('//at.alicdn.com/t/font_2361238_cxshqh1m3m7.woff?t=1642320886173') format('woff'), url('//at.alicdn.com/t/font_2361238_cxshqh1m3m7.ttf?t=1642320886173') format('truetype'); } .iconfont { font-family: "iconfont" !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon_01::before { content: "\e6f1"; } [代码] 四、svg方式 通过svg图片的方式也能实现自定义icon。但是相比第一种方式，svg图片可以修改颜色，并且缩放的失真率也比较低。不过小程序wxss并不支持加载本地的svg图片。我们可以通过在线(https://www.sojson.com/image2base64.html)svg转base64的方式在wxss中加载svg图片。 实现代码如下 [代码]<icon class="close-icon"></icon> [代码] [代码].close-icon { width: 20rpx; height: 20rpx; background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNjU2MjM5NjM4MDE2IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwNDUgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjE4NDIiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjA0LjEwMTU2MjUiIGhlaWdodD0iMjAwIj48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPkBmb250LWZhY2UgeyBmb250LWZhbWlseTogZmVlZGJhY2staWNvbmZvbnQ7IHNyYzogdXJsKCIvL2F0LmFsaWNkbi5jb20vdC9mb250XzEwMzExNThfdTY5dzh5aHhkdS53b2ZmMj90PTE2MzAwMzM3NTk5NDQiKSBmb3JtYXQoIndvZmYyIiksIHVybCgiLy9hdC5hbGljZG4uY29tL3QvZm9udF8xMDMxMTU4X3U2OXc4eWh4ZHUud29mZj90PTE2MzAwMzM3NTk5NDQiKSBmb3JtYXQoIndvZmYiKSwgdXJsKCIvL2F0LmFsaWNkbi5jb20vdC9mb250XzEwMzExNThfdTY5dzh5aHhkdS50dGY/dD0xNjMwMDMzNzU5OTQ0IikgZm9ybWF0KCJ0cnVldHlwZSIpOyB9Cjwvc3R5bGU+PC9kZWZzPjxwYXRoIGQ9Ik0yODIuNTE3MzMzIDIxMy4zNzZsLTQ1LjM1NDY2NiA0NS4xNjI2NjdMNDg5LjQ3MiA1MTIgMjM3LjE2MjY2NyA3NjUuNDYxMzMzbDQ1LjM1NDY2NiA0NS4xNjI2NjdMNTM0LjYxMzMzMyA1NTcuMzU0NjY3bDI1Mi4wOTYgMjUzLjI2OTMzMyA0NS4zNTQ2NjctNDUuMTYyNjY3LTI1Mi4yODgtMjUzLjQ0IDI1Mi4yODgtMjUzLjQ4MjY2Ni00NS4zNTQ2NjctNDUuMTYyNjY3TDUzNC42MTMzMzMgNDY2LjYyNGwtMjUyLjA5Ni0yNTMuMjI2NjY3eiIgcC1pZD0iMTg0MyI+PC9wYXRoPjwvc3ZnPg=='); background-position: unset; background-repeat: no-repeat; background-position: center; background-size: contain; } [代码] 五、总结 上述四种方式都能实现自定义icon。每种都有其利弊。如果四种方式都可以满足需求，建议优先使用第三种方式。

前言 swiper的加载太多问题，网上资料好像没有一个特别明确的，就拿这个答题页，来讲讲我的解决方案 这里实现了如下功能和细节： 保证swiper-item的数量固定，加载大量数据时，大大优化渲染效率记录上次的位置，页面初次加载不一定非得是第一页，可以是任何页答题卡选择某一index回来以后的数据替换，并去掉swiper切换动画，提升交互体验示例动图 [图片] 截图 [图片] [图片] 问题原因 当swiper-item数量很多的时候，会出现性能问题 我实现了一个答题小程序，在一次性加载100个swipe-item的时候，低端手机页面渲染时间达到了2000多ms 也就是说在进入答题页的时候，会卡顿2秒多去加载这100个swiper-item 思考问题 那我们能不能让他先加载一部分，然后滑动以后再去改变item的数据，让swiper一直保持一定量的swiper-item？ 注意到官方文档有这么两个属性可以利用，我们可以开启衔接滑动，然后再bindchange方法中去修改data [图片] 1、保证swiper-item的数量固定，加载大量数据时，优化渲染效率 假设我们请求到的数据的为list，实际渲染的数据为swiperList 我们现在给他就固定3个swiper-item，前后滑动的时候去替换数据 正向滑动的时候去替换滑动后的下一页数据，反向滑动的时候去替换滑动后的上一页数据 当我们知道了要替换的条件，我们便可以去替换数据了 但是我们应该考虑到临界值的问题，如果当前页是list第一项和最后一项该怎么办，向左向右滑是不是得禁止啊 这边是判断没数据会让它再弹回去 2、记录上次的位置，页面初次加载不一定非得是第一页，可以是任何页 有很多时候，我们是从某一项直接进来的，比如说上次答题答到了第五题，我这次进来要直接做第六题 那么我们需要去初始化这个swiperList，让它当前页、上一页、下一页都有数据 3、答题卡选择某一index回来以后的数据替换，并去掉swiper切换动画，提升交互体验 从答题卡选择index，那就不仅仅是滑动上下页了，它可以跳转到任何页，所以也采用类似初始化swiperList的方法 swiper切换动画我这边是默认250ms，但是发现有时候从答题卡点击回来，你在答题卡点击的下一项不知道会从左还是从右滑过来 体验真的很差，一开始不知道怎么禁掉动画，其实在跳转到答题卡页的时候把duration设为0就可以了 然后在答题卡页的unload方法中恢复 关键点： 在固定3个swiper-item的同时，要保证我们可以有办法来替代微信自带swiper的current属性和change方法 swiper-limited-load使用方法及说明： 将components中的swiper-limited-load复制到您的项目中在需要的页面引用此组件，并且创建自己的自定义组件item-view在初始化数据时，为你的list的每一项指定index属性具体可以参照项目目录start-swiper-limited-load中的用法说明：其它属性和swiper无异，你们可以自己单独添加你们需要的属性总结 一开始很头疼，为什么微信小程序提供的这个swiper，没去考虑这方面 然后在网上和社区找也没有一个特别好的解决方案。 后来想想，遇到需求就静下来解决吧。 项目地址：https://github.com/pengboboer/swiper-limited-load 如果错误，欢迎指出。 如有新的需求也可以提出来，如果有时间的话，我会帮你们完善。 如果能帮到你们，记得给一个star，谢谢。 ---补充 有很多朋友在评论区提到了分页的需求，抽时间写了一个分页的Demo和大家分享一下。 还是以答题为例，比如我们一共有500条数据，一页20条，可能需要如下功能，乍一看不就加了个分页，挺简单的，其实实现起来挺麻烦的，下面说一下思路和一些需要特别注意的点： 1、从其他页面跳转到答题页时，不光只能默认在第一题，可以是任意一题，比如第80题。 跳转到任意一题，那么需要我们根据index算出该数据在第几页，然后需要请求该页数据，最后显示对应的index。我的思路更注重用户体验，不可能是上滑或者下滑才开始去请求数据，一定是要用户滑动前提前请求好数据。所以起码要保证左右两侧在初始化那一刻都有数据。如果此题和它的上一题下一题都在同一页，那么我们只需要请求一页数据（第15题，那么只需请求第1页数据）。如果此题和它的上一题或者下一题不在同一页，那么我们可能需要请求两页数据。（第20题，那么需要请求第1页和第2页数据） 2、左滑、右滑没数据时，都可以加载新数据。直到滑到第一题或者最后一题。 如果我们初始化时是第24题，那么我们左滑到第21题时，就应该去请求第一页的数据。那么用户在看完21题时，再滑到20题，可能就根本不会感知到通过网络请求了数据。但是如果用户此刻滑动特别快：滑到21题时请求了网络，请求还没成功，就又向左滑了。那么我们需要限制用户的滑动，给用户一个提示：数据正在加载中。 3、从答题卡点击任意一题可以跳转到相应的题目，并且左右滑动显示正常数据 比如我们初始化是跳转到了第80题，不一会点击答题卡又要跳转到200题，一会又跳转到150题。各种无序操作，你也不知道用户要往哪里点。 一开始是想着维护一个主list，点到哪道题往list中添加这道题所在的当页的数据，但是还得判断这一页或者左滑右滑请求新一页的数据得往list的哪个位置添加。这来回来去乱七八糟的判断就很麻烦了，很容易出bug。而且list长度太长了以后insert的性能也不好。 后来就去想，要不答题卡点击任意一题都清空旧的list，然后请求新的数据，左右滑动没数据了再请求新的数据呗。但是这样很浪费资源，并且用户体验也不好，用户已经从第1题答到第200题了，这时用户从答题卡选择了一个25题，还得重新请求网络。而且200道题的数据都没了，那再选个26题，再重新请求网络？网络有延时不说，还浪费资源。 最后转念一想，这时候就需要弄一个缓存了。所以最终的解决方法就出来了：我们维护一个map，在网络请求成功后，在map中保存对应页的数据，同时我们维护一个主list来显示对应的题目。当我们在答题卡选择某一题目，就清空list，然后判断map中有没有该页的数据，如果有就直接拿来，没有就再去网络请求。这个处理方式，写法相对来说简单，不需要乱七八糟的判断，也不浪费资源，用户体验也很不错。 总结 以上就是一些思路和要注意的地方。这个Demo断断续续花了好几天时间写出来的。可能我说的比较啰嗦比较细，只是想让需要用到这个分页Demo的同学能理解我是如何实现的。 如果觉得能帮到你，记得给一个star，谢谢。同时如果这个demo有bug或者你们有新想法，欢迎提出来。