从运维中心发现好几个数据缓存接口错误：         APP-SERVICE-SDK:setStorageSync:fail  该问题无法手动复现BUG，但有好几次用户反馈出现小程序出现错误，估计与该接口有关，因为小程序配置方面信息存储在Storage当中，官方有解答吗

因为项目有多个人在开发,代码比较乱.现在想用eslint来规范下,但是似乎直接开发不支持npm,我看了下eslint的包大该有2M多,我们项目代码也已经有2M多了,还会继续增加.感觉好像不能直接把包放到代码里.我想问一下有什么办法可以来用esLint来规范小程序的开发代码呢

微信小程序iconfont（也适用于网页和其他平台的小程序） 在微信小程序等使用iconfont进阶版，17年的时候就发过一次在微信小程序里使用iconfont的文章 去看看 时隔这么久也掌握了一些这方面的心得，稍微整理了一下。 用微信开发工具好还是用成熟的IDE好？ 刚开始的时候我也是用开发工具写代码，因为刚接触的时候并没有什么特殊的需求，规规矩矩的按照开发文档来，到后面觉得效率太低了，于是改用了sublime text webstorm来做小程序开发，开发工具仅仅用来创建项目和预览。久而久之就已经完全弃用开发工具写代码了，并不是说开发工具不行而是说结合起来能给更高效的开发项目。 用webstorm来开发小程序 为什么选择ws而不用vscode，原因就是我用习惯了不想在去更换了。 讲重点： 项目目录结构 安装Less来编写css 利用ws编辑器来自动编译Less生成wxss 快速将iconfont引入项目 简单的一个例子 项目目录结构 [代码]iconfont -app 小程序项目目录 --pages 页面目录 ---index ----index.wxml ----index.less ----index.ts ----index.json ----index.js (自动编译) ----index.wxss (自动编译) --styles 样式目录 ---global.less 全局公共样式 ---global.wxss (自动斌阿姨) ---iconfont.less ---iconfont.wxss (自动编译) -app.ts -app.js (自动编译) -app.less -app.wxss (自动编译) app.json project.config.json 项目配置文件 sitemap.json 搜索引擎相关配置 -node_modules [代码] 安装Less 首先确保自己电脑是否安装了node.js，关于怎么安装node.js请自行谷歌或者百度。 全局或者单项目安装less [代码]npm install -g less [代码] [代码]webstorm[代码]配置[代码]less[代码]自动编译 打开ws设置找到[代码]File Watchers[代码] [图片] 添加一个less类型的监视器 [图片] 修改默认配置，按下图设置 [图片] 可以根据自己的习惯来设置，没有规定一定是这样，这套设置是当我less文件有改动我保存时会自动编译输出到wxss文件，这样的好处就是不会有改动就编译，而是保存的时候需要编译了才编译。 新建[代码]iconfont[代码]项目 打开阿里巴巴的图标库点我 新建一个项目，然后添加或者上传一些icon图标，生成Font Class的css链接，然后在styles目录下的[代码]iconfont.less[代码]文件里引入刚刚创建的链接，[代码]iconfont.wxss[代码]就会自动生成对应的代码，这样就不用每次icon有改变就得去打开创建的链接然后复制粘贴到iconfont.wxss了。 [图片] [图片] [图片] [图片] 举个栗子 [代码]// index.less文件中引入global.less跟iconfont.wxss // 至于为什么global引入的是less而iconfont引入的却是wxss // 因为less是css的预处理语言，所以最终还是会被打包编译成css // 所以我们global要引入的并不是要打包编译后的css代码 // 而iconfont因为我们在less里面引入了外链后被打包编译了需要的css @import (reference) "../../styles/global"; @import (css) "../../styles/iconfont.wxss"; [代码] [代码]// 在view里面直接使用icon <view class="icon iconaixin"></view> // 循序遍历所有的icon <view class="container"> <view wx:for="{{ iconList }}" wx:key="item" data-index="{{ index }}" class="item {{ index === iconIndex ? 'active' : '' }}" bind:tap="click"> <view class="icon icon{{ item.font_class }}"></view> <view class="name">{{ item.name }}</view> </view> </view> [代码] 效果图 [图片] 大致使用步骤就是，通过ws创建文件的监视器，自动编译打包，大大的提高了开发效率。 我less中使用rpx的时候用的是unit(10, rpx)，当然你也可以直接用10rpx，但是IDE可能会识别不了，编译后或者格式化后会出现10 rpx这种情况，这样开发工具肯定就会报错了，解决办法就是在创建一个监视器，保存打包的时候，把10 rpx替换成10rpx即可，js部分是用ts编写，如果不懂可以直接看编译后的js，差别不会很大！如果也想ts修改代码，请执行[代码]npm install[代码]把相关依赖包下载就行了。 [图片] over 如果有疑问或者更好建议欢迎找我交流！ 微信小程序代码片段 github

[图片] 简介 ColorUI是一个Css类的UI组件库！不是一个Js框架。相比于同类小程序组件库，ColorUI更注重于视觉交互！ 浏览GitHub：https://github.com/weilanwl/ColorUI [图片] 如何使用？ 先下载源码包 → Github 引入到我的小程序 将 /demo/ 下的 colorui.wxss 和 icon.wxss 复制到小程序的根目录下 在 app.wxss 引入两个文件 [代码]@import "icon.wxss"; @import "colorui.wxss"; [代码] 使用模板全新开发 复制 /template/ 文件夹并重命名为你的项目，微信开发者工具导入为小程序就可以使用ColorUI了 体验沉浸式导航 [图片] App.js 获取系统参数并写入全局参数。 [代码]//App.js App({ onLaunch: function() { wx.getSystemInfo({ success: e => { this.globalData.StatusBar = e.statusBarHeight; let custom = wx.getMenuButtonBoundingClientRect(); this.globalData.Custom = custom; this.globalData.CustomBar = custom.bottom + custom.top - e.statusBarHeight; } }) } }) [代码] Page.js 页面配置获取全局参数。 [代码]//Page.js const app = getApp() Page({ data: { StatusBar: app.globalData.StatusBar, CustomBar: app.globalData.CustomBar, Custom: app.globalData.Custom } }) [代码] Page.wxml 页面构造导航。更多导航样式请下载Demo查阅 操作条组件。 [代码]<view class="cu-custom" style="height:{{CustomBar}}px;"> <view class="cu-bar fixed bg-gradual-pink" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;"> <navigator class='action border-custom' open-type="navigateBack" delta="1" hover-class="none" style='width:{{Custom.width}}px;height:{{Custom.height}}px;margin-left:calc(750rpx - {{Custom.right}}px)'> <text class='icon-back'></text> <text class='icon-homefill'></text> </navigator> <view class='content' style='top:{{StatusBar}}px;'>操作条</view> </view> </view> [代码] 自定义系统Tabbar [图片] 按照官方 自定义 tabBar 配置好Tabbar (开发工具和版本库请使用最新版)。 使用ColorUI配置Tabbar只需要更改 Wxml 页的内容即可。 更多Tabbar样式请下载Demo查阅 操作条组件。 /custom-tab-bar/index.wxml [代码] <view class="cu-bar tabbar bg-white shadow"> <view class="action" wx:for="{{list}}" wx:key="index" data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="switchTab"> <view class='icon-cu-image'> <image src='{{selected === index ? item.selectedIconPath : item.iconPath}}' class='{{selected === index ? "animation" : "animation"}}'></image> </view> <view class='{{selected === index ? "text-green" : "text-gray"}}'>{{item.text}}</view> </view> </view> [代码] 作者叨叨 ColorUI是一个高度自定义的Css样式库，包含了开发常用的元素和组件，元素组件之间也能相互嵌套使用。我也会不定期更新一些扩展到源码。 其实大家都在催我写文档，但这个库源码就在这，所见即所得，粘贴复制就可以得到你想要的页面。当然，文档我还是要写的，也希望大家多多提意见。 现在前端的开发方向基本都是奔着Js方向的，布局和样式大家讨论的有点少。以后我会在开发者社区多聊一聊关于开发中的布局和样式。 [图片] 感谢阅读。

https://developers.weixin.qq.com/s/agUBgEmm7Cad 附上一张截图 [图片] ## 框架目录   assets  资源文件目录   components 框架自带组件   pages  页面目录   plugin 扩展组件目录      --js 扩展js组件      --pages 组件页面      --组件文件夹   themes  框架样式       --base.wxss 主题配置      --generic.wxss 公共引用   utils   框架主体      --main.js  框架主程序 需要在 app.js 引用  import './utils/main.js'      --config.js  配置文件       --httpconfig.js 公共请求配置      --reader.js 分页读取器  wx.Reader('请求api',take)      --util.js 辅助类 通过 global 直接调用      --wx.js wx.扩展类  wx.post 请求 wx.upload 上传  wx.link 跳转       --extend  框架扩展目录   ## 为什么UI组件那么少？    1：时间少    2：设计图与UI框架差距太大，所以更是一种累赘    3：没有3 ##完全开源，代码不压缩，就是注释实在懒得写

wxbm_logger.js [代码]/** *ERROR level指出虽然发生错误事件，但仍然不影响系统的继续运行。 *WARN level表明会出现潜在错误的情形。 *INFO level指普通消息。 *DEBUG level指所有消息。 */ const machine = "real";//real 真机，simulator 模拟器 const loggerlevel = "INFO"; //日志打印级别 ERROR、WARN、INFO、DEBUG function getLogger(inamespace) { const level = loggerlevel.toUpperCase(); const namespace = inamespace == undefined || inamespace == null ? '' : inamespace; this.error = function() { if (level == "ERROR" || level == "DEBUG") { consoleTemplate("green", "red", "error", namespace,machine, arguments); } } this.warn = function() { if (level == "WARN" || level == "DEBUG") { consoleTemplate("green", "yellow", "warn", namespace, machine, arguments); } } this.info = function() { if (level == "INFO" || level == "DEBUG") { consoleTemplate("green", "#4a88ee", "info", namespace, machine, arguments); } } this.debug = function() { if (level == "DEBUG") { consoleTemplate("green", "grey", "debug", namespace, machine, arguments); } } } function consoleTemplate() { console.log( "[%c%s%c] Line%i %c%s%c %s:", "color:" + arguments[0], loggerformatTime(new Date()), "color:black", arguments[5].length, "color:" + arguments[1], arguments[2], "color:black", arguments[3] ); for (let li = 0; li < arguments[5].length; li++) { consolePrint((li + 1), arguments[5][li]); } if (arguments[4].toUpperCase() =="SIMULATOR"){ console.groupCollapsed("追踪函数的调用轨迹:"); console.trace(); console.groupEnd(); } } // 运算数为数字 typeof (x) = "number" // 字符串 typeof (x) = "string" // 布尔值 typeof (x) = "boolean" // 对象, 数组和null typeof (x) = "object" // 函数 typeof (x) = "function" function consolePrint(li, obj) { const type = typeof obj; switch (type) { case "number": console.log("L" + li + " --->%s", obj); break; case "string": console.log("L" + li + " --->%s", obj); break; case "boolean": console.log("L" + li + " --->%s", obj); break; case "object": if (Object.prototype.toString.call(obj) == '[object Array]') { console.log("L" + li + " --->[" + obj[0] + "]:%o", obj[1]); } else { console.log("L" + li + " --->%o", obj); } break; case "function": console.log("L" + li + " --->%s", "function"); break; case "undefined": console.log("L" + li + " --->%s", "undefined"); break; default: console.log("L" + li + " --->%s", "default"); } } const formatNumber = n => { n = n.toString() return n[1] ? n : '0' + n } //获取一个时间的年月日时分秒毫秒 const loggerformatTime = date => { const year = date.getFullYear() const month = date.getMonth() + 1 const day = date.getDate() const hour = date.getHours() const minute = date.getMinutes() const second = date.getSeconds() const millisecond = date.getMilliseconds() return [year, month, day].map(formatNumber).join('-') + ' ' + [hour, minute, second, millisecond].map(formatNumber).join(':') } module.exports = { GetLogger: getLogger } [代码] 引入方式 [代码]import LOGGER from './wxbm_logger.js'; //注意引入层级路径 const logger = new LOGGER.GetLogger('utils/wxbm_http'); [代码] 使用方式 [代码] logger.error(/*thing*/); logger.warn(/*thing*/); logger.info(/*thing*/); logger.debug(/*thing*/); /*thing*/可以有的参数： 1，2，3，... ... 打印 line1 1 line2 2 line3 3 ... ... ["名称":"小白蛇"] 打印 line1 ["名称"]："小白蛇" 以上补充：不局限于数字和字符串，object类型都行，最终都是console.log打印 [代码] [图片]