收藏：吐血总结小程序的各种坑及商业项目实践

2016年1月，张小龙在微信公开课公布了微信应用号的计划，同年9月，微信宣布更名应用号为小程序，面向首批开发者内测，当时我在搜狐也拿到了内测的资格。

从2017年1月9日，小程序面向用户正式推出，如今已经过去了7年，支付宝、百度、抖音、美团等大厂也都推出了自己的小程序。

虽然我在美团也参与过小程序的开发者工具(和微信开发者工具不一样，美团是基于开源的编辑器thiea)，但本文只讲微信小程序的各种坑及商业项目实践。

技术选型

在17年，我参与的小程序项目，都是基于官方的开发方式。到了2019年的时候，我在一家创业公司就改成了使用美团开源的mpvue，20年入职美团后，我在业余时间开发维护了，两个服务我爱人线下培训的小程序。

这两个小程序都是基于uni-app开发的，因为其内核是基于mpvue进行升级改造的，使用人数最多，开发方式也熟悉。

在使用uni-app 前，也调研过其他的跨端方案，比如滴滴和京东都开源了类似的方案，但京东使用的是react 的开发方式，而滴滴虽然也是vue，但因为比较新，小问题比较多(当然uni-app的问题也不少)。

uni-app 也有多种使用方式，我没有使用他们的编辑器，而是使用命令行初始化项目，然后再vscode中编写代码。

bash 复制代码

npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project

因为我们还有其他纯web的项目，基本都是基于vue3 + vite，并使用 ts 语法，所以我选择了上面的模版进行初始化项目，然后会每个季度更新一下 uni-app 相关的依赖库到最新版本。

遇到的各种坑

小程序的坑数之不尽，不能开发方式在不同版本有不同的问题，这里只简单分享当下我使用uni-app cli这种开发方式遇到的问题，最好是一些通用的问题。

iOS不支持虚拟支付

虚拟支付是指用户购买的内容是虚拟的，没有实体产品，仅存在于在线服务中。

在iOS微信小程序不支持虚拟支付，一直是困扰开发者、运营最头疼的问题，主要原因是苹果不允许微信上架这类产品，包含了虚拟课程、会员、虚拟书等。

可以在用户扫码后跳转到微信小程序的客服接口页面，在微信客服接口，通过客服自动回复二维码，用户扫码跳转H5的付费入口完成虚拟商品下单。

但这类方法，如果被用户投诉举报，仍然会面临小程序被封的情况。毕竟微信官方的客服通道是解决客服问题的，而不是用来去绕开虚拟支付的限制。

可以参考墨问便签小程序的新解决办法：进入商品详情-提示IOS微信小程序不支持虚拟支付-点击咨询客服-扫码跳转到微信服务号-关注微信服务号-自动回复H5链接-点击跳转H5-完成订阅。

相比之前的方法，这个方法的好处是用户体验沉浸，并且闭环。并且也可以完全不用担心微信小程序被封、客服通道投诉的问题，因为在小程序商品详情的支付页面里面，产品经理也已经提醒了用户不可以购买该类产品，请点击咨询客服。

当然还有一种方法，可以让用户通过电脑打开对应的网页，然后扫码进行支付(在小程序点击购买会员时弹窗提醒，并自动复制网页的链接，然后通过微信发到电脑打开)。

有webview 的页面无法分享朋友圈

微信小程序webview是一种嵌入微信小程序中的网页视图，它允许开发者在微信小程序中展示复杂的页面布局和功能。

分享到朋友圈功能可以让小程序内容被更多人看到，提高小程序的曝光率和用户参与度。但微信官方文档明确规定：存在 web-view 组件的页面不支持分享到朋友圈。

解决的思路之一是：根据小程序的当前的页面路径，生成一个小程序二维码，合成到分享海报的图片，再让用户保存下来去发朋友圈，用户在朋友圈长按识别码，即可打开小程序对应的页面。

还有一种方案是创建一个分享的中间页面，分享时的路径不写当前的页面路径，而是中间页面的路径，用户通过朋友圈进入中间页面，然后通过引导，跳转到真正希望用户看的页面。

列表页面内容过多时，无法滚动查看

我使用的是scroll-view，加上scroll-x 可以正常左右滑动，但是加上scroll-y并不能按照预期那样上下滑动。

我的解决办法是使用第三方组件mescroll-uni，配置如下属性即可：

<mescroll-uni :down="{ isLock: true, use: false }" :up="{ isLock: true, use: false }">

当然，如果需要下拉刷新或上拉加载，把use改成true和isLock设为false，或者去掉这两个配置，然后加上@down="onPullDown"和@up="onPullUp"这两个方法即可。

canvas的各种问题

微信小程序使用canvas时，因为旧版不支持同层渲染，使用canvas的图层总在最上层，还有各种问题，所以微信小程序基础库大于2.9.0后，发布了一套新 Canvas 2D接口(需指定 type 属性),支持同层渲染，原有接口不再维��。

在这种情况下使用原有接口会报错，例如：

使用ctx.draw()会报错：draw is not a function，原因：新版接口没有 draw 方法。
使用ctx.setfillStyle('white')或会setFontSize 会报错：ctx.setfillStyle is not a function，原因：新版接口没有对应的方法。

另外，两套 Canvas 接口获取ctx 的方法差异也比较大，原版是：

ini 复制代码

ctx = uni.createCanvasContext('canvasId'); // 参数通过 canvas-id 属性设定

而新版本则是：

ini 复制代码

uni.createSelectorQuery().in(getCurrentInstance()).select('#editCanvas')
    .fields({ node: true, size: true })
    .exec((res) => {
        editCanvas = res[0].node;
        ctx = editCanvas.getContext('2d');  
});

特别注意：这里的select传的参数，需要通过 id 属性来指定，而不是旧版的canvas-id 属性。

另外，还有一直存在的离屏 canvas 也有很多坑，其创建画布和获取上下文的方法如下：

ini 复制代码

canvasBg = uni.createOffscreenCanvas({
    type: '2d',
    width: 200,
    height: 200
});

const bCtx: any = canvasBg.getContext('2d');

使用离屏canvas 画图片时，需要先使用 canvas.createImage() 创建，并且只能创建一次，可以通过设置时间戳规避重复画同一图片的问题。

还有一个问题一直没有解决，就是设置shadow的时候，在iOS上如果后面取消了阴影，那前面画的阴影也会消失，在安卓上就不会有这样的问题。

商业项目实践

如今互联网已经进入了存量搏杀的阶段，只有有需求的功能或产品，竞争都很激烈，我们只有发现那些垂直领域的小众高频需求，才有可能获得一点机会。

开发APP的成本很高，周期很长，所以对于独立开发者或初创公司而言，使用小程序无疑是最好的技术方案。

因为我老婆是美术老师，所有我对艺培行业比较了解，发现了一个高频的处理场景，一些大公司并没有处理得很好，这个场景就是批量给学生的画加上相框。

经过调研，美图秀秀等修图的APP，入口的层级比较深，画框不够丰富，修单张图还好，但对于美术老师，周末需要给几十个学生加画框的画，效率就很低。

这个痛点目前已经有一个传图加画框的小公司发现了，把加画框的功能做到了极致，但是他们主要面向的书法场景，另外批量需要购买会员，且交互体验还有较大改进空间。

于是我们先暂缓了其他功能的迭代，投入了很多精力去设计了加画框的功能，并把用户体验做到业界最好，可以为我们艺培助理的小程序带来几万的稳定用户。

加画框已经成为了我们小程序的引流产品，为我们的3D画展和海报设计产品获取了更多潜在的目标用户。

总结

小程序坑很多，但是生态已经建立起来，只要把坑填好了并服务好了我们的用户，一定可以给我们带来财富上的惊喜。

关于小程序的其他坑或者有关的实战分享，欢迎大家在评论区交流，或者加我微信进群交流：waxyysys82。