开发环境： 开发工具版本号: RC 1.05.2107221 操作系统: win10预装正版 node版本: v14.17.5 npm版本：6.14.14 操作步骤： 1、先创建一个微信小程序haoka，使用默认模板，项目创建成功，模拟器正常显示 Hello World，控制台没有报错。 2、在cmd终端下，进入小程序的项目根目录 E:\source\weixin\developers\haoka 3、执行命令: npm init ，一直按回车键到最后命令执行结束，cmd终端没有任何提示报错信息。 4、执行命令：npm install weui-miniprogram --save，提示以下两条WARN信息： npm WARN haoka@1.0.0 No description npm WARN haoka@1.0.0 No repository field. 5、检查项目根目录，生成一个新的目录 node_modules，package.json ， package-lock.json 6、点击右上角的“详情”->"本地设置"，选择“使用npm模块” 7、选择 “工具”->“构建npm”，弹出窗口，提示：完成构建，耗时133毫秒。 8、模拟器界面和终端都报以下错误信息： [ WXML 文件编译错误] ./miniprogram_npm/weui-miniprogram/slideview/slideview.wxml /_commons/slideview.1ffeeca0.wxs not found from ./miniprogram_npm/weui-miniprogram/slideview/slideview.wxml > 1 | <wxs module="handler" src="/_commons/slideview.1ffeeca0.wxs"/><view class="weui-slideview weui-movable-view {{icon ? 'weui-slideview_icon' : ''}} {{extClass}}" style="width: 100%;height: 100%;"><view bindtransitionend="{{handler.transitionEnd}}" show="{{show}}" change:show="{{handler.showChange}}" rebounce="{{rebounce}}" change:rebounce="{{handler.rebounceChange}}" duration="{{duration}}" change:duration="{{handler.durationChange}}" change:disable="{{handler.disableChange}}" disable="{{disable}}" change:prop="{{handler.sizeReady}}" prop="{{size}}" bindtouchstart="{{handler.touchstart}}" bindtouchmove="{{handler.touchmove}}" bindtouchend="{{handler.touchend}}" class="weui-slideview__left left" style="width:100%;"><slot/></view><view class="weui-slideview__right right"><view class="weui-slideview__buttons" style="height:100%;width:100%;" wx:if="{{buttons && buttons.length}}"><view wx:for="{{buttons}}" wx:key="index" class="btn weui-slideview__btn__wrp {{item.className}} {{item.extClass}}"><view bindtap="{{handler.hideButton}}" data-data="{{item.data}}" data-index="{{index}}" class="weui-slideview__btn"><text wx:if="{{!icon}}">{{item.text}}</text><image class="weui-slideview__btn__icon" wx:else src="{{item.src}}"/></view></view></view></view></view> at files://miniprogram_npm/weui-miniprogram/slideview/slideview.wxml#1(env: Windows,mp,1.05.2107221; lib: 2.19.2) 9、重复上面操作几次，还是一样报错。

小程序实现TabBar创意动画(文末附完整源代码) 小程序日益增多的情况下，UI风格显得越来越重要，在页面中如果能让[代码]TabBar[代码]个性化一点，加一些小交互，用户体验会大大提升。由于小程序对[代码]svg[代码]不太友好，所以我们尽量使用[代码]css[代码]动画进行实现。之前文章小程序开发技巧中提到过[代码]TabBar[代码]自定义方案，感兴趣的可以了解一下。下面就分享一下今天写的几个交互效果，文末也会分享源代码。记得点赞+关注+收藏！ NO.1 这种效果主要使用了[代码]transform[代码]和[代码]opacity[代码]来实现。文字默认隐藏并缩小，点击后[代码]icon[代码]图标[代码]transform[代码]的[代码]y轴[代码]方向上移，同时控制文字的[代码]opacity[代码]。圆形块根据点击的[代码]index[代码]去动态计算[代码]x轴[代码]的偏移位置即可。 [图片] 核心css代码(完整代码见文末)： [代码] .tabbar .item .text{ position: absolute; width: 100%; bottom: 10rpx; text-align: center; font-size: 22rpx; opacity: 0; transition: all .8s; transform: scale(0.8); width: 100%; } .tabbar .item.active .text{ opacity: 1; transform: scale(1); } .tabbar .item.active .icon{ color: #3561f5; transform: translateY(-55rpx); } .tabbar .item .icon{ font-size: 50rpx!important; text-align: center; transition: all .8s; } [代码] NO.2 这个效果用到一个css动画工具库：bouncejs，它可以在线生成css动画，然后复制到项目中使用即可。下方效果采用跳跃式切换，整体看上去非常有活力。使用了[代码]animation[代码]动画。由于css动画代码过多，想看完整代码见文末[代码]github[代码]地址。 [图片] NO.3 下方这个效果还是用bouncejs在线编辑，编辑完成后只需要点击后给相应的元素添加类名即可。 [图片] 结尾 如需源代码可以移步github。 👉欢迎关注+收藏+点赞，感谢支持～