人人商城APP使用HBuilderX打包的详情教程及方法

最近看到很多人都在用人人商城，打包封装APP很简单，相信很多人都会，但是要实现人人商城APP的原生微信支付，原生支付宝支付，原生微信登录这些很多人都百思不得其解，之前写过一篇教程https://blog.csdn.net/zhr0835/article/details/103066490突然发现写得不够详细，今天在这里给大家写一个HBuilderX版的人人商城APP打包更详细的教程（如需APICLOUD版的教程可以到https://download.csdn.net/download/zhr0835/12005132下载已有我写好的详细文档），作为夫子，作为老师，希望可以帮助到更多的人，让更多的人学会更多的东西。

具体实现方法如下：

开发工具：HBuilderX

下载安装HBuilderX这个开发工具相信大家都会，这里就不多说了。

新建项目：

1. 打开HBuilderX点击左上角的文件——新建项目——选择wap2app填写项目名称和人人商城手机端网址，如下图：
2. 创建完成后，把示列源码里的红色框起的部分复制到你的新建项目里，如下图：

 

 SDK配置：

点击项目里的manifest.json——SDK配置

微信登录配置：

勾选微信登录填写微信开放平台的appid和appsecret（记住这里一定要是微信开放平台的移动应用的，不能是微信公众号的）如图：

微信支付和新版支付宝支付配置

勾选支付宝支付和微信支付填写微信支付的appid也就是微信开放平台上申请的appid

微信分享配置

勾选微信消息及朋友圈填写微信开放平台的appid

这样SDK我们就配置完成了。

加密APP代码和配置UA环境

JS加密混淆：

为了APP防止别人反编译，我们进行APP加密具体方法如下：

点击manifest.json——源码视图，然后在plus节点下添加如下代码：

  //代码加密开始
        "confusion" : {
            "description" : "js原生混淆配置",
            "resources" : {
                "js/apps.js" : {}, //列如加密的路径文件地址js/share.js 
                "js/fastclick.min.js" : {},
                "css/reSet.css" : {},
                "css/styles.css" : {},
                "client_index.html" : {},
                "lib.html" : {},
                "share.html" : {},
                "shareAlertQr.html" : {},
                "sitemap.json" : {}
            }
        },
        //代码加密结束	

 配置UA环境：

为了适配人人商城APP环境APP里我们需要进行一个配置CK 2.0，配置代码如下：

        "useragent" : {
            "value" : "CK 2.0",
            "concatenate" : true
        },

最后如下图：

 这些配置完成后，相信大家基础配置和图标配置还有启动图配置都会了吧。

原生云打包

点击工具菜单栏的发行——原生APP-云打包填写证书信息和包名等然后点击打包，这样APP就制作完成了。