微信开发需要会html5_微信公众号开发需要html5 history模式 - CSDN
精华内容
参与话题
  • HTML5+JS,微信平台开发

    千次阅读 热门讨论 2016-03-21 19:52:43
    而自己没想到,这么快,就可以亲身接触到这样一个微信平台开发项目中。如何使得我们写HTML页面去适应各种手机,这就是在这个项目中,需要我们去做处理的一方面。   【项目基础】  HTML,大家都有很长一段时间的...
       【项目概要】
        最近进入了一个新的项目,手机移动端的开发。微信平台,现在是家喻户晓。而自己没想到,这么快,就可以亲身接触到这样一个微信平台开发项目中。如何使得我们写HTML页面去适应各种手机,这就是在这个项目中,需要我们去做处理的一方面。
       【项目基础】
        HTML,大家都有很长一段时间的接触了,前台页面,一直是比较薄弱和不重视的地方。如果在面试时,让自己手写一段HTML代码,恐怕是难以下笔。而这一次,加入到项目组中,是让我们先从前台页面开始,HTML5+JS,实现手机移动端的开发。
        HTML5,其实,对于我们来说,并不算是一种新的语言。它和HTML之间有着深厚的渊源。如下所述:
        与HTML相比,HTML5具有更多的优点,在保留了html优势的基础上去其糟粕,加入新元素,比如:图形的绘制,多媒体内容,更好的页面结构,更好的形式处理,和几个api拖放元素,定位,包括网页应用程序缓存,存储,网络工作者等,让网站的制作更简单,同时更便于工作人员的维护。
        【项目实战】
        而在了解了HTML5之后,便开始自己着手写前台页面了。
        这一次开发,和以前最大的不同在于:之前我们都是将各种内边距、外边距之类的写成固定值,以适应我们在电脑上的观看。这一次,因为是手机端开发,各种品牌手机的屏幕大小不同,如果将值写成固定值,那么开发出来的页面兼容性效果会很差,难以适应各种主流手机。所以,开发手机端的工作重点核心就在于:如何使得自己编写的代码,适应各种不同类型的移动端。
        至此,我们对手机端的开发也熟悉了不少,下面我将结合着自己的开发经历来说说开发中的那些事。
        刚进入组织,就好比看热闹看新鲜,又不时感叹不可思议,莫名其妙,什么东西都是陌生的,什么东西都是高大上的。手足无措、一脸茫然,很确切地可以形容自己刚进入组织的那一天。但凭借着师姐的精心指导,加上自己之前的调试经验,慢慢上手了的感觉。
        其实,手写了一些代码之后,便慢慢清楚了自己要做的是什么了。就拿自己做的页面来说,看起来很复杂,其实在宏观上控制好每个部分,就很容易实现了。
    			
        如上图所示:我将整个页面划分成了个数不等、大小相等的派单,每个派单也划分为了六个部分,将各个部分的大小进行适当布局,这就使得页面上的整体布局不会乱。整体上布局没问题了,再细化到各个小部分,最终的效果也就可以达到了。
        整个页面下来,HTML代码+JS代码有1000多行,也不全部展示了,下面以上图的第1(文字)+第2(图片)部分为例,让大家看看如何编写代码。
        左边的1部分,每一行都是一个div样式,右边的2部分,放置的是一个img框和一个存放星星的div。
    <!-- 左上部分样式设置 -->
    <div class="containerLeftUp" style="float:left;">
    	<!-- 每行字体样式设置 -->
    	<div class="container1-1" style="text-align:left;color;#3e3a39;font-family:PingFangSC-Medium, sans-serif;">派单号:201505068584</div>  
    	<div class="container1-2" style="text-align:left;color:#ffffff;font-family: PingFangSC-Regular, sans-serif;">名称型号:格力空调GL/5036</div>
    	<div class="container1-3" style="text-align:left;color:#ffffff;font-family: PingFangSC-Regular, sans-serif;">保养内容:空调清洗</div>
    	<div class="container1-4" style="text-align:left;color:#ffffff;font-family: PingFangSC-Regular, sans-serif;">位置:客厅</div>
    	<div class="container1-5" style="text-align:left;color:#ffffff;font-family: PingFangSC-Regular, sans-serif;">申请时间:2015-5-6  10:16</div>	
    <span style="white-space:pre">	</span><!-- 右上部分图片样式设置 -->
    	<div class="containerRightUp">
    	<!-- 图片框 -->
    	<img class="img01" src="img/023.png">		
    <!-- 星星图片样式设置 -->
    <div>
    <img class="img02" src="img/23-1.png" style="float:left">
    <img class="img03" src="img/23-1.png" style="float:left;">
    <img class="img04" src="img/23-1.png" style="float:left">
    <img class="img05" src="img/23-2.png" style="float:left">
    <img class="img06" src="img/23-2.png" style="float:left">
    </div>			
    	</div>
     </div>
    在以上HTML代码中,达到的目的是实现页面布局,其中设置一些固定不变的属性,如字体颜色、对齐方式和浮动样式等。对于高度、宽度和边距等需要随手机变化而变化的属性,就需要在js代码中编写。
       部分js代码:
    //自适应设置,左上部分DIV
        var len=document.getElementsByClassName("containerLeftUp").length;
    	for(i=0;i<len;i++){
    		document.getElementsByClassName("containerLeftUp").item(i).style.height=260/1334 * windowHeight + "px";  //设置高度
    		document.getElementsByClassName("containerLeftUp").item(i).style.width=470/750 * windowWidth + "px";	//设置宽度
    			  }
        //自适应设置,每行字体DIV
       var len =document.getElementsByClassName("container1-1").length;
    	for(i=0;i<len;i++){
    		document.getElementsByClassName("container1-1").item(i).style.marginTop=30/1334 * windowHeight + "px"; //顶部外边距
    		document.getElementsByClassName("container1-1").item(i).style.marginLeft=30/750 * windowWidth + "px";  //左部外边距
    		document.getElementsByClassName("container1-1").item(i).style.fontSize=(32*windowWidth/750)+"px";//字体大小
    			}
        //自适应设置,图片样式设置
        var len =document.getElementsByClassName("img01").length;
    	for(i=0;i<len;i++){
    		document.getElementsByClassName("img01").item(i).style.marginTop=60/1334 * windowHeight + "px";
    		document.getElementsByClassName("img01").item(i).style.height=140/1334 * windowHeight + "px";
    		document.getElementsByClassName("img01").item(i).style.marginLeft=8/750 * windowWidth + "px";
    			}			
        var len =document.getElementsByClassName("img02").length;
    	for(i=0;i<len;i++){
    		document.getElementsByClassName("img02").item(i).style.marginTop=10/1334 * windowHeight + "px";
    		document.getElementsByClassName("img02").item(i).style.marginBottom=2/1334 * windowHeight + "px";
    		document.getElementsByClassName("img02").item(i).style.height=25/1334 * windowHeight + "px";
    		document.getElementsByClassName("img02").item(i).style.width=25/1334 * windowHeight + "px";
    			 }
      依据此方法,将每个DIV都添加对应的自适应设置,就可以较好地实现页面布局适应手机屏幕了。但手机品牌不同,对代码的解析也是有不同的处理结果,所以为了更好地适应各个品牌的手机,在网上找到了分辨手机品牌的代码,根据手机品牌,调用不同的js方法,从而使得所有手机都可以很好地适应了。
    辨别手机品牌的js代码:
    <script language="javascript">
    	window.onload = function () {	
    	var u = navigator.userAgent;
    		if (u.indexOf('Android') > -1 || u.indexOf('Linux') > -1) {//安卓手机
    		alert("安卓手机");
    		} else if (u.indexOf('iPhone') > -1) {//苹果手机
    		alert("苹果手机");
    		} else 
    		alert("安卓手机");//不能辨别的,默认为安卓手机
    		}
        </script>  
    【项目感悟】
        1.全局认识是第一位。拿到一个页面,首先要考虑的就是应该把这个界面分为多少个部分。这样才会使得整体布局不会乱。
    2.精益求精。做一个页面,花的时间真的很多,因为UI是个特别细致的工作,他们的要求很高,也许我们开发人员觉得页面已经做的很好,但他们也会觉得有很多不完美的地方。
    3.前端基础知识积累。这一次,在调试整个前端的时候,对以前不熟悉的前台样式属性更加熟悉了,同时,也接触到了很多之前没有接触过的样式设置。
    4.勇于尝试,快速进入状态。刚接触一个新东西的时候,难免会觉得陌生,如何快速进入工作状态,也是对自己的一个考验。我们只有敢于尝试,快速迈出第一步,才会让自己更快地找到得心应手的感觉。
    展开全文
  • 微信支付有好几种情况,扫码支付、app支付、公众号内支付、html5支付、小程序支付、刷卡支付。 1.不管选择哪一种支付方式,客户端都要求用户是安装了微信的,如果没有安装微信,就没法完成支付,这点和支付宝支付略...

    微信支付有好几种情况,扫码支付、app支付、公众号内支付、html5支付、小程序支付、刷卡支付。

    1.不管选择哪一种支付方式,客户端都要求用户是安装了微信的,如果没有安装微信,就没法完成支付,这点和支付宝支付略有不同。

    2.公众号内支付和小程序支付这个都是在嵌入在微信内部的。

    插一句题外话,小程序的开发要求你一定要有一个支持https请求的域名服务器,并且支持TLS1.2,想知道自己的网站是否支持TLS1.2,请移步 https://www.ssllabs.com/ssltest/index.html 进行查询 。一般情况下,如果使用tomcat的话,至少tomcat7+配合jdk1.7+ 的环境版本才能支持TLS1.2.

    3.app支付就是直接在app内部调起微信支付完成支付

    4.html5支付是只在微信浏览器之外的任何其他浏览器中直接调起微信支付,要集成html5支付,前提是你一定要有一个通过icp备案的域名。

    app中已经集成了支付宝支付,采用的是html支付的方式,所以微信支付也采用html5支付方式,保持一致。这样将支付以及退款功能几乎全部集中在后端以及html,同原生代码的开发区分开来。

    这里稍微说一下支付宝支付的接入。

    我个人感觉支付宝支付的接入对于开发者来说,更简单,更容易接入。支付宝提供的接口,包装的非常完善,整个支付页面都会给你包裹好, 你只需要按照接口规范,请求他的接口,将返回的内容写入到页面中返回给前端即可,不用你自己再去写页面。同时包括返回的url设置以及通知的url设置,都是有专门的方法可以进行传参设置。但是相比之下,微信支付这方面就稍微繁琐一点。尤其的返回后的url设置感觉不是特别的友好方便。但是总体来说,文档说明都还是很清楚,按照文档来,也很容易的接入成功。

     

    一、前提:

             想接入微信支付,你至少得申请一个微信公众号,同时开通微信支付的功能,然后微信支付相关的设置是到微信商户平台去设置的,这个没什么好摆的,人微信的平台做的还是很完善,一般人都能看得明白。

    申请好微信支付之后,记得要开通html5支付的权限,这个权限的申请是在微信商户平台申请的,一般需要2到3天的时间。申请成功之后设置回调域名,这个很重要,一定要设置html5的回调域名,后面有用。

    这里也插一句题外话:

    关于微信商户平台各种用户角色的登录及使用。默认的管理员用户就是你申请微信支付时候提交上去的那个用户,微信现在都要求实名制了,所以登录微信商户平台的时候,拿申请人的微信扫一波直接登录就行了,什么?你说申请人不用微信,那你还搞毛线微信支付啊。

    如果想新增其他的管理员或者其他角色的人,可以在商户平台里直接新增,届时其他人拿手机扫描登录即可,第一次登录的时候会提交申请给管理员,管理员通过后,后续就可以自己扫码登录了。

    他这个多角色用户登录主要是针对运维的,对于码农的我来说,设置相关参数之类的,还是必须使用管理员角色登录才行。

     

    二、流程概括

    微信html5支付的基本流程不是很复杂,微信支付的官方文档有一个很详细的流程图,结合我自己的使用场景,我总结了下,大概概括如下:

    • 1.客户端请求后端的接口,入参包括订单号和订单金额
    • 2.后端接口根据微信官方文档的要求,组装各种需要的参数,然后请求微信的交统一下单接口
    • 3.统一下单接口会返回一个mweb_url的出参。ps:这玩意很重要,全靠它调起微信支付的,这个mweb_url可以再拼接一个redirect_url,用来指定支付操作完成后,页面跳转到哪里,不指定的话,默认是返回上一个页面,即:前面的立即支付的那个页面。
    • 4.将mweb_url复制给页面的立即支付按钮
    • 5.剩下的就交给浏览器和微信客户端了,用户点击立即支付,调起微信支付的客户端,进行支付即可

    以上就是支付的基本流程,虽说简单,但是里面有不少地方如果不小心,都很容易出错。

     

    三、下面说下几点注意事项

    1.微信支付相关接口的出参和入参都是xml格式

    这点和支付宝支付不同,要注意。

    2.支付或者退款金额的单位

    微信里是分,是按照分为单位的!!

    这点和支付宝是不一样的,我因为先接入的支付宝支付,再搞微信支付,在这里稍微停顿了下,提交微信接口的时候,一直报错,后来发现原来人微信要求金额的单位是分。

     

    3.关于客户端ip的获取

    微信支付中有一个安全的校验,在请求mweb_url调起微信支付的客户端的ip要和调用统一下单接口提交过去的spbill_create_ip参数一直,spbill_create_ip这个参数就是客户端的ip。关于这个服务器端获取客户端ip这个,我稍微遇到点坑,因为有些客户端可能有代理,所以通过常规的getRemoteAddr是取不到,例如部分华为手机会自己添加代理,你就是取不到正确ip。这里,提供一个相对完善的获取客户端真是ip的方法,如下:

    public static String getRemoteLoginUserIp(HttpServletRequest request)
    	{
    		String ip = request.getHeader("x-forwarded-for");
    		if (ip == null || ip.length() == 0 || "unknown".equalsIgnoreCase(ip))
    		{
    			ip = request.getHeader("Proxy-Client-IP");
    		}
    		if (ip == null || ip.length() == 0 || "unknown".equalsIgnoreCase(ip))
    		{
    			ip = request.getHeader("WL-Proxy-Client-IP");
    		}
    		if (ip == null || ip.length() == 0 || "unknown".equalsIgnoreCase(ip))
    		{
    			ip = request.getHeader("HTTP_CLIENT_IP");
    		}
    		if (ip == null || ip.length() == 0 || "unknown".equalsIgnoreCase(ip))
    		{
    			ip = request.getHeader("HTTP_X_FORWARDED_FOR");
    		}
    		if (ip == null || ip.length() == 0 || "unknown".equalsIgnoreCase(ip))
    		{
    			ip = request.getRemoteAddr();
    		}
    		System.out.println("THE REAL IPS IS:"+ip);
    		if (ip != null && ip.length() > 15)
    		{   
    			if (ip.indexOf(",") > 0)
    			{
    				ip = ip.substring(0, ip.indexOf(","));
    			}
    		}
    		return ip;
    	}


    方法在生产环境中已验证测试过,路过的大大们可以放心使用。

     

    4.签名的问题

    一般情况,首次集成都容易有签名对不上的问题,从而调用统一下单接口总是报错,关于这个,其实人官方的文档已经说得很明白了,生成sign的拼装的一个个串是有先后顺序的,也就说,他是按照入参参数名的首字母进行排序的,有了正确的顺序,再按照规则加密生成即可。

    这里提供一个我使用的生成sign的方法,如下:

    public static String createSign(String characterEncoding, HashMap<String, Object> parameters)
    	{
    		StringBuffer sb = new StringBuffer();
    		Object[] key_arr = parameters.keySet().toArray();
    		Arrays.sort(key_arr);//这个是重点,这一句不能少,要排序
    		for (Object key : key_arr)
    		{
    			Object value = parameters.get(key);
    			if (null != value && !"".equals(value) && !"sign".equals(key) && !"key".equals(key))
    			{
    				sb.append(key + "=" + value + "&");
    			}
    		}
    		sb.append("key=" + WeiChatPayService.key);//最后加密时添加商户密钥,由于key值放在最后,所以不用添加到SortMap里面去,单独处理,编码方式采用UTF-8
    		String sign = MD5Util.MD5Encode(sb.toString(), characterEncoding).toUpperCase();
    		return sign;
    	}

    上面代码经过生产测试,路过的大大可以放心使用。

     

    5.关于redirect_url

    说到这个,要插一句,说一下支付宝支付关于return_url的不同,支付宝支付的提供了两个方法setNotify_url和setReturn_url,其中setReturn_url和redirect_url的作用很类似。都是支付操作完成之后,页面跳转到哪里。支付宝在请求的时候通过方法直接设置即可。

    但是微信略不一样,微信设置这个redirect_url是在统一下单接口出参得到mweb_url之后,对这个mweb_url进行拼接处理,在后面添加 &redirect_url=xxx的方式实现的,这个redirect_url的url串要进行urlencode操作。

     

    6.Android的webview请求mweb_url时候出错问题

    关于这个,出现两种错误情况

    第一种、不处理setWebViewClient的shouldOverrideUrlLoading方法

    这时候,在点击自己页面中的“立即支付”按钮,即请求mweb_url的时候,webview会直接跳转到错误页面,提示找不到weixin://wap/pay....这样的连接。

    第二种、不处理setWebViewClient的shouldOverrideUrlLoading方法

    shouldOverrideUrlLoading方法里,return true。这时候,当点击自己页面中“立即支付”按钮即请求mweb_url的时候,就会提示“网络环境未能通过安全验证,请稍后重试”这样的提示,根据微信支付官方的问题,这个出现这个提示说明,微信支付接口获取到客户端的ip和请求统一下单接口送过去的ip不一致。

    针对上面两种情况,首先,肯定要重新处理shouldOverrideUrlLoading方法的。其次,合理的代码如下所示:

    @Override
    			public boolean shouldOverrideUrlLoading(WebView view, String url)
    			{
    				// 如下方案可在非微信内部WebView的H5页面中调出微信支付  
    				if (url.startsWith("weixin://wap/pay?"))
    				{
    					try
    					{
    						Intent intent = new Intent();
    						intent.setAction(Intent.ACTION_VIEW);
    						intent.setData(Uri.parse(url));
    						startActivity(intent);
    						return true;
    					}
    					catch (ActivityNotFoundException e)
    					{
    						Toast.makeText(MainActivity.this, "请安装最新微信", Toast.LENGTH_LONG).show();
    					}
    				}
    				return false;
    			}


    乍一看这段代码没什么特别,但是关键问题在return true还是return false。

    如果返回false,则是默认走webview的处理,返回ture的话,就是不走webview的默认处理,而是自己处理。

    之前在这一点一直没有理解太清楚,以至于根本就无法拦截到 weixin://wap/pay这样的url请求,所以一直无法起微信支付。

    顺便说一下,在webview中直接调用其他应用,是必须使用Intent的,所以,这里是必须这样处理。

    这也解释了为何通过手机自带浏览器可以顺利起微信支付,但是通过自己app内部的webview就一直不行的原因。还是在于没有处理好shouldOverrideUrlLoading函数中的代码。

     

    7.关于原路返回退款

    这个也是一个坑之一,看了文档,本以为这个会很简单,直接请求微信的接口即可,使用之前支付时候写好的http请求直接做,但是一直不行,一直报错。后来查了下发现,微信的退款是双向证书认证,也就是说,你必须使用https请求并且把证书带上去,证书到微信商户平台里下载即可。具体的使用,可以移步这里,  这位大大写的非常的好。我也验证通过了。

     

     

     

    展开全文
  • HTML5是一种技术,依附的外壳是是浏览器,而小程序是基于微信的一种不需要下载安装即可使用的应用。 下面从“前端开发”的视角来看,微信小程序和HTML5也存在着多方面的不同。概括来说有以下四个方面的区别! 第一...

    HTML英文全称为Hyper Text Markup Language,即超文本标记语言。HTML5是一种技术,依附的外壳是是浏览器,而小程序是基于微信的一种不需要下载安装即可使用的应用。

    下面从“前端开发”的视角来看,微信小程序和HTML5也存在着多方面的不同。概括来说有以下四个方面的区别!
    在这里插入图片描述
    第一条、运行环境的不同

    传统的HTML5的运行环境是浏览器,包括webview,而微信小程序的运行环境并非完整的浏览器。大家注意,我这里写的是“非完整的浏览器”,有以下几个原因:

    小程序的开发过程中会用到HTML5相关的技术(并非全部)。

    小程序最后的发布上线需要微信审核,微信在不更新自身软件的情况下可以将小程序更新到自身软件内,这就联想到了ReactNative框架。并且已经有开发者在微信小程序的开发工具源码中发现使用了react和NodeWebkit库。

    官方文档中着重强调了脚本内是无法使用浏览器中常用的window对象和document对象(基于这一点,像zepto/jQuery这种操作dom的库就被完全抛弃了)。

    所以我认为,小程序的运行环境很有可能是微信开发团队基于浏览器内核完全重构的一个内置解析器,针对小程序专门做了优化,配合自己定义的开发语言标准,提升了小程序的性能。

    不过由于微信给开发者提供了开发工具,而开发工具中也内置了编程、调试、开发环境、发布于一身,我们也不用再探讨它的最终运行环境了,只要按照官方文档进行开发就可以了。并且从微信团队给开发者提供开发工具这一举动,让我联想到了苹果给开发者提供的X-CODE开发工具,可以想象微信的“野心”可见一斑

    第二条、开发成本的不同

    这里我提出了一个问题,当我们面对一个HTML5web开发需求时,我们需要考虑什么呢?

    抛去开发工具(vscode、sublimtext、Atom等)不谈,大到前端框架(Angular、react、vue、backbone等)、模块管理工具(Webpack 、Browserify 等)、任务管理工具(Grunt、Gulp等),小到UI库选择、接口调用工具(ajax、Fetch Api等)、浏览器兼容性等都要我们一一考略,再不济用jqery插件写H5,也要在开发过程中去寻找合适的jquery插件来配合项目。

    尽管这些工具可定制化非常高,并且提高了开发者的开发效率。但小编相信项目开发的配置工作已经消耗了不少精力,尽管大部分开发者都有自己的配置模板。长久以来对于项目中使用的各种外部库的版本迭代、版本升级所产生的成本应该也不低。

    而当我们面对一个微信小程序的开发需求时,我们需要考虑什么呢?微信团队提供了开发者工具,并且规范了开发标准,前端常见的HTML、CSS变成了微信自定义的WXML、WXSS,WXML中尽管全部是自定义标签,但官方文档中都有明确的使用介绍,相信上手应该是非常容易的;WXSS、JSON和js文件中的写法稍有限制,但整体相差不多。在统一了这些标准之后,作为一个开发者,你会发现,自己只要专注写程序就可以了:

    • 当需要调用后端接口时,调用发起请求API;

    • 当需要上传下载时,调用上传下载API;

    • 当需要数据缓存时,调用本地存储API;

    • 引入地图、使用罗盘、调用支付、调用扫码等等功能都可以直接使用;

    • UI库方面,框架自然带有自家weui库加成;

    并且在使用这些API时,你不用再去顾虑浏览器兼容性,不用担心生产环境中出现不可预料的奇妙BUG,可见微信小程序的开发成本确实相比以往的web开发低很多。
    在这里插入图片描述
    第三条、获取系统级权限的不同

    微信小程序相对于HTML5 web应用能获得更多的系统权限,比如网络通信状态、数据缓存能力等,这些系统级权限都可以和微信小程序无缝衔接,也就是官方宣称的拥有Native App的流畅性能,而这一点恰巧是HTML5 web应用经常被诟病的地方,这也是HTML5的大多应用场景被定位在业务逻辑简单、功能单一的原因。

    第四条、应用在生产环境的运行流畅度

    最容易区分小程序与H5的一点, 打开H5,实际上是打开一个网页,而网页需要在浏览器中渲染,面对复杂的业务逻辑或者丰富的页面交互时页面会卡顿。

    而微信小程序,直接在微信上运行,省去了通过浏览器渲染的步骤,因此,在微信中使用小程序,才会比H5流畅很多。除了首次打开需要几秒的加载时间外,小程序各个页面的切换、跳转等体验已经媲美原生App,非常顺畅。

    小程序不能跳转外部链接,H5没有限制。

    概括来说、小程序相对H5有着开发成本低、功能更丰富、用户体验更佳的优点。(缺点:微信做了很多限制,很多东西不能自定义)

    以上就是我总结的微信小程序跟HTML5的区别。微信现在月活9亿,特别是微信推出大众号今后,微信的月活也大幅上升,这就为微信小程序带了十分便利的入口。以9亿为基数,奠定了微信小程序的根底。

    微信小程序不是HTML5,它是根据微信的独立的开发模式,能过节约人们的开发本钱与开发周期。当然,现在小程序也不能彻底替代APP,今后的发展怎么样,欢迎持续关注我吧!

    展开全文
  • 2015-11-9 08:40 目前,HTML5手机wap网站、微信公众号、APP这三种...下面我们来一起看看Html5 手机wap开发、微信开发、APP开发的优缺点,这些都是APP创业者和app从业者必须了解的移动产品开发运营常识。

    2015-11-9 08:40

    目前,HTML5手机wap网站、微信公众号、APP这三种载体都越来越火了,而且三者都有各自的一些优势和劣势。

    对于有条件来说的公司,基本这3项都会涉及。而且重点配合发力来运营这些产品。

    下面我们来一起看看Html5 手机wap开发、微信开发、APP开发的优缺点,这些都是APP创业者和app从业者必须了解的移动产品开发运营常识。

    APP创业者 H5页面设计 微信开发 APP开发

    微信公众号开发

    优势:开发技术简单,研发周期短,微信可以带来流量和用户。

    微信的跨平台特性较好,不用考虑用户使用什么系统的手机,用户使用的培养成本低,时效性高、易传播、开发成本较低。

    劣势:功能受限,与此同时在长期运营角度存在2大弊端

    “1、效果递减”,微信公众号的推送功能基本被用户习惯性忽略,起不到提醒作用,同时因微信公众号的泛滥,让用户朋友圈变成“广告圈”,大部分微信公众号在2015年进行的微信推广效果相比2014年已经出现递减效应。

    “2、入口过深”,微信公众号的入口寻找比APP要多3层操作,因此用户重复使用情况相对而言不够理想,入口在微信里成了优势也变成了极大的弱势。

    适合场景:“低频使用业务”和“做广告”这两种业务需求在微信平台更适合落地。用户在微信中更容易“被动的访问公众账号信息(包括HTML5页面)”,随机性的看到了分享的广告等链接,用户可能会打开访问。

    因此类似于家电维修这种低频使用业务以及活动宣传可以借助微信快速落地。


    HTML5手机网站

    优势:开发技术简单,研发周期短,用户接触成本低

    HTML5手机网站的优势是兼容性好,用HTML5的技术开发出来的应用在各个平台都适用,且可以在网页上直接进行调试和修改,开发和维护的成本较低,开发周期较短。

    劣势:功能实现相比APP存在差距,用户重复使用难度大,用户粘性差

    适合场景:把手机网站当成网络上的“电子产品介绍手册”。手机网站更适合用户“主动百度搜索”或者“主动访问”,适合于陌生用户的低频或初次访问,让用户更完整和详细的获得快速介绍。通常用户使用搜索引擎、手动输入网址等形式进行访问。

    H5不足的地方表现在软件运行速度容易受网络影响,对于摄像头、陀螺仪等硬件支持较差,开发出来的应用性能较差,不适合处理较复杂的逻辑等等。

    APP创业者 H5页面设计 微信开发 APP开发



    移动原生APP

    优势:功能全面适合满足所有创新,用户使用习惯成熟,用户粘性好

    劣势:开发周期较长、开发成本高、维护难度高

    适合场景:希望用户重复访问和使用的业务(高频使用业务更加适合),体验和功能要求高的移动业务,以及IoT智能家居可穿戴等硬件配合业务。


    3者优缺点信息图表整理如下:

    APP创业者 H5页面设计 微信开发 APP开发


    最后,从推广运营的角度来说。APP推广成本高这是众所周知的难题,尽管HTML5、微信等获得用户访问(Reach)更加容易和低成本,但是真实有粘性的用户获取成本或许比APP要高的多。

    只有当这3者之间合理运营和配合才能取得不错的成绩。


    最后总结,借力微信服务号和H5技术可以做三类原生工具APP,


    第一类是低频O2O服务类,

    第二类是以某个公众号为核心的垂直社交,

    第三类是“推送”逻辑的原生工具APP


    如果你是一名重度极客,只想给用户最好的体验,给到客户一个性能更高、扩展性更优的产品,那么就必须开发一款优秀的APP。

    当然也可以采取目前最火和最合理的方式来进行创业。将原生APP代码和H5相融合的方式,使得产品在性能和用户体验上都取得更优的表现。

    展开全文
  • 微信H5开发(二)

    千次阅读 2018-07-15 10:45:14
    第一次使用微信开发文档的时候,感觉文档里面写的内容不算太难,但在实际开发中碰到很多预想不到的问题。 微信开放平台、微信商务平台 有什么用?都在哪里用? 首先从微信公众号讲起,期间用到微信商务平台和...
  • 第一篇 微信商城 开发前的准备工作

    万次阅读 多人点赞 2014-05-11 14:14:04
    随着腾讯微信公众平台号的开放,围绕着微信的各种开发和营销如火如荼。很多商家也开始在微信上做文章,想充分利用微信平台4亿多的粉丝群体来进行各种营销和推广。这直接带来了很多公司开始做微信第3方营销平台,而...
  • 微信html5开发

    千次阅读 2017-07-03 13:19:17
    日常生活中,我们经常使用微信,在微信中我们常常看到一些转载内容是动态的还有音乐。你是否还不会这种操作呢,这种操作只需要简单的html5就可以shi'xian
  • 前端微信h5开发

    千次阅读 2019-02-11 15:28:40
    需要获取微信用户头像、性别、昵称需要获取微信用户头像、性别、昵称 测试结果需要生成图片,用户可直接长按保存图片 分享 首先说下前两点: 申请公众号(需要公众平台的账号密码) 需要注册成为当前该...
  • 微信开发之通过代理调试本地项目

    万次阅读 2016-01-12 11:00:33
    一、背景:微信开发其实跟web开发并没有太大的分别,在我们进行微信开发的时候,需要调用微信接口的时候(比如获取地理位置,上传图片,拍照等),肯定是需要在微信上操作的,而这时候我们的项目还没有部署到生产上...
  • 微信H5手机网页开发—快速入门

    万次阅读 多人点赞 2016-08-24 12:26:19
    随着微信(WeChat)的盛行,一个流行的开发工作也随之诞生——微信公众号开发,而其中最主要的部分,当属微信H5网页开发。  虽然网页开发大家并不陌生,但层出不穷的手机型号,导致了微信网页开发中遇到的最难的问题...
  • 微信开发】-HTML5页面直接调用百度地图API,获取当前位置,直接导航目的地 HTML5页面直接调用百度地图API,获取当前位置,直接导航目的地  我是应用在微信中,自定义菜单,菜单直接链接到这个HTML5页面,获取当前...
  • 零基础入门微信小程序开发

    万次阅读 多人点赞 2019-07-16 13:27:41
    本课程是一个系列入门教程,目标是从 0 开始带领读者上手实战,课程以微信小程序的核心概念作为主线,介绍配置文件、页面样式文件、JavaScript 的基本知识并以指南针为例对基本知识进行扩展,另外加上开发工具的安装...
  • 微信开发实战(1)—申请测试号

    万次阅读 2016-10-26 23:06:12
    最近微信发布了微信小程序内侧,各位程序员们是不是...本系列实战文章为大家介绍微信开发的相关知识,包括公众号申请、接口开发等。并为程序员们提供微信开发开源代码。后期也出一些教学视频,和大家一起交流学习。
  • 微信小游戏开发入门(一)-基础知识

    万次阅读 2018-01-17 08:26:29
    技术简介 微信小游戏是在微信小程序的基础上添加了游戏库 API。小游戏只能运行在小程序环境中,所以小游戏既不是原生游戏,也不完全等同于 HTML5 ...可以说小游戏是使用 HTML5 技术搭建,具有原生体验的微信内游戏产
  • 微信开发-ngrok内网穿透部署

    万次阅读 2017-05-03 09:16:24
    由于要接入微信公众号,查看了官网上的接入文档,必需是80端口而且微信服务器需要验证token,那我本地开发不可能每次都把源码上传到服务器上吧,而且也不方便,这就需要能内网穿透的工具,能让外网通过外网域名访问...
  • 微信H5支付功能开发

    千次阅读 2019-06-28 10:44:03
    本文介绍的是微信H5支付功能开发,也就是在微信之外的H5页面支付。 首先我们需要先看微信的官方文档https://pay.weixin.qq.com/wiki/doc/api/H5.php?chapter=15_1,这里面几乎介绍了全部流程了。等你了解大概流程...
  • 微信公众号开发系列-获取微信OpenID

    万次阅读 多人点赞 2015-05-21 22:51:30
    微信开发时候在做消息接口交互的时候需要使用带微信加密ID(OpenId),下面讲讲述2中类型方式获取微信OpenID,接收事件推送方式和网页授权获取用户基本信息方式获取。
  • 仿微信Html5

    千次阅读 2018-05-07 09:26:26
    h5仿微信支付、支付宝支付输入法键盘 | 带微信红包、表情、编辑器、微信支付键盘鉴于移动端h5聊天场景应用很广泛,最近利用空余时间开发了一个h5仿微信聊天功能项目,使用了html5+css3+jQ+zepto+weui+wcPop+swiper...
  • .net C#微信公众号开发

    千次阅读 2020-06-17 16:32:09
    .net C#微信公众号开发 #一、开发准备工作 打开微信公众平台,主页左侧找到 “开发”栏目,选择基本配置,获取AppId,appsecret。 开发者密码需要管理员授权查看。 二、服务器配置 1、主页左侧找到 “开发”...
  • 做任何程序开发要首先找到其官方文档,我们先来看看其有哪些官方文档。 微信小程序开发文档链接为:https://mp.weixin.qq.com/debug/wxadoc/dev/index.html,如下图: 这里就是做微信小程序开发的全部官方文档。...
1 2 3 4 5 ... 20
收藏数 126,618
精华内容 50,647
关键字:

微信开发需要会html5