应公司需求，接手小程序，在此之前我是一点也没有接触过，对此，拿过小程序文档和官方案例就一顿恶补，在此期间也看过一些小程序建立模型的视频，终于对小程序知晓一二，拿过项目开始研究。好了废话不多说，总结一下此次做小程序遇到的坑以及难点：
1、input、textera、video等组件层级太高
问题描述：页面有个input文本框，有个自定义的弹框（非微信自己的组件），当弹框显示时候，弹层底下的input文本框覆盖到弹层上，加z-index无效；
解决法案：网上很多人遇到这个问题，大概是微信官方组件的“特点”，所以需要我们手动处理设置一个控制input显示隐藏的变量，iputIsShow: true 默认为true ，input文本框显示，当弹层显示时，iputIsShow：false, input文本框隐藏。但这个方法并不是针对所有场景都有效，当弹窗部分没有遮挡住input文本框时候不适用；
2、页面生成图片
问题描述：把一组数据单独生成一张图片；
解决方案：利用canvas绘制图片，把需要用到的数据添加在canvas上；
3、canvas适配问题
问题描述：小程序中所有的单位都是用rpx，却唯独canvas默认是px;
解决方案: （1）有网友建议单独写一个view，把需要的图片用view写出来，获取它的宽高赋值给canvas（这是什么鬼方法，直接被我pass掉了）；
（2）我在思考既然小程序官方可以把px换算rpx，那我们一定也可以把px换算成rpx，果然，官方规定屏幕宽度为750物理像素，无论它在什么设备上宽度都是750物理像素，那么我们就可以获取到它在设备上rpx与px的换算比例：设备宽/750 ，在canvas上的实际宽度为：设备宽/750*实际量取的值
var context = wx.createCanvasContext('mycanvas') var that = this // 获取canvas的的宽 自适应宽（设备宽/750) px var cWidth = wx.getSystemInfoSync().windowWidth/750 context.drawImage("/imgs/pic-bg.png", 0, 0, cWidth * 684, cWidth * 1100); // 国外院校 var forSchool = this.data.dataList.foreigncolleges // 大于5条数据所取前5条 if (forSchool.length>5){ for (var i = 0; i < 5; i++) { context.setFillStyle("#eb8848"); context.setFontSize(cWidth * 26); context.fillText(forSchool[i].schoolname.trim(), cWidth * 72, (i + 1) * cWidth * 64 + cWidth * 195) context.setFillStyle("#b0b4bc"); context.setFontSize(cWidth * 26); context.fillText(forSchool[i].ranking.trim(), cWidth * 420, (i + 1) * cWidth * 64 + cWidth * 195) //当录取率为null时"-"显示 if (forSchool[i].rate == null){ context.setFillStyle("#b0b4bc"); context.setFontSize(cWidth * 26); context.fillText('-', cWidth * 550, (i + 1) * cWidth * 64 + cWidth * 195) }else{ context.setFillStyle("#b0b4bc"); context.setFontSize(cWidth * 26); context.fillText(forSchool[i].rate.trim(), cWidth * 550, (i + 1) * cWidth * 64 + cWidth * 195) } context.beginPath();//开始一个新的路径 context.setStrokeStyle('#eee'); context.moveTo(cWidth * 42, (i + 1) * cWidth * 64 + cWidth * 210);//路径的起点 context.lineTo(cWidth * 648, (i + 1) * cWidth * 64 + cWidth * 210);//路径的终点 context.stroke();//对当前路径进行描边 context.closePath();//关闭当前路径 } } else {//小于5条时全部展示 for (var i = 0; i < forSchool.length; i++) { context.setFillStyle("#eb8848"); context.setFontSize(cWidth * 26); context.fillText(forSchool[i].schoolname.trim(), cWidth * 72, (i + 1) * cWidth * 64 + cWidth * 195) context.setFillStyle("#b0b4bc"); context.setFontSize(cWidth * 26); context.fillText(forSchool[i].ranking.trim(), cWidth * 420, (i + 1) * cWidth * 64 + cWidth * 195) //当录取率为null时"-"显示 if (forSchool[i].rate == null) { context.setFillStyle("#b0b4bc"); context.setFontSize(cWidth * 26); context.fillText('-', cWidth * 550, (i + 1) * cWidth * 64 + cWidth * 195) } else { context.setFillStyle("#b0b4bc"); context.setFontSize(cWidth * 26); context.fillText(forSchool[i].rate.trim(), cWidth * 550, (i + 1) * cWidth * 64 + cWidth * 195) } context.beginPath();//开始一个新的路径 context.setStrokeStyle('#eee'); context.moveTo(cWidth * 42, (i + 1) * cWidth * 64 + cWidth * 210);//路径的起点 context.lineTo(cWidth * 648, (i + 1) * cWidth * 64 + cWidth * 210);//路径的终点 context.stroke();//对当前路径进行描边 context.closePath();//关闭当前路径 } } context.draw();