Guidebook

# 小程序自定义组件问题

  1. app.wxss中的全局样式对自定义组件不生效

    原因是小程序组件样式隔离 (opens new window)

    如果想让全局样式覆盖，如下设置

    Component({
  options: {
    styleIsolation: 'apply-shared'
  }
})
    1
    2
    3
    4
    5

  2. 小程序点击事件传参

    data-xxx

    通过e.target.dataset 接收

  3. Some selectors are not allowed in component wxss, including tag name selectors, ID selectors, and attribute selectors

    原因 (opens new window)

    组件和引用组件的页面不能使用id选择器（#a）、属性选择器（[a]）和标签名选择器，请改用class选择器。

关于小程序的padding-right和margin-right无效的问题

padding-right和margin-right无效并且会导致右侧溢出，原因是没设置box-sizing: border-box;

在app.wxss中

page,
view,
text {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
1
2
3
4
5
6
7

# 原生input组件层级问题

如图所示van-filed使用的是小程序原生input组件，弹出的van-dialog中可以点击到input的输入框。

小程序本身的限制，是没办法解决的，只能绕过，比如在弹层渲染时隐藏field。

https://github.com/youzan/vant-weapp/issues/3372

2.always-embed

强制 input 处于同层状态，默认 focus 时 input 会切到非同层状态 (仅在 iOS 下生效)

https://developers.weixin.qq.com/miniprogram/dev/component/input.html

# 小程序双向绑定

通过model:value

<van-field always-embed label="实际劳务费用" model:value="{{ searchString }}">
</van-field>
1
2

但是不支持绑定对象的属性。

# setData

小程序setData会导致页面渲染，所以当页面的数据不需要渲染时，可以直接赋值。

app.wxss中的全局样式对自定义组件不生效

# 小程序返回上一页刷新数据---组件刷新

# iconfont报渲染层网络层错误

这是因为小程序检测到文件不是静态文件

修改url路径

@font-face {
  font-family: "iconfont"; /* Project id 2596464 */
  src: url('/assets/fonts/iconfont.woff2?t=1655256364766') format('woff2'),
       url('/assets/fonts/iconfont.woff?t=1655256364766') format('woff'),
       url('/assets/fonts/iconfont.ttf?t=1655256364766') format('truetype'),
       url('/assets/fonts/iconfont.svg?t=1655256364766#iconfont') format('svg');
}
1
2
3
4
5
6
7

# 真机不显示iconfont的问题

https://www.jianshu.com/p/e5c38fb01dca

将iconfont.woff转换成base64

# 上线后出现的问题

# 域名不合法

报错信息：equest:fail url not in domain list

解决办法：在微信公众平台后台配置域名

# button嵌套image不显示

小程序open-type只有button才能生效，一次在button内放了一张image图片，在开发者工具上能够正常显示，但是到真机上就显示不出来。

# 小程序横向滚动问题

<view class="wrapper">
    <view >患者姓名dsadas</view>
    <view >患者姓名dsadas</view>
    <view >患者姓名dsadas</view>
    <view >患者姓名dsadas</view>
  </view>
1
2
3
4
5
6

给外部容器wrapper设置overflow-x: scroll;后还需要设置white-space: nowrap; 否则内容会自动换行。

这是小程序view与div的不同之处

<scroll-view class="wrapper" scroll-x="{{true}}" enable-flex="{{true}}">
  <view class="wrapper1-header">
    <view class="wrapper-item">患者姓名123</view>
    <view class="wrapper-item">患者姓名123</view>
    <view class="wrapper-item">患者姓名123</view>
    <view class="wrapper-item">患者姓名123</view>
  </view>
</scroll-view>
1
2
3
4
5
6
7
8

这里可以用scroll-view，如果直接用view，那么需要给wrapper设置overflow-x: scroll;

# 小程序阻止事件冒泡

在浏览器中可以通过stopPropagation() 来阻止事件冒泡，但在小程序中这是不可行的。

原文链接 (opens new window)

绑定并阻止事件冒泡

除 bind 外，也可以用 catch 来绑定事件。与 bind 不同， catch 会阻止事件向上冒泡。

← /小程序/小程序引用lodash.html →