微信小程序开发备忘

open-data头像如何设置样式

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

小程序中使用Promise：

• 引用npm中的es6-promise即可；
• 使用下面的函数包裹微信API即可将其转为Promise方式调用：

 {
            obj.success = res => resolve(res);
            obj.fail = res => reject(res);
            fn(obj);
        })
    }
}
...
调用方式:
utils.promise(wx.request)({ url: ... }).then(response => { ... }) ...

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

添加样式 */ 
    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-"前缀：

占据垂直方向的剩余空间

• 使用CSS的calc函数

让小程序支持服务端Session

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

点击用户头像跳转页面

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

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [e-mail] 举报，一经查实，本站将立刻删除。