手把手教打包移动端APP 附源码和样例文件，支持原生交互，扫码，全屏等

xxh113

本帖最后由 gczxxu 于 2023-1-6 20:40 编辑

想直接体验扫码效果的，请转至
手机APP框架附件重新上传，免费版，支持扫码，驻留后台。可全屏展现活字格的魅力。。 - 活字格专区 - 格友杂谈 - 葡萄城产品技术社区 (grapecity.com.cn)
下载。。。

2023.01.06更新：上传原码和活字格调用样例文件

cscs.gif649173583.png

游客，如果您要查看本帖隐藏内容请回复

willning · willning

本帖最后由 willning 于 2023-1-20 09:00 编辑

我们在做HAC时，用了原生android的方案，多少走了一些弯路，也填了一些坑。楼主可以翻看我们的源代码，看看有哪些可以借鉴过来。
HAC源码：https://gitee.com/GrapeCity/huozige-hac-app

此外，我们还为HAC配套开发了一个插件，源代码在这里，可以直接拿去改，或作一些适配，相比于写js，插件提供的可视化，能让开发更方便一些。
插件源码：https://gitee.com/GrapeCity/huozige-hac-plugin
插件地址：https://marketplace.grapecity.co ... tabName=Tabs_detail

如果只是改个图标和标题，甚至都不用会java，看这个教程：
https://gcdn.grapecity.com.cn/forum.php?mod=viewthread&tid=160362&extra=page%3D1

gczxxu · gczxxu

本帖最后由 gczxxu 于 2022-12-30 18:56 编辑

实现全屏界面，让活格子移动端更加接近原生应用：

还是打开 pages/index/inex.vue，找到onLoad模块，照下图抄一下，下面我将解释每一块的作用
M]G{PH)R8{`KYH2THW9]EL0.png573642577.png

M]G{PH)R8{`KYH2THW9]EL0.png573642577.png

序号1，用来获取当前的web-view对象，也就是前面运行我们网址的那个DOM元素(应该是这么叫吧)
序号2，先照抄着。此处注入是为了后面的原生交互而写的，如果不写，原生交互就不能实现了
序号3，设定web-view样式，设置TOP距离以及高度的样式
这里你会发现。。还是没有实现全屏，别急，下面还有一步做完就可以了

]QLV7YR9~AW6YSW)J2IKY]X.png530317992.png

]QLV7YR9~AW6YSW)J2IKY]X.png530317992.png

找到根目录下的pages.json。在上图序号2处的加上"titleNView": false，保存一下，这时再看右侧的运行窗口，是不是全屏了。。。

gczxxu · gczxxu

本帖最后由 gczxxu 于 2023-1-6 20:17 编辑

怎么实现和手机原生交互：
下面利用阿里扫码来演示一下怎么和手机实现原生交互的。其它交互方式，同理。

此处操作稍微复杂点：不过也就几个步骤

1、大家先去注册一下阿里云。免费的。这里要点赞一下阿里。

打开mpaas产品链接地址

创建 mpaas 应用

创建一个应用,名称随便写，写你自己能识别的就行

然后点击Android代码配置，出面下面的界面

6EGAE82PC(X])OEM)UK])G5.png934922485.png

点击图中箭头所指位置，然后又跳出下面的图

${ZX_{UXLG(K0UH851AHL4V0.png143840941.png$

注意：序号1处的名称得和你Hbuilderx中APP应用的包名称相同，那么Hbuilderx中APP应用的包名称在哪里呢？？看下图：

点击发行，云打包，上图中序号2的位置就是包名称，一定要相同。起名方式，照着图中的格式写就成。

然后点击阿里去页面中的保存-》下载配置。配置文件用文本编辑器打开

下面打开此处链接支付宝原生扫码插件

打开后，右则选择购买（0元），这里我要说，真良心啊。。。

跳出选择框，选择你自己当前的应用名称

下面再回到Hbuilderx设计器界面中，打开manifest.json文件，这里会发现不是文本模式，而是一个如下的设置界面：

按图选择。点击序号2后。会弹出一个插件选择面板，选中我们刚才购买的扫码插件。

此三行对应的字符串，在刚才阿里云下载的配置文件中查找，注意看输入框上头的小字，每次插件更新后位置可能会变化。不过作者都细心的给出了提示。

至此。扫码功能就配置完了，那我们怎么让活字格页面直接使用他呢？？？请看下一楼。。。

gczxxu · gczxxu

本帖最后由 gczxxu 于 2022-12-30 13:36 编辑

还记得前面这张图不？

uni.webview.1.5.2.rar (1.54 KB, 下载次数: 2587)

gczxxu · gczxxu

本帖最后由 gczxxu 于 2022-12-30 14:01 编辑

阿里支付宝扫码为什么会报错，原因及解决办法都在此楼：

调试和发布APP应用以及自定义自己喜欢的封面

调试部分：
找一个安卓5.0以上的手机。。不要鸿蒙，不要鸿蒙，不要鸿蒙，此处并不是对鸿蒙有意见，只是调试机安卓原生的比较好，不容易出问题，不然出问题都找不到在哪。。。。
安卓手机打开开发者选项（此处不会的，请自行百度）
数据线插入电脑。在Hbuilderx中菜单中点运行，运行到手机或模拟器-》运行到android app基座。
此处如有报错的。请在贴中留言，正常都能找到手机并运行。如果前面代码有抄错抄漏的，Hbuilderx下部会有错误提示码

自定义基座：（如果运行前面扫码会发现一直基座报错，看这里就对了）
考虑到扫码功能是用到摄像头的，需要在maniest.json-》APP模块配置中把 camera&gallery勾选上

有些插件需要打包为自己的基座，比如像前面的阿里支付宝扫码功能。怎么打包呢。还是看图：
运行-》运行到手机或模拟器-》制作自定义调试基座
Q8OAAV(R[HHIXNV8F0ZH1%Y.png79911498.png

序号1，还记得前面生成阿里扫码时填写的包名吗。此处必须得相同，不然扫码功能就不能用了。
序号2，好像Hbuilderx新版才更新的功能，不用到处自己去折腾证书了。。给Hbuilderx官方点个赞。
序号3，打包自定义基座，只能选这个，
序号4，开始打包，稍等一会，一般不会超过5分钟就好了。。
大家应该看到上面还有好多广告什么来着。统统去掉。。自己的APP我们自己做主。。哈哈。

这种自定义的基座怎么运行呢？和普通调试一下，不过在最下一行
$9_9SDLEG9H6Y{}YEW38@83P.png748723449.png$
按图选择自定义基座即可。。这下扫码功能就可以正常运行了。。

发布APP：
点击菜单-》发行-》原生云打包，都使用默认值，如果有广告被勾选，根据自己需要去除。
然后点右下角打包，大概得等10分钟不到。HbuilderX官方免费打包，每天是有次数限制的，，希望大家也不要过多的占用人家的服务器资源。毕竟都免费给大家用了哈。。。。。
打包完成会在控制台给出一个链接，下载下来，拷贝入手机安装即可以用了。

启动图片的制作和规范：
官方默认就是一个圆形的自定义小LOGO，格友都是有个性的人，怎么能忍受相同类型的图标呢？？？

下面我们来改了他，此处有两种方案。我们就来个简单的吧（主要复杂的我也不会

）

gczxxu · gczxxu

备用楼层。。。。。

sz_xd · sz_xd

非常感谢许总无私分享，谢谢!

回复 · 13794930121

感谢许总，许总那个扫描二维码的要怎么搞？

gczxxu · gczxxu

13794930121 发表于 2022-12-30 14:09
感谢许总，许总那个扫描二维码的要怎么搞？

教程里写的很详细了。。。连格子里的代码都给了。
从头看。其实真正内容没多少，，只不过是我把弯路都走完了，，你们照点抄就行

fanhuayimeng · fanhuayimeng

感谢许总分享

		自动登录	找回密码
密码			立即注册

[资源分享] 手把手教打包移动端APP 附源码和样例文件，支持原生交互，扫码，全屏等

评分

320 个回复

悬赏达人

微信认证勋章

时代开发者征文活动

活字格认证

圣诞拼拼乐