VUE与微信公众号的一些事

 总结，开发到发布中遇到的问题及解决的方法

一、微信公众号网页授权，回调URL

1、Hash模式因为带有#，回调URL将会出现问题

如果处理回调URL

let redirect_uri = encodeURIComponent(location.href.replace("#", "HANDLED"));

router.beforeEach((to, from, next) => {} 中转换处理过的URL

调试测试正常，但是发布到IIS7.0 则不会触发跳转，无奈使用History模式

2、History模式，在IIS7，需要使用Url_write

如果不使用url_write页面不能正常跳转

添加Web.config，内容如下

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.webServer>
        <rewrite>
            <rules>
                <rule name="Handle History Mode" patternSyntax="Wildcard">
                    <match url="*" />
                    <conditions logicalGrouping="MatchAll">
                        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                        <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
                    </conditions>
                    <action type="Rewrite" url="/" />
                </rule>
            </rules>
        </rewrite>
    </system.webServer>
</configuration>

二、发布，微信txt文件放置在什么地方

1、放在vue项目的public文件下

2、新增一个js文件内容如下：

export function loadFile(url) {
    const xhr = new XMLHttpRequest()
    const okStatus = document.location.protocol === 'file:' ? 0 : 200
    xhr.open('GET', url, false)
    xhr.overrideMimeType('text/html;charset=utf-8')// 默认为utf-8
    xhr.send(null)
    return xhr.status === okStatus ? xhr.responseText : null
  }

3、router中增加

router.beforeEach((to, from, next) => {
  
  //微信公众号 使用网页授权，txt文件验证
  const mpRegex = /^\/MP_verify_[^\\/]*\.txt$/
   if (mpRegex.test(to.path)){
    let url= loadFile(to.path)
    return;
  }

三、微信授权后，网页位置头部不能看见及不能滚动页面

尝试网上好多方法失效如下：

const scrollBehavior = (to, from, savedPosition) => {
  if (savedPosition && to.meta.keepAlive) {
    return savedPosition;
  }
  return { left: 0, top:0 };
}

const router = createRouter({
  // scrollBehavior: () => ({ y: 0 }),
  scrollBehavior,  
})

router.afterEach((to,from,next) => {
   //window.scrollTo(0,0);
   document.documentElement.scrollTop = 0;
})

 以上方法没有解决，最终在css设置解决：

.login-body {
  width: 100%;
  top: 32%;
  left: 0;
  margin-top: -232px;
}