• 封装APP
  • 封装APP具体教程&功能插件介绍

  • 封装好的APP还可以重新编辑吗?

  • URL拉起APP,如何配置?

  • 封装APP如何配置第三方分享?

  • 无闪退版本封装和普通封装有什么区别?

  • 如何生成安卓应用证书?有哪些基本操作?

  • 如何下载安卓与苹果的封装包?

  • 封装的APP七天免费到期之后,如何给应用续费?

  • iOS无闪退版封装应该注意什么?

  • 如何查看封装应用的下载页?

  • SDK
  • 所有按钮功能对应ID

  • 顶部导航栏动态控制

  • 下拉刷新的加载图片icon修改

  • 底部菜单栏动态控制

  • 侧滑左菜单栏的按钮动态控制

  • 动态设置横竖屏开关

  • 保存网页登录信息到应用缓存中

  • 获取安卓手机app登录信息缓存

  • 获取苹果手机app登录信息缓存

封装APP具体教程&功能插件介绍

一、封装价格

封装APP价格和套餐内容,请参考:https://www.170130.com/index/price/price.html网站上目前先封装试用,然后付款。支持7天免费使用。

二、封装操作教程

注册登录轻打包网站

第一步、配置基础组件

在已登录的状态,从顶部导航点击在线封装按钮进入APP封装页面;
在线封装分为“普通封装APP”和“iOS无闪退版封装”,先介绍普通封装APP;
在普通封装APP时需要先进行基础配置,APP名称建议5个中文字以内,英文数字10个以内;
APP图标和启动页可以选择自己上传、也可以直接本平台提供的,请根据自己的需求选择;
应用包名可以选择自己上传也可以用本平台提供的,版本号是自动生成的;
网站地址输入您要封装的网站域名, 必须是http://或https://开头;
全部填写完之后,点击保存按钮,系统会把您配置的功能进行保存,然后点击下一步继续配置您需要的组件。

第二步、选择插件

注意事项:
1. 插件可以根据自身需要,进行配置,也可以不配置,直接开始打包。
2. 配置第三方组件QQ、微信、极光推送时,需要相应地平台,申请KEY值,申请到之后,填写到相应的位置。

插件功能介绍:
1. 基础组件
引导页:可以添加 1-5张,关于APP功能或者产品内容的介绍图。
横竖屏:设置APP的启动方向,JS接口动态调用App横竖屏。
全屏: 全屏是指把手机界面调整到最大化,可以方便视频播放,视野开阔等。
下拉刷新:按住页面后即可下拉刷新。
应用证书:提供安卓默认证书和安卓自定义证书,默认证书:系统自动生成安卓证书,不用手动配置;自定义证书:自主上传安卓证书,需要手动配置;。

2. 原生组件
导航栏:导航栏位于状态栏下方,可以用来配置:分享功能、刷新、前进、后退、扫一扫、打开左侧栏、回到首页、拉起APP、打开新链接等功能。
菜单栏:可以在APP底部增加2-5个菜单,功能多样,任意添加
侧边栏: 支持在导航栏点击打开侧边栏按钮,配置竖排的导航。
手势开关:可控制App的上下滑动,长按保存图片,网页链接,屏蔽长按等功能。
关于我们:介绍应用基本信息,宣传产品等。

3. 第三方组件
分享:支持配置系统分享和第三方分享功能,前者直接开启,后者需要申请相关开放平台的Key值。
QQ:打开QQ第三方分享功能,分享给QQ好友和QQ空间,对应高级配置内打开对应的登录与分享功能。
微信: 配置后,微信开放平台申请了权限即可使用。微信分享,登录,支付功能。对应在高级功能内打开权限。
短信:打开短信第三方分享功能,发送短信的分享功能。
极光推送:使用极光平台,对已经安装的APP进行消息通知。
百度ssp:提供投放广告的入口,全方位赚钱。

第三步、开始打包,完成封装

1. 插件可以根据自身需要,进行配置,也可以不配置,直接开始打包。
2. 打包完成之后可在应用列表查看已打包的应用,本平台免费提供七天有效期,到期之后可根据需要续费。

封装好的APP还可以重新编辑吗?

封装好的APP,还可以再次编辑,除了无法选择平台,其他可以再次编辑。
编辑好后,Android支持在线更新 ios暂不支持
安卓包操作顺序:①重新编辑生成的APP,下载好封装包;②重新更新下载链接;③让用户重新下载。
苹果包操作顺序:①重新编辑生成的APP,下载好封装包;②更新签名;③将签名好的包下载下来,更新下载链接,④让用户重新下载。

在【应用列表-普通应用】中,点击每个应用块级里面的【编辑】,即可重新选择,如下图所示:

URL拉起APP,如何配置?

一、配置URL拉起APP的入口

配置URL拉起APP可以在顶部导航栏、底部菜单栏和侧边栏选择此功能,如下图

2. 在顶部导航栏配置拉起APP(另外两个同这个一样)

顶部导航栏分左按键功能和右按键功能,在选择功能里可以选择拉起APP这个功能,如下图所示:

选择拉起APP这个功能时,功能下方会出现应用包名大全的入口,点击应用包名大全,选择需要拉起APP的包名,

温馨提示

如果需要封装好的APP中拉起指定的APP,需要在网页中配置对应APP的 URL Scheme Bundle identifier。在网页中配置的位置如下: 通过在html的a标签里面的href中直接配置android端的scheme

< body >
< a href="weixin://wap/pay?pid=1">打开app < /a >
< /body>

注意事项
1. 要在网站中配置正确的scheme
2. 配置并封装完成后,需要在手机上同时安装有该第三方APP

封装APP如何配置第三方分享?

选择分享功能的入口,具体配置方式,可以在顶部导航、底部菜单栏和侧边栏选择分享功能

第一步、在顶部导航栏配置分享功能,

顶部导航栏分左按键功能和右按键功能,在选择功能里可以选择分享功能,如下图所示:

第二步、在底部菜单栏配置分享功能,

底部菜单栏可以配置五个功能键,可以在这五个功能键里任意配置分享功能,如下图所示:

第三步、在侧边栏配置分享功能,

侧边栏可以竖排配置五个功能键,可以在这五个功能键里任意配置分享功能,如下图所示:

第四步、在分享栏中配置要分享的内容

在以上顶部导航栏、底部菜单栏和侧边栏这三个组件中选择其中一个配置分享功能,然后在分享栏中配置要分享的内容,如下图

第三方分享配置,可分为系统分享和第三方分享
系统分享和APP分享的差别

1. 操作上,系统分享操作简单;第三方分享,需要去微信开放平台申请key值才可以;
2. 支持平台上,系统分享支持微博、微信、QQ等;第三方分享,只支持微信分享;

无闪退版本封装和普通封装有什么区别??

1. 无闪退版本,只能封装苹果APP,而且不能配置插件,封装好的苹果APP,可以直接安装到苹果手机上,不需要企业签名,不会出现闪退情况。

2. 普通版本封装,可以支持安卓APP和苹果APP封装,可以支持插件配置,例如配置引导页、顶部导航栏、底部菜单栏等、侧边栏等。安卓APP可以直接安装,苹果APP需要做企业签名才可以安装,企业签名可能存在闪退。

如何生成安卓应用证书?有哪些基本操作?

第一步、生成安卓证书

从顶部导航进入安卓证书,安卓证书在线制作,填写相应的信息之后点击生成证书按钮,如下图所示:

第二步、配置安卓证书

从【在线封装-基础组件-应用证书】配置安卓证书的入口,点击应用证书可以看到有安卓默认证书和安卓自定义证书。如下图所示:

如何下载安卓与苹果的封装包?

封装完成的应用可以在应用列表查看,每个应用都有一个下载封装包的入口,点击下载封装包安卓或者苹果,即可下载,如下图所示:

封装的APP七天免费到期之后,如何给应用续费?

在本平台封装的应用提供七天免费试用期,应用到期之后可根据需要续费,在应用列表展示应用的位置有续费入口,如下图所示:

点击续费之后,进入续费页面,可根据需要选择有效期,如下图

iOS无闪退版封装应该注意什么?

1.无闪退版本,只能封装苹果APP,而且不能配置插件,封装好的苹果APP,可以直接安装到苹果手机上,不需要企业签名,不会出现闪退情况。
2.iOS无闪退版封装可以配置APP图标,但是无需配置启动图, 直接点击立即生成。
3.iOS无闪退版封装的应用只能安装在苹果手机。

如何查看封装应用的下载页?

第一步、在应用列表找到应用详情页的入口,如下图所示:
第二步、进入应用详情页后,可以看到有个下载地址链接,点击下载地址链接,如下图所示:
第三步、点击下载链接进入下载页,如下图所示:

所有按钮功能对应ID

#1:分享功能
#2:刷新
#3:前进
#4:后退
#5:打电话-联系客服
#6:浏览器打开网页
#7:打开新连接(比如打开微博主页
#8:关于我们
#9:清除缓存
#10://打开左边栏---左侧栏按钮不带这个功能
#11:扫一扫
#12:回到主页
#13:关闭app
#14:拉起app (比如打开微信)

顶部导航栏动态控制

功能说明 :在第一次在平台上打包的时候 ,导航栏开关及js控制开关开启的状态下,修改导航栏的背景,左右按钮的功能以及图片
方法: changeNavigationBar();
参数:titleBar:为json格式字符串,由下面参数组成:
1:navbarBgc: 导航栏背景颜色(16进制颜色值 例如:#0096ff)
2:navbarSelect:左按钮功能
3:navbarLIco:左按钮icon地址(网络图片地址)
4:navbarRsele:右按钮功能
5:navRIcon:右按钮icon地址(网络图片地址)
6:navLUrl:左按钮打开新链接url:当功能id为7的时候,填写完整的网址(比如:https://weibo.com/)
7:navLpullname:左按钮拉起app的URI:当功能id为14的时候,填写完整的URI(比如:sinaweibo://)
8:navRUrl:右按钮打开新链接url :当功能id为7的时候,填写完整的网址(比如:https://weibo.com/)
9:navRpullname:右按钮拉起app的URI:当功能id为14的时候,填写完整的URI(比如:sinaweibo://)
查看appURI(应用包名大全)https://www.170130.com/index/pack/packname_all.html

实例:
 function changeNavigationBar(){
    var titleBar={"navbarBgc": "#0096ff","navLUrl": "","navLpullname": "sinaweibo://","navRIcon": "http://appimgs.170130.com/nosjjuCF4rYzGTMQbGZXDHegDvFDpQxx.png","navRUrl": "https://weibo.com/","navRpullname": "","navbarLIco": "http://appimgs.170130.com/nosjjuCF4rYzGTMQbGZXDHegDvFDpQxx.png","navbarRsele": 7,"navbarSelect": 14};
   var u = navigator.userAgent, app = navigator.appVersion;
    var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1;
    var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); 
    if (isAndroid) {
        window.AndroidWebView.changeNavigationBar(JSON.stringify(titleBar));
    }
    if (isIOS) {
        window.webkit.messageHandlers.changeTitleBar.postMessage({body:titleBar});
    }
}
            

下拉刷新的加载图片icon修改

功能说明 :在第一次在平台上打包的时候 ,下拉刷新开关及js控制开关开启的状态下,修改下拉刷新的图片icon
方法: changeRefreshImg();
参数:refreshImg:网络图片地址url,为String 字符串类型

实例:
function changeRefreshImg(){
    var refreshImg="http://test.qingdabao.com/static/home/images/icon/logo/logo10.png";
       var u = navigator.userAgent, app = navigator.appVersion;
    var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1;
    var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
    if (isAndroid) {
        window.AndroidWebView.changeRefreshImg(refreshImg);
    }
    if (isIOS) {
    window.webkit.messageHandlers.changeRefreshImg.postMessage({body:refreshImg});
    }
  }
            

底部菜单栏动态控制

功能说明 :在第一次在平台上打包的时候 ,底部菜单栏开关及js控制开关开启的状态下,修改底部菜单栏的背景颜色,文字颜色按钮个数,功能以及图片
方法: changeBottomMenu();
参数:bottomlist:为json格式字符串,由下面参数组成:
1:menubarBgc:底部菜单栏颜色:(16进制颜色值 例如:#0096ff)
2:menuUrl:打开新链接url数组,(底部有几个按钮要有几个数据)当功能id为7的时候,填写完整的网址 (比如:https://weibo.com/)
比如:五个按钮,第五个按钮功能id为7:打开微博主页:"menuUrl": ["", "", "","", "https://weibo.com/"]
3:menubarFun:按钮功能ID数组:"menubarFun": [2, 1, 14, 14, 7]
4:menName:按钮功能name数组|:"menName": ["刷新","分享","拉爱奇艺","拉美团","打开微博"]
5:menuDefauinput:按钮的icon网络图片地址数组:
比如:menuDefauinput": ["http://appimgs.170130.com/nosjjuCF4rYzGTMQbGZXDHegDvFDpQxx.png", "http://appimgs.170130.com/nosjjuCF4rYzGTMQbGZXDHegDvFDpQxx .png", "http://appimgs.170130.com/nosjjuCF4rYzGTMQbGZXDHegDvFDpQxx.png", "http://appimgs.170130.com/kZA we25CK2zDjP7rkgxif68RHBzHQgN2.png", "http://appimgs.170130.com/XKsTKC5S46xpTFpS3gA4fx7hgfghytMv.png"]
6:menubarFont:按钮文字颜色
7:menupullname:拉起appurl数组:查看(应用包名大全)app URI: https://www.170130.com/index/pack/packname_all.html
(底部有几个按钮要有几个数据)当功能id为14的时候,填写完整的URi(比如:imeituan://)比如5个按钮 ,第4个和第5个功能id为14,拉起爱奇艺和美团:"menupullname": [ "", "", "", "qiyi-iphone://","imeituan://"]

实例:
 function changeBottomMenu(){
    var bottomlist={"menName": ["刷新","分享","拉爱奇艺","拉美团","打开微博"],"menuDefauinput": ["http://appimgs.170130.com/nosjjuCF4rYzGTMQbGZXDHegDvFDpQxx.png", "http://appimgs.170130.com/nosjjuCF4rYzGTMQbGZXDHegDvFDpQxx.png","http://appimgs.170130.com/nosjjuCF4rYzGTMQbGZXDHegDvFDpQxx.png",  "http://appimgs.170130.com/kZAwe25CK2zDjP7rkgxif68RHBzHQgN2.png", "http://appimgs.170130.com/XKsTKC5S46xpTFpS3gA4fx7hgfghytMv.png"  ],  "menubarFont": "#000000","menuUrl": [ "", "", "","",  "https://weibo.com/"],"menubarBgc": "#0096ff",  "menubarFun": [ 2,  1,  14, 14, 7],"menupullname": [  "", "", "", "qiyi-iphone://","imeituan://"]};
   var u = navigator.userAgent, app = navigator.appVersion;
    var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1;
    var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
    if (isAndroid) {
         window.AndroidWebView.changeBottomMenu(JSON.stringify(bottomlist));
    }
    if (isIOS) {
        window.webkit.messageHandlers.changeBottomMenu.postMessage({body:bottomlist});
    }
 }
            

侧滑左菜单栏的按钮动态控制

功能说明 :在第一次在平台上打包的时候 ,左菜单栏开关及js控制开关开启的状态下,修改底部左菜单栏的背景颜色,文字颜色按钮个数,功能以及图片
方法: changeLeftMenu();
参数:leftlist:为json格式字符串,由下面参数组成:
1:slideBgc:左侧栏背景颜色(16进制颜色值 例如:#0096ff)
2:slideTextColor:左侧栏文字颜色(16进制颜色值 例如:#0096ff)
3:slidefun:左侧栏按钮功能数组:"slidefun": [8, 9, 11, 14, 7]
4:slibarName:左侧栏按钮name数组 :"slibarName": ["关于我们", "清除缓存", "扫一扫", "拉拼多多", "打开百度"]
5:slideIcon:左侧栏按钮的icon网络图片地址数组:
"slideIcon": [ ""http://appimgs.170130.com/nosjjuCF4rYzGTMQbGZXDHegDvFDpQxx.png",", "http://appimgs.170130.com/4MMmmsuQZWbnBYDJ3yW2JpjujjJTr3zh.png", ""http://appimgs.170130.com/nosjjuCF4rYzGTMQbGZXDHegDvFDpQxx.png",", "http://appimgs.170130.com/QcW3GPPN4kZFPdSKMAW8uhC5i2dXvDvT.png", "http://appimgs.170130.com/fWAPTJaPj6xTWDuFzgviMYvDDQJwC5aJ.png" ]
6:slideUrl:左侧栏打开新链接url数组(底部有几个按钮要有几个数据)当功能id为7的时候,填写完整的网址 比如:5个按钮,第5个按钮功能id为7:打开百度主页:"slideUrl": ["", "", "", "", "https://www.baidu.com"
7:slidepullname:左侧栏拉起APP的url数组:查看(应用包名大全)app URL: https://www.170130.com/index/pack/packname_all.html
底部有几个按钮要有几个数据)当功能id为14的时候,填写完整的URL比如5个按钮,第4个功能ID:14 打开拼多多 slidepullname": ["", "", "", "pinduoduo://",""]

实例:
function changeLeftMenu(){
    var leftlist={  "slibarName": ["关于我们", "清除缓存", "扫一扫", "拉拼多多", "打开百度"],  "slideBgc": "#0096ff",  "slideIcon": [  ""http://appimgs.170130.com/nosjjuCF4rYzGTMQbGZXDHegDvFDpQxx.png",",  "http://appimgs.170130.com/4MMmmsuQZWbnBYDJ3yW2JpjujjJTr3zh.png", ""http://appimgs.170130.com/nosjjuCF4rYzGTMQbGZXDHegDvFDpQxx.png",",  "http://appimgs.170130.com/QcW3GPPN4kZFPdSKMAW8uhC5i2dXvDvT.png", "http://appimgs.170130.com/fWAPTJaPj6xTWDuFzgviMYvDDQJwC5aJ.png"  ],"slideTextColor": "#ffffff","slideUrl": ["", "", "", "", "https://www.baidu.com"],"slidefun": [8, 9, 11, 14, 7],"slidepullname":  ["", "", "", "pinduoduo://",""]};   
  var u = navigator.userAgent, app = navigator.appVersion;
    var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1;
    var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); 
    if (isAndroid) {
           window.AndroidWebView.changeLeftMenu(JSON.stringify(leftlist));
    }
    if (isIOS) {
    window.webkit.messageHandlers.changeLeftMenu.postMessage({body:leftlist});
    }
}
            

动态设置横竖屏开关

功能说明 :通过js方法控制应用界面横竖屏
方法:changeOrientation();
参数:orientation:为数字int类型,1代表横竖屏屏、 2代表横屏 、3代表竖屏

实例:
function changeOrientation(){
    var orientation=1;
            var u = navigator.userAgent, app = navigator.appVersion;
    var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1;
    var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
    if (isAndroid) {
          window.AndroidWebView.changeOrientation(orientation);
    }
    if (isIOS) {
window.webkit.messageHandlers.changeOrientation.postMessage({body:orientation});
    }
}
            

保存网页登录信息到应用缓存中

功能说明 :调用此方法可以把用户名和密码保存缓存供用户下次进来使用
方法:saveLoginInfo();
参数:loginInfo:为json格式字符串,由下面参数组成:
1:name:登录时的名称:为String 字符串类型
2:password:登录时密码:为String 字符串类型

实例:
 function saveLoginInfo(){
    var name ="eideas";
    var pwd ="123456";
  var loginInfo = {"name":name,"password": pwd};
   var u = navigator.userAgent, app = navigator.appVersion;
    var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1;
    var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
    if (isAndroid) {
    window.AndroidWebView.saveLoginInfo(JSON.stringify(loginInfo));
    }
    if (isIOS) {
    window.webkit.messageHandlers.saveLoginInfo.postMessage({body:loginInfo });
    }
 }
            

获取安卓手机app登录信息缓存

功能说明 :调用此方法可以把保存的用户名和密码从安卓手机应用缓存中获取到,保持登录状态
方法:getLoginInfo();可调用
参数:info:为json格式字符串,可按照下面实例写:Android 端:
1:jsObject.name:用户名
2:jsObject.password:用户密码

实例:
 function getAndroidLoginInfo(){
       var info=window.AndroidWebView.getLoginInfo();
       var jsObject = JSON.parse(info);
   document.getElementById("name").value=jsObject.name;
 document.getElementById("password").value=jsObject.password;
    }
            

获取苹果手机app登录信息缓存

功能说明 :用此方法可以把保存的用户名和密码从苹果手机应用缓存中获取到,保持登录状态
方法:getLoginInfo();js这边只需要按照下面这个实例代码在方法里动态取值就行,无需调用
参数:info:为json格式字符串,可按照下面实例写:ios 端: 1:jsObject.name:用户名
2:jsObject.password:用户密码

实例:
function getIosLoginInfo(info) {
       var jsObject = JSON.parse(info);
            document.getElementById("name1").value = name;
            document.getElementById("password1").value = password;
    }
            
返回顶部