小程序刚出来的时候开发过一个，早已忘的一干二净。
一直用vue开发，再来开发小程序感觉诸多限制,满脸泪水。
有考虑用框架感觉没必要，虽说可以兼容多端，但是呵呵。。。还是看个人吧
习惯性小坑
wx:if 不要写成 v-if vx-if vx:if ，绑定数据要用{{}}括起来，和老版本的vue差不多
*尽量用微信提供的组件，不要用html标签，多些几个class就完事了，不然会撞鬼。
*小程序的目录结构可以自己额外添加，没有必要统一口径，怎么爽怎么来，可以添加但是不要删除这些固定搭配。
*图片等资源文件可以放在别的服务器里，需要配置域名哦，然后直接访问路径，小程序是有大小限制的。
*访问data内的数据vue是this.test ,小程序this.data.test,设置数据是this.setData({test:'呵呵'})
*通过 const app = getApp();获取全局的应用实例
*app.js 里有 app .globalData 相当于设置全局变量的地方 在app.js 获取全局实例用this即可
tabbar
wx.switchTab跳转，无法带参数，无法带参数，无法带参数，恭喜你入了第二个坑,可以通过app .globalData或是本地存储解决,（页面调试）
通过渲染的列表点击进去很烦啊，不怕。
点击普通编辑的下拉框选择添加编译模式，弹窗内的提示很易懂，不做拓展。
setStorageSync
wx.setStorageSync （同步） 需要存储的内容。只支持原生类型、Date、及能够通过JSON.stringify序列化的对象。
这个是和H5的localStorage类似的，但是传值不一样例如：wx.setStorageSync('area', JSON.stringify(area));。
wx.setStorage（异步）什么是异步不解释
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
picker
省市区选择器：mode = region ，微信提供的，不要自己傻傻去写，还有别的自己去看文档https://developers.weixin.qq.com/miniprogram/dev/component/picker.html。
如果只有省和市，就自己乖乖写吧。对，看我很乖。下面直说几个注意点
<picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}" range-key="name">
>
multiSelector 多列选择器
multiIndex 是一个下标数组 我写的是省市的联动，只有二级例：[0,1]，如果三级,例：[0,0,0]
multiArray 格式是这样的
let a = [{name:'a'},{name:'b'}]
let b = [{name:'c'},{name:'d'}]multiArray =[a,b]
range 是一个 Object Array 时，通过 range-key 来指定 Object 中 key 的值作为选择器显示内容
~~~~~~~~~~~~~~~~~~~~~~~~~
canvas
需求是一个分享的图片，带文案，带封面，带小程序码
用canvas画图的时候引入一些图片需要是https开头
并做好域名配置（详情->项目配置里查看 配置需要去微信公众平台）
然后通过wx.getImageInfo进行转换，不转换在真机是无法画入到画布的
如果画入的文案过长需要换行，那么api只有一个宽度设置，并不会自动换行，所以得自己做处理
附上网上找的js
/* 换行的文字 params @ctx canvas对象 params @str 文字 params @pageX 文字x坐标 params @pageY 文字y坐标 params @lineHeight 文字行高 params @canvasWidth 绘制区域大小 */ drawText(ctx, str, pageX, pageY, lineHeight, canvasWidth) { var lineWidth = 0; var lastSubStrIndex = 0; //每次开始截取的字符串的索引 for (let i = 0; i < str.length; i++) { lineWidth += ctx.measureText(str[i]).width; if (lineWidth > canvasWidth) { ctx.fillText(str.substring(lastSubStrIndex, i), pageX, pageY); //绘制截取部分 pageY += lineHeight; //行高 lineWidth = 0; lastSubStrIndex = i; } if (i == str.length - 1) { //绘制剩余部分 ctx.fillText(str.substring(lastSubStrIndex, i + 1), pageX, pageY); } } }
小程序码的生成网上查了很多资料，还是建议后台生成返回。后台需要用到当前需要分享的页面的路径，注意，这里的路径一定要是线上的路径。
我做的时候是绘制好后生成图片，然后进行预览，可以保存到本地
canvas的大小可以这样来写，微信是rpx
图片预览
*图片预览，幻灯片效果用这个wx.previewImage
如果上面需要多了一个删除按钮，或者是 分享按钮，那么恭喜你，自己重新写一个吧
里面滑动的预览效果可以用swiper来制作
swiper 属性 需要用到的
current 当前所在滑块的 index
bindchange current 改变时会触发 change 事件，event.detail = {current, source} //注意如果通过此api改变下标会导致轮播左右不停来回切换闪动
bindanimationfinish 动画结束时会触发 animationfinish 事件，event.detail 同上 ，
唉~不想写了，看到这里你也知道我是一个有故事的人了