微信小程序知识点
小程序的双线程模型
视图的更新是怎么做到的？
通过setData()，setData先将 数据转化为字符串，接着将这个字符串和代码拼成js脚本，然后把这个脚本传给evaluateJavascript这个原生方法，然后执行。
使用setData可能遇到的问题？
因为是双线程的。页面滑动的卡顿问题。
更新一个大列表时可能遇到
wxs语言
wxs可以在wxml文件中写wxs脚本，直接在视图线程里完成。提高效率。
视图线程的编译过程
虚拟DOM
小程序把原生组件放在一般视图组件上面
逻辑线程的实现
生命周期
组件相关
自定义图标
icon可以和文本进行混排
建议使用阿里巴巴的iconfont.cn网站下载使用
小程序中建议使用ttf和woff格式的字体
也可以使用svg图片，然后将svg转成base64字符串，然后就乐意在小程序里直接使用
progress进度条
1，开发一个下载文件的动态的进度条
2，进度条如何设置圆角
1 | <process border-radios="5" percent="20" show-info> |
这设置的是进度条外框的圆角
hack方法：
在微信开发者工具的目录中找到本地样式表，通过在页面中重写样式实现
3，已经加载完的进度条，让其重新加载
连续调用2次setData
4，实现一个环形进度条
自定义一个组件
5，进度条右边的百分比修改样式
使用内联样式
rich-text富文本
rich-text 组件内屏蔽所有节点的事件。
如何预览并下载rich-text中的图片？
因为rich-text 组件内屏蔽所有节点的事件。所以无法给img设置tap监听。
做法是，监听整个rich-text的tap，通过解析event参数中的pagex，pagey参数的值，大体判断用户点击的是哪一张图片。
使用wx.预览并下载图片
图片列表要提前解析nodes得到。
解决图片间的间隙问题
rich-text中的两张图片间默认是有一个缝隙的。这是样式问题
解决方法是，给node节点加一个style，设置为font-size:0;display:block，
直接解析html代码
手动维护nodes节点比较麻烦，有一个开源parser组件可以直接解析html代码
项目中建议使用这个代替rich-text
view
hover-class:指定按下去的样式类,可以有一个单击效果
hover-stop-propagation：阻止本节点的祖先节点出现点击态，不会阻止bind事件冒泡。
btn里也可以用hover-class
左滑删除功能
moveable-area和moveable-view，功能比较简陋
使用npm第三方包：
wechat-miniprogram/slide-view: weapp custom component – slide-view (github.com)
npm init -y
npm install –save miniprogram-slide-view
工具 –》 构建npm
使用
但是，已经不维护了。可以使用weui-miniprogram的mp-slideview组件
可以直接在小程序中使用，并且使用扩展声名的方式使用不占用代码包大小
在app.json中声明
1 | "useExtendedLib": { |
生成海报
painter组件
wxml-to-canas组件
商品导航侧边栏
1 | npm i @miniprogram-component-plus/vtabs --save |
自定义实现多级选择器
微信原生组件提供了picker，但是样式不能自己控制。通过picker-view实现自定义的多级选择器
并且通过js和wxs实现了两个版本，wxs相对来说效率更高
竖向slider
小程序原生组件的slider只有横向
自定义导航
图片作背景图并适配所有机型
建议背景图大小 750 x 1334 分辨率72
用css实现