微信小程序开发的技术分享

一、小程序的生命周期函数

1.全局生命周期

2.页面生命周期

3.组件生命周期

详解参考：https://www.cnblogs.com/dobeco/p/11296609.html

二、微信小程序组件封装

微信小程序父子组件传值通信是组件封装的核心思想，通过父子组件之间的传值完成组件的功能化;

微信小程序之公共组件写法： https://www.cnblogs.com/kdcg/p/9115778.html

父组件向子组件传值（通过 properties 属性），子组件向父组件传值（通过 triggerEvent 事件）

小程序组件传值:https://www.jianshu.com/p/ea830fe470fa

父子组件传值参考详解：https://blog.youkuaiyun.com/susuzhe123/article/details/80287540

代码概括：https://www.jianshu.com/p/d15cde54768d

三、微信小程序页面跳转的5种方式及区别

微信小程序的页面跳转可以传递参数，在打开的页面的onLoad监听页面加载生命周期函数中的参数中可以获取到传递的参数

详解参考：https://blog.youkuaiyun.com/shadow_yi_0416/article/details/82146770

四、自定义导航栏

只需再要自定义页面的.json文件中设置"navigationStyle": "custom"即可

五、微信小程序canvas

1.微信小程序的 canvas 不能像 h5的 canvas 一样把 画布大小 和 显示大小分别设置

2.微信小程序canvas绘制图片真机不显示

需要用 wx.getImageInfo 将网络图片转成本地路径 然后在真机就可以正常显示了，另外此方法可以获得图片的详细信息

详细代码参考：https://www.jianshu.com/p/4226d8775368

3.微信小程序的canvas是原生组件，默认层级最高

六、将获取到的px转化为rpx(根据设备宽高动态设置元素宽高)

代码参考：https://blog.youkuaiyun.com/qq_41080490/article/details/80268298

七、cover-view 的使用

cover-view 在小程序中是比较特殊的组件，与 view 的最大区别在于，它能覆盖在原生组件 map、video、canvas、camera 之上，且只能嵌套 cover-view 和 cover-image。

https://developers.weixin.qq.com/miniprogram/dev/component/cover-view.html

八、选项卡写法

具体代码参考：1.滑动切换 https://www.jianshu.com/p/823a78d08e56  2.点击切换 https://www.cnblogs.com/mrszhou/p/7965584.html

九、从本小程序打开另一个小程序（小程序跳转）

wx.navigateToMiniProgram(Object object)

十、全局变量的定义及使用

代码详解：https://www.cnblogs.com/yuanyiming/p/11575935.html

十一、小程序缓存的存入与使用

微信小程序 wx.setStorageSync 本地储存缓存过期时间：https://blog.youkuaiyun.com/qq_26931659/article/details/96475687

十二、微信小程序之画布(canvas)转化出来的图片模糊问题

1.在使用wx.canvasToTempFilePath的时候，设置参数destWidth和destHeight(输出的宽度和高度)为width和height的2倍以上即可

https://www.cnblogs.com/jessie-xian/p/11571639.html

2.绘制canvas的时候用的是px， 这里换算成rpx ，导出后比较清晰 https://www.cnblogs.com/cynthia-wuqian/p/10286382.html

十三、微信小程序自定义tabbar

1.app.js修改如下，首先使用wx.hideTabBar();隐藏自带的tabbar；

https://blog.youkuaiyun.com/weixin_43227172/article/details/85563221

2.微信小程序——底部导航tabBar

https://www.jianshu.com/p/9c1d60a29048

3.微信小程序 自定义tabbar实例

https://www.cnblogs.com/demodashi/p/9802030.html

十四、微信小程序实现保存图片到相册功能

https://www.jb51.net/article/151751.htm

1.wx.saveImageToPhotosAlbum将图片保存到本地

https://blog.youkuaiyun.com/zkn_2439656793/article/details/78039924

十五、使用小程序内置地图wx.getLocation和wx.openLocation

https://www.jianshu.com/p/464aa3d0e251

十六、小程序直播功能开发流程

1.live-player 是微信提供的支持实时音视频播放的组件

https://www.jianshu.com/p/2b354f64c12e

2.微信小程序开发需要基于微信提供的开发者工具与 SDK

十七、微信小程序 wx:key在标签中的写法

<view wx:for="{{dataList}}" wx:key="item.id"></view>

http://www.zhichiwangluo.com/news/2963.html

十八、小程序中设置禁止多次点击或者重复点击

https://blog.youkuaiyun.com/xuelian3015/article/details/95056419

十九、小程序自带弹框方法

1.wx.showModal

https://www.cnblogs.com/xqxacm/p/9837218.html

2.相关控件

https://blog.youkuaiyun.com/yingtian648/article/details/80004334

二十、微信小程序图片上传和预览

https://www.cnblogs.com/chenjy1225/p/11546719.html

最后总结一些常用功能：

1.微信小程序中图片自适应及双指缩放

https://blog.youkuaiyun.com/qq_41107410/article/details/88602313

2.微信小程序之裁剪图片成圆形

https://www.cnblogs.com/Limengbo/archive/2018/10/11/9770842.html

3.微信小程序自定义tabbar

https://www.jianshu.com/p/dda33e3a53cc

4.微信小程序：自定义导航栏

https://www.jianshu.com/p/5753a0e1754f

5.微信小程序实现图片放大缩小，并截取指定区域图片

https://blog.youkuaiyun.com/yang7789/article/details/78933734

6.微信小程序内拖动图片实现移动、放大、旋转

https://blog.youkuaiyun.com/qq_37942845/article/details/80169907

顺便看一下弹性盒子与多列布局：

https://www.jianshu.com/p/ce9b1f80cde3

js在数组中查找是否存在某一个数值

https://blog.youkuaiyun.com/weixin_30514745/article/details/96722556

将数据转为JSON字符串：JSON.stringify(drawArr)
将JSON字符串数据转为JSON对象：JSON.parse(str)