小程序填坑实录

发布时间:2019-08-19 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了小程序填坑实录脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

open-data头像如何设置样式

  • 设置成 { display: block; overflow: hidden; } 就可以正常设置样式了,包括形头像等

用户授权按钮设计思路

  • 授权按钮设计成全屏透明的,用户点击屏幕任意位置即可发起授权

小程序中使用Promise

  • 引用npm中的es6-promise即可;
  • 使用下面的函数包裹微信API即可将其转为Promise方式调用:
function promise(fn) {
    return function (obj = {}) {
        return new Promise((resolve, reject) => {
            obj.success = res => resolve(res);
            obj.fail = res => reject(res);
            fn(obj);
        })
    }
}
...
调用方式:
utils.promise(wx.request)({ url: ... }).then(response => { ... }) ...

利用::after伪元素添加透明背景

.elem { /* 元素本身添加样式 */ 
    position: relative; /* 为了后面的伪元素以本元素为定位基准 */
    z-index: 10;    /* 渲染在伪元素之上 */
    /* 其它样式,大小,字体等 */
}
.elem::after { /* 给元素添加::after伪元素并设置为半透明:*/ 
    content: ""; 
    position: absolute; 
    left: 0; 
    background-color: white; 
    opacity: 0.2;
    /* 其它样式,大小应和主元素一致 */
}

开发阶段给所有元素添加虚线边框

  • 小程序WXSS似乎不支持"*"选择器,因此只能用以下笨办法:
/* 仅供测试,发布版请删除 */
view,icon,text,rich-text,progress,image,button,textarea,oPEn-data,navigator,canvas,checkbox,form,input,label,picker,radio,slider,switch {
    outline: 1px dashed lightblue;
}

渐变背景支持

.mainbg {
    background: -webkit-linear-gradient(left,#18b6ff,#aa29ff);
    background: linear-gradient(left,#18b6ff,#aa29ff);
}

占据垂直方向的剩余空间

  • 使用CSS的calc函数,结合vw, vh等单位,可以动态设定CSS长度
{ height: calc(100vh - 300rpx); }

让小程序支持服务端Session

  • 主要就是要添加Cookie支持,可以包装一下wx.request方法实现
    1) 解析response的Set-Cookie应答头,并将cookie保存在本地
    2) 以后每次请求把本地保存的cookie放到Cookie请求头中

开发工具OK,但手机实测WebSocket会话丢失

  • 使用上面的方法包装了wx.request,可以正常使用基于Cookie的服务器Session,在开发工具上,连接WebSocket也可以在握手时正常获取Session中的属性,但手机实测时发现Session丢失
  • 经研究,估计因为开发者工具是基于Chrome浏览器的,因此WebSocket请求也自动带上了浏览器缓存的Cookie,但手机上实现机制不同,因此没有带Cookie请求头
  • 包装一下wx.connectSocket,添加Cookie请求头即可

点击用户头像跳转页面

重载按钮的样式

  • 因为分享、客服之类的功能只能通过按钮唤起,不能使用view或navigator,因此为了界面统一,需要重载按钮的样式
  • 我的程序的风格是半透明背景按钮,使用::after伪元素实现,这里发现一个奇葩的坑:似乎按钮的默认样式把它的::after伪元素缩小到了原大小的一半,因此需要增加一行transform把它恢复原大小:
.BTn::after {
    ...
    transform: scaleX(1) scaleY(1);
}

关于转发

  • 需要在Page中添加onShareAppMessage方法,否则点右上角菜单不会出现转发选项
  • 除了右上角菜单外,可以使用Open-type="share"的按钮
  • 可以通过onShareAppMessage的参数中的From字段区分事件来是菜单还是按钮
  • 通过onShareAppMessage方法返回的对象来定制转发界面显示的内容
  • 另外,在返回的对象上可添加success/fail回调方法来判断转发是否成功以便在程序中发放奖励。注意,这里有一个坑,在开发者工具(v1.02.1805181)上回调是不会被调用的,只有在手机上才有效。

阿里rds支持emoji表情符号

  • 很多微信用户的名字里面包含emoji字符,必须解决此问题
  • 创建数据库时需要指定字符集为utf8mb4
  • 确保MySQL数据库版本5.7以上
  • 确保mySQL-connector-java版本5.1.13以上
  • 阿里云RDS后台->实例详情->参数设置,修改character_set_server的值为utf8mb4

SVG矢量图支持验证

  • 经测试,三端均支持SVG背景图,支持"data:image/svg+XMl,..."内嵌svg图片
  • image对象,可以src直接引用本地或网络svg图片,但不支持"data:image/svg+xml,..."直接内嵌svg图片

CSS3 clip-path支持验证

  • 经测试,三端当前版本微信均支持clip-path

iOS CSS3动画BUG

  • 经验证,iOS上,使用CSS3 animation实现动画,循环播放的没有问题,但固定次数播放的则有问题
  • 因此,单次播放的动画应考虑用transition实现

脚本宝典总结

以上是脚本宝典为你收集整理的小程序填坑实录全部内容,希望文章能够帮你解决小程序填坑实录所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。