微信公众号网页开发,微信授权

 1.首先引入jquery.js <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>

 2.页面加载的时候,引用getCode();

window.onload = function(){

    getCode();

}

或者

$(document).ready(function(){
    getCode();
});

function getCode(){

        var getRequest = GetRequest();
        var code = null;
        //alert("getRequest.code1:"+getRequest.code)
        if(!getRequest.code){
            // var pageUrl = window.location.href
            //           .replace(/[/]/g, "%2f")
            //           .replace(/[:]/g, "%3a")
            //           .replace(/[#]/g, "%23")
            //           .replace(/[&]/g, "%26")
            //           .replace(/[=]/g, "%3d");
            //           //alert(pageUrl)
            //       var url =
            //           "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" +
            //           "wx73528b2e676f8008" +
            //           "&redirect_uri=" +
            //           pageUrl +
            //           "&response_type=code&scope=snsapi_base&state=STATE&connect_redirect=1#wechat_redirect";
            //       window.location.href = url;
          $.ajax({
              type:"GET",
              url:host+"/wxpay/index",
              dataType:"json",
              data:{
                url:location.href.split('#')[0]
              },
              success:function (data) {
                console.log(JSON.stringify(data));
                // alert("123"+JSON.stringify(data))
                window.open(data)
                window.history.back(-1);
              },
              error:function(jqXHR){
                  //alert("Error: "+jqXHR.status);
                  //没有code,再次请求获取code
    
              }
          })
    
    
        }else{
            //alert("getRequest.code2:"+getRequest.code)
            $.ajax({
                type:"GET",
                url:host+"/wxpay/shouquan",
                dataType:"json",
                data:{
                    code:getRequest.code
                },
                success:function (data) {
                  console.log(JSON.stringify(data));
                  //alert("456"+JSON.stringify(data));
                  var data = data;
                  if(data.success){
                      
                    if(data.state == 1){
                        
                      var o = {
                        uid:data.uid,
                        phone:data.phone
                      };
                      o = JSON.stringify(o);
                      localStorage.setItem('userInfo', o);
                      
                      if(localStorage.getItem('userInfo')){
                         //alert(JSON.stringify(localStorage.getItem('userInfo')))
                         userInfo =  JSON.parse(localStorage.getItem('userInfo'));
                        //alert(userInfo.uid)
                        if(!!userInfo != 0){
                          uid = userInfo.uid;
                          my_phone = userInfo.phone;
                        }
                        // var href = './zhuce.html';
                        // $api.setHref(href);
                        // alert("授权成功!");
                        if(!!my_phone == 0 && !! uid != 0){
                          
                          //微信授权获取code
                          var href = './zhuce.html';
                          $api.setHref(href);
                        }else if(!!my_phone != 0 && !!uid != 0){
                            
                          window.location.reload();
                        }
                        
                      }
                    }else{
                      alert(data.msg)
                    }
                  }
                },
                error:function(jqXHR){
                    alert("Error: "+JSON.stringify(jqXHR));
                }
            })
        }
     }

 

//获取页面请求路径中的参数
      function GetRequest() {
          var url = location.search; //获取url中"?"符后的字串
          var theRequest = new Object();
          if (url.indexOf("?") != -1) {
              var str = url.substr(1);
              strs = str.split("&");
              for (var i = 0; i < strs.length; i++) {
                  theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
              }
          }
          return theRequest;
      }

 

对于开发Vue微信公众号网页,你可以按照以下步骤进行: 1. 创建项目:首先,你需要创建一个Vue项目。你可以使用Vue CLI来快速创建一个Vue项目,运行命令`vue create project-name`来创建一个新的项目。 2. 配置公众号:在微信公众号后台,你需要配置网页授权域名和JS接口安全域名。确保你的网页域名和JS接口安全域名与你的Vue项目所在的域名一致。 3. 安装依赖:在Vue项目中,你可能需要安装一些依赖来处理微信公众号相关的功能。你可以使用npm或者yarn来安装这些依赖。 4. 配置路由:在Vue项目中,你可以使用Vue Router来管理页面的路由。根据你的需求,配置路由来实现不同页面之间的跳转。 5. 接入微信SDK:使用微信提供的JS-SDK来实现网页授权和获取用户信息等功能。你可以在Vue项目中引入微信SDK,并根据微信JS-SDK的文档进行配置和使用。 6. 开发页面:根据你的需求,开发各个页面。你可以使用Vue的组件化开发方式来构建页面,并使用Vue的数据绑定和事件机制来实现交互功能。 7. 发布上线:完成开发后,你需要将Vue项目打包并发布到生产环境中。使用Vue CLI提供的命令来进行打包,然后将生成的静态文件部署到服务器上。 以上是一个简单的概述,希望对你有所帮助。如果你有具体的问题或者需要更详细的指导,请随时提问。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值