小程序说明：这个小程序类似于小论坛，专为北院（河北北方学院）同学设计，为的是让更多的同学能够融入校园，增强同学之间的友谊与社交能力。 应用程序：河北北方学院所有在校人员，任何时间地点均可参与。 解决的实际问题：帮助在校同学的情感交流，能够了解校园资讯，说不准还能找到心仪的“他” 技术卡发方案： 1.小程序端：运用小程序端的语言完成静态页面的部署 2.后端：运用微信小程序自带的云开发技术，完成云数据库，云存储，云函数的储备，运用到小程序端，做出可前后端交互的小程序 效果预览： 首页：[图片] 新建话题页：[图片] 全部话题页：[图片] 话题详情页：[图片]

项目名称：校园二手购 项目介绍：我们开发的小程序名字叫做校园二手购，是一个专注于服务广州大学学生的平台。我们都知道，身为大学生，生活费有限，而有很多东西都是在大学生活中必须的。所以有很多学生乐意将目光投向二手交易平台。而我们的小程序，就是为了方便广大学生用户，不用在贴吧等地方发布二手交易，而是有一个官方的、专门的平台来提供给学生。小程序的使用者可以在校园二手购平台上发布闲置的物品，以供大家购买。用户可以浏览全部发布的商品，在自己喜欢的商品下面留言以取得和售主的联系，在双方都谈妥之后，就可以进行线下交易。用户可以在小程序上使用修改自己的个人信息，查看我的发布，查看我的收藏，查看我的足迹，查看新留言，申请学生认证等功能。还可以在首页上查看最火热的商品的排行榜，各种便宜好货，以及常见问题。本项目致力于为广州大学学生提供一个可以进行二手交易的平台，方便广州大学的学生进行各种二手物品的交易，让闲置的物品可以得到充分的利用，减少浪费。 目标用户：广州大学学生 应用场景：广州大学学生进行二手物品交易 实现思路：用户初次进入小程序就位用户随机取一个用户名和头像上传到user表，直到用户授权登录之后把信息修改为用户的微信信息，以实现用户的管理。用户在发布了商品之后，把商品的信息上传到goods表，以实现对商品的管理，这样就实现了最重要的两个部分的管理，其他的操作都是基于这两个表去进行的。 作品体验二维码 [图片] 联系方式：13030204802,13533203394 团队简介：本项目完全由广州大学两位在校学生开发完成。 架构图： [图片] 效果截图 首页：首页最上方的栏目是搜索栏，用户可以通过此搜索栏目来进行商品的检索下一个图片展示栏。 下一个图片展示栏。能够提供用户一个清晰的窗口，点击进去还能够看到商品的详情介绍。 第二个是菜单栏，方便用户进行各种常见操作。 第三我们还可以在商品推荐里面进行商品的简单分类。 [图片] 搜索：首页最上方的栏目是搜索栏，用户可以通过此搜索栏目来进行商品的检索 [图片] 商品详情：显示商品的详细信息，以及留言板块 [图片] 发布：用户发布商品可以有两种方式，第一种是直接点击底部的发布按钮，第二种是点击首页的发布按钮，都可以进去发布页面。 [图片] 分类：用户如果想要获取更多的商品分类的话，可以点击底部的菜单栏进去分类，进行分类商品的浏览 [图片] 便宜好货：用户可以在这里获取推荐的好货。 [图片] 热度排行榜：用户可以在这里获取热度排行前10的物品。 [图片] 用户页面：最重要的一个页面则是“我的”页面，点击底部菜单栏即可进去。 [图片] 我的发布：在我的发布页面，用户可以左滑商品进行商品状态的更改，如果商品状态改为已售出的话，那么这个商品就不会在主页上显示，用户还可以 删除已经发布的商品。 [图片] [图片] [图片] 我的收藏：  在我的收藏页面，用户可以看到已经收藏的商品，同理，用户可以左滑，取消收藏商品 [图片] 我的足迹：用户还可以进去我的足迹，看到浏览过的商品 [图片] 新留言：  用户可以进入新留言页面，来查看发布的商品是否有新的留言或者回复 [图片] 个人资料：还可以修改个人资料，还提供了积分机制，以便在将来进行功能的扩展 [图片] 学生认证：进行学生认证，以识别是否是本校学生。 [图片]

应用场景 学生的二手物品的交易信息的发布、检索 目标用户 大学学生、教师、职工 实现思路 前端+云数据库+云存储+云函数，实现数据的交互，页面的渲染 架构图 [图片] 效果截图 [图片] [图片] [图片] [图片] [图片] 代码链接 作品体验二维码 正在审核中，敬请期待 团队简介 某大学 大一 学生甲，学生乙， 第一次写小程序，权当学习

校园小唤 一、项目目的：“校园小唤”，一款专门为大学生提供服务的社区平台。 二、项目概述： 1.应用场景：各大高校。 2.目标用户：学生，教职工以及校园周边消费人群。 3.实现思路：分为两大部分 1）从数据库读取数据： （1）使用云函数，获取数据，渲染UI。 2）上传数据到数据库： （1）使用云函数，上传所需要的数据存入数据库。 4.架构图： [图片] 5.效果截图： [图片][图片] 6.功能代码展示:以下是发布动态的主要代码 [图片][图片][图片][图片][图片][图片][图片] 7.团队简介： 校园小唤开发团队由两位小程序初学者组成。

应用场景 在校同学发布失物招领或表白等信息。 目标用户 在校生。 实现思路 获取用户openid后，把用户发布的信息和图片存到云数据库中，在用户查看自己发布的帖子时候，在云数据库中搜索对应的openid发布的帖子和评论。 架构图 暂无，项目还在持续优化中。 效果截图 [图片] [图片] [图片] [图片] [图片] 功能代码展示 暂无，项目还在持续优化中。 团队简介 一神带一坑队伍，前端小菜和小弱。

项目名称：大学校园闲置物品交易平台 1. 应用场景 作为一个大学生，经常会有一些闲置的物品需要处理，物品仍有使用价值，直接扔掉有些可惜，只好寻找再次出售的途径；或许也想要买一些物品，但不需要全新的，如二手自行车等。购买出售的途径一般有两个： 二手物品交易平台，如闲鱼等。但是，这种途径并不是十分非常适合大学生，本来就学业繁忙的我们需要抽出时间去寄送包裹，而且如果买到假货后甚至无从申诉，权益可能受到损害。 校内的各种闲置物品交换群（QQ，微信）：此类途径具备了一定的安全性，而且方便快捷，因为都是本校的学生线上联系后线下交易。但是仍然存在信息获取效率低下的问题，很难从几百条群消息中准确的找到自己想要的物品，自己发布的商品也可能被群消息淹没。除此之外，信息的时效性很难得到保障，看到发布的商品后，很可能那件商品已经出售，需要要麻烦卖家亲自删除消息或说明商品已卖出。 针对上述途径存在的问题，我们设计了“大学校园闲置物品交易平台”的微信小程序，使用学生验证（暂未完成）、各大学相互隔离、线下交易的方式确保安全性，提供线上发布、商品列表与商品详情展示、商品检索的功能以保障较高的消息获取效率，采用商品问答、商品状态自动更新的方式确保信息的时效性。在大学校园闲置物品交易平台中，大学生能够在不涉及线上支付的情况下安全快捷地出售与购买二手物品。 2. 各页面功能展示(效果截图) 视频展示链接：https://v.qq.com/x/page/x31519ac9h3.html 2.1 商品列表与搜索 [图片] 首页为商品列表展示界面。 首页上方显示用户所在大学与搜索框，搜索框下方为大屏轮播图（暂未完成），可用来展示商品或广告。 轮播图下方为商品分类栏，包含了大多数常用分类，用户可以浏览自己感兴趣的分类。 主体部分为商品列表展示卡片，展示商品图片、标题、简介、状态、价格及数量。列表展示采用分页加载，每次加载10条商品信息，下滑到底部后，会自动加载下面10条商品信息，直到加载完所有商品。 搜索后的商品展示与首页的展示方式类似，采用模糊搜索，查询匹配到的商品的标题。 2.2 商品详情页与商品问答 [图片] 点击商品卡片后，进入商品详情界面。 界面上方为商品详情图片的轮播图，点击图片可以查看具体的图片，左右滑动查看列表中所有图片。 详情图下方为商品详情信息，包括标题、状态、价格、简介、数量、备注及原始购买链接。 详情信息下方为商品的问答区，可以在此询问卖家关于商品的问题，卖家可以在此回复用户。 [图片] 点击提问/回复后可以发表提问/回复内容，并在问答区展示。 商品问题仍然采用分页加载模式。当问题的回复超过2条时，回复卡片将自动折叠，点击查看全部回答可以跳转至问题详情界面，采用分页加载的模式展示所有回复。 2.3 商品发布 [图片] 点击底部Tab Bar的加号可以进入商品发布界面，上传前会进行表单验证，防止非法的数据存入数据库。上传时会让用户选择是否接受新交易推送，无论是否同意均不影响商品上传。上传成功后会自动跳转到商品列表界面，用户可以看到自己刚发布的商品。 2.4 发起交易与交易操作 [图片] 点击商品详情界面的发起交易后，若商品能够被购买，则进入确认交易界面。用户可以选择商品数量（不超过库存），查看总价格，最后点击确认交易。 若商品能够被购买，则更新商品库存，有必要的话更新商品状态，生成交易详情，跳转至交易详情界面。 至此，线上的活动暂告一段落，点击查看对方联系方式，通过对方的联系方式自行进行线下交易，结束后，当双方都点击确认交易完成后，交易结束。若任一方想要中止交易，直接点击取消交易即可。进行中的交易若无人点击确认完成，将在7天后状态自动变为已完成。 2.5 用户信息管理 [图片] 点击底部Tab Bar我的，可以进入管理界面。 点击头像/昵称/学校或在我的信息中，可以编辑个人信息，修改昵称、微信QQ联系方式与大学。 2.6 交易与商品管理 [图片] 在“我的交易”与“我发布的商品”中，可以查看交易详情，进行交易操作，或者查看发布的商品，选择删除商品。加载方式均为分页加载。 2.7 新交易推送 [图片] 为了提醒卖家有人购买其发布的商品，小程序加入消息推送功能。在发布商品时，会让用户选择允许接受新交易通知。点击允许后，若有人对卖家发布的商品成功发起交易，卖家便会收到消息推送，点击推送内容可直接查看交易详情，进行交易操作。 由于微信小程序对于用户隐私的保护，个人小程序的消息订阅仅是一次性的。若想再次收到交易推送，则需要在“我的”界面中点击“接受新交易推送一次”。 2.8 其他 其他界面包括index页、用户注册页、小程序介绍页等等，均为辅助功能，在此不再赘述。 3. 项目架构 下面时此项目的详细架构，对此项目感兴趣的小伙伴可以仔细阅读，如有不妥，敬请指正。 3.1 总体架构 [图片] 本项目以云开发为核心，主要包括：云函数，云数据库，云存储，云调用和HTTP API（暂未完成）五个部分。除了云开发外，还有小程序端，后台管理系统（CMS），第三方服务器等部分。 云函数： 接收小程序端发来的请求 接收CMS通过HTTP API发来的请求（暂未完成） 访问云数据库和云存储获取数据，然后发送回复 使用云调用，如消息推送 向第三方服务器发送请求，如用于学生验证的学校服务器（暂未完成） 云数据库： 被云函数访问 通过HTTP API被访问（暂未完成） 云存储： 被云函数访问 通过HTTP API被访问（暂未完成） 云调用： 通过云函数被调用 访问腾讯云服务，如消息推送 HTTP API（暂未完成）： 被后台管理系统调用 调用云函数，访问云数据库，云存储 小程序端： 只访问云函数获取服务 后台管理系统（暂未完成）： 只访问HTTP API获取服务 下面将对上述架构的每一部分进行详述。 3.2 云数据库表结构 [图片] 由于项目较大，涉及到的实体较多，故先画出该项目的ER Model（为了便于展示，略去了attribute）。实体共有8个：用户，大学，商品，商品分类，商品问题，问题回复，交易，轮播图（暂未完成）。上述实体的关系如图片所示。 根据模型图，可以在云数据库中建立8张数据表，对于特定的键建立索引。本项目，除了图片以外，删除方式都是软删除，故添加[代码]is_deleted[代码]字段。 [图片] 3.3 小程序端架构 [图片] 小程序端共分为以下几个部分：用户模块、商品模块、交易模块、工具类、学生验证（暂未完成）、云函数统一接口、缓存管理、组件库和CSS库。 用户模块：包括用户注册、学生身份验证和用户信息管理。 商品模块：包括商品列表、商品搜索、商品详情、发布商品、商品提问、提问回复和商品管理。 交易模块：包括发起交易、交易操作和交易管理。 工具类：返回内容格式化、时间展示格式化、表单验证。 学生验证（暂未完成）：对于特点操作，访问云函数之前先验证学生身份。 云函数统一接口：将云函数返回的数据加工成合适的格式，直接供页面逻辑层使用。 缓存管理：将商品列表，用户信息，商品分类等数据缓存在本地，提高小程序性能，合适的时候清除缓存，重新访问云函数统一接口。 组件库：为了加快开发速度，专注云开发功能，本项目使用vant-weapp组件库。 CSS库：为了小程序的样式更加美观，本项目使用Color-UI库。 3.4 云函数结构 [图片] 本项目一共创建了10个云函数，大多与云数据库中的数据表一一对应。由于业务功能较多，所以使用[代码]tcb-router[代码]进行路由转发，增加服务的数量。每个云函数中的方法不再赘述，见其名就可知其意，都是基本的CURD操作。 需要说明的是： [代码]subscribeMsg[代码]函数：使用云调用，向用户推送消息（新交易提醒）。 [代码]del_trigger[代码]函数：定时触发器，每天定时删除一定时间之前的商品、问答、交易等。 [代码]transaction[代码]函数中的发起交易、取消交易、确认交易完成，以及[代码]commodity[代码]函数中的删除商品，这几个操作均涉及到多个数据表的改动，为了保障ACID(atomic, consistency, isolation, durable)，都应采用数据库事务去完成数据库的操作。 3.5 云存储结构 [图片] 云存储中主要存放商品的缩略图和详情图的[代码]fileIDs[代码]、小程序背景图片及轮播图（暂未完成）。 3.6 云调用 [图片] 本项目的云调用主要是实现消息推送的功能，先在小程序端获取卖家的授权，然后由买家触发推送消息的云函数。 3.7 HTTP API，后台管理及第三方服务器（暂未完成） 由于参加比赛时间较晚，再加上临近开学，时间仓促，故无法完成该平台后台管理系统的搭建。待时间允许，将考虑建立后台管理系统，方便快捷地管理商品、用户、交易、轮播图的数据，通过HTTP API访问云函数，复用写好的方法，或者直接访问云数据库和云存储。 关于第三方服务器的学生验证功能，暂时还无法实现。 4.代码链接 github地址： https://github.com/2horse9sun/University_O2O 点个star吧！ 5. 体验二维码 由于该项目涉及到信息发布内容且是个人开发，故无法上线，只有体验版。 希望日后能争取上线投入使用吧。 6.团队作者简介 我们是大二升大三的大学生，爱好旅游、美食、看书。希望能够和大家在github上交流技术、结识朋友。

这是一个校园表白墙小程序，有表白墙、卖舍友、步数旅行、情侣脸和私信等功能模块。 效果图如下： [图片] [图片] [图片] [图片]

目标用户 主要的目标实体大学生，打造一个供大学生表白的平台 实现思路 初始界面展示表白对象，表白内容和表白对象的图片，点击中间的加号可添加一条记录信息，添加完记录可以对记录进行点赞和评论。 效果截图 [图片] [图片] 功能代码展示 显示页面iindex.js代码 //index.js const app = getApp() const db=wx.cloud.database("love"); const love=db.collection("love");//连接数据库 Page({   data: { Image:null, state:0, num:0,   },    //实现选择图片并且把图片显示的功能   doUpload:function(e)   {     wx.chooseImage({       success:res=>{         console.log(res);         wx.cloud.uploadFile({           cloudPath:`${Math.floor(Math.random()*100000000)}.jpg`,           filePath:res.tempFilePaths[0] , //文件路径                   }).then(res=>{           this.setData({             Image:res.fileID           })                  })//然后then       }     })     },     onSubmit:function(event){  //event提交数据       love.add({         //添加到数据库love         data:{         lover:event.detail.value.lover,         context:event.detail.value.context,         Image:this.data.Image,         state:0,         num:0,         createTime:db.serverDate() //添加该字段         }         }).then(res=>{          wx.showToast({            title: '提交成功',            icon:"success",             success:res2=>{                         //   //  wx.redirectTo({           //   //    url:"../index/index"           //      //url: `../todoInfo/todoInfo?id=${res._id}`,           //    })            }          })         })     },     onChange({ detail }) {       // 需要手动对 checked 状态进行更新       this.setData({ checked: detail });     }, })

[图片] H5时代用来做图表的插件有很多比如：[代码]ECharts[代码]、[代码]Bizcharts[代码]、[代码]JSCharts[代码]等，而这次的小程序本人选用了 ECharts 作为图表组件。 1、选择原因主要有3点： 官方某度在持续维护这个插件 官方推出了直接适配小程序的版本，且有demo，开盖即食，不用迁移 简单实用，覆盖面广且可通过配置控制包的大小，小程序毕竟大小有限制~ eCharts来自BAT中的B前端团队，对应的小程序版本为：echarts-for-weixin 官网地址 https://echarts.apache.org/ github地址 https://github.com/ecomfe/echarts-for-weixin 小程序demo地址 https://github.com/ecomfe/echarts-examples 2、用法 （1）官方教程 [代码]index.json[代码] 配置如下： [代码]{ "usingComponents": { "ec-canvas": "../../ec-canvas/ec-canvas" } } [代码] 这一配置的作用是，允许我们在 [代码]pages/bar/index.wxml[代码] 中使用 [代码]<ec-canvas>[代码] 组件。注意路径的相对位置要写对，如果目录结构和本例相同，就应该像上面这样配置。 [代码]index.wxml[代码] 中创建了一个 [代码]<ec-canvas>[代码] 组件： [代码]<view class="container"> <ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas> </view> [代码] 其中 [代码]ec[代码] 是一个我们在 [代码]index.js[代码] 中定义的对象，它使得图表能够在页面加载后被初始化并设置。 [代码]index.js[代码] 配置： [代码]function initChart(canvas, width, height, dpr) { const chart = echarts.init(canvas, null, { width: width, height: height, devicePixelRatio: dpr // 像素 }); canvas.setChart(chart); var option = { ... }; chart.setOption(option); return chart; } Page({ data: { ec: { onInit: initChart } } }); [代码] 这对于所有 ECharts 图表都是通用的，用户只需要修改上面 [代码]option[代码] 的内容，即可改变图表。[代码]option[代码] 的使用方法参见 ECharts 配置项文档。 官方demo里的一些用法指导： 如何延迟加载图表？ 参见 [代码]pages/lazyLoad[代码] 的例子，可以在获取数据后再初始化数据。 如何在一个页面中加载多个图表？ 参见 [代码]pages/multiCharts[代码] 的例子。 如何使用 Tooltip？ 目前，本项目已支持 ECharts Tooltip，但是由于 ECharts 相关功能尚未发版，因此需要使用当前本项目中 [代码]ec-canvas/echarts.js[代码]，这个文件包含了可以在微信中使用 Tooltip 的相关代码。目前在 ECharts 官网下载的 [代码]echarts.js[代码] 还不能直接替换使用，等 ECharts 正式发版后即可。 具体使用方法和 ECharts 相同，例子参见 [代码]pages/line/index.js[代码]。 如何保存为图片？ 参见 [代码]pages/saveCanvas[代码] 的例子。 （2）本人实战操作 [图片] [代码]import * as echarts from '../ec-canvas/echarts'; const app = getApp(); let chart; function initChart(canvas, width, height, dpr) { chart = echarts.init(canvas, null, { width: width, height: height, devicePixelRatio: dpr // new }); canvas.setChart(chart); chart.setOption(option); return chart; } var option = { title: { text: '智酷君 echarts 切换效果测试', left: 'center' }, tooltip: { trigger: 'item', formatter: '{a} <br/>{b}: {c} ({d}%)' }, legend: { orient: 'vertical', left: 10, data: ['AAA', 'BBB', 'CCC', 'DDD', 'EEE'] }, series: [ { name: '访问来源', type: 'pie', radius: ['50%', '70%'], avoidLabelOverlap: false, label: { show: false, position: 'center' }, emphasis: { label: { show: true, fontSize: '30', fontWeight: 'bold' } }, labelLine: { show: false }, data: [ {value: 335, name: 'AAA'}, {value: 310, name: 'BBB'}, {value: 234, name: 'CCC'}, {value: 135, name: 'DDD'}, {value: 1548, name: 'EEE'} ] } ] }; Page({ data: { ec: { onInit: initChart } }, onLoad: function () {}, //单曲线 line() { let option2 = { title: { text: '同一canvas更新成折线图', left: 'center' }, xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [{ data: [820, 932, 901, 934, 1290, 1330, 1320], type: 'line' }] }; chart.setOption(option2) }, //切换柱状图 bar(){ let option3 = { title: { text: '直接更新数据，减少性能消耗', left: 'center' }, xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [{ data: [120, 200, 150, 80, 70, 110, 130], type: 'bar', showBackground: true, backgroundStyle: { color: 'rgba(220, 220, 220, 0.8)' } }] }; chart.setOption(option3) } }) [代码] 建议大家尽量使用同一个canvas对象来切换不同的图表效果，而不是初始加载多个不同的，我们可以将 [代码]chart[代码] 对象设置为全局，然后通过 [代码]chart.setOption()[代码] 的方法来更新配置数据，可以减少性能消耗避免闪退等 （3）代码片段 代码段：https://developers.weixin.qq.com/s/OOTwnsms7Cin 建议将IDE工具升级到 1.02.18以上，避免一些BUG [图片] 3、Tips （1）包大小可以配置 在线定制地址： https://echarts.apache.org/zh/builder.html [图片] [图片] 通过选择和配置想要的功能，可以大大减少原本JS包的尺寸。 （2）Canvas 2d 版本要求 最新版的 ECharts 微信小程序支持微信 Canvas 2d，当用户的基础库版本 >= 2.9.0 且没有设置 [代码]force-use-old-canvas="true"[代码] 的情况下，使用新的 Canvas 2d（默认）。 使用新的 Canvas 2d 可以提升渲染性能，解决非同层渲染问题，强烈建议开启 如果仍需使用旧版 Canvas，使用方法如下： [代码]<ec-canvas id="xxx" canvas-id="xxx" ec="{{ ec }}" force-use-old-canvas="true"></ec-canvas> [代码] （3）数据点过多造成闪退和卡死 本人简单测试了下，iphone7p手机在[代码]1500个[代码]左右数据点的时候，出现了小程序闪退，iphoneX 测试下来大概在[代码]2500个[代码]左右，猜测可能由于微信本身给小程序的内存有限，所以建议大家控制数据点的个数 （4）单页面图表canvas加载过多卡死 建议单页面图表加载不要超过[代码]5个canvas[代码]，尽可能共用一个图表Canvas对象，通过动态更新数据的方式来展示内容（还有帅气的特效），如果一定要加载多个canvas的话，建议控制数量，提供复用性~ 看完觉得有帮助记得点个赞哦~ 你的赞是我继续分享的最大动力！^-^

[图片] ECharts 图表组件插件可以让小程序轻松使用 ECharts 图表功能，不用担心接入成本以及占用较大体积的问题，以及较为复杂的接入使用问题。详细接入文档：https://mp.weixin.qq.com/wxopen/plugindevdoc?appid=wx1db9e5ab1149ea03 接入步骤1、插件申请首先要在小程序管理后台的“设置-第三方服务-插件管理”中添加插件。开发者可登录小程序管理后台，通过 [代码]wx1db9e5ab1149ea03[代码] 查找插件并添加。通过申请后，方可在小程序中使用相应的插件 2、引入插件配置在 app.json 中插件如下代码，注意 AppId 为 [代码]wx1db9e5ab1149ea03[代码] {   "plugins": {     "echarts": {       "version": "1.0.2",       "provider": "wx1db9e5ab1149ea03"     }   } } 3、使用方式在使用的页面中的 json 配置文件中，插件如下代码： {   "usingComponents": {     "chart": "plugin://echarts/chart"   } } 在 wxml 中需要展示图表的位置，插入如下代码： <chart chart-class="chart" option="{{ option }}" bindinstance="onInstance" /> 其中 chart-class 为样式类，option 为 ECharts 中的 option 配置对象，bindinstance 会回调 ECharts 实例对象，如果需要操作 ECharts 实例对象可以实现此方法 4、效果展示[图片] 注意事项如果需要兼容低于 2.6.1 的小程序，在更新 option 的时候需要手动 setOption，具体代码如下： // 支持 observers 的版本可以直接修改 option if (echarts.isSupportObservers()) {   this.setData({     option,   }); } else if (this.instance) { // 在不支持 observers 的小程序版本中需要手动通过 ECharts 实例更新 option 配置   this.instance.setOption(option, true); } 如果你的小程序最低支持版本大于 2.6.1，或者你不会动态改变 option 配置，那么你不需要关系这段代码，也不需要处理 bindinstance 回调。 关于使用中遇到任何问题可以添加微信反馈，添加微信时可以备注 ECharts。 [图片]

# 一、应用场景 校园内，同学们在日常生活中，丢失物品的情况时有发生，如书本、雨伞、校园一卡通甚至手机电脑等贵重物品。目前针对失物处理的办法是上墙（学校官方的表白墙）寻找，但是由于墙发帖的时间不够及时，真正物归原主的失物还是不够多。因此，我们利用微信小程序开发的失物招领平台，提高了失物招领消息的时效性。 # 二、目标用户 各学校全体师生 # 三、实现思路 本小程序采用基于云开发的原生开发，用到了云数据库存储数据，使用云函数获取当前用户的openid、读写操作云数据库，云存储保存图片，云调用内容安全接口检查提交信息是否存在违法违规内容。 失物招领包括失物和拾物两个模块，每个模块又分为上传信息和查看信息两个模块以及个人信息查看和修改功能。 # 四、架构图 [图片] # 五、效果截图 [图片] [图片][图片][图片] # 六、功能代码展示 getFoundMessage: function () {     let that = this     db.collection("found").field({       "title": true,       "description": true,       "time": true,       "picture": true,       "status": true     }).get({       success: res => {         console.log(res)         that.setData({           arr: res.data         })         console.log(that.data.arr)       },       fail: res => {         console.log(res)       }     })   },   getLostMessage: function () {     let that = this     db.collection("lost").field({       "title": true,       "description": true,       "time": true,       "picture": true,       "status": true     }).get({       success: res => {         console.log(res)         that.setData({           arr: res.data         })         console.log(that.data.arr)       },       fail: res => {         console.log(res)       }     })   },   onNavBarTap: function (event) {     let navbarTapIndex = event.currentTarget.dataset.navbarIndex     this.setData({       navbarActiveIndex: navbarTapIndex     })     if(navbarTapIndex == 0){       this.getLostMessage()     }else{       this.getFoundMessage()     }   },   onBindAnimationFinish: function ({detail}) {     this.setData({       navbarActiveIndex: detail.current     })     if(this.data.navbarActiveIndex == 0){       this.getLostMessage()     }else{       this.getFoundMessage()     }   },   onLoad:function(options){     this.getLostMessage()   } 这个是个人失拾记录切换的核心代码 # 七、作品视频 https://v.qq.com/x/page/y31544epii9.html?sf=qq # 八、团队简介 张毅 大三在读，学习vue以及java后端。 周鼎举 大三在读，学习微信小程序不到一年，还是个菜鸟。