UI组件库合集，大家有遇到好的组件库，欢迎留言评论然后加入到文档里。 第一款： 官方WeUI组件库，地址 https://developers.weixin.qq.com/miniprogram/dev/extended/weui/ 预览码： [图片] 第二款： ColorUI：地址 https://github.com/weilanwl/ColorUI 预览码：   [图片] 第三款： vantUI（又名：ZanUI）：地址 https://youzan.github.io/vant-weapp/#/intro 预览码： [图片] 第四款： MinUI： 地址 https://meili.github.io/min/docs/minui/index.html 预览码： [图片] 第五款： iview-weapp：地址 https://weapp.iviewui.com/docs/guide/start 预览码： [图片] 第六款： WXRUI：暂无地址 预览码： [图片] 第七款： WuxUI：地址https://www.wuxui.com/#/introduce 预览码： [图片] 第八款： WussUI：地址 https://phonycode.github.io/wuss-weapp/quickstart.html 预览码： [图片] 第九款： TouchUI：地址 https://github.com/uileader/touchwx 预览码: [图片] 第十款： Hello UniApp： 地址 https://m3w.cn/uniapp 预览码： [图片] 第十一款： TaroUI：地址 https://taro-ui.jd.com/#/docs/introduction 预览码： [图片] 第十二款： Thor UI： 地址 https://thorui.cn/doc/ 预览码： [图片] 第十三款： GUI：https://github.com/Gensp/GUI 预览码： [图片] 第十四款： QyUI：暂无地址 预览码： [图片] 第十五款： WxaUI：暂无地址 预览码： [图片] 第十六款： kaiUI： github地址 https://github.com/Chaunjie/kai-ui 组件库文档：https://chaunjie.github.io/kui/dist/#/start 预览码： [图片] 第十七款： YsUI：暂无地址 预览码： [图片] 第十八款： BeeUI：git地址 http://ued.local.17173.com/gitlab/wxc/beeui.git 预览码： [图片] 第十九款： AntUI： 暂无地址 预览码： [图片] 第二十款： BleuUI：暂无地址 预览码： [图片] 第二十一款： uniydUI：暂无地址 预览码： [图片] 第二十二款： RovingUI：暂无地址 预览码： [图片] 第二十三款： DojayUI：暂无地址 预览码： [图片] 第二十四款： SkyUI：暂无地址 预览码： [图片] 第二十五款： YuUI：暂无地址 预览码： [图片] 第二十六款： wePyUI：暂无地址 预览码： [图片] 第二十七款： WXDUI：暂无地址 预览码： [图片] 第二十八款： XviewUI：暂无地址 预览码： [图片] 第二十九款： MinaUI：暂无地址 预览码： [图片] 第三十款： InyUI：暂无地址 预览码： [图片] 第三十一款： easyUI：地址 https://github.com/qq865738120/easyUI 预览码: [图片] 第三十二款 Kbone-UI： 地址 https://wechat-miniprogram.github.io/kboneui/ui/#/ 暂无预览码 第三十三款 VtuUi： 地址 https://github.com/jisida/VtuWeapp 预览码： [图片] 第三十四款 Lin-UI 地址：http://doc.mini.talelin.com/ 预览码： [图片] 第三十五款 GraceUI 地址： http://grace.hcoder.net/ 这个是收费的哦～ 预览码： [图片] 第三十六款 anna-remax-ui npm：https://www.npmjs.com/package/anna-remax-ui/v/1.0.12 anna-remax-ui 地址： https://annasearl.github.io/anna-remax-ui/components/general/button 预览码 [图片] 第三十七款 Olympus UI 地址：暂无 网易严选出品。 预览码 [图片] 第三十八款 AiYunXiaoUI 地址暂无 预览码 [图片] 第三十九款 visionUI npm：https://www.npmjs.com/package/vision-ui 预览码： [图片] 第四十款 AnimaUI(灵动UI) 地址：https://github.com/AnimaUI/wechat-miniprogram 预览码： [图片] 第四十一款 uView 地址：http://uviewui.com/components/quickstart.html 预览码： [图片] 第四十二款 firstUI 地址：https://www.firstui.cn/ 预览码： [图片]

外卖券儿：gh_3c5e3fadb2f3，wxa7946c88e51724e1 外卖探探：gh_6f5e11a547b9，wx19ff73bc91f2c5f0（关联的十个小程序都涉嫌恶意营销） 外卖果果：gh_974a2a99df6e，wxd4643285411b6b2c 券老弟：gh_819517a44f1e，wx6877c80a42702eb3 外卖分销宝：gh_401debbe7d71，wx36592e2ebc5c49db 外卖超省钱：gh_a9e63c9d4531，wxcd0b4b881349caa9 外卖金库：gh_68f14eec067c，wxa127dcc14db86085 外卖助手：gh_be9a3ec90ed1，wxece62eaecee82e45 外卖省赚平台：gh_ee1df53644c9，wx911efd41852f0d64（关联的5个小程序都涉嫌恶意营销） 外卖生活vip：gh_028c00d3593d，wx15c8fc164ebe27fb 外卖组织：gh_d85dfc97114d，wxe7f31da4e9bc039f 外卖省钱酱：gh_52899da77baa，wx441d21e16db44ffc 外卖怎么省：gh_f2360c8f8771，wx8b376ae81b972ffd 以上小程序都存在无主营业务，仅提供电商类小程序商品价格详情展示并导流至相关小程序进行购买等纯导流、无实质内容的运营内容 越靠前的是违规越严重的

一、初衷在公众号达到一定的关注量后，就有不少小伙伴问我，什么时候可以做个考研刷题小程序啊？这样我们就可以随时随地地刷题了，并且利用好零碎时间进行查漏补缺。 于是，快速制作了刷题小程序v1.0版本上线，然后在公众号菜单栏上添加了一个子菜单，作为题库小程序的入口。 题库都是考研培训机构的习题以及历年真题，整理题库真的非常耗时！目前，它的内容主要以历年真题为主，但是从后台数据看访问量还是非常高的，说明大家对这一块还是有一定的刚需。 [图片] 二、功能每个人都可以注册5个小程序账号。技术栈是采用小程序云开发，这样就不用自己另外再搭后端了，可以快速上手开发，实现自己的想法。再小的个体，也有自己的小程序。 考研题库小程序主要实现以下功能： 1. 专项练习 2. 真题模拟 3. 答题记录页 4. 历史成绩 5. 答题排行榜 6. 首页轮播图 7. 微信授权登录 8. 联系客服 9. 小程序使用指引 [图片] 三、开发这里简单地说明一下我的题库小程序是怎么用云开发的吧。 1.首先需要开通云开发服务，然后创建环境，接着创建集合，以创建题库集合为例。我创建一个题库集合，然后录入题目，都是在云开发控制台可以操作的。 [图片] [图片] 2.给题库表添加记录，也就是录入题目。有两种模式，默认模式和JSON模式。我这里使用默认模式录题。 [图片] 3.题目都录入或者导入之后，还要配置数据库权限，这样小程序前端就可以直接调用了。 前端如何调用云数据库： // 显示 loading 提示框 wx.showLoading({ title: '拼命加载中' }); // 数据库集合的聚合操作实例 tkQuestion .aggregate() .match({ //类似于where，对记录进行筛选 category }) .sample({ size: 20 }) .end() .then(res => { // 获取集合数据，或获取根据查询条件筛选后的集合数据。 console.log('[云数据库] [tkQuestion] 查询成功') console.log(res.list) let data = res.list || []; // 将数据从逻辑层发送到视图层，通俗的说，也就是更新数据到页面展示 this.setData({ category, questionList:data, index: 0, }); // 隐藏 loading 提示框 wx.hideLoading(); }) [图片] 四、上线小程序的官网技术文档还是很详细的，随着时间的推移，慢慢地开发完了，但是总感觉还有不满意的地方。只能慢慢打磨了。 赶紧先上传代码去提交审核，微信官方的审核还是很快的，一天不到就给我通过了。然后，我就发布到线上了。大家都能够来刷题啦。好累啊，1.0版本的考研刷题小程序，终于可以投入使用了。 无论是排队、还是等车或者坐车，有效地利用好零碎时间进行刷题，效果真的非常好。希望大家都能顺利上岸，一战成硕。 五、计划考研题库小程序的功能将会越来越完善，题库也将会越来越丰富，主要是收录习题和真题。意外的收获是，竟然有一些培训机构找我帮忙。他们想着做一个刷题小程序，这样安卓用户和ios用户都可以用了，受众面就广了。 后续计划会将项目源码分享一下。

如何用CSS实现微信朋友圈图片九宫格 [代码]CSS[代码] 实现九宫格其实很简单，关键在于区分仅有一张图、四张图的情况就行。 针对一张图，我们可以用 [代码]only：child[代码] 这个 [代码]CSS[代码] 选择器来区分 针对四张图，我们可以用 [代码]nth-child[代码] 以及 [代码]nth-last-child[代码] 这两个 [代码]CSS[代码] 选择器来区分 针对其他张图片，我们可以固定右边距来解决。 [代码]<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> * { padding: 0px; margin: 0px; border: none; } .container { width: 660px; font-size: 0 } .container img { width: 200px; height: 200px; margin-right: 20px; margin-bottom: 20px; } .container img:only-child { width: inherit; height: inherit max-width: 250px; max-height: 250px; } .container img:nth-child(2):nth-last-child(3){ margin-right: 100px; } </style> </head> <body> <div class="container"> <img src="./img.jpg"> <img src="./img.jpg"> <img src="./img.jpg"> <img src="./img.jpg"> <img src="./img.jpg"> <img src="./img.jpg"> </div> </body> </html> [代码]

开发者工具更新时，显示不能打开要写入的文件[图片]

1、建立 WebApi项目 （1）创建项目 选择菜单 “文件-》新建醒目-》web -》ASP.NET Web 应用程序” [图片] 输入项目名称和位置，确定，进入模板选择页面。 选择 WEB API 模板（选择Web API 时会添加对MVC 的支持） [图片] 新建API控制器 Controllers ------》右键 ------》添加---------》控制器---------》webapi 2控制器 - 空 [图片] （2）发布项目 参考地址 https://blog.csdn.net/weixin_48829226/article/details/121078823 2、后端接口代码         ///         /// 图片上传保存         ///         ///         [HttpPost]         public IHttpActionResult PictureUpload() {             try             {                 var picturePath = "";                 const string fileTypes = "gif,jpg,jpeg,png,bmp";//运行上传的图片文件格式                 var content = Request.Content;//获取或设置 HTTP 消息的内容（当需要获取HTTP信息是会使用到）                 const string tempUploadFiles = "/UploadFile/"; //保存路径                 var newFilePath = DateTime.Now.ToString("yyyy-MM-dd") + "/";                 var memoryStreamProvider = new MultipartMemoryStreamProvider();//获取图片文件流信息                 Task.Run(async () => await Request.Content.ReadAsMultipartAsync(memoryStreamProvider)).Wait();                 foreach (var item in memoryStreamProvider.Contents)                 {                     if (item.Headers.ContentDisposition.FileName == null) continue;                     var filename = item.Headers.ContentDisposition.FileName.Replace("\"", "");                     var file = new FileInfo(filename);                     //upload fail（判断是否是运行上传的图片格式）                     if (Array.IndexOf(fileTypes.Split(','), file.Extension.Substring(1).ToLower()) == -1)                     {                         return Json(new { code = 0, picturePath = "", msg = "不支持上传文件类型" });                     }                     //获取后缀                     var extension = Path.GetExtension(filename);                     var newFileName = Guid.NewGuid().ToString() + extension;//重命名                     if (!Directory.Exists(HostingEnvironment.MapPath("/") + tempUploadFiles + newFilePath))                     {                         Directory.CreateDirectory(HostingEnvironment.MapPath("/") + tempUploadFiles + newFilePath);                     }                     var filePath = Path.Combine(HostingEnvironment.MapPath("/") + tempUploadFiles + newFilePath, newFileName);                     picturePath = Path.Combine(tempUploadFiles + newFilePath, newFileName);//图片相对路径                     var result = item.ReadAsStreamAsync().Result;                     using (var br = new BinaryReader(result))                     {                         var data = br.ReadBytes((int)result.Length);                         File.WriteAllBytes(filePath, data);//保存图片                     }                 }                 //save successfully                 return Json(new { code = 1, picturePath = picturePath, msg = "图片上传成功~" });             }             catch (Exception ex)             {                 return Json(new { code = 0, msg = ex.Message });             }         } 3、小程序端调接口 wx.uploadFile({                 url: 'http://yangyoushan.top:83/api/Default/PictureUpload', //接口地址                 filePath: item.local,//本地地址                 name: 'file',                 formData: {                     'user': 'test'                 },                 success(res) {                     var data= JSON.parse(res.data)                     const url = 'http://yangyoushan.top:83' + data.picturePath                     list[idx].url = url                 }             }) 参考文献 wx.uploadFile

背景 俗话说，产品有三宝：弹窗、浮层加引导，足以见弹窗在产品同学心目中的地位。对任意一个刚入门的前端同学来说，实现一个模态框基本都可以达到信手拈来的地步，但是，当模态框里边的内容滚动起来以后，就会出现各种各样的让人摸不着头脑的问题，其中，最出名的想必就是滚动穿透。 什么是滚动穿透？ 滚动穿透的定义：指我们滑动顶层的弹窗，但效果上却滑动了底层的内容。 具体解决方案分析如下： 改变顶层：从穿透的思路考虑，如果顶层不会穿透过去，那么问题就解决了，所以我们尝试给蒙层加catchtouchmove，但是发现部分场景无效果，那么就不再赘述了。 改变底层：既然是顶层影响了底层，要是底层不会滚动，那就没这个问题了。 如何改变底层解决该问题呢？ 不成熟方案： 底部页面最外层view设置position: fixed;页面不可滚动，但是这个时候会导致页面回到顶部。 滚动时监听滚动距离，弹窗时记录滚动位置，关闭弹窗后使用wx.pageScrollTo回滚到记录的位置。 成熟方案 使用page-meta组件，通过该组件我们可以操作Page的style样式，类似于h5里body设置overflow: hidden; 控制页面不可滚动。文档地址：https://developers.weixin.qq.com/miniprogram/dev/component/page-meta.html 使用wx.setPageStyle设置overflow: hidden， 也可以实现给Page组件设置样式。） page-meta组件： 通过该组件我们可以直接操作[代码]Page[代码]组件 ，我们给它的wxss样式overflow动态设置[代码]hidden[代码]or[代码]visible[代码]or[代码]auto[代码] 就可以控制整个页面是否可以滚动。 [图片] wx.setPageStyle方法： 调用这个api，动态设置它为hidden/auto，用于控制页面是否可滚动，主要用于页面组件内使用，比如封装好的弹窗组件，就不用单独写page-meta组件了。。 [代码]wx.setPageStyle({ style: { overflow: 'hidden' // ‘auto’ } }) [代码] 老规矩，结尾放代码片段： https://developers.weixin.qq.com/s/U6ItgQmP7upQ 拓展 支付宝小程序虽然存在page-meta组件，但是由于内核为69版本，给page设置overflow: hidden 也无法控制底部元素不可滚动，目前已联系支付宝的底层开发同学提供API控制页面disableScroll，目前正在封装Appx，近期开放。