微信页面_微信页面代码 - CSDN
  • 微信公众号内嵌的H5页面

    万次阅读 2020-04-08 15:02:22
    前言:之前写微信端购物商城的页面时,使用过flex布局,方便灵活,对手机端兼容性良好,同时可应对复杂的嵌套布局,很是方便。但是,针对两栏式的微信页面,除了flex布局,还有较为简单的position:relative;和...

        前言:之前写微信端购物商城的页面时,使用过flex布局,方便灵活,对手机端兼容性良好,同时可应对复杂的嵌套布局,很是方便。但是,针对两栏式的微信端页面,除了flex布局,还有较为简单的position:relative;和padding-left:90px;布局方法,这类布局简单易操作,在某些场景下有广泛使用。

    一、了解需求及实例

          页面布局如下图所示:

          ①页面整体布局为底部菜单栏固定,主体内容滑动显示;②展示信息为左右两栏式,右侧展示信息中,价格标签突出居中显示;③在不同屏幕尺寸下,左侧图片尺寸固定不变,右侧文字信息可自适应(页面尺寸统一采用px单位,不涉及不同尺寸下字体等尺寸变化)。

    二、实际代码运用及拆分

          (1)页面整体布局

    <html lang="zh">
    <head>
    </head>
    <body>
        <!--页面头部标题栏-->
        <div class="am-header"></div>
        <!--页面主体部分-->
        <div id="main" class="page">
            <!--页面中间信息展示-->
            <div class="am-widthLimite"></div>
            <!--页面尾部菜单栏-->
            <div class="botFilter"></div>
        </div>
    </body>
    </html>
    .am-header {
        background: #ff4d4d;
        box-shadow: rgba(0,0,0,.13) 1px 1px 3px;
        height: 44px;
        position: relative;
        z-index: 1;
    }
    #main {
        position: relative;
        height: 100%;
    }
    .am-widthLimite {
        margin: 0 auto;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background: #fff;
    }
    .botFilter {
        position: fixed;  /*使用position:fixed固定位置*/
        width: 100%;
        background-color: #f4f4f4;
        opacity: .94;
        z-index: 102;
        bottom: 0;      /*使菜单栏固定在屏幕底部*/
        left: 0;
        border-top: 1px solid #d4d4d4;
    }

        (2)页面中间信息展示的布局:

          ①左侧图片使用固定尺寸,右侧信息描述使用padding-left:92px留出间隙,位于右侧,使用width:100%;以适应不同屏幕下都能铺满;②最右侧突出悬浮的价格,通过position:absolute相对于父元素定位,使用top:50%在div中居中。

    <html lang="zh">
    <head>
    </head>
    <body>
        <!--页面头部标题栏-->
        <div class="am-header"></div>
        <!--页面主体部分-->
        <div id="main" class="page">
            <!--页面中间信息展示-->
            <div class="am-widthLimite">
                <div class="hotel_list_box">
                    <div class="hotel_list_box">
                        <ul class="hotel_list_ul">
                            <li style="background-color:#fff;">
                                <div class="hl_pic">
                                    <img src="images/2.jpg">
                                </div>
                                <div class="hl_text">
                                    <div class="hl_tl_left">
                                        <div class="hl_name fs17 fc666">紫光物联智慧酒店</div> 
                                        <div class="hl_comment fs13 fc999">
                                            <span class="fcred">
                                                <i class="integer">2</i>
                                                <i>.</i>
                                                <i class="decimal">6</i>
                                                <i class="ml5">分</i>
                                            </span>
                                            <span>15人点评</span>
                                        </div>
                                        <div class="hl_icons">
                                            <span class="icon_small wifi"></span>
                                            <span class="icon_small huiyishi></span>
                                        </div>
                                        <div class="hl_distance fs12 fc999">
                                          距
                                          <span class="fcblue hl_address">您</span>
                                          <span>0.5公里</span>
                                        </div>
                                    </div>
                                    <div class="hl_tl_right fs12 fc333">
                                       <span>
                                         <i>¥</i>
                                         <i class="fs20 fwb">298</i>
                                         <i>起</i>
                                       </span>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <!--页面尾部菜单栏-->
            <div class="botFilter"></div>
        </div>
    </body>
    </html>
    .hotel_list_box {
        padding: 0px 10px 50px 10px;
    }
    ul {
        padding: 0;
        margin: 0;
    }
    li {
        list-style: none;
    }
    .hotel_list_ul li {
        border-bottom: 1px solid #dedede;
        position: relative;
        padding: 10px 0;
    }
    .hotel_list_ul li .hl_pic {
        position: absolute;  /*固定图片的位置*/
        width: 82px;
        height: 82px;
    }
    .hotel_list_ul li .hl_pic img {
        width: 82px;
        height: 82px;
    }
    .hotel_list_ul li .hl_text {
        padding-left: 92px;
        position: relative;
        height: 82px;
    }
    .hl_tl_left {
        width: 100%;  /*文字信息达到自适应屏幕*/
    }
    .hl_name {
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 18px;
        height: 18px;
    }
    .hl_comment {
        line-height: 1.5;
        height: 28px;
    }
    .fs13 {
        font-size: 13px !important;
    }
    .fs20 {
        font-size: 20px !important;
    }
    .fc999 {
        color: #999 !important;
    }
    .fcred {
        color: #fe4d4d !important;
    }
    .fcblue {
        color: #70a7e8 !important;
    }
    .fwb {
        font-weight: bold !important;
    }
    .integer {
        font-size: 19px;
        font-style: italic;
        font-weight: 600;
    }
    .decimal {
        font-size: 12px;
        font-style: italic;
        font-weight: 600;
        margin-left: -6px;
    }
    .ml5 {
        margin-left: 5px !important;
    }
    .hl_icons {
        line-height: 1;
        margin-bottom: 3px;
        height: 18px;
    }
    .hl_icons .icon_smalll {
        margin-right: 4px;
        display: inline-block;
        width: 16px;
        height: 16px;
        background: url(../images/wx_icon_small_default.png) no-repeat center center;
        background-size: 16px 421px;
        vertical-align: middle;
    }
    .wifi {
        background-position: 0px 0px;
    }
    .hl_distance {
        margin-top: 5px;
        height: 15px;
    }
    .hl_address {
        display: inline-block;
        max-width: 60px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        vertical-align: bottom;
    }
    .hl_tl_right {
        position: absolute;  /*使用absolute依据父元素进行定位*/
        right: 0;
        top: 50%;           /*使用top:50%使文字达到居中效果*/
        margin-top: -12px;
    }

    三、展示页面完整代码

    <html lang="zh">
    <head>
    <meta charset="UTF-8">
    <meta name="format-detection" content="telephone=no">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta content="telephone=no" name="format-detection">
    <link href="css/main.css" rel="stylesheet">
    <link href="css/common.css" rel="stylesheet">
    <title>互联网+智慧酒店</title>	
    </head>
    <body>
        <div class="am-header">
        	<div class="btn am-backbuttton">
        	     <i class="left"></i>
        	</div>
        	<div class="rightBut">
        	     <div class="am_ckls btn right">
        		<a class="ng-binding">地图模式</a>
        	     </div>
        	</div>
        	<p class="ng-binding">酒店列表</p>
        </div>   
        <!--ngView-->
        <div id="main" class="page">
        	<div class="am-widthLimite">
        	     <div class="hotel_list_box">
        		  <ul class="hotel_list_ul">
        		      <li style="background-color:#fff;">
        			  <div class="hl_pic">
        			       <img src="images/2_20160706201805.jpg">
        			  </div>
        			  <div class="hl_text">
        			       <div class="hl_tl_left">
        				    <div class="hl_name fs17 fc666">紫光物联智慧酒店</div>
        				    <div class="hl_comment fs13 fc999">
        					 <span class="fcred">
        					       <i class="integer">2</i>
        					       <i>.</i>
        					       <i class="decimal">6</i>
        									<i class="ml5">分</i>
        					</span>
        					<span>15人点评</span>
        				    </div>
        				    <div class="hl_icons">
        					<span class="icon_small wifi"></span>
        					<span class="icon_small tingchechang"></span>
        					<span class="icon_small huiyishi"></span>
        					<span class="icon_small jiejifuwu"></span>
        					<span class="icon_small chuifengji"></span>
        				    </div>
        				    <div class="hl_distance fs12 fc999">
        				        距
        					<span class="fcblue hl_address">您</span>
        					<span>0.5公里</span>
        				    </div>
        				</div>
        				<div class="hl_tl_right fs12 fc333">
        				    <span>
        				    <i>¥</i>
        				    <i class="fs20 fwb">298</i>
        				    <i>起</i>
        				    </span>
        				</div>
        			</div>
        		</li>
        		<li style="background-color:#fff;">
        		    <div class="hl_pic">
        			 <img src="images/2.jpg">
        		    </div>
        		    <div class="hl_text">
        			<div class="hl_tl_left">
        			     <div class="hl_name fs17 fc666">浦东国际酒店</div>
        				  <div class="hl_comment fs13 fc999">
        				      <span class="fcred">
        					    <i class="integer">2</i>
        					    <i>.</i>
        					    <i class="decimal">6</i>
        					    <i class="ml5">分</i>
        				      </span>
        				      <span>5人点评</span>
        				   </div>
        				   <div class="hl_icons">
        					<span class="icon_small wifi"></span>
        					<span class="icon_small tingchechang"></span>
        					<span class="icon_small huiyishi"></span>
        				    </div>
        				    <div class="hl_distance fs12 fc999">
        					距
        					<span class="fcblue hl_address">您</span>
        					<span>2.1公里</span>
        				    </div>
        				</div>
        				<div class="hl_tl_right fs12 fc333">
        				     <span>
        					<i>¥</i>
        					<i class="fs20 fwb">0</i>
        					<i>起</i>
        				     </span>
        				</div>
        			</div>
        		</li>
        		<li style="background-color:#fff;">
        		    <div class="hl_pic">
        			<img src="images/sy_62331342149_20160520163223.jpg">
        		    </div>
        		    <div class="hl_text">
        			<div class="hl_tl_left">
        			     <div class="hl_name fs17 fc666">闵行大酒店</div>
        			     <div class="hl_comment fs13 fc999">
        				  <span class="fcred">
        					<i class="integer">2</i>
        					<i>.</i>
        					<i class="decimal">6</i>
        					<i class="ml5">分</i>
        				   </span>
        				   <span>50人点评</span>
        			     </div>
        			     <div class="hl_icons">
        				  <span class="icon_small wifi"></span>
        				  <span class="icon_small canyin"></span>
        				  <span class="icon_small chuifengji"></span>
        				  <span class="icon_small huiyishi"></span>
        				  <span class="icon_small jiejifuwu"></span>
        				  <span class="icon_small tingchechang"></span>
        			     </div>
        			     <div class="hl_distance fs12 fc999">
        				距
        				<span class="fcblue hl_address">您</span>
        				<span>4.1公里</span>
        			     </div>
        			</div>
        			<div class="hl_tl_right fs12 fc333">
        			     <span>
        				<i>¥</i>
        				<i class="fs20 fwb">99</i>
        				<i>起</i>
        			     </span>
        			</div>
        		</div>
        	  </li>
        	  <li style="background-color:#fff;">
        	      <div class="hl_pic">
        		   <img src="images/timg_20170428173649.jpg">
        	      </div>
        	      <div class="hl_text">
        		   <div class="hl_tl_left">
        			<div class="hl_name fs17 fc666">果加门锁测试店</div>
        			<div class="hl_comment fs13 fc999">
        			     <span class="fcred">
        				   <i class="integer">2</i>
        				   <i>.</i>
        				   <i class="decimal">6</i>
        				   <i class="ml5">分</i>
        			     </span>
        			     <span>5人点评</span>
        			 </div>
        			 <div class="hl_icons">
        			      <span class="icon_small wifi"></span>
        			      <span class="icon_small chuifengji"></span>
        			      <span class="icon_small huiyishi"></span>
        			 </div>
        			 <div class="hl_distance fs12 fc999">
        			      距
        			     <span class="fcblue hl_address">您</span>
        			     <span>2.1公里</span>
        			 </div>
        		</div>
        		<div class="hl_tl_right fs12 fc333">
        		     <span>
        			<i>¥</i>
        		        <i class="fs20 fwb">0</i>
        			<i>起</i>
        		     </span>
        		</div>
        	</div>
        </li>
        <li style="background-color:#fff;">
        	<div class="hl_pic">
        	     <img src="images/2.jpg">
        	</div>
        	<div class="hl_text">
        	     <div class="hl_tl_left">
        		  <div class="hl_name fs17 fc666">鹏恒太空舱专用店</div>
        		  <div class="hl_comment fs13 fc999">
        		  <span class="fcred">
        		        <i class="integer">3</i>
        		        <i>.</i>
        		        <i class="decimal">4</i>
        		        <i class="ml5">分</i>
        		  </span>
         		  <span>3人点评</span>
        	     </div>
        	     <div class="hl_icons">
          		  <span class="icon_small wifi"></span>
        		  <span class="icon_small jiejifuwu"></span>
        		  <span class="icon_small chuifengji"></span>
        	     </div>
        	     <div class="hl_distance fs12 fc999">
        		距
        		<span class="fcblue hl_address">您</span>
        		<span>14.8公里</span>
        	     </div>
        	</div>
        	<div class="hl_tl_right fs12 fc333">
        	     <span>
         		<i>¥</i>
        		<i class="fs20 fwb">300</i>
        		<i>起</i>
        	     </span>
        	</div>
        </div>
        </li>
        <li style="background-color:#fff;">
        	<div class="hl_pic">
        	    <img src="images/sy_62331342149_20160520163223.jpg">
        	</div>
         	<div class="hl_text">
        	    <div class="hl_tl_left">
         		<div class="hl_name fs17 fc666">安吉熙居酒店</div>
        		<div class="hl_comment fs13 fc999">
        		     <span class="fcred">
    			   <i class="integer">2</i>
        			   <i>.</i>
        			   <i class="decimal">6</i>
        			   <i class="ml5">分</i>
        		     </span>
         		     <span>145人点评</span>
         		</div>
                    <div class="hl_icons">
        		     <span class="icon_small chuifengji"></span>
        		     <span class="icon_small wifi"></span>
        		     <span class="icon_small tingchechang"></span>
        		     <span class="icon_small huiyishi"></span>
        		     <span class="icon_small jiejifuwu"></span>	
        		</div>
          		<div class="hl_distance fs12 fc999">
        		     距
     		    <span class="fcblue hl_address">您</span>
        		    <span>15.5公里</span>
         		</div>
        	</div>
        	<div class="hl_tl_right fs12 fc333">
         	     <span>
          	          <i>¥</i>
         		  <i class="fs20 fwb">1</i>
        		  <i>起</i>
         	    </span>
        	</div>
        					</div>
        				</li>
        			</ul>
        		</div>
        	</div>
        	<div class="botFilter">
        		<ul>
        			<li>
        				<p style="line-height: 15px;border-right: 1px solid #d1d1d1;">排序</p>
        			</li>
        			<li>
        				<p style="line-height: 15px;border-right: 1px solid #d1d1d1;">品牌</p>
        			</li>
        			<li>
        				<p style="line-height: 15px;">筛选</p>
        			</li>
        		</ul>
        	</div>
        </div>	
    </body>
    </html>
    @charset "UTF-8"
    article, aside, blockquote, body, button, code, dd, div, dl, dt, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, input, legend, li, menu, nav, ol, p, pre, section, td, textarea, th, ul {
        margin: 0;
        padding: 0;
        outline: 0;
    }
    * {
        margin: 0;
        padding: 0;
    }
    body {
        font-family: "黑体",Helvetica;
        font-size: 14px;
        background: #ffffff;
        color: #5c5c5c;
        overflow-x: hidden;
        min-height: 100%;
        margin: 0;
    }
    a {
       -webkit-touch-callout: none;
       text-decoration: none;
       outline: 0;
    }
    i {
       font-style: normal;
    }
    li {
       list-style: none;
    }
    fieldset,img {
       border: 0;
    }
    ul {
       padding: 0;
       margin: 0;
    }
    .fc333 {
       color: #333 !important;
    }
    .fc666 {
       color: #666 !important;
    }
    .fc999 {
       color: #999 !important;
    }
    .fs13 {
       font-size: 13px !important;
    }
    .fs17 {
       font-size: 17px !important;
    }
    .fs20 {
       font-size: 20px !important;
    }
    .fcred {
       color: #fe4d4d !important;
    }
    .fcblue {
       color: #70a7e8 !important;
    }
    .fwb {
       font-weight: bold !important;
    }
    .ml5 {
       margin-left: 5px !important;
    }
    
    /**header**/
    .am-header {
        background: #ff4d4d;
        box-shadow: rgba(0,0,0,.13) 1px 1px 3px;
        height: 44px;
        position: relative;
        z-index: 1;
    }
    .am-header .btn {
       min-width: 44px;
       height: 44px;
       position: absolute;
       top: 0;
       line-height: 44px;
       text-align: center;
       font-size: 18px;
       color: #ff5961;
    }
    .am-header .am-backbuttton i {
       display: block;
       margin: 12px auto;
       width: 13px;
       height: 20px;
       background: url(../images/hotel_icon.png) no-repeat center center;
       background-size: 400px 400px;
       background-position: -93px -105.2px;
    }
    .rightBut {
       top: 0;
       float: right;
       margin-right: 15px;
       width: 20%;
    }
    .am-heder .right {
       right: 0;
    }
    .am-header .right a {
       font-size: 16px;
       color: #fff;
       margin-right: 15px;
    }
    .am-header p {
       width: 50%;
       margin: 0 auto;
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
       text-align: center;
       height: 44px;
       line-height: 44px;
       font-size: 21px;
       color: #fff;
    }
    /**main**/
    #main {
       position: relative;
       height: 100%;
    }
    .am-widthLimite {
       margin: 0 auto;
       position: absolute;
       top: 0;
       left: 0;
       bottom: 0;
       right: 0;
       background: #fff;
    }
    .hotel_list_box {
       padding: 0px 10px 50px 10px;
    }
    .hotel_list_ul li {
       border-bottom: 1px solid #dedede;
       position: relative;
       padding: 10px 0;
    }
    .hotel_list_ul li .hl_pic {
       position: absolute;
       width: 82px;
       height: 82px;
    }
    .hotel_list_ul li .hl_pic img {
       width: 82px;
       height: 82px;
    }
    .hotel_list_ul li .hl_text {
       padding-left: 92px;
       position: relative;
       height: 82px;
    }
    .hl_tl_left {
       width: 100%;
    }
    .hl_name {
       display: block;
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
       line-height: 18px;
       height: 18px;
    }
    .hl_comment {
       line-height: 1.5;
       height: 28px;
    }
    .integer {
       font-size: 19px;
       font-style: italic;
       font-weight: 600;
    }
    .decimal {
       font-size: 12px;
       font-style: italic;
       font-weight: 600;
       margin-left: -6px;
    }
    .hl_icons {
       line-height: 1;
       margin-bottom: 3px;
       height: 18px;
    }
    .hl_icons .icon_small {
       margin-right: 4px;
    }
    .icon_small {
       display: inline-block;
       width: 16px;
       height: 16px;
       background: url(../images/wx_icon_small_default.png) no-repeat center center;
       background-size: 16px 421px;
       vertical-align: middle;
    }
    .wifi {
       background-position: 0px 0px;
    }
    .tingchechang {
       background-position: 0px -47.6px;
       height: 17px;
    }
    .huiyishi {
       background-position: 0px -129.6px;
    }
    .jiejifuwu {
       background-position: 0px -64.8px;
    }
    .chuifengji {
       background-position: 0px -356.6px;
       height: 15px;
    }
    .canyin {
       background-position: 0px -388.8px;
    }
    .hl_distance {
       margin-top: 5px;
       height: 15px;
    }
    .hl_address {
       display: inline-block;
       max-width: 60px;
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
       vertical-align: bottom;
    }
    .hl_tl_right {
       position: absolute;
       right: 0;
       top: 50%;
       margin-top: -12px;
    }
    /**footer**/
    .botFilter {
       position: fixed;
       width: 100%;
       background-color: #f4f4f4;
       opacity: .94;
       z-index: 102;
       bottom: 0;
       left: 0;
       border-top: 1px solid #d4d4d4;
    }
    .botFilter ul {
       background-color: transparent;
       display: -webkit-box;
       text-align: center;
    }
    .botFilter ul li {
       -webkit-box-flex: 1;
       box-sizing: border-box;
       padding: 15px 0;
    }

    四、不同屏幕下的展示效果

     

    五 、总结

           现在,移动端的页面,复杂嵌套的布局,采用flex布局能够灵活解决问题。但是,遇到较为简单的布局,全局未完全采用自适应模式时,只是提供展示信息的内容,可以考虑较为简单的方法,达到适配效果。

           如文章哪里有问题,欢迎大家留言指正,谢谢!

          版权声明:本文为博主原创文章,未经博主允许不得转载。 https://mp.csdn.net/postedit/81671624

    展开全文
  • 关于H5页面微信端的分享

    万次阅读 2018-09-10 15:38:24
    只需要调用微信官方出的微信jssdk,加上些许配置,就可以实现h5页面微信上的分享,官方文档地址为: https://mp.weixin.qq.com/wiki?t=resource/res_main&amp;id=mp1421141115   一、获取基本信息   ...

    微信分享,咋一看好像很复杂,实则非常简单。只需要调用微信官方出的微信jssdk,加上些许配置,就可以实现h5页面在微信上的分享,官方文档地址为:

    https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115

     

    一、获取基本信息

     

    找到已有公众号的appid,根据这个appid和url向后端发起请求,拿到配置所需要的参数:timestamp、noncestr和signature。

     

    二、实现

     

    1、页面引入JS-SDK文件

     

    通过script标签,引入微信官网的JS-SDK文件

    1b9e166ecd684021bc00eca469bd91e3.png

    2、基本配置

    743a06a6447f4093bc57f20287c9d19d.png

    3、使用

    f25a2ae100d241cfa9fe6541afe2c7c9.png

     

    三、调试

     

    wx.config里的debug字段设置为true时,就可以进行调试。

     

    调试要用到微信开发者工具,选择公众号网页项目,输入页面地址就可以了。

     

    四、遇到的问题及解决方案

     

    微信JS-SDK说明文档的附录5里有大部分问题的解决方案,在这里我列出我遇到的几个上面没有给出解决方案的。

     

    1、Uncaught TypeError: Cannot read property 'config' of undefined

    解决:html页面单独引入了sdk,并且组件统一也引入了一遍sdk,导致问题,删除其中之一。

    2、Uncaught (in promise) TypeError: Cannot read property 'ready' of undefined

    解决:同问题1。

    3、invalid signature

     

    解决:如果文档里的方法都没有解决这个问题,还有一种方法,先设置一种最基础的配置,使其config ok,然后再设置一遍自己需要的有各种参数的分享文案,这样能绕过配置,成功分享。说的可能有点拗口,简单点理解就是,页面只要有一个config成功的配置,就可以再继续配置其它分享,哪怕这个分享配置的signature无效。

     

    编辑:千锋HTML5

    作者:stardew

    来源:https://segmentfault.com/a/1190000016199418

    展开全文
  • 微信网页授权登录

    万次阅读 2016-11-17 14:00:28
    微信网页授权登录 日期:2016-11-14 作者:normanyang 功能:用于纪录微信网页授权步骤(前提条件:公众号为服务号,且通过认证) 微信网页授权api说明网址:...

    微信网页授权登录

    日期:2016-11-14

    作者:normanyang

    功能:用于纪录微信网页授权步骤(前提条件:公众号为服务号,且通过认证)

    微信网页授权api说明网址:https://mp.weixin.qq.com/wiki/4/9ac2e7b1f1d22e9e57260f6553822520.html

    相关说明:目前微信api有两种方式获取用户信息。第一种是用户管理获取用户基本信息(包括UnionID机制),这个前提是用户必须事先已经关注公众号,通过获取基础access_token和openID来获取用户信息。第二种是以snsapi_userinfo为scope发起的网页授权,来获取用户的基本信息的。但这种授权需要用户手动同意,并且由于用户同意过,所以无须关注,就可在授权后获取该用户的基本信息。

    一、什么是OAuth2.0

    OAuth是一个开放协议,允许用户让第三方应用以安全且标准的方式获取该用户在某一网站、移动或桌面应用上存储的私密的资源(如用户个人信息、照片、视频、联系人列表),而无需将用户名和密码提供给第三方应用。

    OAuth 2.0OAuth协议的下一版本,但不向后兼容OAuth 1.0 OAuth 2.0关注客户端开发者的简易性,同时为Web应用,桌面应用和手机,和起居室设备提供专门的认证流程。

    OAuth允许用户提供一个令牌,而不是用户名和密码来访问他们存放在特定服务提供者的数据。每一个令牌授权一个特定的网站(例如,视频编辑网站)在特定的时段(例如,接下来的2小时内)内访问特定的资源(例如仅仅是某一相册中的视频)。这样,OAuth允许用户授权第三方网站访问他们存储在另外的服务提供者上的信息,而不需要分享他们的访问许可或他们数据的所有内容。

    二、微信公众平台OAuth2.0授权

    微信公众平台OAuth2.0授权详细步骤如下:

    1. 引导用户进入授权页面

    2. 用户点击授权页面URL,将向服务器发起请求

    3. 服务器询问用户是否同意授权给微信公众账号(scopesnsapi_base时无此步骤)

    4. 用户同意(scopesnsapi_base时无此步骤)

    5. 服务器将CODE通过回调传给微信公众账号

    6. 微信公众账号获得CODE

    7. 微信公众账号通过CODE向服务器请求Access Token

    8. 服务器返回Access TokenOpenID给微信公众账号

    9. 微信公众账号通过Access Token向服务器请求用户信息(scopesnsapi_base时无此步骤)

    10. 服务器将用户信息回送给微信公众账号(scopesnsapi_base时无此步骤)


    使用的AppIdAppSecret在公众平台基本配置中,可以找到。


    如果用户在微信中(Web微信除外)访问公众号的第三方网页,公众号开发者可以通过此接口获取当前用户基本信息(包括昵称、性别、城市、国家)。利用用户信息,可以实现体验优化、用户来源统计、帐号绑定、用户身份鉴权等功能。请注意,“获取用户基本信息接口是在用户和公众号产生消息交互时,才能根据用户OpenID获取用户基本信息,而网页授权的方式获取用户基本信息,则无需消息交互,只是用户进入到公众号的网页,就可弹出请求用户授权的界面,用户授权后,就可获得其基本信息(此过程甚至不需要用户已经关注公众号。)”

    在微信公众号请求用户网页授权之前,开发者需要先到公众平台网站的我的服务页中配置授权回调域名。请注意,这里填写的域名不要加http://


    配置授权回调页面域名

    点击右侧的修改。


    授权回调域名配置规范为全域名,比如需要网页授权的域名为:www.qq.com,配置以后此域名下面的页面http://www.qq.com/music.html 、 

    http://www.qq.com/login.html 都可以进行OAuth2.0鉴权。但http://pay.qq.com 、 http://music.qq.com 、 http://qq.com无法进行OAuth2.0鉴权

     

    具体而言,网页授权流程分为四步:

    1   、引导用户进入授权页面同意授权,获取code

    2 、通过code换取网页授权access_token(与基础支持中的access_token不同)

    3 、如果需要,开发者可以刷新网页授权access_token,避免过期

    4、通过网页授权access_token和openid获取用户基本信息

    下面详细说明这些步骤:

    第一步:用户同意授权,获取code

    在确保微信公众账号拥有授权作用域(scope参数)的权限的前提下(服务号获得高级接口后,默认带有scope参数中的snsapi_base和snsapi_userinfo),

    引导关注者打开如下页面:

    https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect (若提示“该链接无法访问”,

    请检查参数是否填写错误,是否拥有scope参数对应的授权作用域权限。)

    参数说明:

    参数

    是否必须

    说明

    appid

    公众号的唯一标识

    redirect_uri

    授权后重定向的回调链接地址,请使用urlencode对链接进行处理

    response_type

    返回类型,请填写code

    scope

    应用授权作用域,snsapi_base (不弹出授权页面,直接跳转,只能获取用户openid),snsapi_userinfo (弹出授权页面,可通过openid拿到昵称、性别、所在地。并且,即使在未关注的情况下,只要用户授权,也能获取其信息

    state

    重定向后会带上state参数,开发者可以填写a-zA-Z0-9的参数值

    #wechat_redirect

    无论直接打开还是做页面302重定向时候,必须带此参数

    用户同意授权后

    如果用户同意授权,页面将跳转至 redirect_uri/?code=CODE&state=STATE。若用户禁止授权,则重定向后不会带上code参数,

    仅会带上state参数redirect_uri?state=STATE

    code说明 : code作为换取access_token的票据,每次用户授权带上的code将不一样,code只能使用一次,5分钟未被使用自动过期。

    第二步:通过code换取网页授权access_token

    首先请注意,这里通过code换取的网页授权access_token,与基础支持中的access_token不同。公众号可通过下述接口来获取网页授权access_token。

    如果网页授权的作用域为snsapi_base,则本步骤中获取到网页授权access_token的同时,也获取到了openid,snsapi_base式的网页授权流程即到此为止。

    获取code后,请求以下链接获取,请求方法:GET

    access_token:  https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code

    参数说明

    参数

    是否必须

    说明

    appid

    公众号的唯一标识

    secret

    公众号的appsecret

    code

    填写第一步获取的code参数

    grant_type

    填写为authorization_code

    返回说明

    正确时返回的JSON数据包如下:

    {

      "access_token":"ACCESS_TOKEN",

       "expires_in":7200,

      "refresh_token":"REFRESH_TOKEN",

       "openid":"OPENID",

       "scope":"SCOPE"

    }

    参数

    描述

    access_token

    网页授权接口调用凭证,注意:此access_token与基础支持的access_token不同

    expires_in

    access_token接口调用凭证超时时间,单位(秒)

    refresh_token

    用户刷新access_token

    openid

    用户唯一标识,请注意,在未关注公众号时,用户访问公众号的网页,也会产生一个用户和公众号唯一的OpenID

    scope

    用户授权的作用域,使用逗号(,)分隔

     

    错误时微信会返回JSON数据包如下(示例为Code无效错误):

    {"errcode":40029,"errmsg":"invalid code"}

    第三步:刷新access_token(如果需要)

    由于access_token拥有较短的有效期,当access_token超时后,可以使用refresh_token进行刷新,refresh_token拥有较长的有效期(7天、30天、60天、90天),当refresh_token失效的后,需要用户重新授权。

    请求方法:GET

    获取第二步的refresh_token后,请求以下链接获取access_token:  https://api.weixin.qq.com/sns/oauth2/refresh_token?appid=APPID&grant_type=refresh_token&refresh_token=REFRESH_TOKEN

     

    参数

    是否必须

    说明

    appid

    公众号的唯一标识

    grant_type

    填写为refresh_token

    refresh_token

    填写通过access_token获取到的refresh_token参数

    返回说明:

    正确时返回的JSON数据包如下:

    {

      "access_token":"ACCESS_TOKEN",

       "expires_in":7200,

      "refresh_token":"REFRESH_TOKEN",

       "openid":"OPENID",

       "scope":"SCOPE"

    }

    参数

    描述

    access_token

    网页授权接口调用凭证,注意:此access_token与基础支持的access_token不同

    expires_in

    access_token接口调用凭证超时时间,单位(秒)

    refresh_token

    用户刷新access_token

    openid

    用户唯一标识

    scope

    用户授权的作用域,使用逗号(,)分隔

    错误时微信会返回JSON数据包如下(示例为Code无效错误):

    {"errcode":40029,"errmsg":"invalid code"}

    第四步:拉取用户信息(需scope为snsapi_userinfo)

    如果网页授权作用域为snsapi_userinfo,则此时开发者可以通过access_token和openid拉取用户信息了。

    httpGET(请使用https协议)

    https://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID&lang=zh_CN

    注意:这里调用的接口千万不要用下面这个:

    http请求方式: GET

    https://api.weixin.qq.com/cgi-bin/user/info?access_token=ACCESS_TOKEN&openid=OPENID&lang=zh_CN(这个接口是用基础access_tokenopenID

    获取用户信息,前提是用户必须已经关注该公众号)

    参数说明

    参数

    描述

    access_token

    网页授权接口调用凭证,注意:此access_token与基础支持的

    access_token不同

    openid

    用户的唯一标识

    lang

    返回国家地区语言版本,zh_CN 简体,zh_TW 繁体,en 英语

    正确时返回的JSON数据包如下:

    {

       "openid":" OPENID",

       " nickname": NICKNAME,

       "sex":"1",

       "province":"PROVINCE"

       "city":"CITY",

       "country":"COUNTRY",

        "headimgurl":    "http://wx.qlogo.cn/mmopen/g3MonUZtNHkdmzicIlibx6iaFqAc56vxLSUfpb6n5WKSYVY0ChQKkiaJSgQ1dZuTOgvLLrhJbERQQ4eMsv84eavHiaiceqxibJxCfHe/46",

         "privilege":[

         "PRIVILEGE1"

         "PRIVILEGE2"

        ],

        "unionid":"o6_bmasdasdsad6_2sgVt7hMZOPfL"

    }

     

    参数

    描述

    openid

    用户的唯一标识

    nickname

    用户昵称

    sex

    用户的性别,值为1时是男性,值为2时是女性,值为0时是未知

    province

    用户个人资料填写的省份

    city

    普通用户个人资料填写的城市

    country

    国家,如中国为CN

    headimgurl

    用户头像,最后一个数值代表正方形头像大小(有0、46、64、96、132数值可选,0代表640*640正方形头像),用户没有头像时该项为空。

    若用户更换头像,原有头像URL将失效。

    privilege

    用户特权信息,json 数组,如微信沃卡用户为(chinaunicom)

    unionid

    只有在用户将公众号绑定到微信开放平台帐号后,才会出现该字段。详见:获取用户个人信息(UnionID机制)

     

    错误时微信会返回JSON数据包如下(示例为openid无效):

    {"errcode":40003,"errmsg":"invalid openid "}

    展开全文
  • 如何查看微信页面的源代码

    万次阅读 2018-11-13 15:11:12
    有一次做项目 叫我把手机微信上一个页面的源代码 给扒下来。好嘛,这个怎么搞呢。先是 想把链接发送到qq上面 打开。 显示请用微信客户端查看。这可怎么办? 然后就百度 查资料。还在自己的手机上下载了一个叫做 ...

    有一次做项目 叫我把手机微信上一个页面的源代码 给扒下来。好嘛,这个怎么搞呢。先是 想把链接发送到qq上面 打开。 显示请用微信客户端查看。这可怎么办?

    然后就百度 查资料。还在自己的手机上下载了一个叫做 view source的app 还是没用。抓狂   终于经过我的不懈努力。终于有点眉目。就口头教大家操作一下。

     

    第一步:在你的电脑上 打开微信登录网页版。扫码登录

    第二步:把你想看的网页链接 发送到微信网页上面。(就是在微信里把链接发给自己 然后微信网页上面可以看到链接了)

    第三步:点击链接,左上角用默认浏览器打开。

    第四步:右击查看源代码吧!

    本人技术小白 愿意虚心接受各位的教诲。互相互助共同进步。
    展开全文
  • 微信网页授权:网页版(一)

    万次阅读 2018-09-12 16:45:24
    转自 http://www.cnblogs.com/0201zcr/p/5133062.html   1、OAuth2.0  OAuth(开放授权)是一个开放标准,允许用户让第三方应用访问该用户在某一网站上存储的私密的资源(如照片,视频,... ...每一个令牌授权...
  • 由于微信对很多页面做了限制,微信开发工作者需要对页面进行调试 这个时候可以用到谷歌 首先我们需要打开微信 TBS 调试 http://debugx5.qq.com 也可微信直接扫描二维码 然后打开手机 打开开发者模式,打开 ...
  • Chrome浏览器打开微信页面

    万次阅读 2018-10-12 13:41:44
    下面教大家用Chrome浏览器打开微信页面,以方便调试。 1、微信的UA(User agent:用户代理)。 安卓微信UA: mozilla/5.0 (linux; u; android 4.1.2; zh-cn; mi-one plus build/jzo54k) applewebkit/534...
  • 新版微信页面底部导航问题

    千次阅读 2019-03-12 20:44:31
    在移动端开发微信页面的过程中,出现这样一个问题 自己定好的底部导航栏下面会多出一行微信自带的底部返回栏,影响我们原型的体验,就需要对此做出优化; 首先明确问题所在 通过查询发现底部返回栏的机制是:...
  • 安卓微信打开X5调试,使微信页面可以在谷歌浏览器调试【chrome://inspect/#devices】 2018年06月29日 14:26:53 阅读数:378 标签: 微信公众号开发调试微信web 调试 更多 个人分类: 微信端开发调试微信开发 ...
  • 用普通浏览器打开微信页面 通过电脑版微信,打开公众号里面的一些页面,然后复制这个页面的链接,想在普通浏览器里面再次打开,进行代码分析的时候,显示需要验证。原因就是缺少了相关的cookie,网上有不少方法绕过...
  • 下面教大家用Chrome浏览器打开微信页面,以方便调试。 1、微信的UA(User agent:用户代理)。 安卓微信UA: mozilla/5.0 (linux; u; android 4.1.2; zh-cn; mi-one plus build/jzo54k) applewebkit/534...
  • 完美解决微信页面返回不刷新问题

    万次阅读 2018-08-24 11:43:46
    新到的这家公司业务重点是放在移动端的(以前很少做微信平台相关的页面),比如微信,小程序,支付宝等等平台。所以页面的制作难免和移动端打交道。现在就遇到一个小问题,但是又很不好解决的一个问题:就是从一个页面...
  • 完美解决 请在微信客户端打开链接

    万次阅读 热门讨论 2017-12-25 11:27:33
    相信有模拟微信页面请求的测试都有看到过这个页面,简单点说就是爬虫爬微信页面,进行回放的时候会出现这个页面。大概在1年前,专门安排了一个人去解决这个技术问题,遗憾的是当时没有找到解决方案,接下来所有微信...
  • 记录一个最近在微信页面开发时出现的问题:页面在手机微信端和微信web开发者工具中都能正常显示,但是在pc端微信浏览器上打不开(显示空白)。  原因:pc端微信浏览器不支持es6,而我的代码使用了 let 。  ...
  • 在做微信投票,小说阅读类,以及大部分推广类微信H5页面经常会遇到因为被举报投诉导致页面微信封杀的情况。因为微信是处理投诉举报是非人工,所以一旦这种举报投诉多次域名就会百分百被封杀。申诉等处理又是遥遥...
  • 在PC上打开微信页面

    千次阅读 2015-06-09 08:55:39
    今天想打开微信中的站点页面,想模仿其样式文件与布局,但发现到PC上不让打开,没办法查看源代码;通过测试,发现它是通过判断UA来判断访问源,故直接在firefox中修改了UA,就可以直接打开。
  • 微信页面监听返回事件,关闭页面

    千次阅读 2019-01-14 16:15:06
    pushHistory(); window.addEventListener(&amp;quot;popstate&amp;quot;, function(e) { //alert(&amp;quot;我监听到了浏览器的返回按钮事件啦&... WeixinJSBridge.call('clos
  • 我用ASP.NET开发微信页面,在iPhone4S和iPhone6上面测试页面样式都没有问题 但是用安卓手机测试,页面的样式就缩小,导致页面很不美观,这是什么情况?
  • 使用微信web开发者工具调试微信企业号页面(前端页面,已发布在服务器上的)前几天写了一篇使用fiddler调试微信端页面的,然后博友评论说使用fiddler太麻烦了,推荐使用微信web开发者工具调试微信页面,这两天弄着玩...
  • 最近想用PC端调试微信内置浏览器页面,于是使用Chrome进行调试,步骤如下:1.手机数据线连接电脑,开启手机上的USB调试功能2.打开Chrome浏览器,在地址栏输入:chrome://inspect/#devices访问3.Chrome会自动检测并列...
1 2 3 4 5 ... 20
收藏数 202,935
精华内容 81,174
关键字:

微信页面