任何优秀的大软件里面都是一个优秀的小程序。<br> 点完赞，在查看哦 setData 频繁使用setData会造成js阻塞问题，甚至卡顿，崩溃（崩溃没试过哈）；所以我们应该如何用正确的姿势提高性能呢？ 尽量把需要setData的内容放到一起setData，不要出现一个函数多个或者同时使用setData； 更新对象内的某个值，不应该整个对象重新更新，只需要更新对应的值即可，例如<br> [代码]this.setData({'userInfo.headImg': '更新的内容'})[代码]； 如果是列表数据，需要改变某个值变成true，也不应该全部数据更新一遍，只需要更新某一个值即可，例如<br> [代码]this.setData({[`list[${index}].show`]: true})[代码]； 页面不需要渲染的数据，尽量不要写在js里面的data里面，你可以定义一个全局参数都可以或者this.timer等生成一个全局变量； setData单次不能超过1M，超过会导致设置不成功，建议分页数据可以使用二维数组设置，例如 [代码]// 1.通过一个二维数组来存储数据 let feedList = [[array]]; // 2.维护一个页面变量值，加载完一次数据page++ let page = 1 // 3.页面每次滚动到底部，通过数据路径更新数据 onReachBottom:()=>{ fetchNewData().then((newVal)=>{ this.setData({ ['feedList[' + (page - 1) + ']']: newVal, }) } } // 4.最终我们的数据是[[array1],[array2]]这样的格式，然后通过wx:for遍历渲染数据 [代码] relativeToViewport 我们会发现很多时候，列表展示都是图文展示，而图片后端又没有提供缩略图，这会导致浏览器一次请求多张图片会非常消耗http请求,并且浏览器也有请求数量限制，例如chrome浏览器就限制一次性最多6个，严重还会影响我们业务接口请求，这时我们使用[代码]IntersectionObserver[代码]就太美妙了 解决思路 先创建对象实例[代码]wx.createIntersectionObserver()[代码]; 用数据列表遍历监听页面渲染的元素； 条件判断，动态设置状态显示图片，如果返回滚动则过滤不需要在setData，减轻js工作任务； js代码 [代码] data: { list: [ // 测试数据自己随便造 {id: 0, url: 'https://devapicard.itop123.com/files/img/20201213/20201213141209123634220.png'}, {id: 1, url: 'https://devapicard.itop123.com/files/img/20201213/20201213141209123634220.png'}, {id: 2, url: 'https://devapicard.itop123.com/files/img/20201213/20201213141209123634220.png'}, ] }, onReady() { let list = this.data.list; list.forEach((item,index)=>{ // 遍历监听元素在页面的位置 wx.createIntersectionObserver().relativeToViewport({bottom: 0}).observe(`.img-${index}`,res=>{ if (res.intersectionRatio > 0 && !list[index].show){ // intersectionRatio值大于0，说明元素出现在视图中了 // console.log(item, 'list', res) this.setData({ [`list[${index}].show`]: true }) } }) }) }, [代码] wxml代码 [代码] <view> <block wx:for="{{list}}" mode="aspectFill" wx:key="index"> <view class="test-img img-{{index}}"> <image class="image" wx:if="{{item.show}}" src="{{item.url}}"></image> </view> </block> </view> [代码] wxss代码 [代码].test-img{ width: 600rpx; height: 400rpx; margin-bottom: 20rpx; overflow: hidden; } .image{ width: 100%; } [代码] onPageScroll 这个监听页面滚动事件，输出顶部滚出页面多少距离，单位是px;这个事件非必要时不要写也不要输出内容，这样会很消耗性能，如果必须要使用到，我们要学会写节流或者防抖事件，减少过快的去setData；下面代码是网上复制，结合自己业务改造下即可 [代码]// 防抖 function debounce(fn, wait) {     var timeout = null;     return function() {         if(timeout !== null)  clearTimeout(timeout);         timeout = setTimeout(fn, wait);     } } // 处理函数 function handle() {     console.log(Math.random()); } // 滚动事件 window.addEventListener('scroll', debounce(handle, 1000)); // 节流throttle代码（定时器）： var throttle = function(func, delay) {             var timer = null;             return function() {                 var context = this;               var args = arguments;                 if (!timer) {                     timer = setTimeout(function() {                         func.apply(context, args);                         timer = null;                     }, delay);                 }             }         }         function handle() {             console.log(Math.random());         }         window.addEventListener('scroll', throttle(handle, 1000)); [代码] 代码分包 代码肯定是越写越多，需求也是越来越多的，小程序单个分包最大只能是2M，这就不能让我们的业务代码都写在主包，这会导致我们无法提交代码，并且也会导致我们打开小程序会很慢，体验很差。 为了解决这个问题，微信提供了小程序总共代码包支持最大16M，还支持我们分包功能，这样我们就可以开发更强大的功能，分包又分为普通分包和独立分包，他们又是什么关系，有何不同？ 总的不同是，主包不能调用任何分包的东西，例如js，组件等，但是分包或者独立分包是可以调用或者使用主包的任何东西 分包：分包就是一个可以节省主包代码的一个普通分包，启动分包页面，会把主包下载，普通分包可以使用主包的 js 文件、template、wxss、自定义组件、插件等 独立分包：独立分包不依赖主包即可运行，不需要下载主包，可以很大程度上提升分包页面的启动速度，固并不能使用主包的 js,组件，wxss，插件等 预加载：分包后，如果想打开主包后，跳转不出现加载模块中的等待提示，可以使用预加载，这样就可以做到无缝跳转，增强了用户体验，跳转就像主包跳转主包页面一样顺滑。更多分包讲解请查看微信文档 [代码]{ "pages": [ "pages/index", "pages/logs" ], "subpackages": [ { "root": "moduleA", // 分包 "pages": [ "pages/rabbit", "pages/squirrel" ] }, { "root": "moduleB", // 独立分包 "pages": [ "pages/pear", "pages/pineapple" ], "independent": true // 独立分包的标志 } ], "preloadRule": { // 预加载写法 "pages/index": { "network": "all", "packages": ["moduleA"] // 需要预加载的分包 }, "pages/logs": { "packages": ["moduleB"] // 需要预加载的分包 } } } [代码] 结束 本次写作先到这里，更多丰富好用的内容，请等待下一期~ 都看完了，别忘了给个赞再走~，创作不容易，谢谢哦 本文与掘金号文章同步，欢迎查阅掘金对应的文章

我们永远没有资格说放弃,因为这是属于我们的年华,应该开出耀眼的繁花。 这里主要讲解两点使用方式 wxs --> 数据处理使用 wxs --> 拖拽使用 wxs介绍 1.先看看官方如何介绍的 ，如下 点我可以查看更多官方文档地址 WXS 不依赖于运行时的基础库版本，可以在所有版本的小程序中运行。 WXS 与 JavaScript 是不同的语言，有自己的语法，并不和 JavaScript 一致。 WXS 的运行环境和其他 JavaScript 代码是隔离的，WXS 中不能调用其他 JavaScript 文件中定义的函数，也不能调用小程序提供的API。 WXS 函数不能作为组件的事件回调。 由于运行环境的差异，在 iOS 设备上小程序内的 WXS 会比 JavaScript 代码快 2 ~ 20 倍。在 android 设备上二者运行效率无差异。 总的来说，我主要看中它快和方便 （有种在wxml写函数的感觉），并且处理函数内容后渲染不需要去调用setData，可以节省在请求数据返回后写大量的逻辑函数或者遍历方法去处理事务，所以我才拿出来讲解。 wxs数据处理使用 使用我习惯现在utils文件夹里创建一个common.wxs，然后在使用的wxml引入该文件。具体使用也很简单，如下 在你定义的common.wxs文件里，写你需要处理的函数，然后使用export导出 [代码] var getMax = function(array) { var max = undefined; for (var i = 0; i < array.length; ++i) { max = max === undefined ? array[i] : (max >= array[i] ? max : array[i]); } return max; } module.exports = { getMax: getMax }; [代码] 在.wxml文件需要的地方引入该.wxs文件，其中<wxs>标签包含2个重要属性，[代码]module[代码]和[代码]src[代码]<br> module表示你要导出wxs的方法集合，在wxml里面可以使用该方法名去使用具体的函数<br> src表示你.wxs路径位置引入，代码如下 [代码]<wxs module="common" src="../../utils/common.wxs"></wxs> <view> <text>{{common.getMax(arrNumber)}}</text> </view> [代码] 上面代码里[代码]arrNumber[代码]是你页面.js文件里面定义的数据 [代码]data: { arrNumber: [1,2,9,2,1,5,7] } [代码] 就是如此简单，你已经学会了使用wxs处理数据了，接下来我们来点难的，使用wxs做一个可以随便拖动又不影响小程序性能的手势拖拽事件 wxs拖拽使用 你是否还在使用setData控制元素？为什么不能频繁使用setData，点我查看详情然后通过输出手势坐标来移动元素具体位置？如果是建议你该换个方法了，推荐使用wxs，让你小程序性能上一个档次。 解决思路如下： 我们先在页面的.wxml文件书写初始化的样式内容； 给[代码]view[代码]标签绑定手势事件，其中[代码]touchmove[代码]我使用了阻止冒泡事件绑定是为了防止在苹果机中，元素移动会带着屏幕一起移动，导致滑动手势突然中断不流畅， [代码]clickLive[代码]事件我也用了阻止冒泡事件是为了触发子元素的事件防止点击被父元素拦截而使用，代码如下： [代码]<wxs module="comm" src="../../utils/common.wxs"></wxs> <view class="enterLive liveMove" data-maxWidth="{{windowWidth}}" data-maxHeight="{{windowHeight}}" bind:touchstart="{{comm.liveTouchmove}}" catch:touchmove="{{comm.liveTouchmove}}" bind:touchend="{{comm.liveTouchmove}}"> <view class="live-block" catch:tap="{{comm.clickLive}}"> <image class="liveEnter-img" mode="aspectFit" src="https://img0.baidu.com/it/u=401284325,23907343&fm=26&fmt=auto&gp=0.jpg" /> </view> </view> [代码] 我们发现上面的代码有[代码]windowWidth,windowHeight[代码]两个参数，这是在页面的.js中，是计算当前页面的宽高，用于防止滑块滑出视野范围内，导致无法滑动回来，其中下面代码[代码]getApp().globalData.systemInfo[代码]是读取全局文件[代码]app.js[代码]里面拿值的，那里我有获取系统参数设为全局保存， 而[代码]bindEnter[代码]事件是用于待会在[代码].wxs[代码]里面可以触发.js文件内函数示例 [代码]data: { windowWidth: 375, windowHeight: 667, }, ready: function() { let systemInfo = getApp().globalData.systemInfo; let width = 150 * systemInfo.windowWidth / 750; let height = 150 * systemInfo.windowWidth / 750; if (systemInfo) { this.setData({ windowWidth: systemInfo.windowWidth - parseInt(width), windowHeight: systemInfo.windowHeight - parseInt(height) }) } }, bindEnter(e) { wx.showToast({ title: '你点击到我啦~', icon: 'none' }) }, [代码] 接下来我们将书写.wxs文件，处理手势输出内容，使页面的滑块可以平静的滑动； 认真看的同学会发现页面的[代码]touchstart,touchmove,touchend[代码]事件我都是绑定同一个函数[代码]liveTouchmove[代码]这里是我想节约函数名称，统一使用一个函数，然后在输出的回调里面判断当前是什么手势 这里的滑块滑动逻辑是：当输出是touchstart手势时，我们记住当前滑块的[代码]starLeft,starTop[代码]值及坐标[代码]starX,starY[代码]值 当我们判断当前是[代码]touchmove[代码]手势时，我们就用当前的x,y坐标值减去开始starX和starY坐标值，得到一个差值[代码]diffX,diffY[代码] 然后我们使用这个[代码]diffX,diffY[代码]差值分别加上滑块刚开始的[代码]starLeft,starTop[代码]值，即可得到我们滑块当前移动的位置 最后我们通过条件判断当前是否超出屏幕即可，我这里做多一步，就是滑块永远停留左右两边，所以要多算一次滑块停留是偏离那一边，在通过[代码]ownerInstance.selectComponent('.liveMove').setStyle[代码]可以给页面元素添加行内样式。 滑动滑动逻辑已经讲完了，就是这么简单 如果你想通过[代码].wxs[代码]函数触发[代码].js[代码]文件内的函数，这里有提供[代码]ownerInstance.callMethod("bindEnter")[代码]方法给你触发.js里面的函数，其中[代码]ownerInstance[代码]是绑定页面函数的第二个回调参数，[代码]callMethod[代码]是官方提供的一个方法，[代码]bindEnter[代码]是.js文件里自己命名的函数方法名称，整体代码如下：更多wxs内置方法，请查看官方文档 [代码]/** * 滑块计算位置 */ var starLeft = 0; var starTop = 0; var starX = 0; var starY = 0; function liveTouchmove(event, ownerInstance) { // console.log(JSON.stringify(event)) // console.log(JSON.stringify(ownerInstance)) var left = 0, top = 0; var diffX = 0, diffY = 0; if(event.type === 'touchstart') { starLeft = event.currentTarget.offsetLeft; starTop = event.currentTarget.offsetTop; starX = event.changedTouches[0].clientX; starY = event.changedTouches[0].clientY; left = starLeft; top = starTop; } else { diffX = event.changedTouches[0].clientX - starX; diffY = event.changedTouches[0].clientY - starY; left = starLeft + diffX; top = starTop + diffY; var maxWidth = event.currentTarget.dataset.maxwidth; var maxHeight = event.currentTarget.dataset.maxheight; if (left > maxWidth) { left = maxWidth; } if (top > maxHeight) { top = maxHeight; } if (left <= 0) { left = 0; } if (top <= 0) { top = 0; } } if (event.type === 'touchend') { if (maxWidth / 2 < left) { left = "calc(100% - 3% - 152rpx)"; } if (maxWidth / 2 > left) { left = '3%'; } } else { left = left + 'px'; } var instance = ownerInstance.selectComponent('.liveMove'); // 返回组件的实例 instance.setStyle({ left: left, top: top +'px', }); } /** * 点击直播入口 * @param */ function clickLive (event, ownerInstance) { ownerInstance.callMethod("bindEnter"); } module.exports = { liveTouchmove: liveTouchmove, clickLive: clickLive, }; [代码] 总结 wxs确实可以解决我们一些性能问题，和wxml函数调用方便，但是我们也要注意几个问题 目前还不支持原生组件的事件、input和textarea组件的 bindinput 事件 1.02.1901170及以后版本的开发者工具上支持交互动画，最低版本基础库是2.4.4 目前在WXS函数里面仅支持console.log方式打日志定位问题，注意连续的重复日志会被过滤掉。 wxs有自己的语法，我理解为不支持ES6及以上语法更多wxs语法可以查看官方文档 以上内容，包括之前写的文章内容，最终会上传到我的gitee里面，请留意。 文章创作不易，喜欢的记得点赞 本文同步掘金号文章 喜欢的记得去点个赞哦

本文适合普通老百姓查看，有错请指出 思路 1.先创建一个自定义组件文件 [图片] 2.把基本wxml及wxss文件写好 3.把返回的箭头点击区域弄大点方便点击 4.把标题部分固定宽度，如果超出宽度省略号显示 5.在js里面调用微信提供的api[代码]wx.getMenuButtonBoundingClientRect()[代码]获取胶囊大小及位置 6.上一步，得到的位置动态去设置样式，使用[代码]style[代码]设置样式 7.如果你有页面原生组件建议使用[代码]cover-view[代码]，但是使用这个标签没有伪类，所有不能使用伪类写箭头样式 8.我这里使用胶囊底部[代码]button[代码]为整体高度，所有需要加上[代码]6px[代码]这样会更美观点，不然会贴边 效果图如下及代码部分请继续阅读： [图片] [代码]<view class="custom_header" style="height:{{barHeight + 6}}px;"> <view class="arrow" style="height:{{titleHeight}}px;top:{{top}}px;"></view> <view class="custom_header_title" style="height:{{titleHeight}}px;line-height:{{titleHeight}}px;top:{{top}}px;">访客详情</view> </view> [代码] [代码]data: { barHeight: 56, titleHeight: 32, top: 24 }, methods: { init() { // 右边胶囊大小高度 let getMenuButton = wx.getMenuButtonBoundingClientRect(); console.log(getMenuButton, 'getMenuButton') this.setData({ barHeight: getMenuButton.bottom, titleHeight: getMenuButton.height, top: getMenuButton.top }); } }, lifetimes: { // 生命周期函数，可以为函数，或一个在methods段中定义的方法名 attached: function () {this.init();}, moved: function () { }, detached: function () { }, }, [代码] [代码].custom_header { position: fixed; width: 100%; top: 0; left: 0; background-color: #ccc; z-index: 10000; } .custom_header .arrow { position: absolute; width: 80rpx; height: 64rpx; margin-left: 0; } .custom_header .arrow::before { content: ""; position: absolute; left: 25rpx; top: 50%; width: 22rpx; height: 22rpx; border-top: 1px solid #ffffff; border-right: 1px solid #ffffff; -webkit-transform: translate(0, -50%) rotate(-135deg); -moz-transform: translate(0, -50%) rotate(-135deg); transform: translate(0, -50%) rotate(-135deg); } .custom_header .custom_header_title { position: absolute; left: 0; right: 0; margin: auto; width: 420rpx; font-size: 34rpx; color: #FFFFFF; text-align: center; font-weight: bold; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } [代码] 如有疑问，请留意，有应必回 有用记得点赞哈，谢谢

我们会发现，如果不使用任何预处理语言，我们写代码会一连串很长又乱或者写着写着会很难一眼找到你想要的类名称，所以我们使用了预处理语言后，会提高我们开发效率和易维护代码，以下内容就是教你如何使用gulp处理scss预处理语言。内容很精彩千万别走开，不仅仅可以在小程序里面使用，还可以在其它地方使用。 安装gulp 全局安装gulp [代码]npm install --global gulp-cli[代码] 在项目目录下创建 package.json 文件 [代码]npm init[代码] 安装 gulp，作为开发时依赖项 安装gulp依赖 [代码]npm install --save-dev gulp[代码] 安装修改文件名依赖 [代码]npm install --save-dev gulp-rename[代码] 安装sass依赖 [代码]npm install sass gulp-sass --save-dev[代码] 安装no-sass,因为gulp-sass需要 [代码]npm install --save-dev node-sass[代码] 最后一步，终端输入gulp即可跑起?，好像缺少了必要配置文件，所有你是跑不起的，继续往下看哈 配置文件 在项目目录下，我们先创建一个文件叫[代码]gulpfile.js[代码]，配置内容如下：更多gulp配置解说可以查看官方文档 [代码]const gulp = require('gulp'); const sass = require('gulp-sass')(require('sass')); const rename = require('gulp-rename'); const { src, dest, watch } = gulp; const scssFiles = ['**/*.scss', '!node_modules/**']; const compileSCSS = function() { // 所有文件夹下得scss文件,排除components目录,排除node_modules目录 return src(scssFiles) .pipe(sass().on('error', sass.logError)) .pipe(rename({extname: '.wxss'})) .pipe(dest('./', {overwrite: true})); // 编译出来的文件放回scss文件所在目录 }; module.exports.default = function() { watch(scssFiles, compileSCSS) }; [代码] 按照上面安装和配置完成即可得到你想要的gulp把.scss打包成.wxss，这里有写热更新保存文件即可打包输出.wxss文件，然后去当前项目终端输入gulp，一个简单的打包工具完成了~ 小程序上传代码过滤 *.scss文件，避免我们小程序包过大 我们要找到文件[代码]project.config.js[代码]文件，然后在[代码]packOptions[代码]下的一个属性叫[代码]ignore[代码]写正则去过滤我们不需要的文件，减少小程序上传包的大小，例如下面简单示例： [代码]"packOptions": { "ignore": [ { "type": "regexp", "value": "\\.scss$" }, { "type": "file", "value": "package-lock.json" }, { "type": "file", "value": "gulpfile.js" } ] } [代码] 可能运行时报错及解决方法 如果你是安装依赖[代码]"gulp-sass": "^4.0.0"[代码]，你的配置文件[代码]gulpfile.js[代码]的引入模块自定义变量sass可以写成[代码]const sass = require('gulp-sass')[代码] 但是如果你安装依赖[代码]"gulp-sass": "^5.0.0"[代码]及以上我们配置文件[代码]gulpfile.js[代码]的引入模块自定义变量sass必须这样写[代码]const sass = require('gulp-sass')(require('sass'));[代码],否者会报错，因为gulp sass 5没有默认的sass编译器，下面是错误提示： [代码]gulp-sass 5 does not have a default Sass compiler; please set one yourself. Both the `sass` and `node-sass` packages are permitted. [代码] 结束语 如果看完还不会，可以留言哦，项目会推送到gitee欢迎查看或者start~ 如果想看更多小程序内容，也可以去我的掘金号查看查看，本文也会同步过去 有进步，感觉有用记得点个赞哦