uniapp实现扫码OCR两功能的小程序开发到上线

1.HBuilderX 新建项目 因为做的功能简单 选了个纯洁的模板

2.新建路由先整个页面出来 代码如下 看不懂的去uniapp官网瞅瞅

https://uniapp.dcloud.io/api/README

3.上晌坦面扫码的功能完成了 就这么简单 下面是OCR 图片文字识别 用到百度的开发api 你需要注册个百度云账号 领取免费资源 新建任务 获取秘钥 才能使用 文字识别我用的是 vin识别能正常调用 其他好几个好像是并发限制 用不了

https://console.bce.baidu.com/ai/?_=1628820741533#/ai/ocr/app/create

4.HBuildX运行发布 新建小程序 微信开发者平台注册 获取appid

导入项目目录下的 unpackagedistdev到微信开发者工具打开

如果没有出现上传按钮 多半是appid和你微信开发者平台的不一样 以平台为准

5.点击上传 期间可以能会有各种各样的问题 百度都能找到 懒得写了

6.上传完事 去平台看看效果

7.这个修改的路径 就是小程序默认打开的页面

8.我是整的体验版 不用等审核就可以用手机打开访问了 当然了 这个时候你的小程序请求是发不出去的 要配置域名 如下改改就成

需要正式发布握枯的 发布前导入build包 上宴皮桐传并提交审核就成了

开发中还有很多小问题 没列出来 有兴趣的私聊交流

需要源码。。。。

一、打开HBuilder开发工具

1）在工具的右上角可以更改饥唯开发视图模式选择“边改边看模式”

2）HBuilder将会展开一个自带的Web浏览器，此肢让可以点击一个齿轮按钮旁的倒三角展开列表

3）选择列表最下面“设置web服务器”

二、在“设置web服务器界面”中

1）依次展开左边栏的列表“HBuilder”——>“Web服森局务器”——>选择“外置Web服务器”

2）然后在右边栏点击“新建”编辑Web服务器配置

3）编辑Web服务器配置界面，“名称”可以随意改，关键是“浏览器运行URL”应该填写你的本机ip地址

三、查看本机的ip地址并填写到“浏览器运行URL”

1）Windows打开控制面板的“网络和共享中心”去查看本机ip地址，Mac系统查看ip地址

2）例如：小编的地址是192.168.0.122

3）填写到Web服务器配置中的“浏览器运行URL”，特别提醒注意填写的ip地址后加上HBuilder使用的端口号8020

4）然后点击确定，配置好一个web服务器

5）选择使用刚刚新建的myWeb外部服务器

四、扫码测试

1）使用HBuilder打开项目的HTML文件

2）点击“Web服务器”中有个二维码的按钮，展开大图的二维码，可以直接使用真实机来扫码测试

3）注意扫码测试，你的真实机和电脑需要在同一个局域网下

问题分析：

html5网站主要由html+css+js的形式组成，需要使用浏览器进行展现。

Android需要使用Java语言来开发，对于前端工程师来说，无疑是增加了很大的难度。

随后出现了很多打包工具，来协助我们将网页元素打包成手机app，将我们编写的html转化为Java语言。

解决方案：

推荐一款我们常用的打包工具：HBuilder。

该工具不仅提供了Android应用打包，还可以直接连接手机进行调试，配合HTML5+可以实现很多Android原生的功能。比如：扫码二维码，拍照，摇一摇等等。

具体 *** 作步骤：

1、真机调试

进入软件后，第一步点击“运行”，第二步点击“手机运行”，第三步选择已连接的手机，示例中我使用的是安卓模拟机进行连接的。市面上常用的几尘乱哪款安卓模拟机器都可以直接连接上。

按如上几个步骤 *** 作后，会自动执行打包并将应用安装在链接的手机（模拟器）中，可以 *** 作手机（模拟机）进行测试。

2、打包生成Android的安装格式apk文件

① 打开软件，选择发行->发行为原生安装包，随即打开下图窗口。

② 勾选Android复选框，如果使用Dcloud公用证书的话，可以直接进行打包，手机可以陪消安装使用。如果需要上传发行到第三方应用平台的话，需要使用自有证书，自用证书可以使用JRE自带的创建和管理数字证书的工具Keytool来生成自有证书，生成过程是免费的。

勾选Android选项后，在下方表单中填写Android包名，为保证唯一性，可以使用自有网站域名的反写方式加上应用名称。如果使用自有证书的话，还需要填写证书别名，密钥密码，证书文件。

填写完毕后，点击打包，即可生成apk文件。

其他注意事项：

1、在开发过程中，不需要进行打包，应更多的使用真机调试，可以节约很多时间。

2、开发完毕后，尽可能在各种版本的android机器上做一下测试，因为一些网页的样式在不同的android版本中呈现的效果略有不同。

3、重新编辑一下html5网站代码，将一些网页功能转换为手机功能，比如网页元素的<a>标签跳转，就应该使用Webview来完成。可以派码解决页面切换白屏的问题，还可以提高网站在手机中的运行效率。

---