话不多说 直接上效果图 [视频] 起因: 当时使用了官方的 image 里面的 lazy-load 的 属性, 发现在 net work 上, 并没有实际上的效果(我的图片设置的展示比例比较小, 且也做了分页的效果, 呈现出来的 数据差不多刚好两屏的样子), 而官方的文档上说的是 图片懒加载，在即将进入一定范围（上下三屏）时才开始加载, 这就很明显不是我想要的效果~ 解决方法: 当时搜索了网上的信息, 无非都是通过数据源去做处理(要么统一在请求数据做处理, 还有就是在 滚动的时候去监听, 导致如果每个页面都需要使用的时候, 都需要引入改方法 或者 需要相同的数据格式, 我觉得很行), 再三思索下, 决定自己实现一个图片懒加载 我自己的解决思路(仅供参考)我使用的方法 有两个 监听屏幕的滑动情况元素是否出现在了屏幕上实现以上的方法, 就分别需要用到两个 官方的 api [图片][图片] 有了这两个方法, 就可以知道 我们需要的监听的图片是否有出现在图片的哪个位置了(需要特别指定位置) wxml 页面(可以封装成一个图片的组建, 方便拓展) // wxml <image width="{{width}}" height="{{height}}" class="imgContent" src="{{show ? src : ''}}"/> js 页面 // js /**  * 监听元素是否出现在屏幕  * @param { String } elName 所在的节点  * @param { String } attr 需要获取的属性值  *  {  *      dataset    // 节点的dataset  *      width      // 节点的宽度  *      height     // 节点的高度  *      scrollLeft // 节点的水平滚动位置  *      scrollTop  // 节点的竖直滚动位置  *      scrollX    // 节点 scroll-x 属性的当前值  *      scrollY    // 节点 scroll-y 属性的当前值  *  *      // 此处返回指定要返回的样式名  *      res.margin  *      res.backgroundColor  *      res.context    // 节点对应的 Context 对象  * }  * @param { Boolean } isComponent 是否在组建内使用  *   * @return {Function} 一个promise  */ function listenEltoScreen({ elName = '', attr = '', value = '', isComponent = {} } = {}) {     return new Promise((resolve) => {         const query = !isComponent ? wx.createIntersectionObserver() : this.createIntersectionObserver()         query.relativeToViewport({             [attr]: value         }).observe(elName, (res) => {             resolve(res)         })     }) } Component({     /**      * 组件的属性列表      */     properties: {         // 图片链接         src: {             type: String,             value: ''         },         width: {             type: String,             value: '100%'         },         height: {             type: String,             value: '100%'         },         // 是否触发懒加载(暂不支持动态修改 触发懒加载)         lazy: {             type: Boolean,             value: true         },         // 触发懒加载的阀值         threshold: {             type: Number,             value: 20         },         // 触发懒加载的方向         direction: {             type: String,             value: 'bottom'         }     },     /**      * 组件的初始数据      */     data: {         show: false     },     ready() {         if (!this.data.lazy) return         // 监听 元素是否有距离屏幕的情况         listenEltoScreen.bind(this)({             elName: '.imgContent',             attr: this.data.direction,             value: this.data.threshold,             isComponent: true         }).then(() => {             console.log('触发了')             this.setData({                 show: true             })         })     } }) 以屏幕为一个检测点, 来以此判断 需要监听的元素是否有出现在屏幕上(实现原理), 实现的效果可以看顶部的视频, 个人的一个小懒加载, 可以适用在任何一个需要图片的页面, 也可以在此基础上拓展 代码片段: https://developers.weixin.qq.com/s/hXnoTpmE7RtD (如果对你有帮助, 给个赞吧, 比较花了点时间研究)

由于我们无法将小程序直接分享到朋友圈，但分享到朋友圈的需求又很多，业界目前的做法是利用小程序的 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即可。

微信小程序瀑布流组件 实现效果图 [图片] 源代码链接：https://git.weixin.qq.com/xieyefeng888/waterfall 用法 下载组件源码到项目目录下 微信开发者工具导入项目即可查看效果 主要使用到的API有 this.getRelationNodes() ，案例结合文档更容易理解 [图片] [图片] [图片] [图片] 注意：必须在两个组件定义中都加入relations定义，否则不会生效。 知识扩展 this.selectComponent()可以获取到子组件的里面的数据和方法,还可以获取到properties里面的值 [图片] [图片] [图片] [图片] [图片] [图片]

老东家 Vue，加实习写了两年半~，期间只是简单学过 React，没怎么写过。新东家用 React + Typescript，用了一个半月，写了写Demo 在线预览。 这里简单总结下和vue的区别，如果你也是在Vue转React阶段，欢迎点击http://github.crmeb.net/u/yi了解更多 有不同见解，欢迎评论区指教🤓 一、横向对比 1、Vue 官方对比 Vue 官方对比 React 2、个人的理解 一般 H5 的，或者一些做不大的系统，首选 Vue。因为 Vue 简单，开发效率比较高。同时 Vue 包的体积也更小，在移动端网络差异大的情况下，资源体积是非常重要的。 像一些后台系统，会越做越大的，就用 React。解决方案更多，后期也更方便迭代与维护。（本人有幸开发过 Vue 大项目，webpack 热更新一下 3mins+） 二、核心思想 Vue 早期定位是尽可能的[代码]降低前端开发的门槛[代码]（这跟 Vue 作者是独立开发者也有关系）。所以 Vue [代码]推崇[代码]灵活易用（渐进式开发体验），数据可变，双向数据绑定（依赖收集）。 React 早期口号是 [代码]Rethinking Best Practices[代码](重新思考最佳实践)。背靠大公司 Facebook 的 React，从开始起就不缺关注和用户，而且 React 想要做的是用更好的方式去颠覆前端开发方式（事实上跟早期 jquery 称霸前端，的确是颠覆了）。所以 React [代码]推崇[代码]函数式编程（纯组件），数据不可变以及单向数据流。函数式编程最大的好处是其稳定性（无副作用）和可测试性（输入相同，输出一定相同），所以通常大家说的 React 适合大型应用，根本原因还是在于其函数式编程。 由于两者核心思想的不同，所以导致 Vue 和 React 许多外在表现不同（从开发层面看）。 引用这位大哥写的 理解 Vue 和 React 区别 三、生命周期 Vue Vue 生命周期官方图解 [图片] React 大神绘图 React 生命周期 点击生命周期即可跳转官网解读 [图片] 综合对比 生命周期这块基本都是围绕着[代码]挂载、更新、卸载[代码]三个方面 Vue 提供的比较多，但是常用的: [代码]created/mounted/destroyed[代码]React 新版废弃了一些，常用的: [代码]componentDidMount/componentDidUpdate/componentWillUnmount[代码]，Hooks 更是没有 四、数据流 Vue 双向绑定，单向数据流：vue2.x 通过 [代码]v-model[代码] 实现双向绑定，可以不关心受控组件，v-model 相当于 onChange 的语法糖 <input v-model="value" /> React 单向数据流：[代码]万物皆 Props[代码]，主要通过 [代码]onChange/setState()[代码]的形式该更新数据，需要所以在 react 中需要关注受控组件的写法 // 会报错，props的值不可修改 // 在onChange调用setState修改数据,需要调用setState修改绑定数据 受控组件 [图片] 五、组件 1、组件封装 Vue // 父组件 import Child from './Child' export default { name: 'Father', components: { Child }, data() { return { text: '接收到了父组件数据' } } } // 子组件 export default { name: 'child', props: ['text'], data() { return { children: '子组件自己的数据' } } } React import React, { useState, useEffect } from "react"; function Child({ onClick }) { const [list, setList] = useState([]); useEffect(() => { setList([1, 2, 3]); }, [onClick]); return ( {list.map((item, index) => { return {item} ; })} ); } function Father() { const show = () => { return [4, 5, 6]; }; return ( ); } export default Father; 2、组件通信 Vueprops/emitprovide/injectvuex（双向数据绑定，响应式）event bus Reactprops(子传父通过[代码]props.function[代码])contextredux（单向数据流） 3、组件嵌套 Vue:slot 插槽 // index.vue ; import Test from "./test"; // test.vue ; React: props.children // 父组件 import Test from "./test"; 组件嵌套 ; // 子组件 import * as React from "react"; const Test: React.FC = (props) => { return ( <> 测试props.children {props.children} ); }; export default Test; 六、总体感受 1、一些区别vue [代码]更简单，更方便[代码]，熟悉了 api 以后，实现某些简单功能更快。react 写法更偏向于[代码]原生 JS[代码]，Class 的写法不是很舒服，个人更喜欢 [代码]hooks[代码]。熟悉了 [代码]hooks[代码] 以后，写起来很自由，不用关心 vue 中固定的 [代码]options api[代码]react 做中后台优势更大，有大厂加持，生态更好，组件库功能也更多，解决方案也更多vue2.x 对 typescript 不太友好，[代码]react + typescript[代码] 更加舒适，两者写起来风格差距较大。react JSX 写起来还是不够熟练，[代码]onClick、style、className[代码] 等等，没有 [代码]v-if，v-for，All in JS[代码]。Vue 则推崇 [代码]html、js、css 分离[代码]的写法，当然 vue 也可以写 JSXvue 的 prop 必须在[代码]子组件 props 字段里声明[代码]。React 的 prop 不强制声明，直接使用，如果用 TS 的话还是要声明的 2、学习很多人说 vue 转 react 很简单，一周熟练上手。我比较菜，感觉适应起来还是[代码]有成本的[代码]，但是也没有很难，最主要的还是要多动手，不懂就深挖为什么通读一遍 react 官网，对着例子多敲敲，好好理解，做做笔记。B 站 React技术全家桶 学习视频，可以不敲，[代码]快速过一遍[代码]，毕竟都不是小白了。然后自己搞个项目，[代码]去实现一些自己感兴趣的东西[代码]基础知识过完以后，[代码]查缺补漏[代码]，找各种博文读一读，不理解的[代码]再次[代码]进行学习[代码]总结[代码]自己的学习成果，react已经学了一段时间了，后面再整理一下，发出来为了提高熟练度，用公司的组件库（zent）自己动手写了写，有兴趣的老哥参考下：在线预览:俊劫学习系统 Github 源码:基于 react + typescript 欢迎[代码]start[代码] [图片] 七、参考文章「Vue」与「React」--使用上的区别从 Vue 转 React 的一些体验Vue 转 React 指南，看这篇文章就够了理解 Vue 和 React 区别 八、最后 [图片] 作者：俊劫 感兴趣的小伙伴点击链接，了解详情~ http://github.crmeb.net/u/yi

不建议同个页面使用多个video组件，建议不超过3个video，如果要实现video列表功能，请进行优化（image列表，选中时将image替换成video）

微信7.0.20, 使用canvas的createImage()创建的image对象, onload方法不执行, 造成线上使用canvas生成图片的功能异常。 微信7.0.18正常,, 微信的升级到7.0.20全部异常

在使用小程序的时候，偶然会发生闪退。这里来讲一下闪退的问题该如何排查。 版本排查 发生闪退的时候，首先，要确认下 版本 是不是最新的。如果不是，建议更新版本再重试。旧版本的问题会在新版本进行修复哦。 微信版本： 微信官网 基础库版本：基础库更新日志小程序自查 确认版本都是最新情况下，还是有闪退的问题的话，建议先进行小程序自查~ 一般情况下，闪退是因为内存使用过多导致的，小程序侧可以通过基础库提供 wx.onMemoryWarning 接口来监听内存不足的告警，当收到告警时，通过回收一些不必要资源避免进一步加剧内存紧张。 反馈官方 如果问题还是会出现的话建议反馈给官方处理，需要附带上以下信息点协助排查（划重点：完整的提供信息才可以加速问题处理进度哦！！！） 示例： 系统及微信版本号：安卓7.0.17、IOS 7.0.17（出现问题的时候，建议两端都测试，给出有问题的case）必现 or 偶现：必现可复现场景：代码片段 或者 线上小程序复现步骤：进入首页，点击添加按钮等等，推荐录制复现的 视频（重点）进行上传。上传日志：提供微信号，复现时间点（操作步骤：手机微信那里上传下日志： 我 -> 设置 -> 帮助与反馈：右上角扳手 -> 上报日志，选择出现问题的日期，上传日志）