微信网页开发--简单的排号页面(c#、vue)

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_tokenstring 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>

微信网页开发--简单的排号页面(c#、vue)相关推荐

微信html5页面开发教程,微信网页开发，如何在H5页面中设置分享的标题，内容以及缩略图...
前言最近的需求是做一个移动端H5的长屏广告页,最后需要在微信分享的时候修改文案以及带上图片,这个实现起来也不是很复杂. 实现步骤先绑定域名,先登录微信公众平台进入"公众号设置" ...
微信网页开发配置整理
真是人越大记忆越差,断断续续做了几个微信小程序和微信h5项目,然鹅小程序的开发流程有些都忘了,最近刚做完一个微信h5网页开发的项目,所以赶紧记录下开发中需要注意的点,给自己往后回顾,同时也给第一次接入 ...
微信网页开发——随手笔记
一.公众号设置 1.账号详情: 公众号的头像.二维码.名称都是必须填写的,如果没有这些信息,是不能进行网页开发的. 2.功能设置 JS接口安全域名: ...
微信网页开发wx.chooseImage多图上传、预览（已解决）
需求: 1.调用微信jsSDK选图或者拍照(选图支持选多图) 2.选图或者拍照后提供预览,但不把图片下载到服务器 3.提交表单的时候再一并提交,把图片下载到服务器 4.支持编辑页面删除已选图片(此图已 ...
H5微信网页开发总结（授权，分享，地图）
H5微信网页开发总结(网页授权,JS-SDK分享.地图) 目录: 网页授权分享地图参考文档https://developers.weixin.qq.com/doc/offiaccount/OA_ ...
html微信开发样式,微信网页开发样式库
概述 WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页开发量身设计,可以令用户的使用感知更加统一.在微信网页开发中使用 WeUI,有如下优势: 1.同微信客户端一致的 ...
微信网页开发分享功能剖析
微信网页开发分享功能剖析步骤一:绑定域名先登录微信公众平台进入"公众号设置"的"功能设置"里填写"JS接口安全域名". 步骤二:引入J ...
微信网页开发调用微信jssdk接口遇到的坑以及最终解决方法（持续更新）
1.微信网页开发调用jssdk时报permission denied 大致是两个原因 (1)首先注册时未将你所调用的接口名字添加至jsApiList (2)第二个就是你的这个公众号没有权限使用这个ap ...
微信网页开发--仿美团、饿了么红包分享
需求这个月,公司做了一个3.8女王节的活动.当时的需求是一个水果接龙的小游戏.比如,我发起了一条接龙,然后我把这个链接分享出去,A点击这个链接就可以看见我输入的水果,然后A再分享这个链接给B,B就可 ...

微信网页开发--简单的排号页面(c#、vue)

微信网页开发--简单的排号页面(c#、vue)相关推荐

最新文章

热门文章