小程序Tips

记录一些小程序开发时可能的问题

  1. 小程序 wx.request 需要接口支持HTTPS,开发时可以选择不校验域名 右上角详情按钮 - 不校验合法域名、web-view(业务域名)、TLS 版本以及 HTTPS 证书 选项,但是不支持真机调试
  1. 修改 data 中值时要使用 this.setData({ key: value }),否则不会触发页面的渲染

  2. wxml 不能给绑定事件传参(如vue 中的 @click="tap(12)"),可以通过设置标签的 data-xxx-yyy 属性,再绑定从事件对象中获取 event.currentTarget.dataset.xxxYyy,这里推荐使用 currentTarget 而不是 target,由于事件机制,并不能保证点击的 target 是绑定了 data-xxx-yyy 的元素(一般是点击到的子元素),因此可能会无法获取数据

  3. TabBar, 以及 Page 的backgroundColor 只能设置为16进制颜色值(#ffffff),真机调试不识别rgb, rgba, 颜色名,会默认显示黑色

  4. Text 标签默认会有高度,并不贴合文字

  5. vscode 启用 emmet

"emmet.triggerExpansionOnTab": true,
"emmet.includeLanguages": {
  "wxml": "html",
  "wxss": "css"
},
  1. 让设计出 750 px iphone 设计稿, 然后里面用 rpx 做单位,编译时自动转换

  2. 自定义组件的 properties 的值需要设置为 object, 并且不能用 id 作为 key,外部无法赋值

Component({
  properties: {
    foo: { type: String, value: '' }
    // 不能用 id 做 [key] 外部无法赋值
  }
})
  1. navgator的传参规则 url="/pages/*?paramA=foo&paramsB=bar" navigator 传递的路径参数在对应页面的 onLoad 函数的 options 参数中

  2. 获取App实例 const root = getApp()

  3. navigator 组件会添加默认的点击高亮,可以设置标签的 hover-class="none" 来取消

  4. 容器使用圆角时,内部如果有图片,则需要使用 overflow: hidden; 样式


持续更新。。。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 不要问我为啥一会儿iOS、一会儿RN、一会儿小程序,我就是一颗螺丝钉,哪里需要往哪里钉😂。 踩坑tips记录:1、...
    vincent涵阅读 4,906评论 0 1
  • 最近公司项目改版,趁产品修改与UI出图的间歇用公司商户端UI图撸了一把微信小程序。因为刚刚实习那一会接触过前端开发...
    gavincarter阅读 4,831评论 0 1
  • 在小程序开发过程中碰到的小问题、原因以及处理样式 hidden hidden只对块级元素生效,如果设置了displ...
    Piscoo阅读 2,860评论 0 0
  • 因新工作主要负责微信小程序这一块,最近的重心就移到这一块,该博客是对微信小程序整体的整理归纳以及标明一些细节点,初...
    majun00阅读 12,152评论 0 9
  • 申明:本文纯属资料整理,如有违规请评论联系作者删除。 1. navigator点击出现阴影,如何去除阴影 做法:将...
    VioletJack阅读 6,091评论 1 6