uni-app+企业微信+用友U9ERP搭建H5应用（1）

1.应用背景

需求概述

由于公司业务需求，需要将部分常用的生产材料放置于生产现场，由生产作业人员随用随取，需要在生产现场由作业人员通过手机扫描条码后领出料品，生成ERP中的领料单并更新库存数据。

技术要点

1）选择H5的原因：作业员使用个人手机或PDA扫码，开发APP需要考虑不同系统的兼容型，并且需要考虑软件更新，因此把企业微信作为程序入口，搭建H5程序

2）VUE框架+uni-app支持多端、多平台发布，便于后期扩展，并且组件丰富开发周期短

3）企业微信js-sdk,主要使用微信的扫一扫功能，企业微信和微信客户端都能调用

4）后端开发主要基于U9的UBF开发轻量化服务(ResServices),前端调用后端服务实现对数据的操作

用到的技术：C# 、JavaScript、CSS、 VUE、 U9-UBF、Visual Studio、HBuilder X、uni-app、企业微信js-sdk

2.应用规划

由于目前只有一个现场领料的需求，为了便于后期扩展应用需要支持用户登录、底部导航栏便于功能划分

登录页

 导航栏目

功能中心目前就一个功能

3.踩坑记录

1）Vuex保存登录信息

由于是第一次使用Vue框架开发查了很多资料，登录可使用Store保存登录信息，个人理解Store相当于一个全局对象可保存登录信息和进行一些操作，我理解的页不深入满足应用就够了。后边了解到了缓存，是否可以通过缓存管理登录信息呢？

我是直接按模板新建的项目所以Store的内容都预置好了，根据需求加些属性登录成功附上值就行

每个页面在OnShow()时判断是否已经登录，未登录做个跳转

• 开始想自己建个公用的js库把登录判断封装一下，但是js库里怎么都引用不到$store，this关键子好像不指向vue实例，这个懂得大神可以交流一下
• 异步请求问题mutations里的方法无论怎么加 async await关键字都是异步执行，也就是调用后台的登录服务无法写在mutations里，只能在登录页请求后给sate 赋值后再调用mutations的方法只改变haslogin的值

登录的技术研究了3天最后不等不妥协，毕竟不是大神

 2）调用扫码接口

需求是现场人员通过扫码调入料品信息，所以需要做扫码逻辑

uni-app的扫码组件uni.scanCode(OBJECT)不支持H5应用，所以干脆就没测试官方组件，直接一顿百度

 百度得知H5应用开发微信网页应用可以调用微信js-sdk的扫一扫接口

官方也给出了提示，详见：https://ask.dcloud.net.cn/article/35380

我没有使用nmp安装，直接在项目根目录里的index.html应用了企业微信官方的js

 在需要调用微信jsapi的界面使用jWeixin调用

• 请求跨域问题： 开始我想通过客户端直接请求微信获取access_token 和tick，签名等都在客户端搞，一顿写和百度后，在编辑器里可以成功获取access_token，但是使用Chrome 调试就不成功，百度后才知道是H5跨域问题,疯狂百度疯狂试验最终花了3天时间还是没解决，不得不妥协。自己写后台通过后台调微信接口返回给前端。后台必须和前端部署到同一台服务器使用相同域名，例如我H5应用地址http://abc:8080/h5 ，后台得服务地址是http://abc:8080/U9,这样就可以正常调用了。
• 微信接口调用：调用js接口需要先通过wx.congif()注入配置，扫一扫接口时通过按钮触发得需要在页面onload()里注入配置才可以正常使用接口。微信acces_token 和 ticket请求次数是受限得需要用户获取后保存，失效后再次请求获取。

目前只完成了前端框架得搭建和一些组件得测试、后端微信签名接口和微信扫一扫功能

 

后续需要测试实现得功能

前端得弹出层的使用，使用场景是扫码后调用后端服务后在弹出得窗口显示并修改数据

功能中心菜单的权限控制功能，随着业务场景的增多菜单会越来越多，需要根据ERP的权限加载用户菜单。

等继续实现后继续分享。