关注IMWeb前端社区公众号

  • 第一时间获得最新、最火的技术干货
  • 定期推送您所关注的专题文章
  • 和大牛们一起讨论前端技术
  • 获取IMWeb社区、前端相关的最新活动
热文 更多

  • 你知道npm包版本管理有多重要么?

    前言 我之前确实对包版本管理这块的知识比较缺失,所以导致我在项目的某次需求当中掉进了很多深坑。这篇文章,希望可以帮助你避开这些包版本管理不善带来的问题。 下面是故事时间: 故事一 我们的项目中使用的是preact,preact-compat的库。某天,小A要做需求,时间比较赶所以想引用一些库进来提升效率,但是由于当前preact-compat太低导致不兼容啊。怎么办?这还用问么?当然是 升级一下preact-compat的版本 啊。 小A开心的就把本地的preact-compat升级了,跑一下本地,很正常嘛,于是就push上了远程愉快的发布了。 发布后不久,产品经理来找小B了,说怎么回事,我们的页面不能用了啊!直接一上来就是遮罩 ,关都关不掉。于是小B赶紧找到发布了需求的小A,问问有没有改到自己的文件。同时也拉取了最新的代码在本地调试。很快就找到了问题 --- 就是由于preact-compat版本升级导致一个JSX-if的库不兼容 。原先需要判断一下if else逻辑的地方,一下子全部失效了。

  • 送你一份微信小程序 web-view 开发踩坑大全

    对于开发者来说,如果 H5 页面能够直接嵌入到小程序那是再好不过了,而 web-view 组件正好就提供了这么个功能(个人类型与海外类型的小程序暂不支持使用)。简单来说它是一个可以用来承载网页的容器,会 自动铺满 整个小程序页面。 虽然这带来了很大的便利,但是也还是有很多需要注意的地方。 账号权限 如果要在小程序中使用 web-view [https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html] 组件,则首先需要开发者账号不仅是该小程序的开发者而且还有 网页开发权限 ,这需要在 该小程序关联的公众号 里面绑定开发者账号为开发者。不然在开发工具里面会弹窗提示没有网页开发权限。提示如下: [http://imweb-io-1251594266.cos.ap-guangzhou.myqcloud.com/f97acee83ffdaf328d58c940104467cf.png] 业务域名

  • WebAssembly + Rust 上手初探

    如果说现在还有什么技术能够掀起前端的大变革,那就是 WebAssembly 了(以下简称WASM)。WASM 技术从立项开始便受到大家的瞩目,随着各大浏览器厂商的努力,目前的主流浏览为已经全部完成对 WebAssembly 的初步实现。另外在社区的推动下,围绕 WASM 的 emscripten 和 wasm-pack 等工具链的支持已经日趋完善,是时候使用 WebAssembly 了! WASM 简介 WebAssembly 是一种简单机器模型下的执行格式,其具有一个扩展规范。 WebAssembly 并未和 JS 或者 Web 绑定;也没有预设其宿主环境。 因此也有理由假设 wasm 将会成为重要的跨环境“可移植执行体”格式。 可以这么说:今时今日,wasm 的确和 JS 关系重大,这是因为收到了多方的青睐(浏览器和 Node.js)。 WebAssembly 只有很小的一个值类型集合,基本上限制在简单数值的范围内。 WebAssembly 具有非常简单的内存模型。 目前,wasm 可以接入一个非常简单的“线性内存”,其基本上就是一块扁平的定长数字型数组。

  • 微信小程序之分享海报生成

    为了吸引更多的用户,设计好一个分享海报还是很有必要的。而小程序要生成一个海报还是有点坑的,下面分享下我们打卡小程序的一些经验。 分享海报的效果图如下: [http://imweb-io-1251594266.cos.ap-guangzhou.myqcloud.com/7c1e10c72336404bdec7c399b1f408f4.png] 制作要求: * 海报以弹窗形式展现,各种手机型号都可以正常显示 * 海报的内容由背景图、日期、随机的名言警句、活动的二维码及用户的参加活动的信息 * 海报保存的图片大小为 iphone 6 的两倍图(750 * 1334) 由于看到的弹窗图片与保存的图片是两种大小,所以一开始看了些网上的其他教程,建议是搞两个 canvas 一个大的一个小的。实际过程中,采用了一个大的 canvas ,让其偏离视窗显示区域(不可见)并生成临时文件,弹窗的图片再使用 img 组件,引入临时文件,设置其高度;而保存的时候则直接下载临时文件。 虽然是实现了,但是后来在优化的过程中,这个方案也重新设计了。下面具体介绍下优化过的方案:

  • 【译】ReactJS的五个必备技能点

    想必你已经完成了官方的第一个 React.js 教程,本文将介绍并讨论五个 React 的进阶概念,希望可以将你的 React 技能提升一个新的等级。 原文链接: These are the concepts you should know in React.js (after you learn the basics) [https://medium.freecodecamp.org/these-are-the-concepts-you-should-know-in-react-js-after-you-learn-the-basics-ee1d2f4b8030] 如果你对 React 还不太熟悉,那么建议你先尝试完成 官方教程 [https://reactjs.org/tutorial/tutorial.html] ( 中文版 [https://react.docschina.org/tutorial/tutorial.html] ),回头再来看看这篇文章吧。 1. 组件生命周期(THE COMPONENT LIFECYCLE)

热问 更多