微信小程序 – 基于 movable-view 实现拖拽排序 项目基于[代码]colorui[代码]样式组件 ColorUI组件库 (color-ui.com) 1.实现效果 [图片] 2. 设计思路 movable-view 绑定块移动事件的 块[代码]ID[代码] ,块移动的坐标 移动结束后触发[代码]moveEnd[代码]事件，根据[代码]Y[代码]坐标对对象数组进行排序 根据排序结果重置块位置 3.实现代码 代码已经进行了最简化处理 图中效果实现需引入[代码]colorui[代码]的[代码]main.wxss[代码]样式部分。 wxml [代码]<movable-area class="padding text-center bg-grey" style="width:100%;height:500px;" > <movable-view class="radius shadow bg-white" style="width:80%;height:80px;z-index:{{index==moveId?2:1}}" wx:for="{{tabList}}" wx:key="index" x="{{item.x}}" y="{{item.y}}" direction="all" bindchange="moveStatus" bindtouchend='moveEnd' data-moveid="{{index}}"> {{item.name}}</movable-view> </movable-area> [代码] js [代码]var compare = function (obj1, obj2) { var val1 = obj1.y; var val2 = obj2.y; if (val1 < val2) { return -1; } else if (val1 >= val2) { return 1; } else { return 0; } } Page({ /** * 页面的初始数据 */ data: { branchid:'', appdocid:'', tabList:[ { name:'十步杀一人' }, { name:'千里不留行' }, { name:'事了拂衣去' }, { name:'深藏身与名' } ], //移动的是哪个元素块 moveId:null, //最终停止的位置 endX:0, endY:0 }, initMove(){ let tabList = this.data.tabList; var tarr = [] tabList.forEach(function(ele,index){ let obj = ele obj.id = index obj.x = 30 obj.y = 100*index +20 tarr.push(obj) }) console.log(tarr) this.setData({ tabList:tarr }) }, moveEnd(e){ console.log(e) var that = this; that.setData({ ["tabList["+that.data.moveId+"].x"]:that.data.endX, ["tabList["+that.data.moveId+"].y"]:that.data.endY },()=>{ let tabList = this.data.tabList; tabList = tabList.sort(compare); that.setData({ tabList },()=>{ setTimeout(function(){ that.initMove(); },500) }) }) //计算位置 }, moveStatus(e){ // console.log(e) //移动的块ID var moveid = e.currentTarget.dataset.moveid; //最终坐标 let x = e.detail.x let y = e.detail.y this.setData({ moveId:moveid, endX:x, endY:y }) }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { this.initMove(); } }) [代码] 4.参考文档 movable-view | 微信开放文档 (qq.com)

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 图标不显示 最新版本已支持伪元素，低版本可参考 代码片段 实现图标

前言 昨天提交小程序被拒绝了，发现新增了一个深度合成类目，其中包含小程序只要涉及到AI问答，AI绘画，AI换脸都需要补充类目才能提交，所以去了解了一下在这里记录下。 [图片] 资质准备 互联网信息服务算法备案 [图片] 这里分两种情况 一种是你自研的AI大模型需要在「互联网信息服务算法备案系统」选择备案信息进行备案信息登录 [图片] 进行互联网信息服务算法备案，需要填写以下内容进行备案申请 [图片] [图片] [图片] [图片] 还有一种就你用的是别人的AI大模型需要提供合作协议 (协议需含[算法名称] 或[应用产品] 或[备案编号] 相关内容)及算法备案主体的《互联网信息服务算法备案》。 无论是哪一种都还需要一份《安全评估报告》 安全评估报告 进入「全国互联网安全服务管理平台」选择「评估报告登录」 [图片] 注册登陆后选择「提交报告」需填写以下信息： [图片] [图片] [图片] 填写完成后报告生产下载，然后盖章签字后上传，上传成功后会进入「待现场检查」状态。 接下来就是等待，等网警打电话或短信通知你去进行现场检查。现场检查后一周左右出结果。 最后 这个事情一开始我有点郁闷，但是后来想了想也是一件好事情，提高门槛保证内容安全质量，这是对每个用户来说都是需要的。