这个月给手机卫士写了个功能及其简单的小程序，但就这么个及其简单的小程序，也是踩了一堆坑~
开发流程
其实按照官网的教程一步步来就行，介绍的已经很全面了。然后：
-
开发
- 自己的账号
- 微信开发者工具
- 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
我猜应该是小程序在转换成rpx进行计算产生的误差，其实这种事情H5上也常有。
解决办法就是：给两行文字设置
height，彻底不让下面的一行字显示出来：
.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，啊哈哈哈哈哈哈。
网友评论