简介答题活动小程序v2.0，是一个微信小程序答题软件，它基于微信原生小程序+云开发实现。 它使用了最新的前端技术栈，具有原生APP体验服务的小程序框架，小程序视图层描述语言 WXML 和 WXSS，以及基于 JavaScript 的逻辑层框架，响应的数据绑定，提供了丰富的基础组件和API。 提炼了典型的业务模型，它可以帮助你快速搭建各种形式的答题软件产品。相信不管你的需求是什么，本项目都能帮助到你。 [图片] [图片] 目录结构小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。一个小程序主体部分由三个文件（app.js、app.json、app.wxss）组成，必须放在项目的根目录。目录结构如下： [图片] 一个小程序页面由这四个文件组成，你可以留意到这个项目里边有不同类型的文件: .json 后缀的 JSON 配置文件；.wxml 后缀的 WXML 模板文件；.wxss 后缀的 WXSS 样式文件；.js 后缀的 JS 脚本逻辑文件； 功能主要包含六大功能模块页面，首页、答题页、结果页、活动规则页、答题记录页、排行榜页。适用于交通安全答题、 消防安全知识宣传、 安全生产知识学习、百年历史知识答题活动、学法守法有奖答题等。 - 首页 - 微信授权登录 - 获取微信头像和昵称等 - 活动规则页 - 答题页 - 实现用云开发实现查询题库功能 - 题库随机抽题 - 实现动态题目数据绑定 - 答题交互逻辑 - 切换下一题 - 提交答卷保存到云数据库集合 - 系统自动判分 - 结果页 - 答题结果页从云数据库查询答题成绩 - 实现转发分享答题成绩功能 - 答题记录页 - 查询历史成绩 - 排行榜页 - 成绩由高到低进行排名 - 实现页面间跳转功能 - 路由 - 界面交互 - 消息提示框 - loading 提示框 源码地址uem/答题活动小程序v2 https://gitee.com/uemeng/answer-activity-applet-v2.0 作品体验[图片]

1、需求 有同一个主体的2个小程序，分别是小程序A和小程序B，现在需要小程序A登录后，点击某个按钮/页面跳转到小程序B，实现小程序B登录。 2、思路 小程序A通过[代码]wx.navigateToMiniProgram[代码]方法将[代码]extraData[代码]传递给小程序B，小程序B在[代码]app.js[代码]中的[代码]onLaunch[代码]里面接收到[代码]extraData[代码]的值，从而实现登录。 3、实现 小程序A中的[代码]wx.navigateToMiniProgram[代码]方法 [代码]function syncLogin(appId,userId){ wx.navigateToMiniProgram({ appId: appId, path: '', // 打开小程序B页面的路径，如果为空则打开首页 extraData: { usrId: userId, // 需要传递给小程序B的数据 }, envVersion: 'develop', //开发版 // envVersion: 'trial', //体验版 // envVersion: 'release', //正式版 }) } [代码] 小程序B中模拟测试 在小程序B开发工具中，点击编译，进入场景选择【1037:从小程序进入】，并将[代码]AppID[代码]和[代码]extraData[代码]填上，一般都是[代码]json[代码]字符串。 [图片] 在小程序B中的[代码]app.js[代码]中的[代码]onLaunch[代码]里面通过[代码]options[代码]接收到[代码]extraData[代码]的值，用[代码]console.log[代码]打印验证。 [代码]App({ // 公共配置 data: { }, // onLaunch:当小程序加载完毕后就执行的方法 onLaunch: function (options) { // 得到进入场景值 console.log('options.from:' + options.referrerInfo.extraData.userId); // ...根据用户ID，就可以实现【小程序A在登录状态下点击跳转到小程序B自动登录的效果】。。 } }) [代码]

"style": "v2"表示启用新版的组件样式，使用v2版本的组件样式默认情况和v1不同，其实V2的颜色更好看，更简洁。 很多小伙伴在初学小程序时可能会遇到button按钮样式宽度、背景色设置无效，其实很简单。把app.json里的"style": "v2"删除就好了， 如果不删"style": "v2"，有没有其他办法可以设置button按钮的宽度和背景色呢？ [图片]     <button class="weui-btn" type="primary"  bindtap='submit'disabled='{{btn_disabled}}'>确定提交</button> 答案是有的。解决方法如下： 因为微信有默认按钮样式，所以要根据优先级进行修改，直接利用嵌入式样式修改 [图片]     <button class="weui-btn" type="primary" style="width: 100%; font-size: 16px !important;"  bindtap='submit'disabled='{{btn_disabled}}'>确定提交</button>

2021年年终总结 ~ 今天是2021年的12月18号，还有十几天今年就结束了，回顾这一年，如果给一个关键字那就是忙碌，如果再给一个今年主题相关的词那就是考研， 距离2022年考研还有8天，在这里先预祝各位学子金榜题名，不负青春 [图片] ~ 人生能有几回搏呢，考研至于很多人来说，那就是人生的第二次鱼跃龙门，加油吧，铁（姐）子（妹）们。 ~ 言归正传 今年的开发工作很专一，除了答题没有涉及任务其他场景 所谓答题，我概况下无外乎一下几个场景 1）答题、刷题、考试 2）答题活动 为什么把答题活动单列呢，其实很简单，答题活动是一个低频场景，是一个轻量的，阉割的答题小程序，当然是相对的 回过头去，今年的开发工作还是围绕答题这一个场景，但是新推出了几个产品 为了规避广告嫌疑，我把小程序用几个关键词代替，就不暴露任何产品的名字了 1、老马 2、意周 3、木苍 4、千语 5、微QING 6、 [图片] 如果是同行，那么估计能猜到具体是哪个产品了，这五个产品主要提供不同场景的刷题解决方案，所以说今年的整个重点还是刷题这块，至于答题活动今年仅仅做了一些迭代优化，并没有再继续深入，因为这块本身就不适合做的太重，很难做出成绩 为了准备今年的七一，100周年庆典，确实上半年比较忙碌，但是过了七一，整个下半年都算是一个淡季~ 但是刷题的场景不一样，刷题是一个持续的过程 就拿考研刷题来说，会持续一整年，每天都可能会有用户提出新的问题，你要去应对，对产品来说，那就是持续的迭代优化，每一止境，不过今年新推出的5款刷题小程序，目前都算相对完善，不需要投入太多的精力 在21年的时候，我做过计划和展望，要开发一款问卷小程序，但是一直没有机会，这个任务或许要带到2022年了，总会要完成的。 今年还是忙碌的， [图片] 从20年年初开始做答题，已经坚持了整整二个年头，要问什么时候能停下来休息下，我想总会有机会的 也许哪天就放弃了，也许哪天真的忙不动了， 目前手里的答题产品已可以满足各种场景下的答题、考试解决方案，但是整个生态还有一些缺陷 就是答题的批量导入这个环节，目前是通过excel来批量导入的， 由于这一块并没有影响整个小程序的运营，所以之前一直忙，就没有投入时间来大的迭代， 但是excel这一种题库模板终归还是太单一了，2022年应该会在题库模板这块增加对word的支持。 还有很多话，没有讲 ~ [图片] 分割线，列下明年的计划 1、答题小程序推迟支持多个活动版本，参考的产品已完成调研； 2、题库解析增加对word，也就是文本的解析； 3、问卷小程序，（已完成调研）； 4、刷题小程序增加对简答题的刷题场景交互优化的迭代（已完成调研） 为什么有这一项单列，因为这本身是一个技术难点，做出来之后，可以在多个答题小程序场景使用，使我的小程序用户体验有一个非常大的提升 5、其他事务性工作 ~~ 2022年考研后再见了~

项目技术栈微信原生小程序+云开发。我这里主要使用了云开发能力中的小程序端SDK，说白了就是在javascript中就能直接操作数据库。 本篇前言基于云开发的答题活动小程序v2.0的源码地址，以及手把手教你搭建答题活动小程序v1.0系列文章目录，均在【基于云开发的答题活动小程序v2.0，终于赶在11月最后一天完成了】这篇文章的底部。 本篇主要结合实际的场景，譬如在答题活动小程序中，如何利用路由传参的方式，进而提高页面或者组件的可复用性。 场景展示一图胜过千言万语，结合答题小程序的应用场景，让我们率先来看看整个演化过程。 [图片] 实现过程（1）答题页 在答题页面中，当作答完毕，提交并生成答题记录后，后端会返回该条记录的id，这时就可以执行跳转到答题结果页面，获取数据后显示得分。 test.js activityRecord.add({ data: { ...examResult, createDate: db.serverDate() } }).then(res => { // 跳转到答题结果页，查看成绩 wx.reLaunch({ url: '../result/result?id=' + res._id }); }) （2）答题结果页 进入答题结果页面，页面加载时触发onLoad，可以在 onLoad 的参数中获取打开当前页面路径中的参数。然后发送请求，入参为该id，即可获取该数据。 result.js //生命周期函数--监听页面加载 onLoad(options) { // 查看答题成绩 this.getExamResult(options.id); }, getExamResult(id){ activityRecord .doc(id) .get() .then(res => { let examResult = res.data; }) } （3）答题记录页 在答题记录页面中，需要查看历史成绩时，当点击列表里面的某一条记录，这时会携带该记录的id作为参数值，跳转到答题结果页面，获取数据后显示得分。 history.wxml <view class="cu-item arrow" wx:for="{{historyList}}" wx:key="index" bindtap="goToResult" data-id="{{item._id}}">        </view> history.js goToResult(event){ const { id } = event.currentTarget.dataset; // 跳转到答题结果页，查看成绩 wx.navigateTo({ url: '../result/result?id=' + id }) } 【延伸一下】事件的使用方式： 在组件中绑定一个事件处理函数。在相应的Page定义中写上相应的事件处理函数，参数是event。dataset为当前组件上由data-开头的自定义属性组成的集合。 本篇小结我将答题结果页设计成了一个可复用的组件，只要通过参数，就能获取到答题成绩。无论是从答题页过来，还是从答题记录页过来，所查询的答题结果均可在这个页面上展示，就无需重新再多做一个页面了。 将整个答题小程序划分为若干紧密关联的页面，以及高内聚低耦合的组件，理清职责、交互与边界。划分的基本原则是“识别、分离和组合关注点”。 可见，组件化是可灵活组合和可定制的前提，是构建软件应用的核心思想。

如题，请教各位大佬，做一个微信小程序扫码签到的功能，想要做一个网页管理端。小程序是与微信绑定的，所以网页端登陆想要扫码登录区分，教师可以进入网页端，学生则不可以。 之后教师可以通过网页端投屏二维码，学生通过小程序扫码签到。 我想问的问题在于1、网页端扫码登录这一技术不知从何入手，2、网页端的二维码和小程序扫码的信息交互怎么完成。 谢谢大家。

11月是全国“119”消防宣传月，不少企事业单位都会举办消防安全知识竞答活动，因此我基于云开发搭建了消防安全知识答题活动小程序。 接着，还写完了初阶的手把手教你搭建答题活动小程序系列文章，用以帮助初学者快速入门云开发。 而这里再补充一篇搭建部署帮助文档，帮助你如何利用微信答题活动小程序v1.0的源码进行搭建云开发小程序。 答题小程序界面[图片] 一、准备工作搭建并部署上线这个答题活动小程序，需要先进行以下几步准备工作： 1、首先注册微信小程序，主要是为了拿到AppID。这个是先决条件。 小程序的注册非常方便，去微信公众平台，打开小程序注册页面，按照要求填入个人的信息，验证邮箱和手机号，扫描二维码绑定你的微信号即可，3分钟左右的时间即可搞定。 小程序注册页面 [图片] [图片] 注册小程序时不能使用注册过微信公众号、微信开放平台的邮箱，也就是需要你使用一个其他邮箱才行。 当我们注册成功后，就可以自动登入到小程序的后台管理页面，完善相应的资料后，然后在这里获得AppID。 [图片] 2、其次下载并安装了微信开发者工具。这个是开发搭建环境，以及上传代码到服务器的工具。 小程序开发者工具下载页面 [图片] 3、然后就是下载答题活动小程序源码了。这个可以去gitee地址进行下载，请点star。 答题活动小程序源码下载 [图片] 二、搭建工作1、打开微信开发者工具，使用微信扫码登录开发者工具，然后使用开发者工具新建一个小程序的项目。 项目名称：这个可以根据自己的需要任意填写； 目录：找到事先下载好的答题活动小程序源码的文件夹，然后选择它； AppID：就是之前注册成功后获得的的 AppID(小程序 ID) 开发模式为小程序（默认） 后端服务选择小程序·云开发 [图片] 点击新建确认之后就能在开发者工具的模拟器里看到云开发答题活动小程序，并且在编辑器里看到这个小程序的源代码。 2、点“云开发”进行开通云开发服务。 [图片] 点击微信开发者工具的“云开发”图标，在弹出框里点击“开通”，同意协议后，会弹出创建环境的对话框。这时会要求你输入环境名称和环境 ID，以及当前云开发的基础环境配额（基础配额免费，而且足够你使用了）。 按照对话框提示的要求填写完之后，点击创建，会初始化环境，环境初始化成功后会自动弹出云开发控制台，这样云开发服务就开通啦。 3、依次新建集合 （1）新建题目数据库集合，并创建或者导入题目数据。 [图片] [图片] （2）新建保存答题成绩的数据库集合。 4、找到云开发的环境 ID。 点击云开发控制台窗口里的设置图标，在环境变量的标签页找到环境名称和环境 ID。 5、指定小程序的云开发环境 在开发者工具中打开源代码文件夹 miniprogram 里的 app.js，找到如下代码： wx.cloud.init({ // 此处请填入环境 ID, 环境 ID 可打开云控制台查看 env: 'env-id', traceUser: true, }) 在 env: 'env-id'处改成你的环境 ID，如 env: 'dtxcxxfaqzsjd' 6、点“上传”进行上传代码后，再去到小程序的后台管理页面，扫码访问体验版或者提交审核为后续部署上线。 后续我会在这个v1.0的基础上继续开发，答题类微信小程序v2.0、v3.0，功能将会更加多以及更加完善，敬请期待吧。

组件更新 coolui-scroller 更新v3.0.4 修改item组件增加水波效果 修改下拉refresh触发时机 新增refresh下拉状态属性refreshstate 新增refresh下拉设置isAutoTriggered，判断是否自动回弹 修改组件内callback为promise 文档 github文档 gitee文档 有趣的下拉 魔性吃面 github代码 gitee代码 效果 扫码查看 [图片] [图片] 飞上云霄 github代码 gitee代码 效果 扫码查看 [图片] [图片] 圣诞主题 github代码 gitee代码 效果 扫码查看 [图片] [图片]

除了博客系统自带评论系统，可以利用Github的Issue和Discussion API作为评论系统。 相关项目 Gitalk gitment vssue Giscus 我的选择 我选择的评论系统是Giscus。相对于其他几款评论系统，个人认为Giscus的优势在于它还自带了点赞功能，并且对于React的支持也不错。 安装（官方React，只有英文） Giscus的安装过程挺简单的，按照官网的配置指引以及官方React组件Readme操作即可。但是目前，直接安装的官方React组件只支持英文，不支持中文。研究半天终于找到了汉化方法。 安装（魔改，支持中文） 打开官方React组件的仓库，将所需源码都提取出来，放进项目内。修改[代码]util.ts[代码]的[代码]getIframeSrc[代码]函数返回值。 原版： [代码]return `${GISCUS_ORIGIN}/widget?${new URLSearchParams(params)}` [代码] 改为： [代码]return `${GISCUS_ORIGIN}/zh-CN/widget?${new URLSearchParams(params)}` [代码] 实现效果 [图片]

开源的答题小程序分享 ~ 今天群里摸鱼，看到有人分享一个不错的答题小程序，作为答题小程序产品的开发者，简单看了下，这个产品算是开源里面的良心作品，分享给大家 [图片] ~~ https://gitee.com/dabenbenyihao/online-test-applet 介绍在线考试小程序前端代码，全部开源！ 基于gitee上的exam进行二次开发，小程序端使用了colour-UI进行重新页面设计，集成腾讯地图、echarts等插件，进行成绩分析排名。 后端也是经过二次定制化开发，集成公司、部门权限管理；题目导入导出；随机试卷等一系列功能。 同时集成微信订阅消息、定时任务等。可在考试前一小时提前发送订阅消息提醒，考试完成后发送分数提醒，试卷公开后发送提醒等。 联系目前小程序已经发布，大家可以体验下，在学习的过程中遇到问题，可以咨询我 (备注好来自码云) 适用场景 1 ·企业招聘考试。候选人等候时面试可手机扫码参加笔试，系统实时生成结果，一个简单的考核就可让面试官提前了解候选人的能力 情况。在大规模校园聘会上公布考试地址，考生现场完成考试，现场出分，主办方可快速筛选合格考生参加面试，大大缩短招聘周期和成本。 2 ·员工晋升考核。员工专业技能是否达标，员工素质测评，安排一场考试即可对员工是否晋升进行有理的判断。全面电子化式考试， 可大大缩短员工考核周期与成本。 3 ·培训认证考试。培训机构结业认证考核，行业从业资格认证，能力认证考核等，题答答提供从考生报名到参加考试的全流程功能。 无限制题库刷题，错题训练，随机题序，答案解析，错题本重练，让刷题不止追求量，也有质的保障，帮助考生更熟练地掌握知识点， 提高考试通过率。 体验账号测试账号，密码（线上版本，请勿修改密码，谢谢！） 账号：student 密码：123456 在线体验小程序[图片] 小程序功能截图[图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片]特点请扫码体验，截图只截取了部分功能，大量功能没有截取到 完整的考试系统，支持随机试题、加密试题、时段试题、班级试题、固定试题、任务试题正在开发中的调研问卷系统，满足日常调研需求知识分享系统，包含各种知识资料文件分享功能百问百答系统，解决日常简单问答需求考试分析系统，支持图表、排名、统计等分析功能。可以设置试卷是否公开、是否允许学员看分数。班级管理体系，支持多班级管理证书体系，支持及格生成证书通知体系，支持考试前通知，考完通知，成绩公布通知。基于微信订阅消息的通知体系各种题型体系，支持单选、多选、填空、问答、图片等多种形式题目，兼容数学公式开放式注册体系，支持注册验证，审核位置记录功能，支持记录考生位置信息，实时分析个人画像功能，支持根据个人使用记录进行实时分析全局搜索功能，可以实时搜索所有资料信息个性化推送功能，可以自定义推送图文信息下一步开发计划错题集问卷调研完善知识分享系统完善，加入文档简介考试分析系统完善，加入图表分析 ~ 开源的答题小程序分享

一种优雅的小程序授权方案分享 ~ [图片] ~ ~ [图片] ~ [图片] ~ [图片] ~ [图片] ~ [图片] ~ [图片] ~ [图片] ~ 其实在很久之前的一次产品调研中，我体验过这个交互，但是当时体验的太多了，没有做好记录，回头再找已经找不到了，昨天突然又翻到了这个小程序，十分惊喜 还是原先的设计 这个授权的交互设计，是我见过的所有授权中最棒的一个， 把用户信息授权和手机授权做到了一起，同时展示了授权的进度 目前我还有一个疑惑就是 如果只做了用户授权，而没有手机授权，下次进来会是什么交互呢，这个值得继续体验下

SEO优化有一步是减少外链，可以通过加入一个跳转页面解决。 跳转页面 5秒后自动跳转。 [代码]import { Helmet } from '../.umi/plugin-helmet/exports'; import { useTimeout } from 'ahooks'; import CryptoJS from 'crypto-js'; export default props=> { useTimeout(()=>{ window.location.href = CryptoJS.enc.Base64.parse(decodeURIComponent(props.match.params?.path)).toString(CryptoJS.enc.Utf8); },5000); return ( <div> <Helmet> <title>{`liziyi0914的博客`}</title> </Helmet> <div className="p-7 lg:rounded-3xl bg-black bg-opacity-10 shadow-md z-10 fixed left-0 lg:left-5 right-0 lg:right-5" style={{backdropFilter: 'blur(2rem)'}}> <div className="text-white text-center text-4xl tracking-wide font-bold text-shadow-md">liziyi0914 的博客</div> </div> <div className="pt-28 pb-8 overflow-y-scroll"> <div className="rounded-3xl bg-white bg-opacity-50 p-8 text-center backdrop-filter backdrop-blur-lg select-none"> <div className="m-6 text-4xl font-bold text-white text-shadow-md" >正在跳转，请稍后...</div> </div> </div> </div> ); } [代码] 链接渲染器 将每一个[代码]a[代码]标签的href参数替换为[代码]#[代码]，并加入一个跳转函数。 [代码]export const LinkRender = ()=>{ $('a',$('.post')).each(function(){ let $$ = $(this); const href = $$.attr('href'); $$.on('click',()=>{ history.push(`/link/${encodeURIComponent(CryptoJS.enc.Base64.stringify(CryptoJS.enc.Utf8.parse(href)))}`); }); $$.attr('href','#'); }); }; [代码] 实现效果 大功告成！😁 [图片]

刷题小程序关于收藏和错题集的探索 二个问题 Q1、如何刷完一遍错题集（收藏本） Q2、如果想删除某一题，该如何设计和交互？ ~ 其实这个小程序是今年(2021年)春节的时候上线的，目前运行了8个月有余了，最近该小程序针对的考试越来越临近了，所以多了很多新用户 新用户的到来暴露出小程序很多细节处理不到位的地方，就如下面截图所说的 ~ [图片] ~ 其实这个用户反馈的问题很中肯，在之前实现错题集和收藏本的时候，都是按照固定每次10题随机刷题来开发实现的，一直有没有用户提出问题 但是这个模式确实存在问题 那就是上图所说的， Q1如何想完整刷一遍该题库？ 按照目前的开发逻辑，这个刷题的完整性真的是看运气的 假如目前收藏本有100个题目 每次10题，按随机来刷题，至少要10次 但是如果把收藏本顺序刷题，那只需要10次， 这二种模式来说，高下立判 ~ [图片] ~ [图片] ~ [图片] ~ 针对这个问题，目前已按照用户的建议，采用顺序刷题来解决，确实也得到用户的肯定和赞许 [图片] ~ 其实收藏本和错题集是刷题小程序十分常见 的二个核心模块，也算是常规功能，目前虽然解决了，用户刷一遍的问题，还存在一个其他问题就是 Q2，对于错题集，用户如果刷题的时候，想把该题移除错题本该如何设计和交互，收藏本也是一样 这个问题也是很常规的，毕竟不能只进不出的，这样积累多了，错题集和收藏本将失去他们本身存在的意义 目前针对这个问题，还没有找到很合适的方案，还在探索中。

这几天在处理付费解锁题库小程序的开发 对于付费解锁的题库，有一个绕不过去的问题就是虚拟支付，在苹果手机上，是不能直接付费进行解锁的，那么就要想法设法的告诉用户怎么进行解锁 这个时候，很多的小程序无奈只能选择激活码 但是激活码的下发是个问题 ~ 问题 ！ 用户来到小程序怎么联系运营者，是通过客服消息还是其他，我总结了以下几种 1、客服消息，这个时候就涉及 到支付的问题，这个激活码是收费的，这个费用如何支付 2、引导去小商店完成支付，联系小商店客服，获取激活码，这样解决了支付的问题 3、公众号，消息，引导添加运营微信号，进行线下支付或者转账进而发邀请码 4、 [图片] ~ [图片] ~ ~

答题小程序手稿~ ~ [图片] ~ [图片] ~ [图片] ~ [图片] ~ [图片] ~ 答题小程序设计手稿 其实这个特别有意义，虽然比不上产品经理的prd，但是这份手稿算是给我留下很深的印象，所以能整理出来跟大家分享 ~ 积分规则 积分规则 1、首次登录使用小程序+50分； 2、签到+2分（改为登录即签到，每一限一次，目前测试当日可重复签到），推荐1位好友登录注册+10分；（推荐测试尚无效） 3、推荐10位以上好友登录注册后，后续积分翻倍，签到+4分，推荐好友+20分；（这个规则应该还没写进度） 4、每章进入一次消耗10积分（测试中途退出消耗的积分不能用于重复测试）（这个应该规则本来就有。） 5、阅读专栏等非刷题页面不需要消耗积分。 6、购买增值服务成为付费会员后，进入刷题页不再消耗积分。 总结： 1、用户分为免费会员和付费会员， 2、付费会员访问全部题目无障碍； 3、免费用户需要消耗积分才能访问题目刷题； 4、付费会员仍可积累积分。

从开发到提交经历大半年，提交两个版本，最后一版自我感觉良好。 看到很多的小程序，觉得里面功能不算复杂，觉得自己也可以搞一个。 奔着一个小程序的小字去的，初出毛驴不怕虎，认为小不就是简单吗。但入门之后，我才发现，小程序并不小，尤其是对于一个零基础的人而言。写到这里，简单介绍一下，之前没学过编程，什么关键字、if、for语句啥的，没听过，更别说其中复杂的逻辑了，真实的小白一个。 但这些，并不能阻挡我。心中有一些想法，总想实现，又不知如何表达。于是我给自己订了一个学习计划，其实也是比较水的计划，接触不深，也不知如何下手。当然，这也不能阻挡我。于是，我的开发小程序之路凭着一股蛮劲开始了。 刚开始，我打开微信开发者文档，一看懵了，什么框架，什么组件，API是啥，不知道啊。看指南吧，一圈看下来，云里雾里，理解能力有限，还是无从下手啊。接着我想，程序不是有这语言，那语言啥的，不如先学习基础语言。于是，我去看小程序的实现技术主要是哪门子语言，JavaScript，我给看成了Java。奶奶的，我的白嫖之路就算是从Java开始学起了。 当我把java的学习视频看完，算是了解关键字，if语句，什么是for循环了。再回过头来看小程序开发文档，才发现不是Java，是JavaScript，学错了，心情哪个纠结啊。不过这时候再看开发文档，虽然有难点，但好歹不那么排斥了，但这也不行啊，没法下手。见识了Java的难度，再看JavaScript视频，我心哇凉哇凉的，根本看不进去。但！这并不能阻止我开发小程序的心，霸王硬上弓，不行也行。于是，我白嫖的第二段开始了。 找一些小程序基础开发之类的视频，一边看，一边敲，一边到开发文档中去查知识点，就这样，我的初级版未上线小程序开发出来了。在这里，要感谢下腾讯的强大和支持了。当时，云开发给出的基础套餐容量够大，作为一个新手，一分钱没花，每天不断地折腾，硬是给我搞出来了。 技能算是基本掌握了，但我的想法又开始多了。根据小程序上线的要求，接下来注册公司，再申请账号，比学习还繁杂的工作就此展开了。因为初级版本完全是白嫖视频的，功能简单，逻辑简单，完全不能达到上线的要求，在此情形下，我的白嫖第三段就开始了。 我重新构思了小程序的架构、布局，以及背后的逻辑关系，包括设计上的美学思考等等，随着思考的深入，对技术的要求就有一定层次了。看视频已经不能满足要求了，于是开始求助度娘，看相关网站，查资料。这个阶段算是带着问题白嫖了。在此，感谢互联网的博大精深，尤其是诸多大咖们宽广的胸怀和无私的分享。 值此，“跑车宝”第二版上线，可能还存在一些技术上的瑕疵或兼容性问题，愿接受五湖四海的朋友的批评和指正，同时也愿意分享我开发中曾经遇到的问题与解决方案。隆重感谢腾讯，微信，以及我白嫖过的那些未谋面的大咖们、前辈们！ 落笔，安康幸福！ [图片]

FreeUI，一款轻量、开箱即用的UI组件库，内置很多组件和样式，持续更新集成中。 废话不多说，扫码看看就知道了 [图片] 都是一些项目中常用的组件，感兴趣的可以扫码看一下，教程文档正在编写中，有使用中的问题可以联系我或者关注我的公众号【搞文艺的猿】。 喜欢小程序的朋友可以关注下，一起学习进步，交流心得。 文档地址：https://awzks1314.github.io/freeui-web/#/ [图片] [图片]

　小程序无需安装、即用即走的轻应用特点让引流获客的门槛变低，同时，这一特性也容易造成用户使用后不会再次打开甚至容易遗忘。那么小程序商家怎样做才能解决小程序使用率低的问题？让小程序的优势从“即用即走”转向“再走再来”？随着小木一起来看看吧。 　[图片] 　1、优化产品定位 　 　每一个小程序都应该在开发阶段就做好产品定位、市场定位、用户定位分析，当然，如果已经上线了现在开始分析也不算晚。不同的产品和服务都会有自己的行业特性，只是掌握了行业特性完全不能满足新零售的营销模式，商家应该去分析了解目标用户群体的不同差异和消费倾向，针对用户和不同市场投入产品，增强产品的市场竞争力，让产品成为小程序的核心优势。 　 　2、提高用户的体验感 　 　可以从小程序的设计原则来看待，小程序优势就是小而美，无论是页面布局设计还是功能操作步骤，都要简洁大方，不要做过多的赘述和内容，让用户以最短路径完成整个使用体验，提升用户体验感，就更容易去完成客户留存和复购。 　 　3、善用营销留客 　 　商家想要获得更多的销量，收获更多的利润；用户想要通过优惠的价格获取想要的商品，减少购买成本。这看起来仿佛是矛盾的，特别是在以前传统营销的模式下，即使商家投入推广成本，带来的客流和转化也非常有限。但是微信小程序的出现带来了全新的强社交营销模式，这个矛盾问题就变得可解了。商家在运营小程序期间可随时灵活运用小程序的各种营销功能来“扩客”和“留客”，比如优惠、拼团秒杀、分销、直播等等营销都能够有效挖掘到自身的用户群体，帮助商家来完成用户的累积和留存。做好每一步的营销运营才能让小程序为商家带来更多的用户，甚至能够搭建属于自己的“私域流量”。 　 　以上就是小程序如何解决使用率低的一些方法，大家可以针对自身运营中遇到的实际问题去做调研分析，再去调整运营方案。商家不仅要善用小程序的轻应用优势，还要站在客户角度去考虑解决问题，令用户满意，这样用户留在小程序的几率才更大，转化效果才会更理想。

前言：微信公众号正在内测【草稿箱】，近期将发布，将【图文素材】升级为草稿箱，作为被内测的一员，以下写写该功能的整理。一，草稿箱的位置、与之前图文素材的区别：[图片] 在公众号后台新建图文，可以选择将内容“保存为草稿”、“预览”、“群发/发布”。 其中保存为草稿，就是将未完成的文章保存到草稿箱，方便你后面继续进行编辑修改。 注意，一旦对草稿内容进行群发或发布，草稿箱就自动移除这篇草稿。 二，注意到右上角的历史图文素材没： [图片] 这是升级为【草稿箱】前未群发的文章，可以按下面步骤导入到【草稿箱】中：（当然如果是2021年12月新开的公众号就历史图文素材是空的了） [图片] [图片] 当然也可以点进【历史图文素材】，点击“转存为草稿”，转移到草稿箱，跟上述的效果一样。 三、发表时，【群发】和【发布】区别是什么： [图片] 发布：不会主动推给粉丝，历史消息列表看不到，内容分析看不到数据。 群发：主动推送给粉丝，历史消息可看，被搜一搜收录。 【发布】有哪些利好？不会推送消息给关注的粉丝（很多人可能不觉得是利好，哈哈：））不占用群发次数，每天可以发布多篇发布的内容与群发一致（原创、赞赏、付费、留言）四，【草稿箱】现在怎么发文章？有下面几个途径 1，发表新文章（1）首页 - 新的创作 - 具体的文章类型 [图片] （2）内容与互动 - 草稿箱 - 新的创作[图片] （3）内容与互动 - 素材库 - 前往发布 [图片] （4）补充两点：可以把历史图文转存草稿箱后发表，或者已经发表的也可以重新转草稿箱，方法在上面第二大点说到了截图也有。 五、以上阅读完基本就能使用【草稿箱】功能了。但草稿箱也有存在一定的局限： 草稿箱文章：对反复利用的内容，每次都要导入，编辑，发布，设置，才能生效！阅读量从 0 开始，以前累积的阅读量作废。（在自动回复、自定义菜单、页面模板和话题中更新内容，需每次在电脑上重新设置） 对草稿箱的上面这个特点，很多运营表示不方便，那么作为老运营的我，也提供一个解决方法：用第三方助手来解决，例如智未来页面模板，或者布袋模板, 相对来说，前者好用些。 很多时候主要是草稿箱没发布和群发的文章，没法直接获取永久链接，但通过智未来公众号助手，也能获取： 运营的角度：公众号草稿箱文章怎么生成永久链接？ 其实不仅仅是获取草稿箱的永久链接，甚至草稿箱的文章无需“发布”或者“群发”，都直接可以和任何的历史推送的文章、任何公众号以外的文章等，整合成例如下面的一个页面，或者微网站，然后再设置到公众号自定义子菜单等即可，可以用智未来页面模板整理成如下视频的例子： [视频] 以上，希望对运营人员起到一定帮助。

考研刷题小程序数据库设计 ~ 今天写这篇文章一方面是回顾下近期开发的这个刷题小程序，另一方面呢，由于该小程序涉及太多的集合，需要有一个文档记录下，每个集合的用途 ~ 首先，我先截图下，当前小程序的界面 [图片] [图片] 当前小程序的集合涉及如下，一共有38个 集合截图1 [图片] [图片]集合截图2 其中我比较陌生的，也就是这次新增的集合，是本文重点介绍的对象 knowledge，知识点题库 knowledgelist，知识点列表 ~ bank，模拟考试题库 warehouse，真题题库 keep，用于记录真题答题的记录 level，收藏的细分支，按星级收藏 [图片] 该考研刷题小程序开发始于21年的暑假也就是6月份，开发至今，近乎半年时间，相关的问题也陆续收敛，几近对外发布，期待有一个好的用户反响。 ~~~ [图片]

一、初窥门径 大一那年，懵懵懂懂的入学，每天上课学习，下课游戏，奔波于各式活动之内，游走于各大社团之中。直到那天，看到了首届高校微信小程序应用开发赛，心头一动，点滴想法悄然酝酿而生。 二、出师未捷 石楠轩606宿舍内，几个大小伙子讨论得热火朝天： “我觉得可以，现在学校内还没有这样的小程序，如果做好了，肯定能迅速占领市场。” “没错，而且我们还能借着比赛的机会学一学小程序开发，有利无害呀” … … 当晚我们便着手报名，名曰“南柘”，将楠字左边的木嫁接到石字上，隐喻我们住在石楠。 然后… 就没有然后了… 稚嫩的我们终究没有坚持完比赛，甚至连个像样的模块都没搭建出来。 当时我们都是小白，不懂html、不懂js，更别提后台了。比赛开始后，我找了微信小程序的教学视频来看，发现讲得太泛，并不适合我这种初学者。我迫切需要的是手把手的教学视频或书籍，然而，当时自身底子太薄，学起来很慢，而队友们则忙于他事，连教学视频都没看过几眼。 自然而然的，我们默认了失败，这场尚未开战便宣告失败的战役，仿若一根耻辱柱，时时刻刻提醒我，梦开始的地方，不是做梦开始的地方。 三、沉淀 大一下学期，我成功转专业到计算机学院，开始恶补相关知识； 大二上学期，学了数据结构、算法、数据库，还写了个APP； 虽然囫囵吞枣，但也力求搞懂重点，尤其经典的算法。 随后机缘巧合下接触了Django后端开发，感谢这次开发经历，我对于前后端交互有了一个直观的感觉。第二届小程序开赛前，小程序开发于我而言不再是一个遥不可及的梦。 四、再战 去年一个队伍三个人，今年有些变化，一个队伍可以四个人，得益于此，我再次面对小程序比赛。好友薯饼邀请我加入他的队伍，已经有一个后端，一个UI；后来经过讨论，我和薯饼一起担任前端开发。 任何成果的取得，都不是轻而易举的。 1. 前期准备 我们开始讨论要做什么小程序，脑暴，调研，跟已有的校内小程序对比分析，最终我们决定了我们的作品 —— WritByU（writ 取自古英语，并非 write 的错别字） WritByU 是针对校园用户进行信息分享传播和问答的一个小社区，用户既可以以文 字、图片的形式实现信息的即时分享和传播互动，也可以围绕某一话题进行提问、答疑 以及讨论。 甚至于，我还用PPT做了简单的界面，现在想想确实好笑。 [图片] 随后便是确定技术路线，几经周转，也找到了一个高颜值的开源UI库：ColorUi，虽然没有文档用起来稍有不适，只能翻看源码使用。 [图片] 2. 爆肝开发 前期开发并不顺畅，毕竟万事开头难，一开始使用 ColorUi 就遇到了不少问题，因为没有文档，之前也没使用过 Component，为了解决问题，我找到了 ColorUi 的开发者，进行了交流群，虽然没有直接解决我的问题，但看群里大佬的交流却给我提供了不少思路，受益匪浅。 [图片] 此外，前期开发也比较容易拖沓，心里总想着不急，还有时间，（这为我们后面的通宵爆肝埋下了伏笔）有时间也是慢悠悠的写，或者把时间分配给了其他事情。 一些技术难点：(对于初学者来说想实现这样的小功能并不容易，但是耐下性子多看看别人的源码就可以解决。) 【富文本编辑器】 一开始写这个小程序的时候还没有出 editor，当时想着实在找不到可用的组件就手撸吧，结果还真的没找到（捂脸）。 最后勉强实现了图文混排，当然远不如现在的editor强大，结果富文本编辑器做得差不多的时候 editor发布了（求心理阴影面积） 当然愉快的尝鲜，结果发现 editor 的文档，也太简陋了吧，无奈之下翻看源码，折腾了半天总算搞定初始化、获取内容、更新内容等方法。 编辑框如下图，上方是 editor 强大的控件板，我们保留了一部分常用的功能， 下方加入了插入封面和标题（input），分享内容则使用了 editor 。 [图片] 【瀑布流】 广场页面为了实现瀑布流，我上网找了不少例程和方法，无奈没有可以直接用的轮子，理清了demo的思路就自己操刀开始干。 [图片] 渲染层：使用 leftData 和 rightData，分左右两边渲染。 [图片] 逻辑层： 本markdown编辑框的代码解析似乎出了点问题，输入左箭头会变成 &lt，如下所示，因此这里还是截图。 [代码]for (let index = 0; index < array.length; index++) [代码] [图片] 中期开发过程则比较艰辛，有段时间课内作业很多，大家都在今天赶这个实验报告，明天赶那个实验报告，大家很难凑在一起开发，童心，我们的后台小伙伴只好自行吭哧吭哧写接口，后续也因为一些逻辑没有提前沟通好修改了不少接口。 我们的API文档： [图片] 3. 提交作品 5.30晚，BUG基本都改完了，队友们也在进一步完善文档，凌晨四点多，我给小程序的使用方法录屏后，开始配音，剪辑视频，果然也是个技术活，几个小时后，终于捣鼓完了，不禁松了口气。打包代码、上传体验版，提交作品，这一阶段结束。几个人吃了个早餐上课的准备上课，我则回宿舍安心睡会觉。 [图片] 五、给初学者的技术建议 掌握基础知识：html、css、JavaScript，写几个小页面快速上手 看微信小程序的API文档，setData、bindtap，了解数据渲染、方法绑定； 了解 ajax 请求，找懂后端的师兄师姐或者同学开个简单的get请求接口给你练习（当然自己开个后端服务就更好了，比如Django什么的，上手方便，也可以用小程序云开发功能），然后自己阅读微信小程序API文档，试着使用wx.request。 此时已经基本掌握写一个单页面小程序的能力了，紧接着可以找一些开源的UI库，美化自己的界面，了解小程序页面、组件的生命周期找一些demo进心学习。 书法学习有临与摹，临，是照着原作写；摹，是用薄纸蒙在原作上面写。写代码也一样给，建议掌握必要的基础知识后，通读 demo 源码，了解大概思路，然后自行临写，而非对着别人的 demo 一行一行的摹，如此，一开始虽更费劲，但效果显著。 以上，是个人的一点小建议，如有更好的想法，可以在下方留言哦，欢迎交流~

前情提要：   在10月9号开始，社区发起了一个「微信校园技术运营官招募计划」，活动的初衷应该是希望招募所谓的“校园技术运营官”可以在社区为百万级开发者与运营者，贡献优质技术内容，参与社区的运营工作。原文可以看「点这里」   对于此类活动，还是极好的，多了那么多小可爱在社区分享、解答问题，这是极好的，社区就需要这样的热心同学，多多益善。   据了解本次计划招募了中山大学7名、华南农业大学5名、华南理工大学24名、广东工业大学16名、广东外语外贸大学1名、暨南大学2名、广东药科大学1名共计56名新同学来参与开放社区运营。 问题来了，为什么我还要吐槽呢？   首先来说下根据社区所了解到的“校园技术运营官”的考核转正标准，根据社区js文件，综合已获得第一届微信校园技术运营官计划考核的同学可以判断，转正标准为社区贡献值达到300（至于其他要求就不太清楚了，条件是根据已有数据分析所得，可以看图），社区贡献获取来源主要有文章被点赞收藏、回答/评论获得点赞、活跃、反馈有效问题、完善个人信息等方式获得（问题就出在这里）。 [图片]   我想要吐槽的是什么呢？ 1、参与第一届“校园技术运营官”的中有部分同学为了快速获得300贡献值转正，存在很严重的灌水刷分行为，这类行为应该明令禁止的，肯定是会影响其他正常努力的同学。下面是比较夸张的一些日贡献值，11月月度贡献值，数据来源于社区接口 [图片] [图片] [图片] 部分不正常行为截图： 1）文章浏览量88，点赞数23，点赞数量远超出社区当前正常文章平均点赞数范围 [图片] 2）文章浏览量229，点赞数28，点赞数量远超出社区当前正常文章平均点赞数范围 [图片] 3）文章浏览量113，点赞数13，点赞数量远超出远超出社区当前正常文章平均点赞数范围 [图片] 4）问题回答数25，点赞数79，点赞数量远超出社区当前正常用户回答平均点赞范围 [图片] 5）当前排名第一的技术官同学，11月月度获取贡献已超700，即将突破历史贡献者月度贡献记录，然而他回答数只有255、文章数只有1， [图片] 6）文章数3，点赞数53，一篇基础入门文章，10人评论，20次点赞 [图片] 7）回答数169，点赞数209，点赞数量远超出社区当前正常用户回答平均点赞范围 [图片] 8）一篇文章41浏览，8评论，我好奇的点进去看了下，结果是这样的，竟然相互在刷点赞回复 [图片] [图片] 9）文章评论、浏览、点赞比例远超出社区当前正常文章平均评论、点赞数范围 [图片] 10）每篇文章下评论点赞总是那么几个人，太多了，你们自己去看吧，我懒得截图了 [图片][图片][图片] 以上的还有很多，你们自己有兴趣的可以去自己翻一下，我就懒得去挨个贴图了。 2、部分同学存在不认真读题，盲目回答的用户所提出的问题 1）米大师支付问题，可能这两位同学还不清楚米大师是什么产品，该报错并不是网络原因所导致 [图片] 2）小程序打开付款码问题，该问题是提问的在小程序通过接口打开用户付款码接口，而并非付款码支付接口 [图片] 3）公众号问题回复小程序文档地址 [图片] 还有一些就不一一列举了，只是想表达回答用户问题时，不了解的没有必要一定去回答，回答的时候也要认真读问题 写在最后   发表本帖，对事不对人，没有什么特别的意思，技术官里面我一个认识的也没有，不存在为谁鸣不平，既然起点一致，希望做的相对公平一些，初衷是好的，希望新同学们不忘初心，记得自己来社区的目的。   在这里我还想表达一点，即使你们不去刷分，日常勤快的分享文章，回答问题，一个月300分是完全没有问题的，何必投机取巧呢？ [图片]

Ctrl+S：保存文件 Ctrl+【， Ctrl+】：代码行缩进 Ctrl+Shift+【， Ctrl+Shift+】：折叠打开代码块 Ctrl+C Ctrl+V：复制粘贴，如果没有选中任何文字则复制粘贴一行 Shift+Alt+F：代码格式化 Alt+Up，Alt+Down：上下移动一行 Shift+Alt+Up，Shift+Alt+Down：向上向下复制一行 Ctrl+Shift+Enter：在当前行上方插入一行 Ctrl+End：移动到文件结尾 Ctrl+Home：移动到文件开头 Ctrl+i：选中当前行 Shift+End：选择从光标到行尾 Shift+Home：选择从行首到光标处 Ctrl+Shift+L：选中所有匹配 Ctrl+D：选中匹配 Ctrl+U：光标回退 有帮助的话不妨点个赞吧~

最终效果 [图片] 思维导图 [图片] 数据类型 定义一个数组     todo:[{value:"起床",checked:true},           {value:"吃早饭",checked:true},           {value:"睡觉",checked:false},           {value:"吃午饭",checked:false},         ] 其中的value值表示计划，checked表示是否被勾选上。 第一步——实现输入框，添加数据   <view class="add-list">     <!-- 使用变量的保存 -->     <input  type="text" auto-focus placeholder="你想要做什么？" bindinput="bindKeyInput" />     <button class="btn" bindtap="add">添加</button>   </view> 使用 bindinput 用来监听每次输入的值，然后通过 e.detail.value ，来获取到输入的值，然后将值赋给todolist_one (这个用来保存每一个次输入的值)   bindKeyInput(e){     this.setData ({       todolist_one:e.detail.value     })     //console.log(e.detail.value)   }, 当点击添加的时候，触发 add 函数，将输入的文本，放到数组中   add(e){     var todo = this.data.todo // 定义一条新输入,未勾选     var one = {value:'',checked:false}     // 不为空的时候才可以添加     if(this.data.todolist_one !== ''){       one.value = this.data.todolist_one       todo.unshift(one) //添加想要的字段       this.setData({         todolist_one:'', //将之前的清除         todo:todo       })     }     console.log(this.data.todo)   }, 这样子的话，就完成了，输入的数据的添加了 通过 wx:for 来将数据展示出来，其中 item.value 表示每次要做的事情， item.checked 表示每次是否被勾选上   <view>     <!-- 使用for循环遍历数组 -->     <checkbox-group bindchange="mark">       <view class="add-list" wx:for="{{todo}}" value="{{todolist_one}}" wx:key="{{item.value}}">         <checkbox value="{{item.value}}" checked="{{item.checked}}"></checkbox>         <view wx:if="{{item.checked == true}}" style="text-decoration:line-through;color:blue;float:left">{{item.value}}</view>         <view wx:else>{{item.value}}</view>         <!-- 通过data-index来传递参数 -->         <button class="btn" bindtap="delete" data-index="{{index}}">删除</button>       </view>     </checkbox-group>   </view> 第二步——实现删除数据 这里的话，需要将对应的数组的下标数，给函数接收，这里的话，使用了 data-index 用来传递参数，函数可以通过 e.currentTarget.dataset.index 来获取到对应的下标，获取到后，通过数组的操作进行删除即可。 <button class="btn" bindtap="delete" data-index="{{index}}">删除</button>   delete(e){     // 接收对应数组数目的参数     var index = e.currentTarget.dataset.index     var todo = this.data.todo     // 对数组进行操作,删除对应的list     todo.splice(index,1)     // console.log(todolist)     this.setData({       todo:todo     })     // console.log(e.currentTarget.dataset.index)   }, 第三步——实现划掉数据         <checkbox value="{{index}}" checked="{{item.checked}}"></checkbox>         <view wx:if="{{item.checked == true}}" style="text-decoration:line-through;color:blue;float:left">{{item.value}}</view>         <view wx:else>{{item.value}}</view> 这里的话，当点击打勾的时候，会将打勾的index，下标返回给 e.detail.value   mark(e){     // 查看选择标记     console.log('checkbox发生change事件，携带value值为：', e.detail.value)     const  todo = this.data.todo  //选择的值     const  index = e.detail.value     //选中的值     // todo[index].checked = !todo[index].checked     var len = index['length']     // console.log(index['length'])     // 将所有的checked清零     for(var i = 0; i < todo.length;i++){       todo[i].checked = false     }     console.log(todo)     // 将选中的标上一     for(var i = 0;i < len;i++){       todo[index[i]].checked = true     }     console.log(todo)     this.setData({       todo     })   }, wxml 代码： <!--index.wxml--> <view class="container">   <view class="add-list">     <!-- 使用变量的保存 -->     <input  type="text" auto-focus placeholder="你想要做什么？" value="{{todolist_one}}" bindinput="bindKeyInput" />     <button class="btn" bindtap="add">添加</button>   </view>   <view>     <!-- 使用for循环遍历数组 -->     <checkbox-group bindchange="mark">       <view class="add-list" wx:for="{{todo}}" wx:key="{{item.value}}">         <checkbox value="{{index}}" checked="{{item.checked}}"></checkbox>         <view wx:if="{{item.checked == true}}" style="text-decoration:line-through;color:blue;float:left">{{item.value}}</view>         <view wx:else>{{item.value}}</view>         <!-- 通过data-index来传递参数 -->         <button class="btn" bindtap="delete" data-index="{{index}}">删除</button>       </view>     </checkbox-group>   </view> </view>  js代码 // pages/todolist/todolist.js Page({   /**    * 页面的初始数据    */   data: {     todolist_one:"",     todolist:["11232","2",3,4,5],     choose:[1,2,3,4,5],     todo:[{value:"起床",checked:true},           {value:"吃早饭",checked:true},           {value:"睡觉",checked:false},           {value:"吃午饭",checked:false},         ]   },   bindKeyInput(e){     this.setData ({       todolist_one:e.detail.value     })     //console.log(e.detail.value)   },   add(e){     var todo = this.data.todo     var one = {value:'',checked:false}     // 不为空的时候才可以添加     if(this.data.todolist_one !== ''){       one.value = this.data.todolist_one       todo.unshift(one) //添加想要的字段       this.setData({         todolist_one:'', //将之前的清除         todo:todo       })     }     console.log(this.data.todo)   },   delete(e){     // 接收对应数组数目的参数     var index = e.currentTarget.dataset.index     var todo = this.data.todo     // 对数组进行操作,删除对应的list     todo.splice(index,1)     // console.log(todolist)     this.setData({       todo:todo     })     // console.log(e.currentTarget.dataset.index)   },   mark(e){     // 查看选择标记     console.log('checkbox发生change事件，携带value值为：', e.detail.value)     const  todo = this.data.todo  //选择的值     const  index = e.detail.value     //选中的值     // todo[index].checked = !todo[index].checked     var len = index['length']     // console.log(index['length'])     // 将所有的checked清零     for(var i = 0; i < todo.length;i++){       todo[i].checked = false     }     console.log(todo)     // 将选中的标上一     for(var i = 0;i < len;i++){       todo[index[i]].checked = true     }     console.log(todo)     this.setData({       todo     })   },   /**    * 生命周期函数--监听页面加载    */   onLoad: function (options) {   }, }) wxss代码 /* pages/todolist/todolist.wxss */ .container{   margin-top: 30rpx;   margin-left: 30rpx;   border-radius: 5px;   background-color: white;   width: 100%;   padding-bottom: 1rpx;    } .add-list{   width: 100%;   display: flex;   float: left;   outline-color: rgb(230, 230, 230); } .btn{   margin-right: 30rpx;   display: flex;   float: right;   background-color: gold; }

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/ 预览码： [图片]