开发H5 APP的准备工作

很多同学是头一次开发原生的安卓APP，感觉非常新颖，非常有意思。这一章我带你去看看H5 APP上面的支付功能怎么实现？什么是H5 APP呢？就是整个项目全都是用前端技术写成的，没有任何的Java代码和Swift代码。就拿上一章我们开发的安卓APP举例吧，那个项目别看用了前端技术设计页面和处理事件，但是整个项目还是个Java项目，所以还是属于原生安卓APP。但是这一章我们要做的H5 APP，可是一句Java代码都没有，我们全部用前端语言来构建项目 有的同学想到了uni-app可以编译成安卓APP或者IOS APP，如果用uni-app开发项目，不就是H5 APP了么？确实是这样的，在这一章里面，我们就是把以前写的uni-app项目捡起来，往里面添加上新的内容，然后编译成安卓APP，这就是H5 APP。各位同学，即便使用以前的项目，我们还是要做很多准备工作。 首先可以明确的一点就是，在H5 APP的支付案例中，我们依然可以使用支付宝沙箱环境，所以之前的支付宝APPID，还有公钥和私钥什么的，我们依然可以沿用。跟上一章安卓APP支付的流程是相同的，只要H5 APP拿到交易字符串，然后提交给支付宝平台，就能唤起本地支付宝或者沙箱APP，执行支付了。看来上一章我们写的好多代码，都可以复用到这一章。 以前我们在HbuilderX上面使用uni-app框架的时候，直接创建工程就能写代码了。但是现在我们要在在线注册开发者账号，请大家放心，注册账号是免费的。为什么要这么做呢？因为默认情况下Uni-APP不支持支付宝沙箱环境，它只支持正式的支付宝环境。所以我们要额外购买安装一个插件，才能让uni-app框架支持沙箱环境。这个插件非常便宜，只卖5毛钱，也就是一根冰棍的钱。为了购买插件，所以我们必须要注册dcloud平台的开发者账号，这个dcloud组织开发了HbuilderX工具和uni-app框架，我们在浏览器上打开这个网址（<a href="https://dev.dcloud.net.cn/">https://dev.dcloud.net.cn/</a> ），就能看到注册的画面了，大家先免费注册一个开发者账号。 注册完开发者账号，接下来我们要创建一个uni-app项目的注册信息。大家请注意，这里是创建项目的注册信息，而不是让我们创建项目。注册成为开发者之后，我们在网页上面找到创建应用这个按钮，然后填写一下uni-app项目名字，就能完成项目的注册了。 <img src="https://www.showdoc.cc/server/api/attachment/visitfile/sign/775736b15b9973eacbb85cc68c87f8ca?showdoc=.jpg" alt="" /> 你看截图上，我已经创建了项目的注册信息，之前我们在本地创建的uni-app项目叫做demo，所以注册项目的时候，项目的名字我填写的也是demo。项目创建出来之后，会有对应的APP-ID，这个APPID很重要，你把他复制下来，然后我们在项目中要用到。接下来我解释一下，为什么我们要注册uni-app项目，这是因为我们购买的插件要跟项目绑定在一起，所以我们只有注册了项目，然后才能购买插件。为了能让插件可以运行在我们的项目中，我们在uni-app项目中，还要填写刚才我们复制的appid才行。至于说，你先创建项目，还是先注册项目，这个是无所谓的。反正要在购买插件之前，完成项目的注册。 下面我来说一下如何购买支付宝沙箱插件，刚才我已经跟大家解释过了，UNI-APP矿建只支持支付宝付款，不支持沙箱APP付款，所以我们必须要安装支付宝沙箱插件。大家注意，我们不是给HbuilderX工具安装插件，而是给uni-app项目安装插件，这个插件会在编译安卓APP的过程中，打包到安卓APP里面。这样的H5 APP就能正常唤醒沙箱APP付款了。这个网址是支付宝沙箱插件的页面（<a href="https://ext.dcloud.net.cn/plugin?id=1728">https://ext.dcloud.net.cn/plugin?id=1728</a> ），我们用浏览器访问的时候能看到购买插件的按钮，插件的价格很便宜，只有5毛钱，比坐一趟公交车都便宜，下面我来给大家演示一下如何购买这个插件。 <img src="https://www.showdoc.cc/server/api/attachment/visitfile/sign/69eab4200a8bb0f7ce7f55b699701411?showdoc=.jpg" alt="" /> 各位同学接下来，我跟你说一下UNI-APP项目编译成H5 APP用到的基座。以前我们编写原生安卓APP的时候，虽然页面用的是前端技术，但是前端页面也必须运行在Java项目中，包括Activity之间的切换和刷新，我们都是用的Java代码来实现的。现在我们想要把UNI-APP项目编译成安卓APP，需要把UNI-APP代码输出到基座里面，基座就相当是一个Java项目。有了基座，咱们的前端项目才能发布到安卓系统上面。但是现在有个问题，那就是HbuilderX自带的基座不包含我们购买的插件，那该怎么办呢？我们需要让dcloud订制生成一个基座，里面包含我们购买的沙箱插件。 <img src="https://www.showdoc.cc/server/api/attachment/visitfile/sign/eae5890f8c69d430be55ea2f0cff2077?showdoc=.jpg" alt="" /> 创建自定义基座的过程是这样的，首先我们在HBuilderX上面，申请创建基座，然后Dcloud平台创建好基座，会自动放到uni-app工程里面，我们编译安卓APP或者ios APP的时候，就可以使用这个自定义基座了。但是现在有一个问题，那就是Dcloud生成的自定义基座存在BUG，启动APP之后只有白屏，这里我希望dcloud平台能早日修改好这个BUG。虽然生成自定义基座现在存在问题，但是这个创建的步骤我要给你演示一下，过些日子dcloud平台解决了BUG之后，你就能正常申请创建自定义基座了。

新零售支付全家桶

开发H5 APP的准备工作

页面列表