fullpagejs移动端网页开发及微信分享

还能敲几年
175 阅读3分钟

需求

开发一个包含4个页面的网页，每一个页面的高度都是 100vh, 要求做到滑动切换下一屏的效果。可以在微信和企微以消息卡片的形式分享给用户

技术栈

react + @fullpage/react-fullpage + antd-mobile + wxjssdk

滑动切换的实现

采用 @fullpage/react-fullpage，首先执行安装 pnpm i @fullpage/react-fullpage，根据需求设置 ReactFullpage 的属性，我这里修改了 scrollOverflow={false} 和 verticalCentered={false}。没有 licenseKey 页面中会出现一个水印元素, 通过 css 隐藏即可。fullpagejs 的简单配置就这些，如下就可以运行了。

import ReactFullpage from '@fullpage/react-fullpage';

/.../

return (
    <ReactFullpage 
        ref={fullPageRef}
        licenseKey='licenseKey' // 没有购买，但是必填
        scrollingSpeed={1000}
        scrollOverflow={false} // 不出现滚动条
        verticalCentered={false} // 不在 section 内部垂直居中
        render={() => (
            <ReactFullpage.Wrapper>
                <section>1</section>
                <section>2</section>
                <section>3</section>
                <section>4</section>
            </ReactFullpage.Wrapper>
        )}
    />
)

fullpage 遇到的问题

  1. 页面中最后一页有输入框，键盘弹起后收起会出现页面定位抖动的问题，ios没有。在安卓设备上屏幕高度发生变化后，需要监听尺寸变化，对fullpage组件进行reBuild。
  2. 解决完问题1后，安卓设备键盘收起页面出现闪烁，解决方法是在安卓设备时使用页面自带的滚动条，不使用 fullpagejs 实现的滚动条，将 scrollBar 属性设置为 true。
import ReactFullpage from '@fullpage/react-fullpage';
import { isAndroid } from 'react-device-detect';

/.../
useEffect(() => {
    if (isAndroid) {
      window.onresize = () => {
        fullPageRef.current?.fullpageApi?.reBuild?.();
      };
    }
}, []);
  
return (
    <ReactFullpage 
        ref={fullPageRef}
        licenseKey='licenseKey' // 没有购买，但是必填
        scrollingSpeed={1000}
        scrollOverflow={false} // 不出现滚动条
        verticalCentered={false} // 不在 section 内部垂直居中
        scrollBar={isAndroid}
        render={() => (
            <ReactFullpage.Wrapper>
                <section>1</section>
                <section>2</section>
                <section>3</section>
                <section>4</section>
            </ReactFullpage.Wrapper>
        )}
    />
)

safari浏览器输入框遇到的问题

在safari浏览器上，点击输入框页面被放大了，而且失焦后页面依然保持放大状态。在html结构中增加了如下属性依然无法解决。

<html lang='en'>
      <meta name='apple-mobile-web-app-capable' content='yes'></meta>
      <meta
        name='viewport'
        content='width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no'
      ></meta>
</html>

苹果对字体小于 16px 的输入框增加了这项特性，所以将使用到的表单控件字体大小使用css控制一下，解决了页面被放大的问题。

input,
select,
textarea,
button {
  font-size: 16px !important;
}

企微的消息卡片内容展示问题

微信的分享如官方文档中所写，前端通过后端接口获取到signature等配置，在ready方法中配置对应的分享标题、描述和logo和链接后，通过二维码或收藏网页后转发，即可实现消息卡片的发送。

const url = location.href;
const data = await getSDKConfig({ url });
wx.config({
    debug: false,
    appId: data.appId,
    timestamp: data.timestamp,
    nonceStr: data.nonceStr,
    signature: data.signature,
    jsApiList: ['updateTimelineShareData', 'updateAppMessageShareData'],
});

wx.ready(function () {
    wx.updateTimelineShareData({
      title, // 页面标题
      desc,  // 描述文案
      link: url, // 必须与当前页面一致
      imgUrl: logoUrl,
    });

    wx.updateAppMessageShareData({
      title,
      desc,
      link: url,
      imgUrl: logoUrl,
    });
});

image.png 但是在企业微信中，并没有显示上述配置中的 logoUrl ，而是展示了页面内容中的一张图片。在企微论坛中的回答发现了答案，需要在页面dom结构最上面添加一个jpg格式的文件，企微的卡片会抓取这一张图作为 logo。增加该图片后，企微分享出去的卡片消息就可以展示配置的logo了。

return (
    <>
        <Image
        src={HIDDEN_LOGO}
        className='hidden' // 使用css使图片不可见
      />
      <main>主要内容<main>
    </>
)
avatar
文章
阅读
粉丝