|
打包app介绍
众所周知,人人商城是一款很好的商城系统,且人人商城功能全面,本教程使用hbuilder技术对人人商城进行打包,是对人人商城的二开,借助hbuilder的打包技术和html5plus接口,实现看了原生支付。\
软件架构
在微信支付和支付宝支付的官方php demo上进行改造。并重写了h5app.js的代码,让人人商城打包app 支持安卓微信支付宝支付,同时支持ios的支付宝支付。(IOS微信支付也支持 但需要你上架IOS。)
安装教程
在gitee下载源码
将整个pay文件夹拷贝至 :你的微擎目录/addons/ewei_shopv2/core/mobile 文件夹下。确保路径正确。
将static文件夹,拷贝至 :你的微擎目录/addons/ewei_shopv2 确保路径正确,应该是会替换掉 你的微擎目录/addons/ewei_shopv2/static/js/app/biz 下面的原有的H5app.js
使用说明
在拷贝安装之前,你应该首先申请微信支付宝 appID和 微信支付的一些账号,并在微擎后台配置好参数。具体请见后端支付文件说明
使用hbuilder 打包
HBuilderX,下载地址:http://www.dcloud.io/下载完整APP开发版
下载并安装HBuilderX后,打开编辑器,点击右上角选择:文件 -> 新建 -> 项目选择wap2app,
打开hbuilder后选择文件,新建 ,项目 ,项目类型选择 wap2app
项目名词填写你app的名字,wap站首页网址。输入你的移动端网站网址即可。 应该是这样的格式 XXXXX.com/app/index.php?i=1&c=entry&m=ewei_shopv2&do=mobile xxx替换成你的网站域名。如果不会请参考hbuilder官方文档
这样,manifest.json文件就配置完成了接下来,打包app,安卓请使用安卓自有证书,苹果请使用苹果证书。点击HBuilder: 发行 -> 原生App-云端打包
可以参考hbuilder官网文档对 sitemap.json 继续优化,优化加载速度等。下面提供我开发的示例代码。注意,url要替换成自己的url。。
- {
- "global": {
- "webviewParameter": {
- "titleNView": {
- "autoBackButton": true,
- "backgroundColor": "#f7f7f7", //导航栏背景色
- "titleColor": "#000000", //标题颜色
- "titleSize": "17px"
- },
- "statusbar": {
- //系统状态栏样式(前景色)
- "style": "dark"
- },
- "appendCss": "",
- "appendJs": ""
- },
- "easyConfig": {
- "quit": {
- "toast": {
- "showFeedback": false //不显示“反馈意见”链接,默认为true
- }
- },
- "open": {
- "animation": { //窗口切换动画配置
- "type": "slide-in-right", //窗口动画类型
- "duration": 90 //窗口动画执行时
- }
- // "waiting" // 禁用waiting,打开page1页面时,不显示waiting等待框
- }
- }
-
- },
- "pages": [{
- "webviewId": "__W2A__url.com", //首页
- "matchUrls": [{
- "href": "http://url.com/app/index.php?i=1&c=entry&m=ewei_shopv2&do=mobile"
- }],
- "webviewParameter": {
- "titleNView": false,
- "statusbar": {
- "background": "#fdd108"
- }
- // "pullToRefresh": {
-
- // "support": true,
-
- // "style": "circle", //设置ios与安卓下拉统一为圈圈
-
- // "color": "#dea00e", //下拉圈圈颜色
-
- // "offset": "9px" //下拉圈圈出现的位置
-
- // }
- },
- "easyConfig": {
- "back": {
- "before": [
- {
- "popupSelector": ".hisContent", // 弹出层dom选择器
- "closeSelector": ".hisTitle"
-
- }
- ]
- }
- }
- },
- {
- "webviewId": "category", //首页
- "matchUrls": [{
- "href": "http://url.com/app/index.php?i=1&c=entry&m=ewei_shopv2&do=mobile&r=shop.category"
- }, {
- "href": "http://url.com/app/index.php?i=1&c=entry&m=ewei_shopv2&do=mobile&r=shop.category"
- }],
- "webviewParameter": {
- "titleNView": false,
- "statusbar": {
- "background": "#f7f7f7"
- }
- }
- },
- {
- "webviewId": "member", //会员中心
- "matchUrls": [{
- "href": "http://url.com/app/index.php?i=1&c=entry&m=ewei_shopv2&do=mobile&r=member"
- }, {
- "href": "http://url.com/app/index.php?i=1&c=entry&m=ewei_shopv2&do=mobile&r=member"
- }],
- "webviewParameter": {
- "titleNView": false,
- "statusbar": {
- "background": "#fdd108"
- }
- }
- },
- {
- "webviewId": "goodes", //商户页?
- "matchUrls": [{
- "href": "W:http://url.com/app/index.php?i=1&c=entry&m=ewei_shopv2&do=mobile&r=goods&merchid=*"
- }, {
- "href": "W:http://url.com/app/index.php?i=1&c=entry&m=ewei_shopv2&do=mobile&r=goods&merchid=*"
- }],
- "webviewParameter": {
- "titleNView": false,
- "statusbar": {
- "background": "#fdd108"
- }
- }
- },
- {
- "webviewId": "goods", //商品页
- "matchUrls": [{
- "href": "W:http://url.com/app/index.php?i=1&c=entry&m=ewei_shopv2&do=mobile&r=goods.detail&id=*"
- }, {
- "href": "W:http://url.com/app/index.php?i=1&c=entry&m=ewei_shopv2&do=mobile&r=goods.detail&id=*"
- }],
- "webviewParameter": {
- "titleNView": false,
- "statusbar": {
- "background": "#fdd108"
- }
- },
- "easyConfig": {
- "back": {
- "before": [
- {
- "popupSelector": ".picker-modal", // 弹出层dom选择器
- "closeSelector": ".icon-guanbi1"
-
- }
- ]
- }
- }
- },
- {
- "webviewId": "kefu", //首页
- "matchUrls": [{
- "href": "http://url.com/app/index.php?i=1&c=entry&m=ewei_shopv2&do=mobile&r=open_messikefu"
- }, {
- "href": "http://url.com/app/index.php?i=1&c=entry&m=ewei_shopv2&do=mobile&r=open_messikefu"
- }],
- "webviewParameter": {
- "titleNView": {
- "autoBackButton": true,
- "backgroundColor": "#f7f7f7", //导航栏背景色
- "titleText": "在线客服",
- "titleColor": "#000000", //标题颜色
- "titleSize": "17px"
- },
- "statusbar": {
- "background": "#f7f7f7"
- }
- },
- "easyConfig":{
- "back":{
- "history":false //不允许执行history.back
- }
- }
- },
- {
- "webviewId": "kefugoods", //首页
- "matchUrls": [{
- "href": "W:http://url.com/app/index.php?i=1&c=entry&m=ewei_shopv2&do=mobile&r=open_messikefu*"
- }, {
- "href": "W:http://url.com/app/index.php?i=1&c=entry&m=ewei_shopv2&do=mobile&r=open_messikefu*"
- }],
- "webviewParameter": {
- "titleNView": {
-
- "autoBackButton": true,
- "backgroundColor": "#f7f7f7", //导航栏背景色
- "titleText": "在线客服",
- "titleColor": "#000000", //标题颜色
- "titleSize": "17px"
- },
- "statusbar": {
- "background": "#f7f7f7"
- }
- },
- "easyConfig":{
- "back":{
- "history":false //不允许执行history.back
- }
- }
- },
- {
- "webviewId": "address", //地址选择
- "matchUrls": [{
- "href": "http://url.com/app/index.php?i=1&c=entry&m=ewei_shopv2&do=mobile&r=member.address.selector"
- }, {
- "href": "http://url.com/app/index.php?i=1&c=entry&m=ewei_shopv2&do=mobile&r=member.address.selector"
- }],
- "webviewParameter": {
- "titleNView":false,
- "statusbar": {
- "background": "#f7f7f7"
- }
- }
- },
- {
- "webviewId": "ordercreate", //单规格确认订单
- "matchUrls": [{
- "href": "W:http://url.com/app/index.php?i=1&c=entry&m=ewei_shopv2&do=mobile&r=order.create&id=*&optionid=*&total=*&giftid&liveid=*"
- }, {
-
- "href": "W:http://url.com/app/index.php?i=1&c=entry&m=ewei_shopv2&do=mobile&r=order.create&id=*&optionid=*&total=*&giftid&liveid=*"
- }],
- "webviewParameter": {
- "titleNView":false,
- "statusbar": {
- "background": "#f7f7f7"
- }
- }
- },
- {
- "webviewId": "ordercreates", //多规格确认订单
- "matchUrls": [{
- "href": "W:http://url.com/app/index.php?i=1&c=entry&m=ewei_shopv2&do=mobile&r=order.create&id=*&iswholesale=*&buyoptions=*"
- }, {
-
- "href": "W:http://url.com/app/index.php?i=1&c=entry&m=ewei_shopv2&do=mobile&r=order.create&id=*&iswholesale=*&buyoptions=*"
- }],
- "webviewParameter": {
- "titleNView":false,
- "statusbar": {
- "background": "#f7f7f7"
- }
- }
- },
- {
- "webviewId": "diypage", //DIY活动页
- "matchUrls": [{
- "href": "W:http://url.com/app/index.php?i=1&c=entry&m=ewei_shopv2&do=mobile&r=diypage&id=*"
- }, {
- "href": "W:http://url.com/app/index.php?i=1&c=entry&m=ewei_shopv2&do=mobile&r=diypage&id=*"
- }],
- "webviewParameter": {
- "titleNView": {
- "titleText": "",
- "type": "transparent"
- },
- "statusbar": {
- "background": "#f7f7f7"
- }
- }
- },
- {
- "webviewId": "addresspost", //默认地址
- "matchUrls": [{
- "href": "http://url.com/app/index.php?i=1&c=entry&m=ewei_shopv2&do=mobile&r=member.address"
- }, {
- "href": "http://url.com/app/index.php?i=1&c=entry&m=ewei_shopv2&do=mobile&r=member.address"
- }],
- "webviewParameter": {
- "titleNView": false,
- "statusbar": {
- "background": "#f7f7f7"
- }
- }
- },
- {
- "webviewId": "addressadd", //新增地址
- "matchUrls": [{
- "href": "W:http://url.com/app/index.php?i=1&c=entry&m=ewei_shopv2&do=mobile&r=member.address.post*"
- }, {
- "href": "W:http://url.com/app/index.php?i=1&c=entry&m=ewei_shopv2&do=mobile&r=member.address.post*"
- }],
- "webviewParameter": {
- "titleNView": false,
- "statusbar": {
- "background": "#f7f7f7"
- }
- }
- },
- {
- "webviewId": "payok", //新增地址
- "matchUrls": [{
- "href": "W:http://url.com/app/index.php?i=1&c=entry&m=ewei_shopv2&do=mobile&r=order.pay.success&id=*&result=true"
- }, {
- "href": "W:http://url.com/app/index.php?i=1&c=entry&m=ewei_shopv2&do=mobile&r=order.pay.success&id=*&result=true"
- }],
- "webviewParameter": {
- "titleNView": false,
- "statusbar": {
- "background": "#f7f7f7"
- }
- }
- },
- {
- "webviewId": "common",
- "matchUrls": [{
- "hostname": "R:.",
- "pathname": "R:."
- }],
- "webviewParameter": {
- "titleNView": false,
- "statusbar": {
- "style": "dark",
- "background": "#F7F7F7"
- }
- },
- "easyConfig": {
- "quit": {
- "toast": {
- "showFeedback": false
- }
- }
- }
- }
- ]
- }
复制代码
app.js也需要配置
- App({
- options: {
- debug: true
- },
- /**
- * 当wap2app初始化完成时,会触发 onLaunch
- */
- onLaunch: function() {
- console.log('launch');
- var ws = plus.webview.currentWebview();
- console.log(ws.getURL())
- },
- /**
- * 当wap2app启动,或从后台进入前台显示,会触发 onShow
- */
- onShow: function() {
- console.log('show');
- delete wap2app.quit
- },
- /**
- * 当wap2app从前台进入后台,会触发 onHide
- */
- onHide: function() {
- console.log('hide');
- }
- });
- Page('__W2A__url.com', { //首页扩展配置
- onShow: function() {
- var ws = plus.webview.currentWebview();
- console.log(ws.getURL())
- ws.addEventListener('backbutton', function() {console.log(123) })
- },
- onClose: function() {
- }
- });
- Page('kefu', { //首页扩展配置
- onShow: function() {
- console.log('kefu')
- },
- onClose: function() {
- console.log('kefuback')
- }
- });
- Page('member', { //首页扩展配置
- onShow: function() {
- var ws = plus.webview.getWebviewById('member');
- setTimeout(function() {
- ws.beginPullToRefresh();
- }, 60000);
- },
- onClose: function() {
- }
- });
- Page('sousuo', { //首页扩展配置
- onShow: function() {
- console.log(123)
- },
- onClose: function() {
- }
- });
- Page('address', { //地址选择
- onShow: function() {
- var wv = plus.webview.currentWebview();
- var _reject = function(event) {
- var _url = event.url;
- var o = plus.webview.create(_url,'id',{
- titleNView:{
- titleText:true,
- autoBackButton:true
- }
- });
- o.show('slide-in-right');
- };
- wv.overrideUrlLoading({
- mode: 'reject'
- }, _reject);
- console.log('禁止一直刷新')
-
-
- },
-
- onClose: function() {
- console.log('reload')
-
- var ordercreates = plus.webview.getWebviewById('ordercreates');
- ordercreates.reload(true)
- }
- });
- Page('addresspost', { //默认地址
- onShow: function() {
- var wv = plus.webview.currentWebview();
- var _reject = function(event) {
- var _url = event.url;
- var o = plus.webview.create(_url,'id',{
- titleNView:{
- titleText:true,
- autoBackButton:true
- }
- });
- o.show('slide-in-right');
- };
- wv.overrideUrlLoading({
- mode: 'reject'
- }, _reject);
- console.log('禁止一直刷新')
-
-
- },
-
- onClose: function() {
- console.log('reload')
- var ordercreate = plus.webview.getWebviewById('ordercreate');
- var ordercreates = plus.webview.getWebviewById('ordercreates');
- ordercreate.reload(true)
- ordercreates.reload(true)
- }
- });
- Page('addressadd', { //新增地址
- onShow: function() {
- var wv = plus.webview.currentWebview();
- var _reject = function(event) {
- var _url = event.url;
- var o = plus.webview.create(_url,'id',{
- titleNView:{
- titleText:true,
- autoBackButton:true
- }
- });
- o.show('slide-in-right');
- };
- wv.overrideUrlLoading({
- mode: 'reject'
- }, _reject);
- console.log('禁止一直刷新')
-
-
- },
-
- onClose: function() {
- console.log('reload')
- var ordercreate = plus.webview.getWebviewById('ordercreate');
- var ordercreates = plus.webview.getWebviewById('ordercreates');
- ordercreate.reload(true)
- ordercreates.reload(true)
- }
- });
- Page('payok', { //首页扩展配置
- onShow: function() {
- var webview = plus.webview.currentWebview()
- plus.key.addEventListener('backbutton', function() {
- return false
- })
- },
- onClose: function() {
- }
- });
复制代码
以上代码主要是解决了 有些页面无限刷新的BUG
以上步骤完成,选择hbuilder 菜单栏里的 发型 选择原生app -云打包 进行打包
注意打包时 一定要选择 使用自有证书, 按钮旁边有链接 可以去看怎么生成。 以及一定要设定一个应用包名 记下来,这对微信支付很重要!
打开微信开放平台,然后输入刚刚设置的包名,以及去下载一个app签名获取工具,把刚刚证书的签名获取一下,填进去 要不然是用不了微信支付的! |
|