企业专业网站建设的必要性,海南网站设计,百度搜索提交入口,济南网络推广微信公众号内网穿透本地调试一直以来都比较麻烦 怕自己忘记#xff0c; 记录一下
准备
natapp获取一个域名隧道下载nginx配置微信公众号web网页授权域名
1.natapp获取一个域名隧道
在natapp官网#xff08;https://natapp.cn/#xff09;进行注册登录后#xff0c;进入…微信公众号内网穿透本地调试一直以来都比较麻烦 怕自己忘记 记录一下
准备
natapp获取一个域名隧道下载nginx配置微信公众号web网页授权域名
1.natapp获取一个域名隧道
在natapp官网https://natapp.cn/进行注册登录后进入管理页面可以获取一个免费的渠道域名注意这个域名每次重新打开时域名都会发生变化 点击你需要配置的隧道 进入隧道编辑页面 这里可自行定义自己的本地地址和项目的端口号。 完了之后进行保存
然后再将natapp的客户端下载到本地 安装。 进入下载好的本地地址 在地址内输入cmd 打开当前地址命令行 进入cmd页面 输入
natapp -authtoken30d072ba4d8ecc56即可开启隧道
至此natapp的隧道配置已完成。 隧道开启
2.下载nginx
进入nginx官网https://nginx.org/en/download.html 根据需求下载相对于的版本 我这里是windows 所以下载这个 下载完了之后解压进入nginx目录 配置nginx的配置文件nginx.conf 修改service name 如果你需要nginx访问到你的项目的端口的话可以使用nginx反向代理转发一下就ok了
location / {root html;index index.html index.htm;proxy_pass http://xxx.xxx.x.xxx:8080;
}location /index/ {proxy_pass http://xxx.xxx.x.xxx:8081;
}为什么选择nginx呢 是因为微信配置里面要文件上传。
3.配置微信公众号web网页授权域名 这里html文件夹 可以放在打包好的npm run build的dist), 这里可以参考下。 Index,getcode 都是我在网上拿到。可以参考。 主要是在上面 文件 放在nginx index.html 文件代码
!DOCTYPE html
html
headtitle微信公众号/titlemeta charsetutf-8
/head
bodyh1 stylewidth:100%;height:100px;font-size:50px;一、获取公众号微信code/h1!-- 配置appid --divlabel styledisplay:inline-block;width:22%;font-size:40px;appid/labelinput stylewidth:75%;height:100px;line-height: 100px;border: 1px solid black;font-size:40px; typetext nameappid idappid/div!-- 配置回调地址 --div stylemargin-top: 20px;label styledisplay:inline-block;width:22%;font-size:40px;回调地址/labelinput stylewidth:75%;height:100px;line-height: 100px;border: 1px solid black;font-size:40px; typetext nameredirect_uri idredirect_uri/divbutton idget_code stylewidth:100%;height:100px;font-size:50px;background-color:green;color:white;margin-top: 20px;点击获取微信公众号code/buttonp stylefont-size:50px;color:red;注意请点击上面的按钮获取code吗/p!-- 虚线边框 --div stylewidth:100%;height:0px;border-top:1px black dashed;margin-top: 30px; //body
script srchttps://code.jquery.com/jquery-3.1.1.min.js/script
script typetext/javascript//初始化$(document).ready(function(){ var appid ; // 你的微信公众号appidvar redirect_uri http://xxx.cc/getcode.html; // 你的natapp渠道域名//初始化获取微信code$(#appid).val(appid);$(#redirect_uri).val(redirect_uri);}); //获取微信code$(#get_code).click(function(){var input_appid $(#appid).val();var httl_url window.encodeURIComponent($(#redirect_uri).val());var url https://open.weixin.qq.com/connect/oauth2/authorize?appid input_appid redirect_uri httl_url response_typecodescopesnsapi_basestate123#wechat_redirect;// 获取codewindow.location.href url;});/script
/htmlgetcode.html 文件代码
!DOCTYPE html
html
headtitle获取公众号微信code/titlemeta charsetutf-8style typetext/cssinput{border: none;width: 100%;height: 100px;outline: medium;text-align: center;font-size:40px;}/style
/head
body
h1下面的就是微信code/h3
input idcode typetext name value readonlyreadonly/
button stylewidth:100%;height:100px;font-size:40px;background-color:green;color:white; onclickCopy()点击这个按钮复制上面的内容/button
/body
script srchttps://code.jquery.com/jquery-3.1.1.min.js/script
script typetext/javascript$(function(){var reg new RegExp((^|)code([^]*)(|$), i);var r window.location.search.substr(1).match(reg);var code unescape(r[2]);console.log(code);$(#code).val(code);});//复制function Copy() {var content document.getElementById(code);content.select();document.execCommand(Copy);alert(复制成功);}/script
/html到这里就配置完成了 可以使用http://xxx.cc/index.html 在微信开发者工具内使用本地穿透的调试啦 可在本地修改代码测试
