活动小程序踩坑指南

上周主要是在做与蒙牛未来星合作的组队抽奖活动，负责组队页的开发，踩了几点小坑，记录一下。

主要有以下几点：

小程序用户信息授权和订阅消息
生成小程序码参数获取
CSS实现梯形
生成海报资源url域名

1、小程序用户信息授权和订阅消息

在创建或加入队伍时，需要获取用户信息，拿到昵称与头像，传给后台。成功后需要提示订阅消息，在用户组队满员和开奖时给予推送

鉴于某些用户有可能已授权过，故在这里将一个按钮封装成组件，根据是否已授权过，来显示不同功能的按钮。

<button class="btn-team" wx:if="{{hasUserInfo}}" bind:tap="handleClick">
  <slot></slot>
</button>
<button
  class="btn-team"
  wx:else
  open-type="getUserInfo"
  bindgetuserinfo="handleAuthorize"
>
  <slot></slot>
</button>

在这里就出现了一个问题，用户未授权情况下，点击按钮，会经过以下过程：

点击按钮——授权弹窗——获取用户信息——创建/加入队伍——提示订阅消息

该过程除授权点击外，不需要第二次点击。接着到最后一步的订阅消息，wx.requestSubscribeMessage() 会直接进入到 fail 回调当中，提示一下错误：

requestSubscribeMessage:fail can only be invoked by user TAP gesture.

微信认为，使用 open-type="getUserInfo" 的 button ，对 wx.requestSubscribeMessage() 来说不是一次有效点击（除非在该按钮中bind:tap调用，这会同时有两个弹窗出现）。即无法在授权用户信息成功的回调中，提示订阅消息。

所以这就很坑了，用户授权和订阅消息，必须是两次点击。

这里想到了两种解决方案：

进页面时即判断有无授权，没有则以弹窗或者全屏的方式提示用户，点击按钮授权。
点击创建/加入队伍时拉起授权，授权成功时 showToast 提示用户再次点击。

最后采用的第二种方案。

2、生成小程序码参数获取

微信小程序官方提供了三种服务端的小程序码生成：

wxacode.createQRCode（小程序二维码，适用于需要的码数量较少的业务场景。永久有效，有数量限制）
wxacode.get（小程序码，适用于需要的码数量较少的业务场景。永久有效，有数量限制，）
wxacode.getUnlimited（小程序码，适用于需要的码数量极多的业务场景。永久有效，数量暂无限制。）

这里我们后台使用的是 wxacode.getUnlimited 。

一般情况下，我们小程序获取 url 参数值时，可以通过生命周期onLoad(options) 的参数值 options 拿到键值对，然而，在通过 wxacode.getUnlimited 获取到的小程序码，url 的 queryString 部分，会被放到 scene 中！

也就是说，这种小程序码，永远都是 ?scene=xxx 这样的串。

因此，这里最好兼容两种情况。

function getParams(options) {
  const params = {};

  if (options.scene) {
    let scene = decodeURIComponent(options.scene);
    scene = scene.split('&');
    if (scene.length) {
      scene.forEach(item => {
        item = item.split('=');
        params[item[0]] = item[1];
      });
    }
  }
  ...
}
onLoad(options) {
    const params = getParams(options);
},

3、CSS实现梯形

组队页中，有一个展示区域长这样。 TQH8si

第一想法是用CSS实现两个梯形的样式，然后两个 <view> 标签绝对定位，通过 z-index 确定层级关系。

主要是利用CSS3D的透视和旋转来实现，代码如下：

.title-bg-1 {
  	// 忽略其他样式
    position: absolute;
  	z-index: 1;
    transform: perspective(20px) rotateX(10deg);
}

.title-bg-2 {
    // 忽略其他样式
    position: absolute;
    z-index: 2;
    transform: perspective(20px) rotateX(-10deg);
}

这段CSS，在安卓机上，完美还原视觉。

然鹅，在IOS上，却出现了交叉！无论如何调整 z-index，都没有任何作用。 UO6Nxl

后来查了下资料，发现在IOS里，使用 perspective 时，就相当于开启了3D，z-index会失效。这里Z轴默认是0，两个梯形的交叉线，也是处于Z=0的位置。

所以这张有问题的图，左视图其实会是一个 **X **型。

明白了原理后，就可以通过设置 translateZ 来调整两个梯形上下位置了。

不过这里有一点要注意的是，在调整 Z 轴的同时，也要注意调整 perspective 的距离。Z的数值越接近透视距离，梯形就会显示越大。

4、生成海报资源url域名

在生成海报的资源中，有着好几张CDN图片。

一开始在开发者工具上调试是OK的，到真机上却无法显示出来，无任何报错，这种问题定位只能通过排除法。

最后发现的原因是，小程序生成海报，其实是可以保存的，算是一种下载，在微信小程序后台里，需要讲图片的域名，配置到downloadFile 合法域名中。

开发者工具上没有问题是因为开启了这个。 VLTjT8

所以这里建议这里以后不要打钩，有遇到检验问题，立马去配置相关的东西。

否则等到真机调试时，出错了一脸懵逼，浪费时间去排查此类问题。

以上便是此次需求开发过程中遇到的一点小坑。完。