这个月给手机卫士写了个功能及其简单的小程序，但就这么个及其简单的小程序，也是踩了一堆坑~

开发流程

其实按照官网的教程一步步来就行，介绍的已经很全面了。然后：

• 开发

  • 自己的账号
  • 微信开发者工具
  • VsCode

• 调试（top center at 开发者工具）

  • 预览，手机扫二维码

  • 远程调试

    
    
    调试

• 传代码 (top right at 开发者工具)

  
  
  上传

• 体验者扫码体验

开发方式

本来是没写过小程序的，于是上来就照着教程写原生。
快写完的时候被俊哥鄙视了：这年头小程序还用原生写？！瞬间我就毛躁了...
然后俊哥说他用WePY不爽，然后那好吧，刚好mpVue冒了个泡，索性趁热练练手~

写习惯Vue的宝宝们，恭喜！mpVue对你们来说挺友好的，上手很快！在Vue大部分自己的写法里面，小程序的api也随便用~ 总之就是边写Vue，边看小程序文档。

mpVue对Vue的有些写法是不支持的，开发的时候刚好被我碰上了！

• 比如，在Vue里:class="[activeClass, errorClass]"这种对class的写法就是不支持的~
• 再比如，想给input或是textarea的placeholder设置style，用::-webkit-input-placeholder不！生！效！
  所以只能依赖小程序文档内原生的方法：placeholder-style="color: #c1c1c1"

还有一些类似不知道怎么获取路径传输参数的问题，可以看看mpVue的文档；文档里没有的，可以在git issue中提问，美团的开发者们回答很快，点个赞。

关于数据请求

小程序的请求方式简单粗暴（我没用到上传和下载，暂且不讲）。

• 只能用wx.request
• url必须是https的

然后，一个https接口给出来了，不能直接用！
要在微信公众平台 => 设置 => 开发设置 => 服务器域名 加上所谓的白名单。
不过貌似在开发者工具里设置一下可以跳过校验。我试了一下，接口没调成功，索性就乖乖加了白名单，至于为什么设置了也没成功，没再研究🙂。

可以选中第四条

接下来，数据传输方式：
之前写ajax基本都是甩过去一个url、data、method、dataType: json，就坐等success返回了。
这一次人家后端不只要求json，还要表单形式的请求。来看一下屈大的博客
配置header，规定好content-type：

header: {
  'content-type': 'application/x-www-form-urlencoded',
},

必须得放下DOM了

由于小程序页面不是在浏览器里！，所以document啊、window啊，这种浏览器暴露的API就都用不了了！所以我连访问一个textarea的value都不能操作DOM，怎么办：
给textarea绑定特定的事件，在想获取value（比如@blur=“showValue”）的时候，通过

showValue (e) {
  console.log(e)
  handleValue(e.target.value)
}

来获取，可以看下console出来的结果：

通过事件访问数据.png

为什么不可以给textarea数据绑定，这里有坑

想获取textarea的值，我们又是用的Vue，那么直接通过v-model绑定的数据来获取不是很容易么~

但是我要告诉你不能这么用。Why？

如图：在ios中（安卓没测），如果用户输入完内容之后，移动光标至中间做删除操作，那么你会很崩溃，因为每删一个字，光标就会跑到末尾！
我觉得这应该是小程序的一个bug吧，每次监听到数据变化的时候，整个textarea区域就“重新渲染”了，光标也就跑到了最后。

textarea中不能用v-model

解决办法就是放弃v-model，用上述方法，在textarea@blur（也就是点击按钮）的时候获取e.target.value。

但这里还是会有个问题：就是如果button@click的时候页面跳转了，怎么办？
这个时候，页面跳转是在blur事件捕获之前进行的。

因此我们必须要在blur执行完之后再做跳转，所以这里要有一个setTimeout()

    bindAuthTap () {
      setTimeout( () => {
        if (!this.searchMsg) {
          wx.showToast({
            title: '请您输入要鉴定的内容',
            icon: 'none'
          })
          return
        }
        const url = `../logs/logs?msg=${this.searchMsg}`
        wx.navigateTo({ url })
      }, 100)
    }

overflow: hidden之后怎么还有1像素可见？

如图，给文字做超出两行省略加隐藏之后，下面还会有1px的"边"（实际上是被遮挡的文字内容）可以看到~

隐约可见的1px.png

.msg-text {
  height: 36px;   /* 设置成line-height的2倍就能够起到遮挡效果 */

  line-height: 18px;
  font-family: PingFangSC-Regular;
  font-size: 15px;
  color: #353535;
  letter-spacing: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  word-break: break-all;
  overflow: hidden;
}

防刷的策略

为了提高用户体验，我们决定不在前端使用验证码策略，但是防刷还是要做的。

大概思路就是在用户登录的时候给服务端发送用户信息和系统信息，返回服务端用一系列加密和算法生成的uid；再去请求数据的时候就要带上这个uid。

这里面至少要有wx.login()、wx.getUserInfo()、wx.getSystemInfo()，还有N次服务端的请求。
所以，promise / async await是逃不过的。

最后安利一款Base64，啊哈哈哈哈哈哈。