微信网页开发--简单的排号页面(c#、vue)_排号插队页面如何设计-CSDN博客

本文链接：https://blog.csdn.net/qq_38313984/article/details/121227320

1.之前没有试过在微信上显示网页，所以先把样式拉出来，IIS发布后，在微信上查看是不是符合自己想要的

遇到问题:服务器发布之后，电脑浏览器可以访问，微信内置浏览器无法访问

原因:vue链接中有#，微信会把#后面的字符串去掉

解决办法:vue默认路由是hash的方式，需要将路由方式改为history，实现到这一步，根目录访问没有问题，但是跳转其他目录的时候报错404，这时候需要在iis的重写模块中添加空白规则

2.想要实现点击【立即排号】后，访问微信链接获取微信用户信息保存到数据库，同时传给前端

页面

前端vue代码：

<template>
  <div>
    <h1>科目三适应性训练排号系统</h1>
    <div class="line-info">
       <div class="preline-count">前面排队人数 <mt-badge size="small">{{lineCount}}</mt-badge></div>
       <div class="present-time">当前时间 <mt-badge size="small">{{presentTime}} </mt-badge></div>
    </div>
    <button class="number-take" type="default" @click="lineClick()">立即排号</button>
  </div>
</template>

<script>
  import urlencode from "urlencode";
  export default {
    data() {
      return {
        lineCount: 10,
        presentTime:new Date().toLocaleString()
      }
    },
    methods:{
      lineClick(){
          var redirect_url = urlencode("http://xxxq.cool:8012/Home/PostLineData");
          var url="https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxdxxxd58xxxaxxf5e&redirect_uri="+redirect_url+"&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect";
          location.href=url;
      }
    }
  }
</script>

<style>
  .line-info{
    border-bottom: 1px solid;
    padding: 22px;
    margin-bottom: 20px;
    text-align: left;
    width: 100%;
  }
  .number-take{
    width: 80%;
    background-color: #26a2ff;
    color: #ffffff;
    border-radius: 10px;
  }
</style>

【网页授权官方】的说明:微信开放文档

①用户同意授权，获取code

在调用微信接口的时候需要填写域名微信公众平台

https://open.weixin.qq.com/connect/oauth2/authorize?appid=【appid】&redirect_uri=【redirect_url】&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect 上图填入的是redirect_url对应的页面域名,我的对应了8012端口

另:由于还没有备案，无法直接域名访问默认80端口，想要只添加域名，还需要做以下操作【腾讯云服务器申请域名操作-①申请域名模块②购买域名③域名备案④添加ssl证书】

后端接收代码

将后端发布到服务器后运行，可以看到日志里返回code和state的值

②通过code换取网页授权access_token

③通过access_token获取用户信息

后端c#代码

        /// <summary>
        /// 前端点击【立即排号】后，前端链接redirect_url对应的是这个方法
        /// 访问这个方法获取微信用户信息，并查询排号情况返回到前端
        /// </summary>
        /// <returns></returns>    
        public ActionResult PostLineData(string code,string state)
        {
            LogHelper.Info("code:"+code+"---state:"+state);
            string secret = "ea7f29f49xxxd85xxxxxe6d7ea64d32d";
            //对应微信截图的第②步，通过code和appid获取access_token
            string url= "https://api.weixin.qq.com/sns/oauth2/access_token?appid=wxdf15d58xxxa71f5e&secret="+ secret + "&code="+code+"&grant_type=authorization_code";            
            string retString = GetReturnStr(url);
            JObject tokenObj = JsonConvert.DeserializeObject<JObject>(retString);
            string access_token=tokenObj.GetValue("access_token").ToString();
            LogHelper.Info("access_token:" + access_token);
            //通过access_token获取用户详情信息链接
            string getUserInfoUrl = "https://api.weixin.qq.com/sns/userinfo?access_token="+ access_token + "&openid=wxdf15dxxx33a71f5e&lang=zh_CN";
            string userInfo = GetReturnStr(getUserInfoUrl);
            //todo:排队信息写入数据库及读取排队信息
            string lineDetail = "{\"isLine\":1,\"lineCount\":18,\"presentNumber\":30}";
            //跳转到显示排队详情页面
            string redirctUrl = "http://cxxx.cool:8011/line-detail?userInfo=" + userInfo + "&lineDetail=" + lineDetail;
            LogHelper.Info(redirctUrl);
            return Redirect(redirctUrl);
        }

        /// <summary>
        /// 获取url返回的结果
        /// </summary>
        /// <param name="url"></param>
        /// <returns></returns>
        public string GetReturnStr(string url)
        {
            HttpWebRequest request = (HttpWebRequest)WebRequest.Create(url);
            request.Method = "POST";
            request.ContentType = "application/json;charset=utf-8";
            Stream myRequestStream = request.GetRequestStream();
            StreamWriter myStreamWriter = new StreamWriter(myRequestStream, Encoding.GetEncoding("utf-8"));
            myStreamWriter.Close();
            HttpWebResponse response = (HttpWebResponse)request.GetResponse();
            Stream myResponseStream = response.GetResponseStream();
            StreamReader myStreamReader = new StreamReader(myResponseStream, Encoding.GetEncoding("utf-8"));
            string retString = myStreamReader.ReadToEnd();
            LogHelper.Info("retString:" + retString);            
            myStreamReader.Close();
            myResponseStream.Close();
            return retString;
        }

排号详情页面

前端vue代码

<template>
  <div>
    <div class="top-part">
      <div class="circle-top left-circle"></div>
      <div class="cube-top"></div>
      <div class="circle-top right-circle"></div>
    </div>
    <div  class="line-detail">
      <div class="line-tip">
        <div class="success-info">排位成功</div>
        <div>您的排号由训练场安排</div>
        <div class="train-field">{{trainField}}</div>
      </div>
      <div>
       <img class="portrait":src="headimgurl">{{userName}}
     </div>
     <div class="inline-count">前面还有:<mt-badge size="medium">{{lineCount}}</mt-badge>人</div>

     <div class="inline-count">排号:<mt-badge size="medium">{{presentNumber}}</mt-badge></div>
     <button class="number-take"  v-show="isLine==0">排号</button>
     <button class="number-take"  v-show="isLine==1">取消排号</button>
    </div>
  </div>
</template>

<script>
  import urlencode from "urlencode";
  export default {
    name: 'App',
    data:{
        userName:"cc",
        lineCount:1,
        presentNumber:12,
        headimgurl:"https://thirdwx.qlogo.cn/mmopen/vi_32/rBb1rglgoafWKMpv40Cicib6GJ5xqHOW3K8ObLmAxGThSsCpHADjFh3icbbTXgVq85Nz1c35X5Vu8QI01sZCHoRVQ/132",
        isLine:1,
        trainField:""
    },
    methods: {
    },
    computed: {
    },
    watch: {
          "$route.query": {
            handler() {
              debugger;
              var userInfoJson=JSON.parse(this.$route.query.userInfo);
              var lineDetailJson=JSON.parse(this.$route.query.lineDetail);
              this.userName=userInfoJson.nickname;
              this.lineCount=lineDetailJson.lineCount;
              this.presentNumber=lineDetailJson.presentNumber;
              this.headimgurl=decodeURIComponent(userInfoJson.headimgurl);
              this.isLine=lineDetailJson.isLine;
              this.trainField="xxx训练场";
              return
            },
            immediate: true
          }
        },

  }
 </script>

<style>
  .line-detail{
    text-align: left;
    position: absolute;
    top: 17px;
    padding: 20px;
    background-color: #ffffff;
    width: 83%;
    left: 4%;
  }
  .cube-top{
    float:left;
    width: 90%;
    background-color: #26a2ff;
    height: 20px;
  }
  .circle-top{
    float:left;
    width: 5%;
    background-color: #26a2ff;
    height: 20px;
  }
  .left-circle{
    border-radius:50% 0 0 50%
  }
  .right-circle{
    border-radius:0 50% 50% 0;
  }
  .success-info{
    font-size: 24px;
    font-weight: bold;
    padding-bottom: 10px;
  }
  .train-field{
    font-size: 20px;
    font-weight: bold;
    margin-top:30px;
  }
  .line-tip{
    text-align:left;
    padding-bottom: 10px;
    border-bottom: 1px solid;
    margin-bottom: 20px;
  }
  .portrait{
    border-radius: 50%;
    width: 60px;
  }
  .number-take{
    width: 80%;
    left:5%;
    margin-top:20px;
    background-color: #26a2ff;
    color: #ffffff;
    border-radius: 10px;
  }
  .inline-count{
    margin-top:20px;
    font-size:15px;
    margin-bottom:20px;
  }
</style>