APP download页面制作流程

维护人:戴荔春 (6016)

说明

移动APP最终发布时,一般会提供一个统一的下载页面,然后这个页面中根据环境自动判断Android,iOS的下载。本文介绍这个页面的制作流程

目录

前言

本文旨在解决APP统一下载页面的问题,提供一些默认样式页面,根据本文,只需要进行简单的配置,即可完成一个APP下载页面。

如若本文样式不符合要求,那么可以自行定义APP下载页面

download页面的原理

为什么要制作download页面

实际项目中,一般如果有以下的需求,就代表需要使用download页面了

具体原因是因为,正常的下载地址一般会将对应的android apk,iOS appstore地址分别做成二维码,然后供用户下载,但是这种方案有很多限制,比如微信 iOS下扫描二维码后无法打开下载地址,比如两个二维码不一致,无法合一等问题,所以这时候会考虑用一个统一的下载页面进行管理

download页面的运行机制

download页面运行机制如下图:

download页面需要注意

一般download页面需要注意

download页面的制作流程

第一步:拿到示例Demo源码

有一个统一的下载页面示例,实际项目中的下载页面可以根据那个页面进行改造,可以加快开发效率

示例项目SVN地址

svn://192.168.0.51/2014/T10/新点微门户平台/trunk/dcloud/跨平台框架/跨平台典型项目示例/APP下载页面

第二步:修改示例中的配置信息

示例页面具有通用性,示例中是用的鞍山项目做为例子,但实际可以根据对应的项目进行配置信息的修改

页面标题的修改

下载页面标题默认是“新点软件”,如有必要,可以自行修改

app信息修改

app的配置信息在config.js中,可以修改里面的app信息。源文件如下: 

/**
 * 作者: dailc
 * 时间: 2016-08-23 
 * 描述: 下载页面的配置参数
 * 这个脚本必须在downloadPage之前引入
 */
(function(win) {
	//默认的app下载配置参数
	window.configJson = {
		//是否在微信中使用图片,如果觉得在微信中的显示不够明显,可以将这个变量改为true
		//这样微信中就够明显了
		isUseWechatTipsImg:false,
		Android: {
			//app名称
			name: 'showcase.dcloud.anshan',
			//版本号
			version: '1.0.6',
			//大小
			size: '4.30MB',
			//时间
			time: '2016-08-17',
			//图标路径,可以用本地路径和网络路径
			//比如相对于downloadPage的路径
			icon: '../img/appIcon.png',
			//url,apk的下载地址,***.apk
			//示例项目里的鞍山 apk地址是蒲公英地址
			url: 'http://qiniu-app-cdn.pgyer.com/560b6e3a412d75b03ea266992f8bd632.apk?e=1471923383&attname=%E5%85%B8%E5%9E%8B%E9%A1%B9%E7%9B%AE-%E9%9E%8D%E5%B1%B1.apk&token=6fYeQ7_TVB5L0QSzosNFfw2HU8eJhAirMF5VxV9G:w9ArcUTfGWejSCWX6BTnRm53MnY=',
			//版本类型,Android版本分为测试版本,应用商店版本和企业版本
			//test,appStore,enterprise
			type: 'test',
			//最下方的提示信息,可以为空
			tips: '',
			//是否默认自动下载,如果为true,初始化时会自动弹出下载
			isAutoInstall: false
		},
		iOS: {
			//app名称
			name: 'showcase.dcloud.anshan',
			//版本号
			version: '1.0.6',
			//大小
			size: '8.87MB',
			//时间
			time: '2016-08-17',
			//图标路径,可以用本地路径和网络路径
			icon: '../img/appIcon.png',
			//url,apk的下载地址,***.apk
			//示例项目中的安装指向蒲公英地址,实际上可以指向appStore地址的
			url: 'https://www.pgyer.com/EGgI',
			//版本类型,iOS版本分为测试版本,appStore版和企业版
			//test,appStore,enterprise
			type: 'test',
			//最下方的提示信息,比如提示必须safari浏览器打开
			tips: '注意：iphone版必须在iPhone手机上用Safari浏览器访问此页面安装',
			//是否默认自动下载
			isAutoInstall: false
		}
	};
})(window);

第三步:部署该文件并将地址生成二维码

修改完对应的app信息后,接下来就是需要将修改好后的项目部署到对应项目的服务器上。直接作为静态资源部署即可。接下来再将部署后的页面地址制作成二维码(可以搜索各种工具)。具体方法不赘述

如本示例中就是部署到http://app.epoint.com.cn上的tomcat中的

请注意,如需要解决微信浏览器中的缓存问题,请参考在线文档中的 自动构建md5签名解决缓存问题,如本示例就是采用了自动构建方法构建出部署包后再部署的

download页面的示例demo

二维码地址

外网地址

http://app.epoint.com.cn/showcase.weichat.appDownload/html/appDownload_downloadPage.html

效果展示