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

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

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

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

我们在做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

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

还是打开  pages/index/inex.vue，找到onLoad模块，照下图抄一下，下面我将解释每一块的作用

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


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

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


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

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

打开mpaas产品  链接地址

创建 mpaas 应用

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

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

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

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

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

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

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

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

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

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

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

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

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

还记得前面这张图不？

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

2022-12-30 13:13 上传

点击文件名下载附件
这里我把相应JS文件传上来，省得大家到处去找了。

请放置在相应目录下：如图


下面几个步骤是使用阿里扫码的固定操作：以下均是在pages/index/index.vue文件中操作
1、调用插件

2、修改web-view元素接收消息事件

3、开始与活字格页面交互

步骤3，我解释一下，图中1是获取网页中返回的消息对象
图中2是判断消息对象中type关键字是否是scancode扫码，当然，你也可能实现取手机定位等功能
图中3我写人注释，一看就明白
图中4扫码后的回调，返回扫码内容，借用evalJS函数返回到了活字格页面中。括号内的代码，会格子的朋友应该都不陌生。

下面放出上面这段扫码功能在活字格中对应的代码，后期大家也可以直接下载xTools APP插件直接来调用更多的原生功能。
下面这段代码运行条件，一件支持命令的组件，如按钮。一个单元格名称为cellurl的单元格。

1. document.addEventListener('UniAppJSBridgeReady', function () {   
   
2. });
   
3. uni.postMessage({
   
4.         data: {
   
5.                 type: 'scancode',
   
6.                 cellname:'cellurl'//待写入扫描值的单元格名称
   
7.         }
   
8. });

复制代码

data中的键值对是可以根据需要自己改的。此处有什么不明白的，大家可以在贴子中留言。。。。


好了。到这里扫码功能就实现了。。

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

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

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



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

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

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

这种自定义的基座怎么运行呢？和普通调试一下，不过在最下一行

按图选择自定义基座即可。。这下扫码功能就可以正常运行了。。

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

启动图片的制作和规范：
官方默认就是一个圆形的自定义小LOGO，格友都是有个性的人，怎么能忍受相同类型的图标呢？？？
下面我们来改了他，此处有两种方案。我们就来个简单的吧（主要复杂的我也不会）

备用楼层。。。。。

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

         

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

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

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

感谢许总分享