使用vue开发钉钉的移动端web页面经验总结

一、背景

最近公司有个定制需求，需要开发一套能在钉钉上打开的移动端页面，功能简单，但时间也不是很多。因为有vue的开发经验，就决定使用vue做开发语言。又因为需要快速开发，就决定使用vant组件库来快速构建页面。

如今，是想将这次开发的经验记录一下，供以后参考。

二、页面构建和尺寸适配

构建页面就直接使用vue-cli脚手架，可以快速创建一个项目。下面是创建项目的命令，具体选项就不多说了。

vue create xxx

创建项目成功后，要考虑的第一个问题是尺寸适配问题。因为是移动端页面，移动端的机器有很多尺寸大小，这就要求移动端页面要做好适配工作。这个时候如果还使用px作为css的尺寸单位，就需要针对不同尺寸做多媒体适应，显然不合适。

目前移动端采用最多的尺寸单位是rem，可以根据移动端尺寸自动适配。有两种选择，一种是自己动手写一个rem.js,在main.js中全局引用，如下：

// 设置 rem 函数
function setRem () {
     
  let htmlWidth = '320px'
  if (navigator.userAgent.match(/mobile/i)) {
     
    // 320 默认大小16px; 320px = 20rem ;每个元素px基础上/16
    htmlWidth = window.screen.width || window.screen.availWidth
  } else {
     
    htmlWidth = document.documentElement.clientWidth || document.body.clientWidth
  }
  // 得到html的Dom元素
  let htmlDom = document.getElementsByTagName('html')[0]
  // 设置根元素字体大小,width/x=320/16
  htmlDom.style.fontSize = htmlWidth / 20 + 'px'
}

// 初始化
setRem()
// 改变窗口大小时重新设置 rem
window.onresize = function () {
     
  setRem()
}

import './rem'

另一种方式是直接引用插件lib-flexible

npm i lib-flexible

然后在main.js中引用

import 'lib-flexible/flexible'

三、开发项目时遇到的问题

1. 项目开发过程中，有时候还是需要px单位的，这个时候，可以使用大写的PX，就不会被转换成rem单位。
2. params是路由的一部分,必须要在路由后面添加参数名。query是拼接在url后面的参数，没有也没关系。 params一旦设置在路由，params就是路由的一部分，如果这个路由有params传参，但是在跳转的时候没有传这个参数，会导致跳转失败或者页面会没有内容。
3. 无法修改vant组件样式，是vue文件中的style标签内scoped的原因，样式只对.vue文件中的template模板标签内的结构有效，引入的第三方vant中的组件是无效的。解决的办法如下（在选择器前面添加 /deep/）：

.van-radio {
  /deep/ .van-radio__label {
    width: 500px;
  }
}