您当前的位置: 首页 > 解决方案

小程序填坑实录

  • 作者: admin
  • 发布于 2018-06-08 13:42:05
  • 来源:  
  • 栏目:解决方案

导语: open-data头像如何设置样式 设置成 { display: block; overflow: hidden; } 就可以正常设置样式了,包括圆形头像等小程序中使用Promise 引用npm中的es6-promise即可

 

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 => { ... }) ...

纯CSS方式给元素添加半透明背景

.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函数
heightcalc(100vh - 300rpx); }

让小程序支持服务端Session

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

点击用户头像跳转页面

  • open-data上面不能绑定事件,简单实现可以用navigator包裹open-data,不用写js代码即可实现点击跳转页面;
  • navigator相当于html的a元素,默认为inline,可修改display样式为block



温馨提示:这篇文章没有解决您的问题?欢迎添加微信:18948083295,有微信小程序专业人员,保证有问必答。转载本站文章请注明转自http://www.okeydown.com/(微信小程序网)。

  • 微信扫描二维码关注官方微信
  • ▲长按图片识别二维码
关注我们

微信小程序官方微信

栏目最新
栏目推荐
返回顶部