前段时间，公司的小程序有一个分享小程序代码、邀请好友的功能。 我前后经历了很多陷阱，然后我想出了这个笔记。 如果读者为生成微信小程序代码或调试参数而烦恼，不妨继续阅读。 也许这篇文章可以帮助你。

1.如何生成微信小程序代码

微博官方文档中一共提供了三个生成小程序代码的API接口，不同的场景和限制。 如下表：

生成小程序代码携带参数的三个接口API说明

.访问文档

获取小程序二维码适用于需要少量二维码的业务场景。永久有效，数量有限

路径，最大长度128字节

.get访问文档

获取小程序代码适合需要少量代码的业务场景。永久有效，数量有限

路径，最大长度128字节

.访问文档

获取小程序代码适用于需要大量代码的业务场景。 永久有效，数量无限制。

，最多 32 个可见字符

可以看到前两个接口生成的小程序代码数量是有限的，而最后一个接口则没有。 考虑到未来的业务量，我毫不犹豫地选择了……然后，一系列的陷阱接踵而至。 如果您在项目中使用前两个接口，则无需进一步阅读。

1.1. 前端一代 VS 后端一代

一开始我采用的是前端生成的方式。 事实证明这种做法是错误的，虽然前端也能成功生成小程序代码。在小程序中直接访问文档中给出的接口地址

,

返回的错误码是。 查阅文档得知，该错误码表示小程序尚未发布。 再次查看官方文档，发现里面明确规定路径必须是发布的小程序所在的页面（否则会报错）。 如图：路径必须是发布的小程序所在的页面.png

如果不发布，则无法生成小程序代码。 如果发布了，就意味着发布版本中生成小程序代码的功能无法使用。 你简直就是一个流氓！ 拖延了好久，有一天，我决定把小程序代码发布出来并进行测试。

发布过程很顺利。 提交后约40分钟，微信上出现一条消息，称发布已获批准。 我当时就激活的很好，立刻就在本地环境运行了小程序。 当我点击分享按钮时，发现没有任何反应。 检查请求，一切正常，请求返回一张图片，一个黑人，脸上画着问号...如图：接口成功返回小程序代码，但前端无法渲染.png

1.2. 返回后如何将二进制图像数据显示在页面上？

我勒个去？ 如果直接给我一张图片，我如何在页面上显示呢？ ？ ？

后来才知道原来是请求的时候需要设置：''。 此时接口成功时会返回图像的二进制数据。然后前端通过

大学.()

即可将二值图像转为二值图像，最终成功显示在页面上。 如图：解析二值图像时，需要设置和.png。

至此，整个生成小程序代码的操作就已经由前端完成了。 为了防止生成小程序代码失败，我还对项目进行了镀金，添加了刷新功能。 即当生成失败时，用户可以点击小程序代码占用区域来手动生成。 效果如图：手动刷新小程序代码.gif

2、容易混淆的2.1、拼接参数

由于接口的限制，page只能是纯路径，如果要携带参数也只能放在. 这个方案看起来不错，至少解决了携带参数的问题。 但携带的参数长度有限，需要根据情况进行转码。 幸运的是，我们共享的参数不需要转码，可以直接拼接。 我们当时的代码是这样的：

这。 = '?=' + res.data.key /* 邀请码携带的参数*/

2.2. 扫码后解析参数

按照正常流程，上一步就生成了带参数的小程序代码。 当用户长按识别小程序代码或者扫码进入小程序时，我们需要解析指定路径页面中的参数。 如果不进行分析，我们将无法进行数据统计，也就无法在用户的邀请记录中清楚地显示哪些用户被邀请了。 如图：分享小程序代码后，可以查看邀请记录.png

在页面生命周期中，可以获取当前地址携带的参数。 因此，解析操作必须在函数中进行。 由于我们小程序中很多地方用到了分享功能，路径也不同，所以我将解析代码封装成一个方法。 大致代码如下：

/* 将url中的参数转成对象{key:value}的形式，方便读取 */ function urlParams (scene) {   const str = decodeURIComponent(scene).replace('?', '&')   let strArr = str.split('&')   strArr = strArr.filter(item => item)   const result = {}   strArr.filter(item => {     const key = item.split('=')     result[key[0]] = key[1]   })   return result }

调用也非常简单。 示例代码如下：

import { urlParams, } from '@/common/util' /* 先引入方法 */ onLoad (options) {   if (Object.keys(options).length) {     const { invite, scene } = options     if (scene) { /* 扫码进来 */       const sceneObj = urlParams(scene)       if (sceneObj.invite) {         this.invite = sceneObj.invite /* 邀请码 */       }     }     /* 正常情况，包括H5端、APP端 */     if (invite) {       this.invite = invite     }     ...... /* 其他代码 */   } }

这样，当用户扫码进入时，我们就可以成功解析小程序代码中携带的参数了。 然后如果需要的话进行报告，并做任何你需要做的事情。 一切似乎都很好。 但这只是我们假设的一个顺利的场景，并没有得到真正的验证。

2.3. 分析

如何验证呢？ 虽然我们可以在本地成功生成小程序代码，但是当你分享给同事时，当你的同事识别出小程序代码并输入时，就会直接进入在线版本。 重要的一点是，它跳到了网络版。 前面说过，我们在线版本中对应的路径页面还没有添加解析代码。

那么如何解决这个问题呢？ 最笨的办法就是把本地小程序打包分发然后测试。 这种方法的缺点也很明显。 如果我们在封装功能的时候不仔细思考或者上报接口不确定，或者有需要转码的字符而我们忘记转码，都会导致我们面临不停的发布。 快来解决bug困境吧！ 想想去年的自己，我真的哭了！

有更好的解决方案吗？

2.3.1. 在开发者工具中选择二维码编译

答案是肯定的。 在微信小程序开发者工具中，我们可以通过上传二维码来实现本地解析。 如图：可以通过微信开发者工具中的二维码编译直接调试参数.png

从上图可以看到，在.vue文件中函数的第115行已经成功解析并监听到了。 本地调试相比在线发布非常方便！

2.3.2. 在开发者工具中构建和编译

另外，我们还可以通过直接在本地构造参数来模拟扫描码访问，以节省调试时间。 相关代码结构如下：

=（参数）

如图：在开发者工具中手动构造.png

现在，我们可以在本地肆无忌惮地构造和解析，不再需要依赖分发来调试，这太酷了！ 那么事情已经结束了吗？ 显然不是。 毕竟我们的项目最终还是要上线的，所以我们再发一个版本上线来测试一下效果吧！

3、版本发布后小程序代码不显示？

通过X对项目进行打包，打包完成后继续上线。 由于每次审核都需要一些时间，检查员可以先做其他事情。

大约40分钟后，微信再次提醒我审核通过了。 我还是迫不及待地测试了分享小程序代码，结果失败了！ 小程序代码不显示！ ！ 即使我手动刷新它也不会显示！ ！ ！ 这时候我就迷茫了！ 测试版明明没有问题，但是为什么一上线就崩溃了，什么也没有显示呢？ 并且开启调试后，界面不报错！ 这次我彻底糊涂了……

如果看官也遇到这个问题，那一定是看官和一岭的做法是一样的，就是生成二维码的操作都是由前端完成的。 其实这个操作是错误的，虽然微信官方没有特别强调必须由后端生成。

3.1. 小程序代码必须由后端生成

既然需要后端生成，那就让后端人写个接口吧。 我把要携带的参数和要访问的路径参数传给他的接口，他用它来请求接口生成一个小程序代码返回给我。 然后我使用 uni.() 解析返回的数据。

这里需要注意的是，我们在请求后端接口的时候，还需要在请求中带上：true。 如果查看者使用的是本机uni。 或者wx.，需要添加：''才能成功解析二进制文件。 图片，否则分析不会成功！

4. 代码演示

由于项目代码比较复杂，这里只简单展示一下。

/* 获取小程序码 */ handleGetXcxQrcode () { const data = { scene: this.scene, /* url中携带的参数 */ page: 'pages/user/login' /* 扫码后跳转的访问页面 */ } uni.request({ url: '后端生成小程序码后暴露给前端的API地址', data: data, responseType: 'arraybuffer', /* 必须 */ success: (result) => { const res = result.data uni.hideLoading() if (res.errcode === 41030) { setTimeout(() => { uni.showToast({ title: '请先发布小程序', icon: 'none' }) }, 0) } else if (res.errcode === 45009) { setTimeout(() => { uni.showToast({ title: '调用频繁', icon: 'none' }) }, 0) } else { const url = 'data:image/png;base64,' + uni.arrayBufferToBase64(res) if (uni.arrayBufferToBase64(res)) { this.wxQrcode = url } } } }) },

4.1. 源码下载

如果您想查看完整的源代码，可以点击下面的链接进行访问。

网址：点我查看源码

5.最后

最后总结一下生成微信小程序代码需要注意的事项：

1、小程序代码必须由后端提供。 虽然前端也可以直接生成，但是在线版本无法生成；

2、请求中需要添加：'',参数；

3、请求成功后，前端无法直接显示图片，需要使用uni.(res)将对象转为字符串；

4、通过微信开发者工具提供的二维码编译和编译模式，我们可以在本地构造和解析小程序代码，无需频繁发布。

转载声明：如需转载本文至其他平台，请务必保留本文出处！ 本文链接：/xwzj/2020-12-26/uni-app--.html 如果不想直接保留地址，可以隐式保留。 易凌不希望看到有人把我的技术文章带到他的网站或其他平台上进行教学（安装）过程（B）而不留下我的任何痕迹。 您可以随意转载和修改文章，但请尊重依凌的劳动成果！ 谢谢你的理解。

亲爱的，请扫码支持伊灵~