uni-app开发H5

Posted 2023-04-12

参考技术A emmmm....大概有大半年吧没有更新文章了吧，疫情一直到三月份才慢慢有了好转，现在已是七月，但还是不能松懈，希望宝宝们从自我做起，自觉带好口罩哦~相信在不久的明天，疫情一定彻底被战败，最终的胜利必将属于我们！中国加油！！！

疫情期间呢也自己学习了一些新的东东，目前在一家公司写着两个比较的大的项目吧，两个项目都是vue搭建的项目，一个是用element-ui框架写的PC端项目，一个是在HBuilder-X软件中使用uni-app框架写的H5！

uni-app开发跨平台小程序开发的诸多坑转载

uni-app开发跨平台小程序开发的诸多坑，最近用uni-app开发小程序的时候遇到不少了。本篇收集和记录自己在开发小程序过中遇到的问题和解决办法。之前有很多问题解决了，没记录在案。往后遇到的问题，我尽量记录下来。部分小程序平台不好开发，尤其是需要兼容多个平台，所以如果你和我一样，想必避免不了遇到 uni-app开发跨平台小程序开发的诸多坑。

根据平台的不同，我预期开发的小程序包括微信、QQ、抖音、快手，百度、支付宝、小红书(pass，不支持个人及个体户)、京东（pass，不支持个人及个体户）。

开发跨平台小程序从登录开始说起。

登录逻辑从 uni.checkSession 开始的，支付宝小程序率先登场第一个不支持，所以支付宝小程序接入登录逻辑兼容也暂停。

uni-app 的 uni.login 已经不支持百度小程序了，改成用 swan.getLoginCode 获取 Authrization Code 来调用 getSessionKey 接口获取 Session Key 和 open_id。说个题外话，从 github 上开源的百度接口 go 版本SDK 惨淡的7个 star 来看，这个平台是不是没接入的必要了？

申请了appid之后，后来上传发布小程序时，突然支付宝的appid和app_secret秘钥找不到了，没找到藏在哪里。懵逼了好一阵，为啥小程序相关的设置里面没有appid的信息？最后找到账号中心才看见。

支付宝账号中心有关秘钥信息

还发现需要下载支付宝秘钥生成工具，设置验签，应该是所有的小程序平台中，最复杂的一个了。看上去应该是 Java 开发的，文档也是完全从 Java 技术人员的角度给出。这一点上，从个人开发接入的体验上感受，抖音、微信、快手的接口文档相比于支付宝对开发者要相对友好一些。

支付宝开放平台秘钥工具秘钥设置

支付宝小程序公钥生成

支付宝小程序开发过程中，已经登录的情况下，调用支付宝授权登录接口，也会报【40002 – 无效的AppID参数】。authrization_code 是第一次申请使用的，结果也用不了。

支付宝的开发平台的资料是很乱的，你往往找appid是账号中心才能找到的。然找 api 接口域名，又要在接口文档以外的某个点才能找到。抖音的都是直接在当前接口就找到响应API网关域名了。完美诠释了什么叫做 A litter copy is better 。然后支付宝首页或者开发者文档，没有社区快捷链接。搜索40002的时候，找不到社区，还是在其他搜索引擎搜索，才找到社区的入口。等找到入口时，就有开始新一轮的扫码登录。

 

uni-app以及开发的问题

开发不兼容细节， 还很多。像 MySQL8.0 问题和 docker 疑难问题 也是开发过程中必须自己解决的自建服务器问题。
还有些问题则是小程序平台兼容问题，比如：

各平台尽管都是基于 oauth 2.0 来授权，但是不同平台 authrization_code 和 access_token 有效期不一样。而 session_key 的长度也不一样。如果需要获取手机号，又是分门别派的。

开发环境问题。

比如在支付宝的沙箱环境，调用会报 【报40002 – 无效的AppID参数】 的错误。参数无论多了还是少了，都会验签失败。这个我有很深的印象，这种验签结果只有一门语言叫 Java 开发的 API 遇到过。我很纳闷，这样的话，接口如果需要扩展或者收缩，岂不是所有调用者都要跟着一起改？加密方法整的挺复杂的，调试过程中一直报 【crypto4go: certificate failed to load】。

一个平台的oauth2.0流程示意图

百度智能小程序，需要特别注意。百度引入静态图片资源不支持绝对路径。只能用相对路径。

使用百度开发者工具的bug 比较多，他的开发者工具要有两个扫码的登录的地方的，还有比较坑的是：

百度开发者工具bug

这里也是没办法，只能救助于社区。社区显示，这个问题早在2019年就已经有人提过，2022年也有人重现。现在2023年了，我在最新版百度开发者工具也遇到了雷同的 Bug 报错。

早先百度智能小程序是支持 uni-app 的 uni.login 调用的 swan.login。但后来他搞出来一个 getLoginCode 替代了前者。必须改为 【非 web-view 组件场景下登录请使用 button 组件或联合登录 / 手机号授权登录方式实现登录，获取登录凭证请使用 swan.getLoginCode 实现。】了。

智能小程序不兼容uni.login

 

前一阵，我是跟Rust 编译器作斗争，最近很多时候，我都在跟几个不同平台的开发者工具作混战。百度智能者小程序的登录相关的前端代码，是我最难调的一个平台。它似乎自成一体，独辟蹊径，走了一条其他小程序平台截然不同的道路。它出的问题是最多的。

多端小程序审核问题

做小程序，审核问题几乎贯穿整个周期。从申请appid、写基础信息（百度的logo有特殊尺寸和形状限制，支付宝的基础信息拉下来三页多到像是凑KPI一样），最后来到能来到小程序版本审核的这扇巨大门口，都是非凡的成就了。期间可谓费劲九牛二虎之力，百感交集。当你本以为发布就起飞的时候，往往这时候生活要给你来上当头一棒，审核失败！您给我回去修改您咧，走你！

支付宝代码审核：没有接入登录逻辑时，支付宝代码审核通过，但是什么接入审核不通过。没想明白，有可能是支付宝认为起名小程序不适用在支付宝小程序生态。后来间隔一周打来两次电话，第一次说了下审核结果不通过，接口调用空白；第二次咨询了一下我的小程序是用于什么场景的，我的小程序审核是又通过了。我去后台看下，没法上架。作罢。

抖音对起名小程序违规。其实我已经接入了抖音官方的 antidirt 内容安全检测，但是审核的时候还是，审核那边不知是出Bug还是疏漏了，总之还是报【小程序文字上传板块未做风险词以及风险内容过滤，不符合平台要求，请补充信息安全防护能力或接入平台内容安全检测接口，详见下方指引链接中9.5板块】。后来第二次找客服，把我打印的日志截图发过去了。

另外，小logo的制作也需要图片检测，图片安全加了之后，发现 chatGPT 生成的图片地址，没法从抖音那边下载。那没办法了，生成logo 这块功能就没法上线了。

uni-app跨平台开发小程序（抖音审核结果）

百度智能小程序认为起名小程序只有一个起名的功能，功能单一，所以没有通过审核。

快手头三次审核速度都挺快的，仔细列了不兼容机型，一开始的小程序简介和作用与实际不符，然后提交没响应。一一改了，重新提交。

uni-app跨平台开发小程序（快手审核结果）

QQ 连续多次提交都是是吧。审核失败无原因。QQ社区沉闷，并米有什么技术或客服响应问题。

uni-app跨平台开发小程序（QQ审核结果）

想发版本？先猜测一下审核失败的原因吧，然后改了，继续扫码提交审核。接二连三的打回再提申之后，蓦然发觉好些天过去了。你依旧需要猜测它到底审核了什么？是谁呢没原因？我试试？我到底在哪里？
QQ小程序审核他的时间就是个薛定谔的猫，你压根不知道他在什么时候会进行审核（2天起步），又在什么地方给你不知道什么审核原因的情况下打。另外你跑到社区问也没用，那里没人回复的，最早的回复还是去年的。

 

开发小程序过程中扫码这个事

我没完全统计，每天如果每个平台都需要发版的话，保守估计，反复扫二维码的次数需要不低于 30 次。微信、QQ、支付宝的登录时间会很快失效，所以需要天天很高频率扫码登录。尤其支付宝，几分钟就强制失效，你要用功能，重新扫登录，否则请出门左转。快速失效，确实是一种安全策略，唯有快速失效，可保账号安全？还有就是支付宝小程序里面你要跳来跳去的，经常找不到东西，哈哈哈哈~~

从开发的体验来说，web > 小程序开发效率，移动端还没上过真是的应用还不知道具体审核会怎么样。因为 web 端发布快，可以快速迭代。如果真的要上小程序端，不管处于获客还是赢得流量，引流等考虑，小程序端作为最后一个节点来处理比较好。无论如何，web 端可以最快出版本。目前还是有优势。

个人小程序开发结论

就挑一个平台，比如微信小程序在这一个平台。为什么是它？以为它目前是市面上所有的小程序的开山鼻祖。先把所有的功能，你包括设计功能、UI布局、性能全给他弄好了。尤其包括底部 tab ！我记得有一次QQ提审时，报过一次审核不通过理由：QQ底部 tab 至少三个！而且他们的测试审核的时候，会扫你没有展示出来页面！也就是说，有些页面你没用到的，最好删掉。

要有一个比较良好的心态，做小程序心态平和真的特别重要。特别一开始做的时候，需要充当开发者工具和第三方API的测试小白鼠。遇到问题，及时找出现问题的平台社区进行反馈，能截图尽量截图（在保护敏感信息的前提下），提高处理问题的效率。毕竟有些问题不是出在你自身代码上，你着急也没有用。
面对审核的周期，要有一个预期：他们不会很快审核到你的。不要干等，尽量先忙自己其他的事情。怎么调整自己的焦虑心态，找些事情做，让自己有意义的忙起来，就会减少自己的焦虑感。

QQ审核结果明细

在这个基础上，再根据成熟度、流量、难易程度逐一布局到其他的目标平台（抖音、快手、QQ），最后再迁移到次优先级（百度、支付宝、京东、小红书）等平台。每个平台都有自己独特的优势和潜力，以及特殊性。

我记录的比较琐碎，开发过程中遇到以及已经解决和没解决的问题，只多不少。一路走来，finally! 然后我的微信小程序\\支付宝小程序\\百度智能小程序【十倍网络工作室】已经上线了。
首页功能目前只有两个小功能绘制 logo 和起名字。后续将会推出更多更优质的模块功能！

十倍网络工作室首页

微信小程序 – 十倍网络工作室

支付宝小程序 – 十倍网络工作室
-- 原文 https://www.gitvim.com/uni-app%e5%bc%80%e5%8f%91%e8%b7%a8%e5%b9%b3%e5%8f%b0%e5%b0%8f%e7%a8%8b%e5%ba%8f%e5%bc%80%e5%8f%91%e7%9a%84%e8%af%b8%e5%a4%9a%e5%9d%91/