记最近撸微信小程序开发过程

前情

最近公司老大想研究一下微信小程序，于是接到了一个任务。在此之前，自己也照着微信小程序文档写过一些demo，但没这次有正式感。这次想实现的功能，就是输一个同事的名字，在座位图上定位出该同事的位置，方便找人。

开发前的准备

• 安装微信小程序开发工具；
• 在微信开发平台上注册(https://mp.weixin.qq.com/)一个小程序；填一些注册信息；
• 如果是多人协同开发，注册帐号好了，登录进去，添加项目成员、体验成员；
• 在开发设置里面复制AppID，这个AppID需要在微信开发者工具里面用到。

进入开发

• 新建项目
  第一次打开开发者工具，会让你填写AppID(就是刚才在微信公众平台复制到的AppID)，项目名称，以及选择项目的保存位置。
• 设置项目的基本参数

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "工位查",
    "navigationBarTextStyle":"black",
    "pageOrientation": "landscape"
  }
}

这里设置了navigationBarTitleText、pageOrientation；设置为竖屏，主要是座位图的图片竖屏更好的查看。

• 编写wxml
  因为设计给我的座位图是svg后缀的，刚开始就打算用svg标签，结果搜索了一下小程序开发文档，发现小程序暂不支持svg标签；但它支持以svg进行base64编码作为背景图片这种形式，尝试之后，发现效果不太理想；后来就使用 canvas来进行画图了。
• 画座位图

1. 基本的wxml写好后，就准备用canvas进行画图了，使用到drawImage()方法，结果图在小程序开发者工具上是可以展示的，但是在手机上预览或者真机调试上，图显示不出来，然后去查资料；发现有不少人遇到这样的问题。

/  wx.downloadFile({
    //    //url: 'https://developers.weixin.qq.com/miniprogram/dev/image/cat/0.jpg?t=19030416',
    //   url: './resources/images/seat_map.png',
    //   success: function (res) {
    //     that.setData({
    //        canvasimgbg: res.tempFilePath
    //      })
    //      const context = wx.createCanvasContext('firstCanvas');
    //      that.canvasdraw(context);
    //    }
    //  })
   wx.getImageInfo({
     src: 'https://i-blog.csdnimg.cn/blog_migrate/4f15cd5be8311427e4661961f92684a2.png',
      success: function (res) {
        //res.path是网络图片的本地地址
        let qrCodePath = res.path;
        that.setData({
          canvasimgbg: qrCodePath
        })
        const context = wx.createCanvasContext('firstCanvas');
        that.canvasdraw(context);
      },
      fail: function (res) {
        //失败回调
      }
    });

上面2种方法的src，就是你图片的网络地址，不允许使用本地地址的；如果没有地方上传的话，可以在csdn上写一个博客，把图片上传上去(我就是这么干的)。
2. 设置图片以及canvas的大小
产品要求座位图必须在手机上全屏展示，所以需要知道手机屏幕的尺寸；

    const res = wx.getSystemInfoSync();
    let screenWidth = res.screenWidth;
    let screenHeight = res.screenHeight;

    let windowW = 0;
    if (screenWidth > screenHeight) {
      windowW = screenWidth;
    } else {
      windowW = screenHeight;
    }

    that.setData({
      windowW: windowW,
      windowH: windowW * (474 / 1218),
    });

这里使用小程序提供的wx.getSystemInfoSync()方法，它是wx.getSystemInfo 的同步版本，不需要通过写回掉函数来获取手机系统的相关信息；刚开始获取的是手机可使用宽度(windowWidth)、高度(windowHeight)，但是座位图在手机上都会少一块，最后使用screenHeight(屏幕高度)，因为是竖屏的缘故，所以拿手机屏幕的高度；
3. 图片及canvas的自适应
为了图片在各个手机上都不失真；

that.setData({
      windowW: windowW,
      windowH: windowW * (474 / 1218),
    });

474是座位图图片的高度，1218是图片的宽度，根据图片的高宽比，计算出图片在手机上应该显示的高度。

• 定位点
  当输入完同事名字后，根据对应关系找出该同事在座位图上的坐标位置；

if (isFind) {
      let locationX = location.x / 1332 * windowW;
      let locationY = location.y / 518 * windowH;
      let imageW = windowW * (40 / 1332);
      context.drawImage('./resources/images/xiaorenN.png', locationX, locationY, imageW, imageW);
    }

这里的location.x与location.y是在ps里面大致测量出来的，然后稍微调试下，测量出来后，要计算这个点在实际屏幕上位置。

源码地址

源码地址