diff --git a/cg/image/blur.md b/cg/image/blur.md new file mode 100644 index 0000000..f063717 --- /dev/null +++ b/cg/image/blur.md @@ -0,0 +1,15 @@ +# Blur +> 模糊处理 + +## Gaussian-Blue +高斯模糊 + + +## 参考 +- [使用高斯模糊的效果逐步加载图片(仿 Medium)](https://segmentfault.com/a/1190000006743512) +- [How Medium does progressive image loading](https://jmperezperez.com/blog/medium-image-progressive-loading-placeholder/) +- [Fast and almost Gaussian blur ](https://github.com/flozz/StackBlur) +- [Fast gaussian blur in pure JavaScript via IIR filer ](https://github.com/nodeca/glur) +- [妧一峰--高斯模糊的算法](http://ruanyifeng.com/blog/2012/11/gaussian_blur.html) +- [Stackblur and Quadratic Stackblur](https://observablehq.com/@jobleonard/mario-klingemans-stackblur) +- [gaussian_blur](https://github.com/Sachs27/gaussian_blur) \ No newline at end of file diff --git a/web/mini.md b/web/mini.md index 2e5dce1..ce7e596 100644 --- a/web/mini.md +++ b/web/mini.md @@ -2,8 +2,30 @@ > 国内的特定环境下的产物 >> 微信小程序有自己的一套流程,嵌入在定制的浏览器中 -## canvas -坑死人了,与web的canvas有很大的差异,感觉 +## 微信小程序框架 + +基于Web技术,但是与Html5是有差异的,最大的差异之一就是:浏览器中的UI和JavaScript逻辑都是在一个线程中执行的。而微信小程序使用双线程模型,一个线程专门负责渲染工作,称之为渲染层;另一个线程执行逻辑代码,称之逻辑层。这两个线程同时运行,通过微信客户端来交换数据。 + +逻辑层执行代码逻辑,通过setData发送到渲染层, + +渲染层解析WXML和WXSS并渲染出页面。 +[小程序没有 DOM 接口,原因,涉及小程序架构框架思路](https://developers.weixin.qq.com/community/develop/article/doc/000462336ccf080229a9eb37c59413) + +### 同层渲染 +- [小程序同层渲染原理剖析](https://developers.weixin.qq.com/community/develop/article/doc/000c4e433707c072c1793e56f5c813) + +部分组件没有使用WebView渲染,而是由客户端原生渲染,所谓的native-component。这种就是多个图层叠加出最后的效果,由客户端不同实现也可能不同。 + +native-component能提供一些html5不能实现的功能,对用户的体验流畅度非常好,如音频视频等,还减少进程间通信开销。 + +### [wxss](https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxss.html) + +rpx(responsive pixel): 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。 + + +## 注意事项 +- wxml是动态绑定数据,就是先有数据再绑定,比html5要慢一个过程,这也是小程序嵌入的逻辑问题 + ## OMI框架 ```js @@ -15,6 +37,8 @@ npm omi-cli init-js smile ## 文档参考 +- [关于小程序隐私,2023-9-15之后必须主动弹窗获取](https://developers.weixin.qq.com/community/develop/doc/00042e3ef54940ce8520e38db61801) + - [weui官方文档,可支持扩展原生支持](https://wechat-miniprogram.github.io/weui/docs/#weui%E7%BB%84%E4%BB%B6%E5%BA%93%E7%AE%80%E4%BB%8B) - [TDesign文档](https://tdesign.tencent.com/) - [OMI](https://omi.cdn-go.cn/home/latest/) @@ -23,4 +47,10 @@ npm omi-cli init-js smile ### 小程序案例 - [如何实现圣诞节星星飘落效果](https://developers.weixin.qq.com/community/develop/article/doc/000e443b1247a039fd99230b457013) - [小程序海报组件-生成朋友圈分享海报并生成图片](https://github.com/jasondu/wxa-plugin-canvas/tree/master) - - [轻松生成小程序分享海报 ](https://juejin.cn/post/6844903663840788493) \ No newline at end of file + - [轻松生成小程序分享海报 ](https://juejin.cn/post/6844903663840788493) +- [小程序canvas 缩放/拖动/还原/封装和实例--开箱即用](https://blog.csdn.net/iamlujingtao/article/details/128289849) +- + +## 报错异常 + +- 只能转es6到es5,否则报错很多