微信小程序--试水

应公司需求，接手小程序，在此之前我是一点也没有接触过，对此，拿过小程序文档和官方案例就一顿恶补，在此期间也看过一些小程序建立模型的视频，终于对小程序知晓一二，拿过项目开始研究。好了废话不多说，总结一下此次做小程序遇到的坑以及难点：

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();