心得体会

登录

标签： 小程序

  • 用 Taro 开发小程序：答题卡网格布局的兼容性问题总结

    用 Taro 开发小程序：答题卡网格布局的兼容性问题总结

    背景

    在做一个刷题小程序时，需要实现一个答题卡界面——用网格展示所有题目状态（未答/已答/当前题），支持点击跳转。在 Web 上几行 CSS 搞定，在小程序里却踩了不少坑。

    问题一：gap 属性在小程序里不生效

    这是最常见的问题。CSS gap 属性用于设置网格/弹性盒子的间距，在主流浏览器都支持，但在微信小程序、支付宝小程序里均不支持。解决方案：

    /* ❌ 小程序不支持 */
.grid { display: grid; gap: 16px; }

/* ✅ 改用 margin 模拟 */
.grid { display: grid; }
.grid-item { margin-right: 16px; margin-bottom: 16px; }
/* 最后一项去掉右边距 */
.grid-item:last-child { margin-right: 0; }

    问题二：display: grid 在某些机型的兼容情况

    iOS 微信大部分版本支持 grid，但 Android 端部分机型（尤其是低端机）的 UC/QQ 浏览器内核不支持。推荐降级方案：用 flex + 百分比宽度实现网格。

    /* ✅ 兼容写法：flex 模拟网格 */
.row { display: flex; flex-wrap: wrap; }
.cell { width: 48px; height: 48px; margin: 0 4px 8px 0; }

    问题三：:nth-child 在某些场景下失效

    nth-child 在动态列表（数据来自接口）时表现正常，但在用 v-for 遍历固定数量的数字时，微信开发者工具和部分真机行为不一致。解决方案是改用 v-if 或加辅助 class。

    实战答题卡组件代码

    const AnswerCard = ({ questions, currentIndex, onJump }) => {
  return (
    <View className='answer-card'>
      <View className='row'>
        {questions.map((q, i) => (
          <View
            key={q.id}
            className={`cell ${i === currentIndex ? 'current' : ''} ${q.answered ? 'done' : 'undone'}`}
            onClick={() => onJump(i)}
          >
            {i + 1}
          </View>
        ))}
      </View>
    </View>
  )
}

    小结

    小程序开发的本质是与 CSS 兼容层打交道。遇到 display、gap、nth-child 等属性，先查 caniuse，再想降级方案。开发阶段多用真机调试，开发者工具的结果不一定准确。

    来源：https://www.dnote.cn

  • 使用微信小程序来实现扫码登录网站

    使用微信小程序来实现扫码登录网站

    微信小程序本身提供了openid等信息的无感知获取，基于此来实现微信扫码登录，主要包含以下几个步骤：

    1. WEB登陆页面的实现

    打开登录页面时，生成一个带有唯一ID的小程序码，小程序码图片加载以后，通过WebSocket或者轮询确认此唯一ID是否已经确认登陆或者超时。

    这一步比较简单，进入登录页面，通过调用生成小程序码接口，就可以生成一个带有特定参数的小程序码。

    通过图片的onload的属性，可以启动一个定时器或者WebSocket连接到后端，获取是否已经确认登陆或者超时过期。

    2. 微信小程序端的实现

    通过onLoad可以获取到携带的唯一ID，调用login接口后可以获取code，合并到一起提交到后端登陆接口，后端可以通过调用code获取到session信息，用以区分不同用户。

    查询到用户以后，将对应的用户标记为登陆状态即可，具体实现可以按照应用逻辑来。

    3. 后端的实现

    后端主要包括：

    1. 小程序码接口，用于展示小程序码图片
    2. 登录接口，接受code和唯一ID
    3. 状态查询接口，或者WebSocket服务，用于前端查询或者推送唯一ID过期或者确认登陆状态，实现登陆后的跳转。
  • 使用WordPress作为小程序后端——APPID有效性前置检查

    使用WordPress作为小程序后端——APPID有效性前置检查

    上一篇实现了一个简单的前置检查，这一篇我们来聊一聊如何实现APPID的有效性检查。上一篇中，我们只是简单的将APPID获取到并传递到了请求处理函数中，这一篇，我们来实现一个APPID有效性的前置检查，或者叫中间件。

    APPID的检查相对比较简单，我们可以透过一种比较Wordpress的方式来实现：

    <?php

add_filter('wechat_mp_permission_callback', function ($permission, WP_REST_Request $request) {
    if ($permission === false) {
        return false;
    }

    /**
     * @var $wechat_mp_apps
     * @example
     * [
     *     'APP_ID' => 'APP_SECRET'
     * ]
     */
    $wechat_mp_apps = apply_filters( 'wechat_mp_apps', [] );
    $attrs = $request->get_attributes();
    return array_key_exists($attrs['app_id'], $wechat_mp_apps);
}, 10, 2);