社区里有不少关于wx.request发送multipart/form-data请求的问题，我看了几个，基本都说wx.request不支持，得用wx.uploadFile来“曲线救国”。我花了些时间研究了一下，找到了如下方法，分享出来，希望能帮助到有需要的人。 首先，服务端，我用的是async-busboy来解析multipart/form-data请求，测试代码直接使用它提供的就可以：https://github.com/m4nuC/async-busboy/blob/master/examples/index.js 小程序端： 如果wx.request中仅指定'content-type'为'multipart/form-data'，服务端会报"no multipart boundary was found"的错误，就像这个帖子里描述的：https://developers.weixin.qq.com/community/develop/doc/000e64476f8d80fd7b9765d5655c00 尽管指定了content-type为'mutipart/form-data'，但是wx.request并不会为我们自动添加boundary，既然如此，我们自己加不就可以了吗？经过测试，确认了这个方法可行，前端示例代码如下： [代码]wx.request({[代码][代码]      [代码][代码]url: [代码][代码]'http://localhost:8080/test/multipart-form'[代码][代码],[代码][代码]      [代码][代码]method: [代码][代码]'POST'[代码][代码],[代码][代码]      [代码][代码]header: {[代码][代码]        [代码][代码]'content-type'[代码][代码]: [代码][代码]'multipart/form-data; boundary=XXX'[代码][代码]      [代码][代码]},[代码][代码]      [代码][代码]data: [代码][代码]'\r\n--XXX'[代码] [代码]+[代码][代码]        [代码][代码]'\r\nContent-Disposition: form-data; name="field1"'[代码] [代码]+[代码][代码]        [代码][代码]'\r\n'[代码] [代码]+[代码][代码]        [代码][代码]'\r\nvalue1'[代码] [代码]+[代码][代码]        [代码][代码]'\r\n--XXX'[代码] [代码]+[代码][代码]        [代码][代码]'\r\nContent-Disposition: form-data; name="field2"'[代码] [代码]+[代码][代码]        [代码][代码]'\r\n'[代码] [代码]+[代码][代码]        [代码][代码]'\r\nvalue2'[代码] [代码]+[代码][代码]        [代码][代码]'\r\n--XXX--'[代码][代码]    [代码][代码]})[代码]这里，我向服务端传递了两个参数：field1=value1, field2=value2，服务端得到的结果如下： [图片] 如果对multipart/form-data的请求体格式不了解，可以参考这篇文章：https://ec.haxx.se/http-multipart.html wx.request中的data结构看起来有些复杂，有需要的可以封装一下，封装好的API欢迎跟帖分享出来。

由于微信小程序无法直接分享到朋友圈，业界普遍采用 Canvas 生成带小程序码的图片，引导用户保存后分享，相信不少开发者在绘制分享图时都曾遇到过各种 Canvas 的“彩蛋”（坑）。 今天推荐一个开源组件：Painter，它能够帮助我们轻松实现分享图绘制，并且已在支付宝小程序中验证可用。 快速开始 第一步：创建自定义组件 在组件的 JSON 文件中引入 Painter： [代码]{ "component": true, "usingComponents": { "painter": "/painter/painter" } } [代码] 第二步：编写组件 WXML 将 Painter 组件定位在屏幕外，避免影响用户界面： [代码]// 将该组件定位在屏幕之外，用户查看不到。 <painter style="position: absolute; top: -9999rpx;" palette="{{imgDraw}}" bind:imgOK="onImgOK" /> [代码] 第三步：实现组件逻辑 [代码]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') } } }) [代码] 如何使用 1. 引入组件 在页面的 JSON 文件中引入封装好的分享组件： [代码]{ "usingComponents": { "share-box": "/components/shareBox/index" } } [代码] 2. 页面布局 [代码]<!-- 触发按钮 --> <button class="intro" bindtap="getUserInfo">点我生成分享图</button> <!-- 分享组件 --> <share-box isCanDraw="{{isCanDraw}}" userInfo="{{userInfo}}" bind:initData="handleClose" /> [代码] 3. 页面逻辑 [代码]Page({ data: { isCanDraw: false, userInfo: {} }, // 重置绘制状态 handleClose() { this.setData({ isCanDraw: false }) }, // 获取用户信息并开始绘制 getUserInfo() { wx.getUserProfile({ desc: "获取您的头像昵称信息", success: (res) => { const { userInfo = {} } = res this.setData({ userInfo, isCanDraw: true // 触发绘制 }) }, fail: (err) => { console.log('获取用户信息失败：', err) } }) } }) [代码] 效果展示 完成上述步骤后，即可生成如下的分享图片： [图片] 实用技巧 文字居中：通过设置 [代码]align: 'center'[代码] 和合适的[代码]left[代码]值实现 文字换行：设置[代码]width[代码]和 [代码]maxLines[代码] 属性，当 [代码]maxLines: 1[代码] 时，超出一行会显示为省略号 资源链接 代码片段：点击查看 Painter 可视化工具：点击查看 常见问题 Q：为什么图片无法加载？ A：需要在小程序后台配置 downloadFile 合法域名： 进入「开发」→「开发设置」→「服务器域名」 配置图片的域名前缀，如 https://qiniu-image.qtshe.com Q：真机调试注意事项？ A：开发者工具中可在「详情」→「本地设置」中开启「不校验合法域名」，真机调试时需开启调试模式。 通过以上步骤，你就可以轻松实现小程序分享图生成功能了。如有任何问题，欢迎在评论区留言讨论！

#1 在网页制作中，我们经常需要根据业务需求在网页中不同位置展示滚动消息。 比如，新下单用户、抢购、秒杀等。 在网页中制作滚动消息有很多种实现方式，那么在小程序里面我们可以复用这些方式吗？ 答案是：可以的，但没必要。 为什么呢？ 因为网页中制作滚动消息效果都会用到JS， 而在小程序中我们可以直接使用原生组件 swiper 来实现滚动消息效果。 #2 在开始制作之前，我们先说说为什么不用JS？ 不用JS来实现主要是两个原因：   1、性能的原因，虽然小程序已为我们优化了很多，但总归是有一些损耗的。   2、JS 实现滚动消息效果要多写一些代码 （嘿嘿嘿） 上面讲了为什么不用JS而用 swiper，那接下来就讲讲 swiper 实现滚动消息效果的思路 其实非常简单，同样只需要两点就可以：   1、把 swiper 滚动方向改为垂直（如果你要实现的是左右方向的滚动消息，这一点都可省略）   2、在 swiper-item 上面盖一层 view 遮挡一下，避免用户手动去滚动消息。 #3 思路理好了，我们先画一下 view 之间的关系 [图片] 首先容器 view，来存放滚动消息遮罩层。 不要这个容器可以吗？ 答案是：可以的，但很麻烦。因为遮罩层需要用绝对定位来覆盖在滚动消息层上面，没有容器作为父级 view。遮罩层会出现期望外的效果。 然后是滚动消息层，也就是本文主角 swiper 组件。可以根据业务需要改变滚动方向、时间间隔、样式等。 最后就是遮罩层，主要是防止用户误点而触发 swiper。 #4 总算到了代码环节，开始之前我们先看看效果 [图片] 首先是 wxml  [图片] 然后是 wxss [图片] 最后是模拟数据  [图片] #5 到这里，在小程序中实现滚动消息就结束了。文中源码关注公众号回复 滚动消息 下载。如果你有其他疑问或者需求加我微信(qwertyax)一起交流 [图片]

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