微信公众平台为开发者提供了用户授权登录功能及相关接口，以便开发者为用户提供便捷的使用体验。 根据相关法律法规，为进一步规范开发者调用用户信息相关接口或功能，保障用户合法权益，平台将对用户信息相关功能及接口进行调整，具体如下： 一、相关接口调整： 1、小程序与小游戏获取用户信息相关接口：不再返回用户性别及地区信息； 能力参考：小程序用户信息 、小游戏用户信息； 2、 公众号用户信息获取接口：不再返回用户性别及地区信息； 能力参考：公众号用户信息； 3、 Open平台授权接口：包括App授权登录、公众号H5授权登录、网站扫码授权登录，不再返回用户性别及地区信息； 能力参考：移动应用、网站应用、第三方平台； 本次改造调整生效后，所述涉及字段返回值将按如下规则生效： [图片] *注：字段名均保持不变，小程序与小游戏获取用户信息接口“用户性别”字段名为gender；Open 平台授权接口“用户性别”字段名为 sex 二、相关功能调整： 1、 公众号个性化菜单功能：不再提供基于性别/地区设置个性化菜单的能力； 能力参考：个性化菜单接口； 2、公众号后台粉丝列表：粉丝列表等不再展示用户的性别信息； 涉及功能页面：公众平台帐号管理后台-用户管理/留言管理/赞赏/视频弹幕/消息； 3、服务号粉丝列表筛选：不再提供基于地区筛选粉丝的能力； 涉及功能页面：公众平台帐号管理后台-对话能力-客户管理。 平台预计10月20日完成调整，请开发者及时进行调整适配，避免影响相关服务及用户体验。 微信团队 2021年09月26日

目前微信小店开放组件已经申请成功，且第一时间去体验了一把。 想介入 微信小店开放组件的开发者可以点击下方链接提交申请 https://developers.weixin.qq.com/doc/ministore/minishopopencomponent/Introduction.html 官方在审核完成后会推送申请成功的模板消息，且拉入官方组件问题反馈群 你的微信小程序后台也会增加小商店店开放组件 [图片] 点击去管理会打开对应小程序的小商店后台，此后台是对应你小程序申请的插件版小店后台 与 单独申请的小店后台不互通，需要单独提交资质审核签约 官方提供了几个组件开发者可通过路由跳转进入对应的组件页面 例如下方商品详情 const productId = [商品id] // 填写具体的商品Id ​wx.navigateTo({ ​ url: plugin-private://wx34345ae5855f892d/pages/productDetail/productDetail?productId=${productId}, }); 文档的接入方式我不多赘述，可自行看文档，这里说一下文档没得 鄙人使用的是uni-app框架开发小程序所以说一下uniapp介入方式 找到manifest.json文件源码视图找到微信小程序配置 "mp-weixin": { /* 小程序特有相关 */ "appid": "wx2afea6afe2d23263", "setting": { "urlCheck": false, "es6": true, "postcss": true, "minified": true }, "permission": { "scope.userLocation": { "desc": "你的位置信息将用于定位您是否位于图书馆范围内" } }, "requiredBackgroundModes": [ "audio" ], "usingComponents": true, "plugins": { "mini-shop-plugin": { "version": "1.0.63", // 必须是小程序购物组件最新版本号，微信开发者工具调试时可获取最新版本号（复制时请去掉注释） "provider": "wx34345ae5855f892d" // 必须填小程序购物组件appid，不要修改（复制时请去掉注释） } } }, 官方文档里提到的组件版本是1.1.0，介入后控制台报错提示找不到1.1.0，最终找到小程序插件信息最新版本才更新到1.0.63，不得不说这文档有点坑 附上插件的信息链接 https://mp.weixin.qq.com/wxopen/pluginbasicprofile?action=intro&appid=wx34345ae5855f892d&token=1836153220&lang=zh_CN 此时已经可以在小程序内使用插件了 去尝试一下 先在后台提交上架商品拿到SpuId [图片] /** * 商品详情 * @Author: wkiwi * @function: productDetail */ productDetail(productId){ uni.navigateTo({ url:`plugin-private://wx34345ae5855f892d/pages/productDetail/productDetail?productId=${productId}` }) }, 调用方法进入商品详情 [图片] 体验完美，可以说几分钟时间就集成了一个官方商城出来。 但是别高兴的太早，总结了本次介入的问题 1.文档问题，还在内测阶段可能不完善 存在版本问题 以及跳转说明问题 下方官方说默认不传tabId会进入全部分类 [图片] 可是并不如此，会toast提示tabId必须为 all/pendingPay/pendingRecevied/afterSale 中的一项 2.产品层面问题 在小程序内介入小店，大多应该就是充当官方商城的吧，但是商品列表组件竟然未提供，这是让开发者徒手再撸一个商品列表首页吗？？？？ 目前用户想进入到商品列表必须通过商品详情左下方的店铺按钮才可以进入商品列表，造成入口较深，体验不佳 此时点击 店铺按钮 又造成另外一个问题，跳转进入商品列表也就是微信小商店的首页，此时头部没有返回按钮，点击手机的返回按钮会直接退出小程序 [图片] 猜测 店铺首页为小商店的tab页面，导致无法返回 此问题导致小程序退出率大大增加，运营辛辛苦苦留存的用户这么轻而易举让用户退出了？？？？？？ 此时小程序想浏览小程序本身的首页是必须通过清除小程序后台，重新点击进入才能回到小程序层级，否则你只能在插件版本的小商店内跳转！！！ 本次体验整体感觉微信小商店 给小程序一个快速集成官方商城的一个解决方案，但是在产品上还有些问题，本阶段上述产品问题未解决我是不可能接入的，希望官方尽快完善上述问题 ----------------------------------接更新---------------------------------- 详情页点击首页按钮无法返回小程序首页解决方案 const miniShopPlugin = requirePlugin('mini-shop-plugin') miniShopPlugin.initHomePath('/pages/index/index') // /pages/index/index为自己小程序首页路径 进入小商店组件首页路径 wx.navigateTo({ url: `plugin-private://wx34345ae5855f892d/pages/home/home`, });

最近项目需要写一个订单商城模块，后来发现微信竟然有这个组件，就拿过来用用试试看，为了赶项目进度，降低开发资源还是挺不错的 我们直接按照开发文档给出的流程去做： 第一步先在小程序后台管理页面开通这个服务：不懂得看这里➡https://developers.weixin.qq.com/doc/ministore/minishopquickstart/introduction.html[图片]开通以后需要审核，看到如上图就说明开通成功了，接下来就是第二步，这里比较坑，我在微信开发文档没看到这一步和相关的说明，就是为我们需要引入这个组件才可以使用，看下图，先打开设置，第三方设置，然后添加插件，第一个就是，添加完了就可以了[图片]第三步，添加完插件后，点击后面详情，可以看到相关插件的appID这个一定要记住，这个就是你的小商店的appid，唯一的，看到如下图说明ok了，接下来我们就可以在开发者工具中调用相关的api使用组件了；[图片]最后一步：在app.json引入插件，加上相应的代码，然后在页面中加上跳转链接就可以饿了，直接触发事件跳转，具体的按照文档的使用教程继续配置就可以了：https://developers.weixin.qq.com/doc/ministore/minishopopencomponent/guideline.html基本要分享的就是这些了，如果你也需要使用这个购物组件的话，遇到问题或者又不懂不会的地方也可以留言一起讨论，我也刚开始用哈哈，记录一下！

为了进一步降低进入小程序生态经营和卖货的门槛，微信团队正式上线了微信小商店能力，该能力让更多中小微商家快速拥有一个小程序店铺，在微信内实现电商业务的自主经营。 微信小商店购物组件，是微信团队为商家及服务商提供的，可在其已有小程序中调用以实现快捷接入微信小程序交易标准化解决方案的组件能力。通过该组件可实现对小商店的定制化开发及更多拓展能力，并可降低服务商的开发运营成本。 如需以平台型服务商的身份为商家接入微信小商店购物组件，你需要完成以下步骤。 一、创建第三方平台，并选择平台型服务商。 平台型第三方平台申请和上线流程 二、添加对对应权限集，首次创建的第三方添加权限集后需进行全网发布 第三方平台权限说明 三、完成以上步骤后即可根据小商店购物组件文档进行调用。 购物组件接入文档 微信团队 2020年12月14日

解密后得到的字符串为���o����S�b�rR?f��%�5!ʲ�S�����r:G-N�J���B�׃3�n��5������tMc�����y�zrm��B���p�d�qd�0����，这个无法使用json解析啊，而且乱码情况并不是必现，偶然间出现几次，找不到规律，官方大大给个解决方案吧，这个三五太难了

这个是不是表示开通后只有第一个月免费1G，之后按天算钱啊？ [图片]

今天来教大家部署一个属于自己的第一个静态网站，因为这里借助小程序云开发的静态服务器资源，所以可以轻松的实现自己网站的部署，部署完以后可以在电脑浏览器，手机浏览器，微信公众号里面展示。 老规矩，先看效果图 简单起见，我这里写一个最简单的html静态网页 [图片] 然后把这个网页部署到云开发静态网站上 微信上访问效果如下 [图片] 手机浏览器上访问如下 [图片] 这也就意味着，我们的网站可以供用户在任何地方访问。下面就来教大家如何快速的部署一个属于自己的网站。 一，开通云开发 这里开通云开发我们借助小程序开发者工具来实现快速开通。 1-1，注册小程序 这里我就不再多说了，只有注册过小程序的appid才可以开通云开发 [图片] 我们注册好小程序后，就可以拿到appid了，如上图 1-2，创建一个小程序项目 小程序项目的创建，我这里不再多说，我前面小程序基础课里有讲过很多遍。《小程序基础学习》 [图片] 这里强调一点，就是创建小程序项目时一定要用我们自己的appid不要用测试号。 [图片] 如果你一开始是用测试appid创建的，也可以通过上图的方式更换成自己的小程序的appid。 1-3，开通云开发 这里云开发的开通，我就不做过多讲解了，我云开发课程里也讲过很多遍。大家可以去翻看下 [图片] 只需要点击开发者工具里的云开发按钮，跟着提示一步步操作就可以快速开通云开发。 二，开通静态网站功能 [图片] 我们上面云开发开通好以后，就可以在这里快速开通静态网站了。 [图片] 点击以后，直接点击开通即可 [图片] 这时候开通有个条件 [图片] 我们必须按照要求改变自己小程序的付费方式，把我们的付费方式改成按量付费即可。 [图片] [图片] [图片] 这个时候我们的静态网站功能就开通成功了。 [图片] 开通成功以后如下图。 [图片] 这个时候我们就可以把我们开发好的静态网页上传到网站供别人访问了。 三，部署网站 我们的静态html如下 [图片] 点击上传文件，把我们的index.html文件上传到静态网站 [图片] 这样就代表上传成功了。 访问我们的网站 上面把网页部署成功以后，我们就可以通过云开发为我们创建的默认网址来访问了。 [图片] 点击上图所示的详情，就可以拿到访问我们网站的网址如下 [图片] 上图箭头所示的网址，就是我们网页的访问网址。 [图片] 如果你的html是以index命名的，我们使用云开发为我们分配的域名，就可以直接访问我们的网站。 [图片] study-gas4x-1258760189.tcloudbaseapp.com 就是云开发为我分配的网站域名，以后用户就可以直接通过这个域名访问我们的网站了。 其实到这里我们就可以成功的部署属于我们自己的网站了，无非就是你网页写的比石头哥再好看些。 但是有些同学觉得官方给分配的域名太长，不好记，想使用自己的域名。那么我们该如何配置自己的域名呢？ 四，配置域名（选看） 其实前面3步就可以成功的部署自己的网站了，如果你有自己的域名，并且也成功的备案了，再来跟着石头哥学习这一节。如果没有自己的域名，那么你就要先去注册自己的域名，并备案了。所以这一节作为一个选学。 4-1，在网站配置里添加自己的域名 [图片] 如我在这里点击添加域名，然后添加自己的备案域名。 [图片] 但是我们这里要想https来安全访问，就必须配置自己的ssl证书。 [图片] 点完以后，我们这里可以直接申请免费证书。免费证书有效期1年，1年后我们再重新申请新的证书就可以了，所以这里免费的就够用了。 [图片] 如实的填写自己的备案域名和其余信息。 [图片] 提交完资料，我们这里需要验证下自己的域名，验证方式选择DNS就可以 [图片] 点位DNS验证，我们就需要给我们的域名配置访问的解析值了（这里的知识点比较深奥，大家需要自己课下恶补下域名解析的相关知识点）如果不想学习，直接根据提示配置也行。 [图片] 配置好以后，就可以点击验证先进行验证了 [图片] 验证通过后，可以看到如下 [图片] 云开发控制台也会显示部署中，我们耐心等待部署就可以了。 [图片] 启动成功会有如下标识 [图片] 虽然已经启动成功，我们如果想通过自己的域名访问自己的云开发静态网站，还需要配置下CNAME进行重定向，也就是访问我们域名的时候我们要重定向到云开发给我们分配的域名。 [图片] 这里理解起来有点晦涩，官方给的文档也是没有讲明白，我也是试了很多遍才知道是这样配置的。这里都配置好以后，我们就可以直接通过自己的域名访问网站了。 [图片] 大家也可以去访问下石头哥的云开发静态网站试一试。 到这里我们的网站部署就讲完了，后面我会用vue写一些炫酷的网站，然后部署到线上供大家观赏。 好了，今天就讲到这里吧，石头哥也要吃午饭了。

使用的是腾讯视频插件播放视频，分享视频页面到微信时，需要获取当前视频封面图片作为分享图片，请问有什么方法可以获取得到吗？

本文背景答题小程序付费版，需要用户付费才能刷题，基于这个场景，今晚做了云开发的支付功能 本文内容本文主要接前文如何接入微信支付，具体会上代码，这样更实际一些， 云开发如何接入微信支付实践? - 微信开放社区 https://developers.weixin.qq.com/community/develop/article/doc/000ecc7c48034043169ab04f456813 初始代码为官方示例代码，具体改动四个地方 1、outTradeNo 2、subMchId 3、envId 4、functionName 参考文章 https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/wechatpay.html https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference-sdk-api/open/pay/CloudPay.unifiedOrder.html 微信支付云调用拼夕夕版尝鲜踩坑教程 [拎包哥]? - 微信开放社区 https://developers.weixin.qq.com/community/develop/article/doc/000cc2d036c690ec576acce8656813 云开发怎么在原生微信支付回调函数传参？? - 微信开放社区 https://developers.weixin.qq.com/community/develop/doc/0002aab17f8ae88db95a38cf451800 新能力｜云调用支持微信支付啦！? - 微信开放社区 https://developers.weixin.qq.com/community/develop/article/doc/000ae40c258c58219d5a48afc56813 [图片] 2[图片] 3 [图片] [图片] 界面截图 [图片] [图片] 调试信息[图片] [图片] [图片] 本文总结这次接入微信支付，从开始敲代码，到调通花了不到一个小时，其间遇到几个问题，但是都是自己的疏忽造成的， 微信支付云调用能力，对于接入微信支付来说太容易了，小白福音来了 参考视频 bilibili李东教学 https://www.bilibili.com/video/BV1uz411B7Kb

云开发扩展能力之短信验证码登录 短信验证码登录支持在客户端使用短信验证码进行登录，封装了短信验证码的生成、发送、校验和定时清理逻辑，帮助开发者进行鉴权。登录成功后，用户身份将转化为正式用户。 本次实战我们将使用web云开发实现短信验证码登录并新增数据。 资源准备 云开发环境 腾讯云短信服务 短信验证码登录扩展能力 静态网站托管 一、云开发环境开通 如果已有云环境，可直接跳过这一步 打开云开发控制台新建云环境： [图片] 打开云开发 CloudBase 控制台，打开左侧菜单里的数据库，点击添加集合，新增一个[代码]test[代码]集合用于新增数据测试。 [图片] 二、腾讯云短信服务 开通短信服务 登录腾讯云短信控制台，这里的账号不限于小程序的账号，其他账号也可以；也不限于是个人账号还是企业账号，不过账号需要进行实名认证，个人认证用户只能发送短信验证码、短信通知等，不能用于营销短信；企业认证用户可以发送短信验证码、短信通知、营销短信等。如果账号已经认证，直接申请短信服务就可以开通了。 创建签名和正文模板 国内短信由签名+正文组成，签名符号为【】，发送短信内容时必须带签名。所以要发送短信，需要申请短信签名和正文模板，两者都通过审核后，就可以开始发送短信了。 创建签名 打开左侧菜单里的国内短信-签名管理，点击创建签名，创建完签名后，这个[代码]签名内容[代码]之后会用到。 签名用途：选择【自用（签名为本账号实名认证的公司、网站、产品名等）】。 签名类型：选择【公众号】。 签名内容：输入公司名或小程序名或公众号名或产品名称 证明类型：选择公众号设置页面截图，然后上传小程序设置页面截图，可以参考案例； [图片] 创建正文模板 打开左侧菜单里的国内短信-正文模板管理，点击创建正文模板，创建完模板后，会有一个模板[代码]ID[代码]，这个之后会用到，也要记住你模板的变量位置。 模板名称，建议带有明确目的的名称，比如“注册通知”、“购买成功反馈”等； 短信类型：选择【普通短信】 短信内容：比如“您正在申请手机注册，验证码为：{1}，{2}分钟内有效！”，这里的[代码]{1}[代码]和[代码]{2}[代码]是你要在代码里传入的变量，变量的编码必须是从{1}开始，传入变量时也要按照顺序传入 [图片] 三、短信验证码登录扩展能力 打开云开发 CloudBase 控制台，打开左侧菜单里的扩展能力，点击短信验证码登录模块进行安装。 [图片] 该扩展会创建以下云资源： 云函数： tcb-sms-auth 生成校验码并发送到指定手机号，以实现短信验证码登录 云数据库： tcb-sms-auth 存储验证码相关信息。 根据提示完成配置和安装。 四、开通静态网站托管 云开发为开发者提供静态网页托管的能力，静态资源（HTML、CSS、JavaScript、字体等）的分发由对象存储 COS 和拥有多个边缘网点的 CDN 提供支持。您可在腾讯云控制台进行静态网站的部署，提供给您的用户访问。 打开云开发 CloudBase 控制台，打开左侧菜单里的静态网站托管，点击开启使用，然后等待几分钟便可初始化完成。 [图片] 使用扩展 在 web 网站使用该扩展，请先在 云开发控制台 将网站域名添加为当前环境的安全域名。 打开云开发 CloudBase 控制台，复制静态网站托管-基础配置里的默认域名，然后打开左侧菜单里的环境-安全配置，将默认域名添加为WEB安全域名。 [图片] 一、使用方法 安装扩展 SDK 到项目 方法一：通过包管理器引入 [代码]npm install --save @cloudbase/extension-sms [代码] 方法二：通过CDN引入 [代码]

小程序导出数据到excel表，借助云开发后台实现excel数据的保存 我们在开发小程序的过程中，可能会有这样的需求：如何将云数据库里的数据批量导出到excel表里？ 这个需求可以用强大的云开发轻松实现！ 这里需要用到云函数，云存储和云数据库。可以说通过这一个例子，把小程序云开发相关的知识都用到了。下面就来介绍如何实现 实现思路 1，创建云函数 2，在云函数里读取云数据库里的数据 3，安装node-xlsx类库（node类库） 4，把云数据库里读取到的数据存到excel里 5，把excel存到云存储里并返回对应的云文件地址 6，通过云文件地址下载excel文件 一、创建excel云函数 关于如何创建云开发小程序，这里我就不再做具体讲解。不知道怎么创建云开发小程序的同学，可以去翻看腾讯云云开发公众号内菜单【技术交流-视频教程】中的教学视频。 创建云函数时有两点需要注意的，给大家说下 1、一定要把app.js里的环境id换成你自己的 [图片] 2，你的云函数目录要选择你对应的云开发环境（通常这里默认选中的） 不过你这里的云开发环境要和你app.js里的保持一致 [图片] 二、读取云数据库里的数据 我们第一步创建好云函数以后，可以先在云函数里读取我们的云数据库里的数据。 1、先看下我们云数据库里的数据 [图片] 2、编写云函数，读取云数据库里的数据（一定要记得部署云函数） [图片] 3、成功读取到数据 [图片] 把读取user数据表的完整代码给大家贴出来。 [代码]// 云函数入口文件 const cloud = require('wx-server-sdk') cloud.init({ env: "test-vsbkm" }) // 云函数入口函数 exports.main = async(event, context) => { return await cloud.database().collection('users').get(); } [代码] 三、安装生成excel文件的类库 node-xlsx 通过上面第二步可以看到我们已经成功的拿到需要保存到excel的源数据，我们接下来要做的就是把数据保存到excel 1、安装node-xlsx类库 [图片] 这一步需要我们事先安装node,因为我们要用到npm命令，通过命令行npm install node-xlsx[图片] 可以看出我们安装完成以后，多了一个package-lock.json的文件 [图片] 四、编写把数据保存到excel的代码， 下图是我们的核心代码： [图片] 这里的数据是我们查询的users表的数据，然后通过下面代码遍历数组，然后存入excel。这里需要注意我们的id,name,weixin要和users表里的对应。 [代码] for (let key in userdata) { let arr = []; arr.push(userdata[key].id); arr.push(userdata[key].name); arr.push(userdata[key].weixin); alldata.push(arr) } [代码] 还有下面这段代码，是把excel保存到云存储用的 [代码] //4，把excel文件保存到云存储里 return await cloud.uploadFile({ cloudPath: dataCVS, fileContent: buffer, //excel二进制文件 }) [代码] 下面把完整的excel里的index.js代码贴给大家,记得把云开发环境id换成你自己的。 [代码]const cloud = require('wx-server-sdk') //这里最好也初始化一下你的云开发环境 cloud.init({ env: "test-vsbkm" }) //操作excel用的类库 const xlsx = require('node-xlsx'); // 云函数入口函数 exports.main = async(event, context) => { try { let {userdata} = event //1,定义excel表格名 let dataCVS = 'test.xlsx' //2，定义存储数据的 let alldata = []; let row = ['id', '姓名', '微信号']; //表属性 alldata.push(row); for (let key in userdata) { let arr = []; arr.push(userdata[key].id); arr.push(userdata[key].name); arr.push(userdata[key].weixin); alldata.push(arr) } //3，把数据保存到excel里 var buffer = await xlsx.build([{ name: "mySheetName", data: alldata }]); //4，把excel文件保存到云存储里 return await cloud.uploadFile({ cloudPath: dataCVS, fileContent: buffer, //excel二进制文件 }) } catch (e) { console.error(e) return e } } [代码] 五、把excel存到云存储里并返回对应的云文件地址 经过上面的步骤，我们已经成功的把数据存到excel里，并把excel文件存到云存储里。可以看下效果。 [图片] 接着，就可以通过上图的下载地址下载excel文件了。 [图片] 其实到这里就差不多实现了基本的把数据保存到excel里的功能了，但是为了避免每次导出数据都需要去云开发后台下载excel的麻烦，接下来介绍如何动态获取下载地址。 六、获取云文件地址下载excel文件 [图片] 通过上图我们可以看出，我们获取下载链接需要用到一个fileID,而这个fileID在我们保存excel到云存储时，有返回，如下图。我们把fileID传给我们获取下载链接的方法即可。 [图片] 1、我们获取到了下载链接，接下来就要把下载链接显示到页面 [图片] 2、代码显示到页面以后，我们就要复制这个链接，方便用户粘贴到浏览器或者微信去下载。 [图片] 下面是完整代码： [代码]Page({ onLoad: function(options) { let that = this; //读取users表数据 wx.cloud.callFunction({ name: "getUsers", success(res) { console.log("读取成功", res.result.data) that.savaExcel(res.result.data) }, fail(res) { console.log("读取失败", res) } }) }, //把数据保存到excel里，并把excel保存到云存储 savaExcel(userdata) { let that = this wx.cloud.callFunction({ name: "excel", data: { userdata: userdata }, success(res) { console.log("保存成功", res) that.getFileUrl(res.result.fileID) }, fail(res) { console.log("保存失败", res) } }) }, //获取云存储文件下载地址，这个地址有效期一天 getFileUrl(fileID) { let that = this; wx.cloud.getTempFileURL({ fileList: [fileID], success: res => { // get temp file URL console.log("文件下载链接", res.fileList[0].tempFileURL) that.setData({ fileUrl: res.fileList[0].tempFileURL }) }, fail: err => { // handle error } }) }, //复制excel文件下载链接 copyFileUrl() { let that=this wx.setClipboardData({ data: that.data.fileUrl, success(res) { wx.getClipboardData({ success(res) { console.log("复制成功",res.data) // data } }) } }) } }) [代码] 梳理下上面代码的逻辑： 1、先通过getUsers云函数去云数据库获取数据。 2、把获取到的数据通过excel云函数把数据保存到excel，然后把excel保存的云存储。 3、获取云存储里的文件下载链接。 4、复制下载链接，到浏览器里下载excel文件。 到这里我们就完整的实现了把数据保存到excel的功能了。 文章有点长，知识点有点多，但是大家理解上述内容后，就可以对小程序云开发的云函数、云数据库、云存储有一个较为完整的了解过程。 如果你想要了解更多关于云开发CloudBase相关的技术故事/技术实战经验，请扫码关注【腾讯云云开发】公众号 ～ [图片]

以下代码不一定都是本人原创，很多都是借鉴参考的（模仿是第一生产力嘛），有些已忘记出处了。以下分享给大家，供学习参考！欢迎收藏补充，说不定哪天你就用上了！ 一、第一种效果 [图片] [代码]//index.wxml <view class="zr"> <view class='user_box'> <view class='userInfo'> <open-data type="userAvatarUrl"></open-data> </view> <view class='userInfo_name'> <open-data type="userNickName"></open-data> , 欢迎您 </view> </view> <view class="water"> <view class="water-c"> <view class="water-1"> </view> <view class="water-2"> </view> </view> </view> </view> //index.wxss .zr { color: white; background: #4cb4e7; /*#0396FF*/ width: 100%; height: 100px; position: relative; } .water { position: absolute; left: 0; bottom: -10px; height: 30px; width: 100%; z-index: 1; } .water-c { position: relative; } .water-1 { background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjYwMHB4IiBoZWlnaHQ9IjYwcHgiIHZpZXdCb3g9IjAgMCA2MDAgNjAiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeG1sbnM6c2tldGNoPSJodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2gvbnMiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCAzLjQgKDE1NTc1KSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT53YXRlci0xPC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+PC9kZWZzPgogICAgPGcgaWQ9IuaIkSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgc2tldGNoOnR5cGU9Ik1TUGFnZSI+CiAgICAgICAgPGcgaWQ9Ii0iIHNrZXRjaDp0eXBlPSJNU0FydGJvYXJkR3JvdXAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xMjEuMDAwMDAwLCAtMTMzLjAwMDAwMCkiIGZpbGwtb3BhY2l0eT0iMC4zIiBmaWxsPSIjRkZGRkZGIj4KICAgICAgICAgICAgPGcgaWQ9IndhdGVyLTEiIHNrZXRjaDp0eXBlPSJNU0xheWVyR3JvdXAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEyMS4wMDAwMDAsIDEzMy4wMDAwMDApIj4KICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0wLDcuNjk4NTczOTUgTDQuNjcwNzE5NjJlLTE1LDYwIEw2MDAsNjAgTDYwMCw3LjM1MjMwNDYxIEM2MDAsNy4zNTIzMDQ2MSA0MzIuNzIxMDUyLDI0LjEwNjUxMzggMjkwLjQ4NDA0LDcuMzU2NzQxODcgQzE0OC4yNDcwMjcsLTkuMzkzMDMwMDggMCw3LjY5ODU3Mzk1IDAsNy42OTg1NzM5NSBaIiBpZD0iUGF0aC0xIiBza2V0Y2g6dHlwZT0iTVNTaGFwZUdyb3VwIj48L3BhdGg+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==") repeat-x; background-size: 600px; -webkit-animation: wave-animation-1 3.5s infinite linear; animation: wave-animation-1 3.5s infinite linear; } .water-2 { top: 5px; background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjYwMHB4IiBoZWlnaHQ9IjYwcHgiIHZpZXdCb3g9IjAgMCA2MDAgNjAiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeG1sbnM6c2tldGNoPSJodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2gvbnMiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCAzLjQgKDE1NTc1KSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT53YXRlci0yPC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+PC9kZWZzPgogICAgPGcgaWQ9IuaIkSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgc2tldGNoOnR5cGU9Ik1TUGFnZSI+CiAgICAgICAgPGcgaWQ9Ii0iIHNrZXRjaDp0eXBlPSJNU0FydGJvYXJkR3JvdXAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xMjEuMDAwMDAwLCAtMjQ2LjAwMDAwMCkiIGZpbGw9IiNGRkZGRkYiPgogICAgICAgICAgICA8ZyBpZD0id2F0ZXItMiIgc2tldGNoOnR5cGU9Ik1TTGF5ZXJHcm91cCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTIxLjAwMDAwMCwgMjQ2LjAwMDAwMCkiPgogICAgICAgICAgICAgICAgPHBhdGggZD0iTTAsNy42OTg1NzM5NSBMNC42NzA3MTk2MmUtMTUsNjAgTDYwMCw2MCBMNjAwLDcuMzUyMzA0NjEgQzYwMCw3LjM1MjMwNDYxIDQzMi43MjEwNTIsMjQuMTA2NTEzOCAyOTAuNDg0MDQsNy4zNTY3NDE4NyBDMTQ4LjI0NzAyNywtOS4zOTMwMzAwOCAwLDcuNjk4NTczOTUgMCw3LjY5ODU3Mzk1IFoiIGlkPSJQYXRoLTIiIHNrZXRjaDp0eXBlPSJNU1NoYXBlR3JvdXAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDMwMC4wMDAwMDAsIDMwLjAwMDAwMCkgc2NhbGUoLTEsIDEpIHRyYW5zbGF0ZSgtMzAwLjAwMDAwMCwgLTMwLjAwMDAwMCkgIj48L3BhdGg+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==") repeat-x; background-size: 600px; -webkit-animation: wave-animation-2 6s infinite linear; animation: wave-animation-2 6s infinite linear; } .water-1, .water-2 { position: absolute; width: 100%; height: 60px; } .back-white { background: #fff; } @keyframes wave-animation-1 { 0% { background-position: 0 top; } 100% { background-position: 600px top; } } @keyframes wave-animation-2 { 0% { background-position: 0 top; } 100% { background-position: 600px top; } } .user_box { display: flex; z-index: 10000 !important; opacity: 0; /* 透明度*/ animation: love 1.5s ease-in-out; animation-fill-mode: forwards; } .userInfo_name { flex: 1; vertical-align: middle; width: 100%; margin-left: 5%; margin-top: 5%; font-size: 42rpx; } .userInfo { flex: 1; width: 100%; border-radius: 50%; overflow: hidden; max-height: 50px; max-width: 50px; margin-left: 5%; margin-top: 5%; border: 2px solid #fff; } [代码] 二、第二种效果 [图片] [代码]//index.wxml <view class="waveWrapper waveAnimation"> <view class="waveWrapperInner bgTop"> <view class="wave waveTop" style="background-image: url('https://s2.ax1x.com/2019/09/26/um8g7n.png')"></view> </view> <view class="waveWrapperInner bgMiddle"> <view class="wave waveMiddle" style="background-image: url('https://s2.ax1x.com/2019/09/26/umGZ38.png')"></view> </view> <view class="waveWrapperInner bgBottom"> <view class="wave waveBottom" style="background-image: url('https://s2.ax1x.com/2019/09/26/umGuuQ.png')"></view> </view> </view> //index.wxss .waveWrapper { overflow: hidden; position: absolute; left: 0; right: 0; height: 300px; top: 0; margin: auto; } .waveWrapperInner { position: absolute; width: 100%; overflow: hidden; height: 100%; bottom: -1px; background-image: linear-gradient(to top, #86377b 20%, #27273c 80%); } .bgTop { z-index: 15; opacity: 0.5; } .bgMiddle { z-index: 10; opacity: 0.75; } .bgBottom { z-index: 5; } .wave { position: absolute; left: 0; width: 500%; height: 100%; background-repeat: repeat no-repeat; background-position: 0 bottom; transform-origin: center bottom; } .waveTop { background-size: 50% 100px; } .waveAnimation .waveTop { animation: move-wave 3s; -webkit-animation: move-wave 3s; -webkit-animation-delay: 1s; animation-delay: 1s; } .waveMiddle { background-size: 50% 120px; } .waveAnimation .waveMiddle { animation: move_wave 10s linear infinite; } .waveBottom { background-size: 50% 100px; } .waveAnimation .waveBottom { animation: move_wave 15s linear infinite; } @keyframes move_wave { 0% { transform: translateX(0) translateZ(0) scaleY(1) } 50% { transform: translateX(-25%) translateZ(0) scaleY(0.55) } 100% { transform: translateX(-50%) translateZ(0) scaleY(1) } } [代码] 三、第三种效果 [图片] [代码]//index.wxml <view class="container"> <image class="title" src="https://ftp.bmp.ovh/imgs/2019/09/74bada9c4143786a.png"></image> <view class="content"> <view class="hd" style="transform:rotateZ({{angle}}deg);"> <image class="logo" src="https://ftp.bmp.ovh/imgs/2019/09/d31b8fcf19ee48dc.png"></image> <image class="wave" src="wave.png" mode="aspectFill"></image> <image class="wave wave-bg" src="wave.png" mode="aspectFill"></image> </view> <view class="bd" style="height: 100rpx;"> </view> </view> </view> //index.wxss image{ max-width:none; } .container { background: #7acfa6; align-items: stretch; padding: 0; height: 100%; overflow: hidden; } .content{ flex: 1; display: flex; position: relative; z-index: 10; flex-direction: column; align-items: stretch; justify-content: center; width: 100%; height: 100%; padding-bottom: 450rpx; background: -webkit-gradient(linear, left top, left bottom, from(rgba(244,244,244,0)), color-stop(0.1, #f4f4f4), to(#f4f4f4)); opacity: 0; transform: translate3d(0,100%,0); animation: rise 3s cubic-bezier(0.19, 1, 0.22, 1) .25s forwards; } @keyframes rise{ 0% {opacity: 0;transform: translate3d(0,100%,0);} 50% {opacity: 1;} 100% {opacity: 1;transform: translate3d(0,450rpx,0);} } .title{ position: absolute; top: 30rpx; left: 50%; width: 600rpx; height: 200rpx; margin-left: -300rpx; opacity: 0; animation: show 2.5s cubic-bezier(0.19, 1, 0.22, 1) .5s forwards; } @keyframes show{ 0% {opacity: 0;} 100% {opacity: .95;} } .hd { position: absolute; top: 0; left: 50%; width: 1000rpx; margin-left: -500rpx; height: 200rpx; transition: all .35s ease; } .logo { position: absolute; z-index: 2; left: 50%; bottom: 200rpx; width: 160rpx; height: 160rpx; margin-left: -80rpx; border-radius: 160rpx; animation: sway 10s ease-in-out infinite; opacity: .95; } @keyframes sway{ 0% {transform: translate3d(0,20rpx,0) rotate(-15deg); } 17% {transform: translate3d(0,0rpx,0) rotate(25deg); } 34% {transform: translate3d(0,-20rpx,0) rotate(-20deg); } 50% {transform: translate3d(0,-10rpx,0) rotate(15deg); } 67% {transform: translate3d(0,10rpx,0) rotate(-25deg); } 84% {transform: translate3d(0,15rpx,0) rotate(15deg); } 100% {transform: translate3d(0,20rpx,0) rotate(-15deg); } } .wave { position: absolute; z-index: 3; right: 0; bottom: 0; opacity: 0.725; height: 260rpx; width: 2250rpx; animation: wave 10s linear infinite; } .wave-bg { z-index: 1; animation: wave-bg 10.25s linear infinite; } @keyframes wave{ from {transform: translate3d(125rpx,0,0);} to {transform: translate3d(1125rpx,0,0);} } @keyframes wave-bg{ from {transform: translate3d(375rpx,0,0);} to {transform: translate3d(1375rpx,0,0);} } .bd { position: relative; flex: 1; display: flex; flex-direction: column; align-items: stretch; animation: bd-rise 2s cubic-bezier(0.23,1,0.32,1) .75s forwards; opacity: 0; } @keyframes bd-rise{ from {opacity: 0; transform: translate3d(0,60rpx,0); } to {opacity: 1; transform: translate3d(0,0,0); } } [代码] wave.png（可下载到本地） [图片] 在这个基础上，再加上js的代码，即可实现根据手机倾向，水波晃动的效果 wx.onAccelerometerChange(function callback) 监听加速度数据事件。 [图片] [代码]//index.js Page({ onReady: function () { var _this = this; wx.onAccelerometerChange(function (res) { var angle = -(res.x * 30).toFixed(1); if (angle > 14) { angle = 14; } else if (angle < -14) { angle = -14; } if (_this.data.angle !== angle) { _this.setData({ angle: angle }); } }); }, }); [代码] 四、第四种效果 [图片] [代码]//index.wxml <view class='page__bd'> <view class="bg-img padding-tb-xl" style="background-image:url('http://wx4.sinaimg.cn/mw690/006UdlVNgy1g2v2t1ih8jj31hc0p0qej.jpg');background-size:cover;"> <view class="cu-bar"> <view class="content text-bold text-white"> 悦拍屋 </view> </view> </view> <view class="shadow-blur"> <image src="https://raw.githubusercontent.com/weilanwl/ColorUI/master/demo/images/wave.gif" mode="scaleToFill" class="gif-black response" style="height:100rpx;margin-top:-100rpx;"></image> </view> </view> //index.wxss @import "colorui.wxss"; .gif-black { display: block; border: none; mix-blend-mode: screen; } [代码] 本效果需要引入ColorUI组件库