前言 只要你的小程序超过一个页面那么可能会需要涉及到页面参数的传递，下面我总结了 4 种页面方法。 路径传递 通过在url后面拼接参数，参数与路径之间使用 ? 分隔，参数键与参数值用 = 相连，不同参数用 & 分隔；如 ‘path?key=value&key2=value2’。 案例：A页面带参数跳转到B页面 A页面跳转代码 [代码]goB(){ wx.navigateTo({ url: '/pages/B/index?id=value', }) }, [代码] B页面接收代码 [代码]onLoad: function (options) { console.log('id', options.id) } [代码] 上面的案例是字符串参数，但是很多情况下需要传递对象，如下方代码。 [代码]Page({ data: { userInfo:{ name:'cym', age:16 } }, goB(){ wx.navigateTo({ url: '/pages/B/index?id='+this.data.userInfo, }) }, }) [代码] 如果使用上面同样的方式结构，输出的结果是：[object Object] 这个时候需要先把对象通过JSON.stringify(obj)将 object 对象转换为 JSON 字符串进行参数传递，再到接收页面通过JSON.parse解析使用。 A页面跳转代码 [代码] goB(){ let userStr = JSON.stringify(this.data.userInfo) wx.navigateTo({ url: '/pages/B/index?id='+userStr, }) } [代码] B页面接收代码 [代码]onLoad: function (options) { console.log('id', JSON.parse(options.id)) } [代码] 全局变量 通过App全局对象存放全局变量。 app.js代码 [代码]App({ // 存放对象的全局变量 globalData:{}, }) [代码] A页面跳转代码 [代码]// 获取App对象 const app = getApp() Page({ /** * 页面的初始数据 */ data: { userInfo: { name: 'cym', age: 16 } }, goB() { app.globalData.userInfo = this.data.userInfo wx.navigateTo({ url: '/pages/B/index', }) }, }) [代码] B页面接收代码 [代码]// 获取全局对象 const app = getApp() Page({ onLoad: function (options) { console.log(app.globalData.userInfo) } }) [代码] 存放在 App 全局变量里面，可以被多个页面使用，直接从 App 对象获取即可。这个数据是保持在内测中，每次小程序销毁就没有了。 数据缓存 通过存储到数据缓存中。 A页面跳转代码 [代码] goB() { wx.setStorageSync('userInfo', this.data.userInfo) wx.navigateTo({ url: '/pages/B/index', }) } [代码] B页面接收代码 [代码] onLoad: function (options) { let userInfo = wx.getStorageSync('userInfo', this.data.userInfo) console.log(userInfo) } [代码] 存放在数据缓存里面，可以被多个页面使用，直接用 getStorageSync 获取即可。这个数据是保持在数据缓存中，除非清楚数据缓存或者删除小程序否则一直存在。 事件通信 通过事件通信通道。 A页面跳转代码 [代码]goB() { wx.navigateTo({ url: '/pages/B/index', success:(res)=>{ // 发送一个事件 res.eventChannel.emit('toB',{ userInfo: this.data.userInfo }) } }) } [代码] B页面接收代码 [代码]onLoad: function (options) { // 获取所有打开的EventChannel事件 const eventChannel = this.getOpenerEventChannel(); // 监听 index页面定义的 toB 事件 eventChannel.on('toB', (res) => { console.log(res.userInfo) }) } [代码] 总结 大家可以针对具体业务场景来进行选择合适自己的传参方式。

微信云托管是微信团队联合腾讯云团队提供的以云原生为基础的免运维、高可用服务上云解决方案，无需服务器，1分钟即可部署小程序/公众号服务端。 PC 端访问 https://cloud.weixin.qq.com 即可立即开始使用微信云托管，新用户首个环境赠送 3 个月免费额度。 一、准备工作第 1 步：开通进入 微信云托管，选择小程序/公众号帐户进行登录。 [图片] 第 2 步：部署目前微信云托管提供两种部署方式，无门槛部署以及自定义部署，本文在初始化的时候将采用无门堪方式进行部署； 选择自己熟悉语言的模版，点击「使用」按钮，进入下一步,本文将使用Express模版进行自动部署 [图片] 云托管将会根据模版内容进行自动部署，模版中如有依赖数据库，将会在部署时自动开通数据库 [图片] 部署成功后可直接通过公网域名访问模版中的应用,并且提供调用代码片段 [图片] 模版中提供的计数器的应用 [图片] 二、开始改造第 1 步：拉取代码官方模版代码传送门：https://github.com/WeixinCloud/wxcloudrun-express 拉取成功后,目录文件如下： |.dockerignore |.gitignore |container.config.json |db.js |Dockerfile |index.html |index.js |LICENSE |package.json |README.md 第 2 步：使用websocket相关依赖本文中使用express-ws进行websocket服务搭建 express-ws第 3 步：改造服务端代码const path = require('path') const express = require('express') const cors = require('cors') const morgan = require('morgan') const { init: initDB, Counter } = require('./db') const logger = morgan('tiny') const app = express(); const expressWs = require('express-ws')(app); const clients = expressWs.getWss('/').clients app.ws('/', function (ws, req) { }); app.use(express.urlencoded({ extended: false })) app.use(express.json()) app.use(cors()) app.use(logger) // 首页 app.get('/', async (req, res) => { res.sendFile(path.join(__dirname, 'index.html')) }) // 更新计数 app.post('/api/count', async (req, res) => { const { action } = req.body if (action === 'inc') { await Counter.create() } else if (action === 'clear') { await Counter.destroy({ truncate: true }) } //数据改变后将结果推送至客户端 for (let c of clients) { c.send(await Counter.count()) } res.send({ code: 0, data: await Counter.count() }) }) // 获取计数 app.get('/api/count', async (req, res) => { const result = await Counter.count() res.send({ code: 0, data: result }) }) // 小程序调用，获取微信 Open ID app.get('/api/wx_openid', async (req, res) => { if (req.headers['x-wx-source']) { res.send(req.headers['x-wx-openid']) } }) const port = process.env.PORT || 80 async function bootstrap() { await initDB() app.listen(port, () => { console.log('启动成功', port) }) } bootstrap(); 第 4 步：通过流水线(CI/CD)部署改造后代码首先将修改后代码上传到 Gitee/GitHub/GitLab，其中一个托管平台，进入 微信云托管服务管理->服务列表->流水线->新建流水线 如代码权限未授权或授权过期，请先完成授权后在进行创建流水线 [图片] 添加成功后，点击开始流水线即可触发部署，也可以通过勾选推送触发进，代码推送到指定仓库时将会触发流水线进行代码部署 [图片] Tips: 由于当前模版有使用到数据库，如使用流水线触发,需将环境变量配置到container.config.json { "containerPort": 80, "dockerfilePath": "Dockerfile", "buildDir": "", "minNum": 0, "maxNum": 10, "cpu": 1, "mem": 2, "policyType": "cpu", "policyThreshold": 80, "envParams": { "MYSQL_ADDRESS": "地址", "MYSQL_PASSWORD": "密码", "MYSQL_USERNAME": "用户名" }, "customLogs": "stdout", "initialDelaySeconds": 2, "dataBaseName": "nodejs_demo", "executeSQLs": [ "CREATE DATABASE IF NOT EXISTS nodejs_demo;", "USE nodejs_demo;" ] } 第 5 步：编写小程序端代码小程序基础库版本最低要求为2.21.1const { socketTask } = await wx.cloud.connectContainer({ config: { env: '', // 替换自己的微信云托管的环境ID }, service: '', // 替换自己的服务名 path:'/' }) socketTask.onMessage(function (res) { console.log('【WEBSOCKET】', res.data) }) socketTask.onOpen(function (res) { console.log('【WEBSOCKET】', '链接成功！') setTimeout(() => { socketTask.send({ data: '这是小程序消息' }) }, 5000); }) socketTask.onClose(function (res) { console.log('【WEBSOCKET】链接关闭！') }) 第 6 步：开始调试打开公网访问链接进行调试： [图片] 第 7 步：调试结果现在可以看到在 web 中使用计数器模版每次点击将会实时传送到小程序中,到该步骤通过微信云托管提供的 WebSocket 新能力,实现了实时消息推送： [图片] 三、总结以上便是微信云托管新能力「WebSocket」，基于此新能力可以延伸很多有趣的应用，例如线上聊天室、协同文档、消息推送等等，加上云托管的一些其他特性，值得体验！ 作者：Life，云开发、云托管高级布道师。前端开发工程师，熟悉React、Node.js，在小程序、云开发方面有深入研究，通过云开发、云托管开发多套商用小程序，《小程序·云开发实战智慧衣橱小程序》直播课讲师。 [图片]

一、哪种行为或内容不应在朋友圈出现？ 我们鼓励用户自发地分享所见所闻，但反对所有违反《微信外部链接内容管理规范》的内容或行为。 二、如果我的链接违反了《微信外部链接内容管理规范》将会被怎样处理？ 对于违反《微信外部链接内容管理规范》的内容，一经发现将立即进行处理，包括但不限于停止链接内容在朋友圈继续传播、停止对相关域名或IP地址进行访问、屏蔽相关链接等。 由微信公众平台或开放平台帐号施行或者发起的，一经查实，前述帐号、主体也将按照微信相关规则进行处罚，包括但不限于限制或禁止使用部分或全部功能、帐号封禁直至注销等，并公告处理结果；微信也有权依照本规范及相关协议、专项规则的规定，拒绝再向前述主体提供服务。 三、我的链接被禁止在微信访问，如何才能恢复正常访问？ [图片]注： 1、链接的封禁时间将根据链接的累计违规次数（最近半年）来判定。被禁止访问的链接若不发起解封申请，将不予解封。若出现解封申请的数量过多，审核团队无法较快处理的情况，对于超出封禁时间的链接，审核通过后立即解封。 2、首次违规的链接修改完可申请解封，经平台评估符合规范的链接可申请解除处理，第二次封禁12小时，第三次封禁一天，第四次及以上封禁一周。之后若未修改完成不予解封。对于重复、情节严重或多次违规的行为，平台将视具体情节采取不同程度的阶梯处罚措施。 四、我的链接在朋友圈分享了之后仅自己可见，怎么办？ 1、若此域名未在工信部ICP备案，分享频率会受到限制，请先完成备案。点击这里了解详情。 2、请根据《微信外部链接内容管理规范》检查该页面所用的域名、IP地址下是否存在违规内容。若存在，请修改页面内容。 3、确认域名、IP地址不存在违规内容，可以通过电子邮件发送至腾讯指定邮箱：moment@tencent.com进行反馈。 邮件标题请采用如下格式： 【链接解封反馈】“反馈人或企业” + “页面主题” 正文请附上仅自己可见的链接以及情况说明。 Q：公众号发的图文消息是否受影响？ A：微信公众号图文消息的域名是已备案域名：qq.com。因此，公众号推送的图文消息不受频率限制的影响。   Q：未备案域名分享频率是否会受到限制？ A：未备案的一级域名每天分享至朋友圈的次数将有限制。   Q：不备案会出现什么情况？ A：未备案域名，分享达一定次数后，再分享将仅自己可见。    Q：公众号阅读原文或编辑文案中插入了网址需要备案吗？ A：阅读原文或文中插入的网址没有强制备案要求。若用户点击此网址后并将其分享到朋友圈，需遵循备案要求。   Q：为何个别域名已经备案了，在朋友圈还是分享仅自己可见？ A：可查看该域名是否违反了《微信外部链接内容管理规范》，具体可点击查看：朋友圈管理常见问题 五、如果我的应用被禁止在朋友圈分享，如何才能解封？ 1、请根据《微信外部链接内容管理规范》检查应用是否存在违规内容，若存在，请进行修改。 2、修改后，可以通过电子邮件发送至腾讯指定邮箱：moment@tencent.com申请解封。 注：若公众帐号功能被封禁，请按公众平台的相应提示等待解封，目前此邮箱（moment@tencent.com）不接受公众帐号解封申请。 邮件标题请采用如下格式： 【应用解封反馈】“反馈人或企业” + “应用名称” 正文请附上开放平台应用appid和分享链接，以及情况说明。 六、如果我的链接因被他人恶意利用生成违规内容而限制在微信内分享，怎么办？ 1.点击“申请恢复访问”按钮，跳转“更多信息页”查看具体被恶意利用的链接； 2.根据违规链接核实被注入情况，修复漏洞，清理违规内容。（腾讯安全应急响应中心博客：xss漏洞解决方案https://security.tencent.com/index.php/blog/msg/53） 3.确认漏洞彻底修复后，提交解封申请。 被注入页面违规内容样式示例： [图片]

记录从零开始学小程序的过程，还有很多需要学习的东西，这个案例会持续更新

前言 今天在学习列表渲染的时候，尝试实现了支持横向滑动的列表，但是遇到了很多问题，做一个小小的总结。 组件scroll-view scroll-view是一种视图容器，指定可滚动视图区域。通过设置属性scroll-y=true并给给scroll-view一个固定高度height，可以实现竖向滚动；通过设置属性scroll-x=true可以实现横向滚动，其他的属性可以参考官方文档。 列表渲染 列表渲染是一种很基础的渲染方法，在组件上使用 wx:for 绑定一个数组，即可使用数组中各项的数据重复渲染该组件。在组件中，使用 wx:for-item 可以指定数组当前元素的变量名，默认为item；使用 wx:for-index 可以指定数组当前下标的变量名，默认为index；使用 wx:key 来指定列表中项目的唯一的标识符，可以提高渲染效率（没有特殊需求的话可以直接用index指定）。 例如，在.js中声明一个含有六个元素的数组list，可以用以下代码循环地渲染list中的所有元素 [代码]<!-- index.wxml 列表渲染 --> <view wx:for="{{list}}" wx:key="{{index}}" class="view-parent"> <view class="view-item">{{item.txt}}</view> </view> [代码] 显示效果如下： [图片] 横向滑动列表 将组件scroll-view和列表渲染结合，就可以实现横向滑动列表了，样例代码如下： [代码]<!-- index.wxml 横向滑动列表 --> <text style="margin-left: 40%;">横向滑动列表</text> <scroll-view scroll-x="true" class="scroll-x-list"> <view wx:for="{{list}}" wx:key="{{index}}" class="view-parent"> <view class="view-item">{{item.txt}}</view> </view> </scroll-view> /* index.wxss */ .scroll-x-list{ height:150px; } .view-item{ width:100px; height:100px; background:#1bf891; margin:10px; } [代码] 显示效果如下： [图片] 可以看到结果和预期差很多，不仅没有实现横向滑动，还没有显示出所有的元素。原因是代码虽然在组件中设置了需要的属性，但是在样式上没有做对应的调整，我们必须在wxss中设置布局才可以达到预期效果。最容易想到的就是我们常用的flex布局，关于flex布局的内容比较多，这里就不展开了，推荐看官方文档学习。在进行下一步修改前，先声明几个必须要知道的小细节： 组件scroll-view是不支持flex布局的，要想在scroll-view中使用flex布局，必须嵌套一个其他的支持flex布局的容器，如view。 scroll-view 中的需要滑动的元素不可以用 float 浮动。 scroll-view 中在需要装载滑动元素的父容器中开启flex布局是没有作用的，应该使用dislay:inline-block来进行元素的横向编排。 第一种方法，由于要实现的是横向滑动列表，那么容器中的元素一定是不允许换行的，刚刚提到，scroll-view是不支持flex布局的，所以开启flex布局并设置flex-wrap=nowrap是无效的行为。我们选择在类scroll-x-list中设置white-space: nowrap来处理元素中的空白，让容器内的换行无效。同时，还应设置装载滑动元素的父容器——view-parent的dislay为inline-block，代码如下： [代码]/* index.wxss */ .scroll-x-list{ height:150px; white-space: nowrap; } .view-parent{ display:inline-block; } [代码] 显示效果如下，已经可以横向滚动列表了。 [图片] 第二种方法，可以在scroll-view中嵌套一个view，在这个view中开启flex布局并设置flex-wrap=nowrap来阻止换行，代码如下： [代码]<!-- index.wxml 另一种横向滑动列表 --> <text style="margin-left: 40%;">横向滑动列表</text> <scroll-view scroll-x="true" class="scroll-x-list"> <view class='flex-view'> <view wx:for="{{list}}" wx:key="{{index}}" class="view-parent"> <view class="view-item">{{item.txt}}</view> </view> </view> </scroll-view> /* index.wxss */ .scroll-x-list{ height:150px; } .flex-view{ display:flex; flex-wrap: nowrap; } .view-parent{ display:inline-block; } [代码] 显示效果与刚刚相同： [图片] 一些改进 在第一种方法中，我们没有使用到flex布局，就很容易遇到一些对齐的问题，假设我们设置数组中第三个元素为空，就会出现下面的情况： [图片] 原因很简单，inline-block的属性中在某个元素没有内容的情况下，它的基线对齐方式是基于这个元素的底边的，解决方式是设置一个垂直的对齐方式： [代码]/* index.wxss */ .view-parent{ display:inline-block; vertical-align: top; } [代码] 显示效果如下： [图片] 同时，你会发现第二种开启flex布局方法的横向列表不会有这种对齐的问题，我们还可以在装载滑动元素的容器中开启flex布局来让内容更加美观： [代码].view-item{ width:100px; height:100px; background:#1bf891; margin-right: 20px; align-items:center; display:flex; justify-content:center; } [代码] 显示效果如下： [图片] 总结 scroll-view是一个十分常见实用的组件，但是使用时也有一些需要注意的问题，比如不支持直接使用flex布局。总体来看，比起设置inline-block的布局，更推荐在scroll-view中嵌套一层view再开启flex布局的方法，可以更灵活的摆放控制滑动元素。

前言 WXSS (WeiXin Style Sheets)是微信开发的样式语言，用于描述 WXML 的组件样式，它具有CSS 的大部分特性。关于在定位时常用到的属性position，文档中没有对应的描述，所以我自己总结了position的一些基础知识点。 定位 定位的目的是为了更好控制和摆放box，从而实现需要的网页布局。与flex布局的容器、坐标轴等概念不同，定位布局可以轻松任意指定box的摆放位置，定位的属性分为两种，一是边的偏移，二是定位的方式。 边偏移 边偏移有四个属性，分别是top，left，right和bottom，对应于基于顶部，左边，右边和底部的偏移。注意，如果position是默认值，也就是静态定位static时，指定边偏移是无效的行为。例如下面的代码，对于static-view类选择器，我们没有指定position的值，因此position设为默认值static，此时指定属性left是无效的行为： [代码]/* index.wxss */ .static-view{ height: 100px; width: 100px; background-color:red; left:50px; /* position: static; */ } [代码] 显示效果如下，红色正方形仍然贴着屏幕左端： [图片] 定位方式 定位的方式即position的值，常用的有五种，分别是静态定位static（默认值）， 相对定位relative， 绝对定位absolute， 固定定位fixed和粘性定位sticky。接下来分别介绍一下各种定位方式的区别。 静态定位 static 静态定位是所有元素的默认定位方式，当你没有为元素指定position的值时，默认值就是static，举个例子，在.wxml中渲染三个不同颜色的view，它们的position都为默认的static： [代码]<!-- index.wxml --> <view class='view-red'></view> <view class='view-blue'></view> <view class='view-green'></view> /* index.wxss */ .view-red{ height: 100px; width: 100px; background-color:red; /* position: static; */ } [代码] 显示效果如下，三个view按照标准流的方式排列： [图片] 注意，在静态定位状态下，无法通过边偏移属性（top、bottom、left或right）来改变元素的位置。 相对定位 relative 相对定位是将元素相对于它的正常位置进行定位的，所谓的正常位置就是position为static时元素在标准文档流中的位置。相对定位的position值为relative，我们修改刚刚红色正方形的position为relative，并设置left为50px： [代码]/* index.wxss */ .view-red{ height: 100px; width: 100px; background-color:red; left: 50px; position: relative; } [代码] 显示效果如下，可以看到红色正方形相对于刚刚的位置向右偏移了50px： [图片] 绝对定位 absolute 绝对定位比较特殊，因为它脱离了标准文档流，以其父容器或父容器中最近的非static(其他四种定位方式)元素的位置为参考。如果没有找到这样的非static元素，就以page作为参考。绝对定位的position值为absolute，我们修改蓝色正方形的position为absolute，并设置left为100px，top为100px;： [代码]/* index.wxss */ .view-blue{ height: 100px; width: 100px; background-color:blue; left:100px; top:100px; position: absolute; } [代码] 显示效果如下，由于没有非static的父容器，view-blue以page为参考位置，left和top指定了它的偏移。还可以看到，绿色正方形在原来的位置向上移动了，原因是蓝色正方形使用了绝对定位，脱离了标准文档流，就为绿色正方形“腾出”了它原来的位置。 [图片] 我们换个例子，让红色正方形作为蓝色正方形的父容器，代码如下： [代码]<!-- index.wxml --> <view class='view-red'> <view class='view-blue'></view> </view> /* index.wxss */ .view-red{ height: 300px; width: 300px; background-color:red; left: 50px; position: relative; } .view-blue{ height: 100px; width: 100px; background-color:blue; left:200px; top:100px; position: absolute; } [代码] 显示效果如下，可以看出此时蓝色正方形以红色正方形的位置作为参考： [图片] 固定定位 fixed 固定定位也脱离了标准文档流，可以把它理解为以page为参考的绝对定位，固定定位的position值为fixed，我们常常会在顶部或底部导航栏中使用固定定位。以自定义tabBar组件为例： [代码].tab-bar { position: fixed; bottom: 0; left: 0; right: 0; height: 48px; background: white; display: flex; padding-bottom: env(safe-area-inset-bottom); } [代码] 显示效果如下，无论如何滚动，tabBar都会固定在屏幕底部。 [图片] 关于自定义tabbar组件，可以查看该代码片段：自定义tabBar组件 粘性定位 sticky 粘性定位的元素依赖于用户的滚动，在相对定位和固定定位之间切换。一般情况下，sticky等同于relative，当页面滚动超出目标区域时，它便切换为fixed，固定在目标位置。目标位置通过指定top, left, right和bottom来设置。修改代码如下： [代码]<!-- index.wxml --> <view style="height:100px"></view> <view class='view-blue'></view> <view class='view-green'></view> <view style="height: 3000px;"></view> /* index.wxss */ .view-blue{ height: 100px; width: 100px; background-color:blue; position: relative; } .view-green{ height: 100px; width: 100px; background-color:green; position: sticky; top:0px; } [代码] 显示如下，此时绿色正方形是相对定位，在标准文档流中： [图片] 下拉滚动条100px，可以看出绿色正方形仍为相对定位： [图片] 继续下拉滚动条，可以发现蓝色正方形消失，但绿色正方形一直处于屏幕顶端，此时已经切换为固定定位： [图片] 覆盖问题 在开发中，我们常常使用子元素绝对定位，父元素相对定位的方法来控制布局，但是仍会遇到不同元素的覆盖现象，可以通过设置属性z-index来解决。z-index的默认值是0，取值越大，定位元素在层叠次序中就越优先；如果取值相同，则以后渲染的优先。 总结 定位布局是各自布局方法中较为简单的一种，它的属性一是边偏移，二是定位方式，两者配合使用才可以构造出美观的布局。

由于我们无法将小程序直接分享到朋友圈，但分享到朋友圈的需求又很多，业界目前的做法是利用小程序的 Canvas 功能生成一张带有小程序码的图片，然后引导用户下载图片到本地后再分享到朋友圈。相信大家在绘制分享图中应该踩到 Canvas 的各种（坑）彩dan了吧～ 这里首先推荐一个开源的组件：painter（通过该组件目前我们已经成功在支付宝小程序上也应用上了分享图功能） 咱们不多说，直接上手就是干。 [图片] 首先我们新增一个自定义组件，在该组件的json中引入painter [代码]{ "component": true, "usingComponents": { "painter": "/painter/painter" } } [代码] 然后组件的WXML (代码片段在最后) [代码]// 将该组件定位在屏幕之外，用户查看不到。 <painter style="position: absolute; top: -9999rpx;" palette="{{imgDraw}}" bind:imgOK="onImgOK" /> [代码] 重点来了 JS (代码片段在最后) [代码]Component({ properties: { // 是否开始绘图 isCanDraw: { type: Boolean, value: false, observer(newVal) { newVal && this.handleStartDrawImg() } }, // 用户头像昵称信息 userInfo: { type: Object, value: { avatarUrl: '', nickName: '' } } }, data: { imgDraw: {}, // 绘制图片的大对象 sharePath: '' // 生成的分享图 }, methods: { handleStartDrawImg() { wx.showLoading({ title: '生成中' }) this.setData({ imgDraw: { width: '750rpx', height: '1334rpx', background: 'https://qiniu-image.qtshe.com/20190506share-bg.png', views: [ { type: 'image', url: 'https://qiniu-image.qtshe.com/1560248372315_467.jpg', css: { top: '32rpx', left: '30rpx', right: '32rpx', width: '688rpx', height: '420rpx', borderRadius: '16rpx' }, }, { type: 'image', url: this.data.userInfo.avatarUrl || 'https://qiniu-image.qtshe.com/default-avatar20170707.png', css: { top: '404rpx', left: '328rpx', width: '96rpx', height: '96rpx', borderWidth: '6rpx', borderColor: '#FFF', borderRadius: '96rpx' } }, { type: 'text', text: this.data.userInfo.nickName || '青团子', css: { top: '532rpx', fontSize: '28rpx', left: '375rpx', align: 'center', color: '#3c3c3c' } }, { type: 'text', text: `邀请您参与助力活动`, css: { top: '576rpx', left: '375rpx', align: 'center', fontSize: '28rpx', color: '#3c3c3c' } }, { type: 'text', text: `宇宙最萌蓝牙耳机测评员`, css: { top: '644rpx', left: '375rpx', maxLines: 1, align: 'center', fontWeight: 'bold', fontSize: '44rpx', color: '#3c3c3c' } }, { type: 'image', url: 'https://qiniu-image.qtshe.com/20190605index.jpg', css: { top: '834rpx', left: '470rpx', width: '200rpx', height: '200rpx' } } ] } }) }, onImgErr(e) { wx.hideLoading() wx.showToast({ title: '生成分享图失败，请刷新页面重试' }) //通知外部绘制完成，重置isCanDraw为false this.triggerEvent('initData') }, onImgOK(e) { wx.hideLoading() // 展示分享图 wx.showShareImageMenu({ path: e.detail.path, fail: err => { console.log(err) } }) //通知外部绘制完成，重置isCanDraw为false this.triggerEvent('initData') } } }) [代码] 那么我们该如何引用呢？ 首先json里引用我们封装好的组件share-box [代码]{ "usingComponents": { "share-box": "/components/shareBox/index" } } [代码] 以下示例为获取用户头像昵称后再生成图。 [代码]<button class="intro" bindtap="getUserInfo">点我生成分享图</button> <share-box isCanDraw="{{isCanDraw}}" userInfo="{{userInfo}}" bind:initData="handleClose" /> [代码] 调用的地方： [代码]const app = getApp() Page({ data: { isCanDraw: false }, // 组件内部关掉或者绘制完成需重置状态 handleClose() { this.setData({ isCanDraw: !this.data.isCanDraw }) }, getUserInfo(e) { wx.getUserProfile({ desc: "获取您的头像昵称信息", success: res => { const { userInfo = {} } = res this.setData({ userInfo, isCanDraw: true // 开始绘制海报图 }) }, fail: err => { console.log(err) } }) } }) [代码] 最后绘制分享图的自定义组件就完成啦~效果图如下： [图片] tips： 文字居中实现可以看下代码片段 文字换行实现（maxLines）只需要设置宽度，maxLines如果设置为1，那么超出一行将会展示为省略号 代码片段：https://developers.weixin.qq.com/s/J38pKsmK7Qw5 附上painter可视化编辑代码工具：点我直达，因为涉及网络图片，代码片段设置不了downloadFile合法域名，建议真机开启调试模式，开发者工具 详情里开启不校验合法域名进行代码片段的运行查看。 最后看下面大家评论问的较多的问题：downLoadFile合法域名在小程序后台 开发>开发设置里配置，域名为你图片的域名前缀 比如我文章里的图https://qiniu-image.qtshe.com/20190605index.jpg。配置域名时填写https://qiniu-image.qtshe.com即可。如果你图片cdn地址为https://aaa.com/xxx.png, 那你就配置https://aaa.com即可。

前言 navigationBar相信大家都不陌生把？今天我们就来说说自定义navigationBar，把它改变成我们想要的样子（搜索框+胶囊、搜索框+返回按钮+胶囊等）。 思路 隐藏原生样式 获取胶囊按钮、状态栏相关数据以供后续计算 根据不同机型计算出该机型的导航栏高度，进行适配 编写新的导航栏 引用到页面 正文 一、隐藏原生的navigationBar window全局配置里有个参数：navigationStyle（导航栏样式），default=默认样式，custom=自定义样式。 [代码]"window": { "navigationStyle": "custom" } [代码] 让我们看看隐藏后的效果： [图片] 可以看到原生的navigationBar已经消失了，剩下孤零零的胶囊按钮，胶囊按钮是无法隐藏的。 二、准备工作 1.获取胶囊按钮的布局位置信息 我们用wx.getMenuButtonBoundingClientRect()【官方文档】获取胶囊按钮的布局位置信息，坐标信息以屏幕左上角为原点： [代码]const menuButtonInfo = wx.getMenuButtonBoundingClientRect(); [代码] width height top right bottom left 宽度 高度 上边界坐标 右边界坐标 下边界坐标 左边界坐标 下面是官方给的示意图，方便大家理解几个坐标。 [图片] 2.获取系统信息 用wx.getSystemInfoSync()【官方文档】获取系统信息，里面有个参数：statusBarHeight（状态栏高度），是我们后面计算整个导航栏的高度需要用到的。 [代码]const systemInfo = wx.getSystemInfoSync(); [代码] 三、计算公式 我们先要知道导航栏高度是怎么组成的， 计算公式：导航栏高度 = 状态栏高度 + 44。 实例 【源码下载】 自定义导航栏会应用到多个、甚至全部页面，所以封装成组件，方便调用；下面是我写的一个简单例子： app.js [代码]App({ onLaunch: function(options) { const that = this; // 获取系统信息 const systemInfo = wx.getSystemInfoSync(); // 胶囊按钮位置信息 const menuButtonInfo = wx.getMenuButtonBoundingClientRect(); // 导航栏高度 = 状态栏高度 + 44 that.globalData.navBarHeight = systemInfo.statusBarHeight + 44; that.globalData.menuRight = systemInfo.screenWidth - menuButtonInfo.right; that.globalData.menuBotton = menuButtonInfo.top - systemInfo.statusBarHeight; that.globalData.menuHeight = menuButtonInfo.height; }, // 数据都是根据当前机型进行计算，这样的方式兼容大部分机器 globalData: { navBarHeight: 0, // 导航栏高度 menuRight: 0, // 胶囊距右方间距（方保持左、右间距一致） menuBotton: 0, // 胶囊距底部间距（保持底部间距一致） menuHeight: 0, // 胶囊高度（自定义内容可与胶囊高度保证一致） } }) [代码] app.json [代码]{ "pages": [ "pages/index/index" ], "window": { "navigationStyle": "custom" }, "sitemapLocation": "sitemap.json" } [代码] 下面为组件代码： /components/navigation-bar/navigation-bar.wxml [代码]<!-- 自定义顶部栏 --> <view class="nav-bar" style="height:{{navBarHeight}}px;"> <input class="search" placeholder="输入关键词！" style="height:{{menuHeight}}px; min-height:{{menuHeight}}px; line-height:{menuHeight}}px; left:{{menuRight}}px; bottom:{{menuBotton}}px;"></input> </view> <!-- 内容区域： 自定义顶部栏用的fixed定位，会遮盖到下面内容，注意设置好间距 --> <view class="content" style="margin-top:{{navBarHeight}}px;"></view> [代码] /components/navigation-bar/navigation-bar.json [代码]{ "component": true } [代码] /components/navigation-bar/navigation-bar.js [代码]const app = getApp() Component({ properties: { // defaultData（父页面传递的数据-就是引用组件的页面） defaultData: { type: Object, value: { title: "我是默认标题" }, observer: function(newVal, oldVal) {} } }, data: { navBarHeight: app.globalData.navBarHeight, menuRight: app.globalData.menuRight, menuBotton: app.globalData.menuBotton, menuHeight: app.globalData.menuHeight, }, attached: function() {}, methods: {} }) [代码] /components/navigation-bar/navigation-bar.wxss [代码].nav-bar{ position: fixed; width: 100%; top: 0; color: #fff; background: #000;} .nav-bar .search{ width: 60%; color: #333; font-size: 14px; background: #fff; position: absolute; border-radius: 50px; background: #ddd; padding-left: 14px;} [代码] 以下是调用页面的代码，也就是引用组件的页面： /pages/index/index.wxml [代码]<navigation-bar default-data="{{defaultData}}"></navigation-bar> [代码] /pages/index/index.json [代码]{ "usingComponents": { "navigation-bar": "/components/navigation-bar/navigation-bar" } } [代码] /pages/index/index.js [代码]const app = getApp(); Page({ data: { // 组件参数设置，传递到组件 defaultData: { title: "我的主页", // 导航栏标题 } }, onLoad() { console.log(this.data.height) } }) [代码] 效果图： [图片] 好了，以上就是全部代码了，大家可以文中复制代码，也可以【下载源码】，直接到开发者工具里运行，记得appid用自己的或者测试哦！ 下面附几张其它小程序的效果图，大家也可以尝试照着做： [图片][图片] 总结 本文写了自定义navigationBar的一些基础性东西，里面涉及组件用法、参数传递、导航栏相关。 由于测试环境有限，大家在使用时如果发现有什么问题，希望及时反馈，以供及时更新帮助更多的人！ 大家有什么疑问，欢迎评论区留言！

背景 我们发现大部分小程序都会使用 [代码]wx.getUserInfo[代码] 接口，来获取用户信息。原本设计这个接口时，我们希望开发者在真正需要用户信息的情况下才去调取这个接口，但很多开发者会直接调用这个接口，导致用户在使用小程序的时候产生困扰，归结起来有几点： 开发者在小程序首页直接调用 [代码]wx.getUserInfo[代码] 进行授权，弹框获取用户信息，会使得一部分用户点击“拒绝”按钮。 在开发者没有处理用户拒绝弹框的情况下，用户必须授权头像昵称等信息才能继续使用小程序，会导致某些用户放弃使用该小程序。 用户没有很好的方式重新授权，尽管我们增加了[代码]设置[代码]页面，可以让用户选择重新授权，但很多用户并不知道可以这么操作。 此外，我们发现开发者默认将 [代码]wx.login[代码] 和 [代码]wx.getUserInfo[代码] 绑定使用，这个是由于我们一开始的设计缺陷和实例代码导致的（[代码]wx.getUserInfo[代码] 必须通过 [代码]wx.login[代码] 在后台生成 [代码]session_key[代码]后才能调用）。同时，我们收到开发者的反馈，希望用户进入小程序首页便能获取到用户的 [代码]unionId[代码]，以便识别到用户是否以前关注了同主体公众号或使用过同主体的App 。 为了解决以上问题，针对获取用户信息我们更新了三个能力： 1.使用组件来获取用户信息 2.若用户满足一定条件，则可以用[代码]wx.login[代码] 获取到的[代码]code[代码]直接换到[代码]unionId[代码] 3.[代码]wx.getUserInfo[代码] 不需要依赖 [代码]wx.login[代码] 就能调用得到数据 获取用户信息组件介绍 [代码][代码] 组件变化： [代码]open-type [代码]属性增加 [代码]getUserInfo[代码] ：用户点击时候会触发 [代码]bindgetuserinfo[代码] 事件。 新增事件 [代码]bindgetuserinfo[代码] ：当 [代码]open-type[代码]为 [代码]getUserInfo[代码] 时，用户点击会触发。可以从事件返回参数的 [代码]detail[代码] 字段中获取到和 [代码]wx.getUserInfo[代码] 返回参数相同的数据。 示例： [代码]<button open-type="getUserInfo" bindgetuserinfo="userInfoHandler"> Click me button>[代码]和 [代码]wx.getUserInfo[代码] 不同之处在于： 1.API [代码]wx.getUserInfo[代码] 只会弹一次框，用户拒绝授权之后，再次调用将不会弹框； 2.组件 [代码][代码][代码][代码] 由于是用户主动触发，不受弹框次数限制，只要用户没有授权，都会再次弹框。 通过获取用户信息的组件，就可以解决用户再次授权的问题。 直接获取unionId开发者申请 [代码]userinfo[代码] 授权主要为了获取 [代码]unionid[代码]，我们鼓励开发者在不骚扰用户的情况下合理获得[代码]unionid[代码]，而仅在必要时才向用户弹窗申请使用昵称头像。为此，凡使用“获取用户信息组件”获取用户昵称头像的小程序，在满足以下全部条件时，将可以静默获得 [代码]unionid[代码]： 1.在微信开放平台下存在同主体的App、公众号、小程序。 2.用户关注了某个相同主体公众号，或曾经在某个相同主体App、公众号上进行过微信登录授权。 这样可让其他同主体的App、公众号、小程序的开发者快速获得已有用户的数据。 不依赖登录的用户信息获取某些工具类的轻量小程序不需要登录行为，但是也想获取用户信息，那么就可以在 [代码]wx.getUserInfo[代码] 的时候加一个参数 [代码]withCredentials: false[代码] 直接获取到用户信息，可以少一次网络请求。 这样可以在不给用户弹窗授权的情况下直接展示用户的信息。 最佳实践 1.调用 [代码]wx.login[代码] 获取 [代码]code[代码]，然后从微信后端换取到 [代码]session_key[代码]，用于解密 [代码]getUserInfo[代码]返回的敏感数据。 2.使用 [代码]wx.getSetting[代码] 获取用户的授权情况  1) 如果用户已经授权，直接调用 API [代码]wx.getUserInfo[代码] 获取用户最新的信息；  2) 用户未授权，在界面中显示一个按钮提示用户登入，当用户点击并授权后就获取到用户的最新信息。 3.获取到用户数据后可以进行展示或者发送给自己的后端。 One More Thing 除了获取用户方案介绍之外，再聊一聊很多初次接触微信小程序的开发者所不容易理解的一些概念： 1.关于OpenId和UnionId [代码]OpenId[代码] 是一个用户对于一个小程序／公众号的标识，开发者可以通过这个标识识别出用户。 [代码]UnionId[代码] 是一个用户对于同主体微信小程序／公众号／APP的标识，开发者需要在微信开放平台下绑定相同账号的主体。开发者可通过[代码]UnionId[代码]，实现多个小程序、公众号、甚至APP 之间的数据互通了。 同一个用户的这两个 ID 对于同一个小程序来说是永久不变的，就算用户删了小程序，下次用户进入小程序，开发者依旧可以通过后台的记录标识出来。 2.关于 getUserInfo 和 login 很多开发者会把 [代码]login[代码] 和 [代码]getUserInfo[代码] 捆绑调用当成登录使用，其实 [代码]login[代码] 已经可以完成登录，[代码]getUserInfo[代码] 只是获取额外的用户信息。 在 [代码]login[代码] 获取到 [代码]code[代码] 后，会发送到开发者后端，开发者后端通过接口去微信后端换取到 [代码]openid[代码] 和[代码]sessionKey[代码]（现在会将 [代码]unionid[代码] 也一并返回）后，把自定义登录态 [代码]3rd_session[代码]返回给前端，就已经完成登录行为了。而 [代码]login[代码] 行为是静默，不必授权的，用户不会察觉。 [代码]getUserInfo[代码] 只是为了提供更优质的服务而存在，比如展示头像昵称，判断性别，开发者可通过 [代码]unionId[代码] 和其他公众号上已有的用户画像结合来提供历史数据。因此开发者不必在用户刚刚进入小程序的时候就强制要求授权。 可以在官方的文档中看到 [代码]login[代码] 的最佳实践： [图片] Q & A Q1: 为什么 login 的时候不直接返回 openid，而是要用这么复杂的方式来经过后台好几层处理之后才能拿到？ A: 为了防止坏人在网络链路上做手脚，所以小程序端请求开发者服务器的的请求都需要二次验证才是可信的。因为我们采取了小程序端只给 [代码]code[代码] ，由服务器端拿着 [代码]code[代码] 和 [代码]AppSecrect[代码] 去微信服务器请求的方式，才会给到开发者对应的[代码]openId[代码] 和用于加解密的 [代码]session_key。[代码] Q2: 既然用户的[代码]openId[代码] 是永远不变的，那么开发者可以使用[代码]openId[代码] 作为用户的登录态么？ A: 不行，这是非常危险的行为。因为 [代码]openId[代码] 是不变的，如果有坏人拿着别人的 [代码]openId[代码] 来进行请求，那么就会出现冒充的情况。所以我们建议开发者可以自己在后台生成一个拥有有效期的 [代码]第三方session[代码] 来做登录态，用户每隔一段时间都需要进行更新以保障数据的安全性。 Q3: 是不是用户每次打开小程序都需要重新[代码]login[代码]？ A: 不必，可以将登录态存入[代码]storage[代码]中，用户再次登录就可以拿[代码]storage[代码] 里的登录态做正常的业务请求，只有当登录态过期了之后才需要重新[代码]login[代码] 。这样子做一则可以减少用户等待时间，二则可以减少网络带宽。 目前微信的[代码]session_key[代码] 有效期是三天，所以建议开发者设置的登录态有效期要小于这个值。

最近社区中有很多关于域名被拦截的提问，我总结了一些解决方法提供参考。 一. 腾讯网页安全中心进行申诉 网站地址：https://urlsec.qq.com/check.html ，腾讯网页安全中心提供了网站安全检查、网站拦截申诉、可疑网站举报等功能，如果你的域名被限制访问，建议先进行网站安全检查，如果检测结果显示存在非法内容，请先清除网站中的不规范内容，请参考《微信外部链接内容管理规范》：https://weixin.qq.com/cgi-bin/readtemplate?t=weixin_external_links_content_management_specification [图片] 如果检测结果正常，但是域名仍被限制访问，可能原因是之前因为违规内容而被拦截。进入网站拦截申诉，可以看到提示存在潜在的【恶意内容】： [图片][图片] 在确认网站内没有违规内容的情况下，可以点击进行申诉，填写必要的信息后，官方会在3个工作日内进行答复。 [图片] 二、在微信内申请恢复访问 在微信中访问违规网站时会被拦截在以下页面，可以点击申请恢复访问进行申诉。 [图片] 三、联系微信官方邮箱 参考社区技术运营专员的一个回复，确认网站不存在违规内容的话，可以通过发送电子邮件进行申诉，邮箱地址：moment@tencent.com [图片] 四、求助运营人员 如果以上方法都无法解决问题，还可以在社区中提问，社区中的技术运营专员一定会帮到你的。 以上只是我个人总结的一些解决方法，若有错误欢迎各位指出，如果能帮助到你的话，不妨帮我点一个赞吧！

开发小程序的过程是离不开image组件的，如果图片比较少，我们可以直接把图片存储在本地，加入代码包一起上传，但在图片数量多、体积大的时候，将图片存储在本地可能会超过代码包的限制，显然不是一个好的选择。常用的存储方式是将图片传到服务器上，但并不是每个开发者都有自己的服务器，本文将介绍微信云开发中的云存储功能，可以方便快捷、可视化地管理小程序的文件。 打开微信开发者工具，点击左上角的云开发，打开云开发控制台，点击存储进入云存储界面。 [图片] [图片] 在存储管理界面，我们可以点击上传文件、上传文件夹的方式来上传文件，也可以直接从电脑上拖取文件上传，这里我在test文件夹中上传了一张图片，点击文件就可以看到图片的详细信息，例如ETag，下载地址和File ID等。 [图片] 回到小程序，在.wxml中使用image组件，设置参数src为图片的下载地址和File ID都可以显示图片，往往我们还会设置mode="widthFix"来让图片自适应宽度比例显示，代码如下： <!--index.wxml--> <image src="图片的下载地址 形式为https://..."></image> <image src="图片的File ID 形式为cloud://..." mode="widthFix"></image> 显示效果如下图，第二张图片的比例更接近原图： [图片] 当然，云存储的强大之处可不只是上传图片，你可以配合云函数来实现小程序内的上传、下载和删除文件，还可以根据文件ID换取临时文件网络链接，详细使用方法请参考官方文档https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/storage.html

插件已经停止维护 插件使用效果图： [图片] 学校选择器，起源于我个人开发的项目中的一个实际需求：从列表中选择高校。本质上只是一个选择列表，有很多种呈现方法，而我想让这一环节呈现的更舒适一点（就是带图片咯~），于是开发了这个组件。但我觉得应该有其他开发者会用到同样的需求，那何不分享出来？把它插件化并开源。 一、插件的配置 首先新建一个插件，而不是小程序，如下图。 [图片] 微信提供的插件模板分为两个模块，一个是miniprogram，是用于模拟业务环境的，你可以在这里模拟下使用插件的小程序业务页面；另一个模块是plugin，这就是插件的实际开发环境了，最新的基础库已经支持插件里面有自定义组件和多个page页面。 [图片] 改动改动一些模板的变量名，如plugin.json的参数（如要插件的页面、自定义组件等）后，后面就可以开始在plugin里面写插件代码！ {   "pages": {     "chooseSchool": "pages/chooseSchool"   },   "main": "index.js" } 在插件的配置方面，官方文档介绍的非常详细，我就不再赘述了：https://developers.weixin.qq.com/miniprogram/dev/framework/plugin/development.html#%E5%88%9B%E5%BB%BA%E6%8F%92%E4%BB%B6%E9%A1%B9%E7%9B%AE 二、学校选择器 下面开始写插件的业务代码。 学校选择器主要由三部分组成：一个固定的搜索框、懒加载的列表、搜索失败的提示框。 1、固定的搜索框                               input配置了bindinput，让每次键入字符时，都将包含该字符的学校名加入渲染的列表里   /**    * 搜索学校    */   search_school(e){     var value = e.detail.value     var schoolList = this.data.schoolList     var schoolList_now = []     for(var i = 0; i < schoolList.length; i++){       if(schoolList[i].name.indexOf(value) != -1){         schoolList_now.push(schoolList[i])       }     }     this.setData({       schoolList_now:schoolList_now     })   } 2、懒加载的列表                                         {{item.name}}                        985             211                                 其中的image配置了lazy-load以允许懒加载，这样可以加快渲染速度。 3.搜索失败的提示框            没有搜索到结果       可能是尚未收录该学校       你可以自己输入学校名字      配置了wx:if，当待渲染列表长度为0时就渲染出现。 三、插件的调用 如何调用插件呢（这是你必须要告知插件使用者的一件事），微信小程序提供的插件模板已经为你配置好了：你只需要在小程序端的app.json中配置plugin的值如下："choose-school"是插件的名字，provider填写插件的appId，version是版本号（开发时使用的是dev，但正式版需要正式的版本号）   "plugins": {     "choose-school": {       "version": "dev",       "provider": "wxddd52601ccb94739"     }   } 如果插件中还使用了自定义组件，小程序端的对应页面的json中也需要配置对应的usingComponents，我这个插件是没有用到自定义组件的。 小程序端（也就是插件的使用者）该如何进入插件页面呢？进入插件有两种方法，一种是wxml中的navigator组件，模板中自带，你只需要改动一下跳转的路径即可，如下图：   Go to Plugin page 另一种方法是使用wx.navigateTo，我比较推荐这一种方法，因为我是用这种方法才能拿到回传。如下所示，你只要把navigateTo绑定在任意一个组件的事件上就行，它需要配置两个参数，url需要按插件的规则配置：plugin: // + 插件名 + 插件页面。events需要配置acceptDataFromOpenedPage这个参数以获取返回值。     wx.navigateTo({       url: 'plugin://choose-school/chooseSchool',       events: {         // 监听返回数据         acceptDataFromOpenedPage: function(res) {           console.log('回调成功：',res)           that.setData({             school:res.data           })         },       },     }) 到这一步，插件的调用就结束了，下面是获取它的返回值。 四、插件的返回 当插件的业务逻辑和调用都准备就绪时，这个时候最关键的一步来了，小程序调用你的插件后，总是要获取返回值的，那如何传递这个值呢？ 微信官方给我们提供了EventChannel这个路由方法，它是页面间事件通信通道。我们在插件页面的学校view上绑定一个点击事件choose，点击后获取该学校的数据并返回给上一个页面，如下图所示：   choose(e){     var item = e.currentTarget.dataset.item     var school = this.data.school     school.name = item.name     school.is985 = item.is985     school.is211 = item.is211     this.setData({       school:school     })     const eventChannel = this.getOpenerEventChannel()     eventChannel.emit('acceptDataFromOpenedPage', {data: school});     wx.navigateBack({       delta: 1,     })   }, 想要将值返回，就新建一个通信信道eventChannel，并且用它发射（emit）一次数据给小程序端开放的信道监控事件acceptDataFromOpenedPage，并把数据school作为data的值传入。然后再调用navigateBack返回小程序端，传值完毕。 五、本插件的实机调用 11.8号我的插件就通过审核啦，我用另一款我已上线的小程序作为例子，给大家分享一下如何调用“学校选择器”。 第一步：登录小程序后台——设置——第三方设置 [图片] 第二步：点击添加插件，搜索“高校选择器”，点击添加，即可发送申请[图片] 第三步：等待申请审核通过（是我审核，如果我没有及时通过，你可以直接私信我） [图片] 第四步：点击“详情”——开发文档，查看插件的使用说明 [图片] 第五步：插件申请通过后，在小程序app.json里面如下配置：（version需要填写1.0.1）（provider一定是填我的插件id：wxddd52601ccb94739，不是小程序的appId），插件名字写“choose-school”（我甚至忘了是在哪里设置这个名字的，以至于我都改不了） "plugins": { "choose-school": { "version": "1.0.1", "provider": "wxddd52601ccb94739" } }, [图片] 第六步：打开开发者工具的详情，查看插件信息里是否有“高校选择器”，如果没有就重启一下开发者工具 [图片] 第七步：在任意地方绑定如图函数，函数触发后就会跳转到插件，选择学校后数据可回调到res里。 wx.navigateTo({ url: 'plugin://choose-school/chooseSchool', events: { // 监听返回数据 acceptDataFromOpenedPage: function(res) { console.log('回调成功：',res) }, }, }) [图片] 第八步：测试是否能拿到回调。 [图片] [图片] 第九步：上线使用~，有任何建议都可以在任何联系到我的地方反馈，我会及时回复！ 六、项目源码 组件的源码放在了Gitee上，欢迎下载。 https://gitee.com/cao-mengliang98/school/tree/master 七、其他 如果你想用自己的呈现方式，甚至不使用在微信小程序上，你可以通过这个url来获得学校的logo：http://www.ming13.cn:5000/schoolImages/学校的名字.jpg 不要漏掉.jpg，这是我个人的服务器，个人开发者可以直接使用。以及从源码仓库中获取学校名单.xlxs。 （logo和名字均暂时只有985211高校，后续会补充完整国内高校）

新手：因为是刚接触云开发，所以有说的不对的地方，大佬帮忙指正。 背景：摆脱每周五晚写周报的烦恼。 目标：本次小目标就先实现小程序云函数发送邮件功能。 终极目标，写一个todolist小程序，每周五汇总本周工作，下周工作，使用云函数定时器触发，定时发送邮件。 [图片] 首先给大家介绍一个发邮件的第三方模块，nodemailer Nodemailer Github地址 Nodemailer官方文档 找到官方文档最下面，有一串示例代码。这次我们要用到的就是它了。 使用nodemailer我们需要使用到的传输方式：SMTP 文档如下：https://nodemailer.com/smtp/ 这里有介绍如何使用，示例代码我就不给大家复制过来了。 何为SMTP？ 这里给大家百度了一发： SMTP是一种提供可靠且有效的电子邮件传输的协议。SMTP是建立在FTP文件传输服务上的一种邮件服务，主要用于系统之间的邮件信息传递，并提供有关来信的通知。SMTP独立于特定的传输子系统，且只需要可靠有序的数据流信道支持，SMTP的重要特性之一是其能跨越网络传输邮件，即“SMTP邮件中继”。使用SMTP，可实现相同网络处理进程之间的邮件传输，也可通过中继器或网关实现某处理进程与其他网络之间的邮件传输。 [图片] 怎么开启SMTP服务？ 自己搭建邮件服务器是非常麻烦的，我们可以借助于QQ邮箱、Gmail、163个人邮件系统或企业邮件系统开启SMTP服务，SMTP也就是简单邮件传输协议，通过它可以控制邮件的中转方式，帮助计算机在发送或中转信件时找到下一个目的地，也就是发送邮件。 不同的邮件系统有着不同的smtp发送邮件服务器，端口号也会有所不同。 我这边以QQ邮箱为示例操作下。 在QQ邮箱的设置>账户 [图片] [图片] 我们可以看到IMAP/SMTP的开启和关闭，这里我们先开启，然后你会得到一串授权码，保存下这个授权码，我们后续会用到。QQ邮箱的发送邮件服务器：smtp.qq.com，使用SSL，端口号465或587。 [图片] 使用云函数发送邮件 首先我们创建一个云函数，比如就叫sendMail 吧。在该云函数的package.json里添加如下代码。右键点击sendMail云函数，在终端中打开，或者本地终端cd到该云函数文件夹内也可。输入npm install 安装nodemailer最新版依赖。 [代码] "dependencies": { "wx-server-sdk": "~2.1.2", "nodemailer": "latest" } [代码] 然后在index.js中添加如下代码： [代码]const cloud = require('wx-server-sdk') cloud.init({ env: cloud.DYNAMIC_CURRENT_ENV, }) exports.main = async (event) => { const nodemailer = require("nodemailer"); let transporter = nodemailer.createTransport({ host: "smtp.qq.com", //SMTP服务器地址 port: 465, //端口号，通常为465，587，25，不同的邮件客户端端口号可能不一样 secure: true, //如果端口是465，就为true;如果是587、25，就填false auth: { user: "8662054@qq.com", //这是我的邮箱账号，改为你们的即可。 pass: "myukmlybjotjbghh" //这里是我们上面说要用到的授权码，不是QQ邮箱的密码 } }); let postMsg = { from: event.from, //发件邮箱 to:event.to, //收件人 subject: event.subject, text: event.text, html: event.html // text 和 html只能同时存在一个。 }; let res = await transporter.sendMail(postMsg); return res; } [代码] 右键部署上传云函数。 到这里我们的发送邮件云函数就完成啦。 [图片] 如何调用发送邮件云函数？ 调用方式也很简单： [代码]<input type="text" placeholder="请输入收件人邮件地址" bindinput="handleToAddress"/> <input type="text" placeholder="请输入邮件主题" bindinput="handleSubject"/> <textarea placeholder="请输入邮件内容" auto-height bindinput="handleTextarea" /> <button bindtap="handleClick">发送邮件</button> [代码] [图片] 这里因为我们绑定了 发件人是我的固定邮箱，所以没有增加发送人的输入框。 textarea 我有尝试使用editor组件生成富文本进行操作，最后发现弄出来样式太龊，就干掉了。 [代码]对了差点忘了： 邮件是支持： html：富文本 cc: 支持 抄送 bcc: 支持 密送 attachments： 支持多种附件形式，可以是String, Buffer或Stream 目前我这边用不到，就不展示了，有需要的可查看官方文档，或者评论给你示例代码。 [代码] 至于我们调用的地方： 首先拿到输入的值，然后调用云函数发送。 [代码]Page({ data: { }, handleToAddress(e) { this.setData({ toAddress: e.detail.value }) }, handleSubject(e) { this.setData({ toSubject: e.detail.value }) }, handleTextarea(e) { this.setData({ toTextArea: e.detail.value }) }, handleClick() { wx.showLoading({ title: '发送中' }) const {toAddress, toSubject, toTextArea} = this.data wx.cloud.callFunction({ name: 'sendMail', data: { from: '8662054@qq.com', to: toAddress, subject: toSubject, text: toTextArea // html: '<p><b>你好：</b><img src=""></p>' +'<p>欢迎欢迎<br/></p>' }, success: res => { wx.hideLoading() console.log(res) wx.showToast({ title: '发送成功' }) }, fail: err =>{ wx.hideLoading() console.log(err) } }) } }) [代码] 实现效果图 [图片] [图片] [图片] 以上就完成了使用云开发实现发送邮件功能。 有不懂的欢迎评论留言。 老规矩结尾的代码片段 没了 😂 。 代码仓库地址：https://github.com/minchangyong/wx-cloud-demo 最后感谢李东bbsky 大佬指导。