title: 组件常见问题 header: develop nav: faq

sidebar: confaq

Q: 如何判断 H5 页面是否在小程序 web-view 打开？

A: H5 运行时，通过 window.navigator.userAgent 获取浏览器 userAgent。当 userAgent 字符串中包含小程序标识：‘swan/’时，则说明当前环境为小程序 web-view。

代码示例：

在开发者工具中预览效果

  1. // 在 H5 文件中
  2. let UA = window.navigator.userAgent;
  3. var regex = /swan\//;
  4. console.log( regex.test(UA) );// 若为true，则是在小程序的web-view中打开

Q: 在webview 中使用了 cookie，导致存储信息与小程序不能共享的原因是什么？

A: web-view 网页与小程序之间不支持除 JSSDK 提供的接口之外的通信；

  1. 小程序中如需设置cookie 建议使用Storage； 参见详情 。
  2. 如需要共享小程序参数到 webview 页面中， 可在 webview的src中加上链接参数。

Q: webview 中参入含有中文使用三方自己的约定方式进行编码 iOS 打开后出现白屏的情况该如何处理？

A： 避免在链接中带有中文字符，在 iOS 中会有打开白屏的问题，如需要使用中文字体，请对中文字符进行 encodeURIComponent。

Q: 如何在web-view中使用拨打电话的功能？

A：如果想在 web-view 使用 JSSDK 提供的接口能力，需要引入 swanjs 包，如下示例：

图中 “2.0.6.js”版本为举例，开发时请参考swanjs文档中的最新版本好进行填写。

sidebar: confaq - 图1 完整的H5示例：

生成的h5站点地址放入小程序web-view的src即可。

代码示例

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>call phone</title>
  6.         <script  src="https://b.bdstatic.com/searchbox/icms/searchbox/js/swan-2.0.6.js"></script>
  7.     </head>
  8.     <body>
  9.         <button onclick="callMobile()">clickMe</button>
  10.     </body>
  11.     <script type="text/javascript">
  12.         function callMobile() {
  13.             swan.makePhoneCall({
  14.                 phoneNumber: '10086' 
  15.             });
  16.         }
  17.     </script>
  18. </html>

Q：cover-view可以使用border吗？

A: cover-view 为原生组件，原生组件为系统提供的控件不支持单边设置；对于 cover-view 只支持基本的定位、布局、文本样式。不支持设置单边的 border、background-image、shadow、overflow: visible 等。

Q：video的原生video控件enable-progress-gesture属性支持动态更新吗？

A：支持。

代码示例：

在开发者工具中预览效果

Q： scroll-view 的scroll-top。设置是否是无效的?

A：使用竖向滚动时，需要给 <scroll-view> 一个固定高度，通过 CSS 设置 height。

代码示例：

在开发者工具中预览效果

  1. <view class="wrap">
  2.     <view class="card-area">
  3.         <view class="top-description">纵向滚动</view>
  4.         <scroll-view
  5.             scroll-y
  6.             style="height: 1.66rem;"
  7.             scroll-into-view="{= toView =}"
  8.             scroll-top="{= scrollTop =}"
  9.         >
  10.             <view id="one" class="color-a">A</view>
  11.             <view id="two" class="color-b">B</view>
  12.             <view id="three" class="color-c">C</view>
  13.         </scroll-view>  
  14.         <view class="page-section-btns">
  15.             <view class="scrollToTop" bindtap="scrollToTop">回顶部</view>
  16.         </view>
  17.     </view>
  18. </view>
  1. Page({
  2.     data: {
  3.         toView: 'three',
  4.         scrollTop: 0,
  5.     },
  6.     scrollToTop(e) {
  7.         console.log(e);
  8.         this.setData({ scrollTop: 0 });
  9.     }
  10. });

Q：使用两个text组件，组件之间有间隙，在不同手机端偶现，影响部分用户体验的问题该如何解决？

A：如果设置 inline-block 会出现间隙，建议父级元素使用font-size:0，然后子元素再设置 font-size,可以去除 inline-block 元素间间距。

代码示例：

在开发者工具中预览效果

  1. <view class="wrap">
  2.     <view class="card-area">
  3.         <text class="content" selectable="true" space="ensp">你</text>
  4.         <text class="content" selectable="true" space="ensp">好</text>
  5.     </view>
  6. </view>
  1. .card-area {
  2.     font-size: 0
  3. }
  5. .content {
  6.     font-size: .16rem
  7. }

Q：swiper 的面板指示点能自定义样式吗？

A: 参见swiper参数，可以去 dot 显示之后，自己定义 dot 样式。

代码示例：

参见swiper的代码示例三

Q：小程序使用 webview，分享出去的链接能直接是 webview 对应的 url 而不是小程序的 url 么？

A：小程序页面在进行分享时，如果分享出去的是web view引入的H5 页面，只能是分享的小程序的页面路径，不能是原H5 的页面路径。