微信小程序注意事项汇总收集

1.scroll-view无法滚动问题

// scroll-view的内层view元素需要增加样式:
display: inline-block
// scroll-view的外层元素需要:
white-space: nowrap

2.自定义组件使用wx.createSelectorQuery()

const query = wx.createSelectorQuery().in(this)

3.OSS图片链接可正常访问但image组件加载不出来图片

如果图片服务器设置了“referer”请求头白名单,来控制防止盗链,那么可以尝试一下流程:

微信文档,明确指出“网络请求的 referer 格式固定为 [https://servicewechat.com/](https://servicewechat.com/){appid}/{version}/page-frame.html,其中 {appid} 为小程序的 appid”([https://developers.weixin.qq.com/miniprogram/dev/framework/plugin/development.html#%E5%85%B6%E4%BB%96%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9](https://developers.weixin.qq.com/miniprogram/dev/framework/plugin/development.html#%E5%85%B6%E4%BB%96%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9)),而一般使用“referer”进行防盗链。

而我们的图片服务器设置的referer白名单为“[https://servicewechat.com/wxcabcdefgh123456/](https://servicewechat.com/wxcabcdefgh123456/)*”,但是微信小程序iOS版,在【刚刚启动小程序】时,image标签加载网络图片的请求,请求头“referer”却是“[https://servicewechat.com/preload/page-frame.html](https://servicewechat.com/preload/page-frame.html)”,不符合referer白名单规则,所以被拒绝,服务器返回的是403状态码,但是微信小程序错误日志却是404 Not Found(又是一个坑)。

把我们的图片服务器,防盗链设置referer白名单为改为“[https://servicewechat.com/](https://servicewechat.com/)*”则问题解决了,就是不要加“{appid}”这部分路径。

4.position: sticky在封装组件时,IOS会有兼容问题
5.组件无法继承全局样式处理

Component({
  options: {
    addGlobalClass: true
  }
})

6.组件内使用wx.createSelectorQuery()

// 使用 .in(this) 才能查询组件内的节点
 wx.createSelectorQuery().in(this)

7.页面自定义配置

<page-meta
  background-text-style="{{bgTextStyle}}"
  background-color="{{bgColor}}"
  background-color-top="{{bgColorTop}}"
  background-color-bottom="{{bgColorBottom}}"
  scroll-top="{{scrollTop}}"
  page-style="color: green"
  root-font-size="16px"
>
  <navigation-bar
    title="{{nbTitle}}"
    loading="{{nbLoading}}"
    front-color="{{nbFrontColor}}"
    background-color="{{nbBackgroundColor}}"
  />
</page-meta>

8.复制功能

wx.setClipboardData({
   data: '复制内容',
      success: function (res) {
        wx.showToast({
          title: '复制成功',
          icon: 'none'
        })
    }
})

9.IOS手机显示gif有兼容问题,可以的话用css动画模拟

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

推荐阅读更多精彩内容