小程序填坑实录

xiyang 发布于2019-08-29 15:37 / 3213人阅读

摘要：注意，这里有一个坑，在开发者工具上回调是不会被调用的，只有在手机上才有效。

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;
}

渐变背景支持

为了在开发工具生效，需要使用"-webkit-"前缀：

.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请求头即可

点击用户头像跳转页面

open-data上面不能绑定事件，简单实现可以用navigator包裹open-data，不用写js代码即可实现点击跳转页面；

navigator相当于html的a元素，默认为inline，可修改display样式为block

重载按钮的样式

因为分享、客服之类的功能只能通过按钮唤起，不能使用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实现

GPU云服务器云服务器实录小程序小程序小程序附近小程序门店小程序小程序

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/113442.html

小程序项目之填坑小记

摘要：简诉是的，真的，你没有看错，我就是上次那个加薪的，但是现在问题来了，最近又搞了个小程序的需求，又填了不少坑，其中的辛酸就不说了，说多了都是泪 showImg(https://segmentfault.com/img/bVbi2wI?w=1008&h=298); 作者：首席填坑官∙苏南公众号：honeyBadger8，本文原创，著作权归作者所有，转载请注明原链接及出处。简诉　　是的，...

malakashi 2019-08-23 12:45 评论0 收藏0
20181012微信小程序填坑手册～

摘要：全屏蒙版弹窗遮不住的层级还是很高的，当出现全屏蒙版弹窗时，是无法盖住的，可以调用微信的，不过需要注意兼容低版本在类设置的颜色并没有变化。从6月份开始到现在，写小程序将近4个月了开发时给自己埋了不少坑～给大家分享下我的填坑经验～～开发部分 1.小程序的组件修改不能触发页面刷新？需要在父级文件上保存下才会触发（使用wepy开发） 2.接口请求出现的问题？记得勾选调试开发工具上不校验...

刘玉平 2019-08-23 12:19 评论0 收藏0
Taro开发小程序填坑笔记（一）

摘要：太懒了，早就想写这个系列了，知道今天才开始动笔，暂且就从这里开始吧。本该到此就结束了。不过那是不可能的。到此为止问题基本解决了，关于和的问题也提了给的官方团队，链接地址最后，非常感谢团队的耐心解答，真的非常。太懒了，早就想写这个系列了，知道今天才开始动笔，暂且就从这里开始吧。项目脚手架：Taro + TaroUI 问题： TaroUI的Modal弹层在软键盘弹起的时候无法被顶上去，...

mylxsw 2019-08-26 12:23 评论0 收藏0
[填坑手册]小程序Canvas生成海报（一）---完整流程

摘要：海报生成示例最近智酷君在做小程序生成海报的项目中遇到一些棘手的问题，在网上查阅了各种资料，也踩扁了各种坑，智酷君希望把这些填坑经验整理一下分享出来，避免后来的兄弟重复掉坑。 showImg(https://segmentfault.com/img/bVbs5V8?w=343&h=517);海报生成示例最近智酷君在做[小程序]canvas生成海报的项目中遇到一些棘手的问题，在网上查阅了...

shleyZ 2019-08-26 13:54 评论0 收藏0