小程序笔记
小程序开发经验
小程序无限层级菜单：https://blog.csdn.net/qq_42205731/article/details/92059227 暴露出去的class在组件里无法使用，最有不是暴露出去的class在组件里才可使用。如果组件里的样式和暴露出去的class都可以控制样式，那么组件里的样式优先级更高。 绑定事件推荐使用catchtap，有很多隐形的好处。
微信小程序自定义组件使用外部class：https://blog.csdn.net/weixin_41036148/article/details/103614199
动态获取小程序appId，有专门的api可以使用
const accountInfo = wx.getAccountInfoSync()
console.log(accountInfo.miniProgram.appId)
2
小程序API Promise化
- https://developers.weixin.qq.com/miniprogram/dev/extended/utils/api-promise.html
小程序使用npm包：https://developers.weixin.qq.com/miniprogram/dev/devtools/npm.html
小程序组件间通讯以及刘海适配：
- https://github.com/HelenTim/ReviewFrontEnd/blob/master/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F/%E6%9F%A5%E6%BC%8F%E8%A1%A5%E7%BC%BA.md
我们还可以监听标签属性值的变化，进而执行操作
- 参考：这里的 (opens new window) 【change:标签的某个属性 = '事件名'】
借助库实现数据和业务的分离：https://developers.weixin.qq.com/miniprogram/dev/extended/utils/mobx.html
分包以及分包预下载
- https://developers.weixin.qq.com/miniprogram/dev/framework/subpackages.html
注册全局组件，直接在页面使用而不用再页面里引入组件
- https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#usingComponents
- 例如这里我们声明了全局组件，我们不需要在每个页面的json文件里再次引入此组件，直接在页面写组件名即可使用。
我们可以在微信公众平台设置小程序的
基础库最低版本设置，以此来开启很多新api的使用以及功能。组件可以使用slot
- https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html 【组件 wxml 的 slot】
封装wx.request为promise风格的axios请求。
- https://github.com/T-Macgrady/blog/tree/master/index
- 具体使用我们可以参考
- https://github.com/T-Macgrady/blog/tree/master/request#api
- 参数config指的是这里 (opens new window)的配置项。说明我们可以为不同的请求传递不同的config。
- https://github.com/T-Macgrady/blog/tree/master/request#api
自动获取小程序开发环境：
小程序内嵌h5页面向小程序通讯：https://blog.csdn.net/qq_24023151/article/details/104298014
小程序内嵌h5页面跳转到另外的其他小程序：
- 参考：https://yinode.tech/post/202108/h5%E8%B7%B3%E8%BD%AC%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E4%B8%AA%E4%BA%BA%E5%BE%AE%E4%BF%A1+%E4%BC%81%E4%B8%9A%E5%BE%AE%E4%BF%A1%E7%9A%84%E5%AE%9E%E7%8E%B0/
- 普通微信小程序：
- 微信jssdk结合wx-open-launch-weapp开放标签，但是需要在微信服务号里进行相应设置才行。
- 内嵌h5先跳转到当前小程序某页面A，在页面A里调用wx.navigateToMiniProgram
- 企业微信参考上面即可。
- 但是在微信jssdk文档里 (opens new window)并没有看见launchMiniprogram项
- 普通微信小程序：
- 参考：https://yinode.tech/post/202108/h5%E8%B7%B3%E8%BD%AC%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E4%B8%AA%E4%BA%BA%E5%BE%AE%E4%BF%A1+%E4%BC%81%E4%B8%9A%E5%BE%AE%E4%BF%A1%E7%9A%84%E5%AE%9E%E7%8E%B0/
小程序页面生成图片的npm包：
- 官网链接参考 (opens new window)
- 对应的github (opens new window)
- 可能会遇到的问题：
- 真机上：fail canvas has not been created
- 解决办法：http://qiutianaimeili.com/html/page/2021/06/2032p23xqi8k5a.html // 这里是正确的 ，这里提到【上面需要注意的是，renderToCanvas方法一定要做定时，否则会报错，因为内部有一个异步操作】，那么我们可以首先吧onshow声明为异步函数(async)，然后把this.widget = await this.selectComponent('.widget');这就话在onshow里调用即可。
- 解决时参考代码： 这里
- 小程序使用的npm时需要在构建npm包之后将小程序上传到微信公众平台之后，扫那里的码才可以真机看结果；不然本地真机预览时由于不会加载本地npm包，会报错。
- 真机上：fail canvas has not been created
- 类似功能的包：
- https://developers.weixin.qq.com/community/develop/doc/000048447844f80b9107d64ab51006
- https://juejin.cn/post/6844904041000992776
- https://github.com/wg-front/wxml2canvas
- 小程序生成图片：https://zhuanlan.zhihu.com/p/150958334?utm_source=wechat_session
- 注意点：
- 微信小程序 canvas的宽度不要超过手机屏幕的像素，否者有部分图像画不出来，所以使用wxml-to-canvas的时候，canvas宽度设置为360px最合适。在有些上机上 wxml-to-canvas 生成的图片会变形：https://github.com/wechat-miniprogram/wxml-to-canvas/issues/11
- 官网链接参考 (opens new window)
小程序深入认识，然后有优化：
小程序预加载优化：
- https://blog.csdn.net/sinat_27612147/article/details/80802725
- https://blog.csdn.net/sinat_27612147/article/details/80798452
小程序wx.request请求axios化：项目还包括（自定义头部、自定义底部tabbar），以便自定义样式，可直接使用。
- 参考：https://gitee.com/wangluoshihuang/included-in-different-projects/tree/master/%E8%A7%86%E6%9D%8F%E7%A7%91%E6%8A%80/nimiprogram
- 这个小程序已经封装得很完善了。请求库也经过自己再次封装过，每次在header里可带上token，原本的这个库是没有这个功能的。具体的封装参考此文件夹里的 index.js 、axios.class.js
- 小程序我们自定义tabbar的时候，里面的元素不要使用cover-view，初始化时，这个元素不支持渐变色（假如我们在cover-view的tabar上使用渐变色，是没有效果的）。自定义组件的层级默认是最高的。
- 里面讲解了请求时设置header的 "content-type"为不同值是，发出请求时请求体数据的格式也不一样。
- 参考【 Http请求中请求头Content-Type讲解】：https://blog.csdn.net/m0_45406092/article/details/114022550
- 请求库的封装原始参考github：https://github.com/T-Macgrady/blog/tree/0e0ed7798219663b5a14c6a304194ca193207e42
- 参考：https://gitee.com/wangluoshihuang/included-in-different-projects/tree/master/%E8%A7%86%E6%9D%8F%E7%A7%91%E6%8A%80/nimiprogram
微信小程序如何监听页面渲染完成：
- this.setData({},fn)：这里的fn会在每次页面渲染完之后触发。
小程序手势库：
- https://www.npmjs.com/package/miniprogram-gesture
- https://github.com/wechat-miniprogram/miniprogram-gesture
- https://www.npmjs.com/package/miniprogram-gesture
h5使用小程序sdk
- 微信的js sdk 需要配置js安全域名，之后页面里wx.config的jsApiList配置才会生效：在公众号平台 设置与开发=》开发者工具=》公众平台测试账号》JS接口安全域名 下填写域名 。
小程序scroll-view里面，不要在第一哥子元素上设置margin，否者在没有达到滚动条件的情况下会发生滚动。
小程序虚拟列表的滚动：https://juejin.cn/post/6866782460428943368
微信小程序监听元素是否在可视区：https://developers.weixin.qq.com/miniprogram/dev/api/wxml/wx.createIntersectionObserver.html 使用wx.createIntersectionObserver 完成
控制微信小程序video的播放、暂停：https://www.cxymm.net/article/qq_42975998/89113877
分享到朋友圈：https://blog.csdn.net/qq_32113629/article/details/107177622，只能设置分享内容，分享的唤起还是需要右上角。
- scroll-view下拉刷新页面
<scroll-view refresher-enabled="{{true}}" refresher-triggered="{{reFresh}}" bindrefresherrefresh='realFresh'></scroll-view>
// refresher-triggered 属性改变头部下拉的状态
// bindrefresherrefresh：触发下拉刷新函数
2
3
4
- 分享朋友圈wx.onShareTimeline 传参：参数写成路径形式，并且是不带？号 的部分
- 微信小程序分享到朋友圈图片最好是在本地
- h5分享到朋友圈：https://blog.csdn.net/qq_32113629/article/details/107177622，只能设置分享内容，分享的唤起还是需要右上角
- 我们有时候需要关闭所有页面，只打开某一个页面：使用 wx.reLaunch
- 例如小程序的首屏页面，跳转到其他页面时可以用这个。
