Vue/.Net 开发微信H5页面问题笔记

李郑

发布于 2019-12-11 13:09:06

76000

代码可运行

文章被收录于专栏：漫漫全栈路漫漫全栈路

运行总次数：0

代码可运行

帮朋友开发微信H5分享统计系统，也算是自己从头开始写的第一个Vue 项目，遇到不少坑，记录一下。

Vue-Router History模式下 Build 之后访问异常

Vue-Router 的默认模式为 hash 模式，会在链接中加上一个 # ，非常难看，使用 history 模式后，则可以去除。

修改方式为在，/router/index.js中修改：

const router = new VueRouter({
  mode: 'history',   //指定模式为 history 模式
  base: process.env.BASE_URL,
  routes
})

在本地测试时一切正常，但是build 后发布到服务器，需要为 nginx 添加一条 localtion 记录。

location / {
    root   /usr/share/nginx/html/h5share;
    index  index.html index.htm;
    try_files $uri $uri/ /index.html;   #添加try_files 后正常
}

微信授权跨域问题

第一次开发，参考网上的教程，直接纯前端获取了微信的 access_token 实际上是不可取的导致在发布上线后，立即出现了跨域的问题

code和 access_token 都应该由后端获取并缓存。

token要放在服务器就会解决跨域问题，同时补充下为什么要放到服务器生成：

微信对token的生成获取是有次数限制的，每个客户端单独获取，很容易超过限制。每日获取token的限制是2000次。详细内容：接口频率限制说明
access_token（有效期7200秒，开发者必须在自己的服务全局缓存access_token）某一个客户端新生成一个token后，其他的客户端的token都会失效官方解释：如果第三方不使用中控服务器，而是选择各个业务逻辑点各自去刷新access_token，那么就可能会产生冲突，导致服务不稳定。

引用自segmentfault

.Net Core 开启 Cors 跨域

直接在 startup.cs 中配置,注意在 MVC之前

在ConfigureServices 中注册 Cors

services.AddCors(options =>
   options.AddPolicy("AllowRequest",
   p => p.AllowAnyOrigin()) //允许所有跨域请求
 );

在Configure 中使用 Cors

app.UseCors("AllowRequest");

Axios 与 Web API 通讯

let getAccessUrl = `http://leepush.azurewebsites.net/api/weixin/getAccessToken?code=${code}`

    //loading
    const loading = this.$loading()

    let _that = this
    axios
      .get(getAccessUrl)
      .then(response => {
        console.info(response)
        _that.userinfo = response.data
        loading.close()
        //add user to sys
        let adduserUrl = `http://leepush.azurewebsites.net/api/weixin/AddUserToSys`
        axios
          .post(adduserUrl, {
            "nickname": _that.userinfo.nickname,
            "openid": _that.userinfo.openid,
            "headimgurl": _that.userinfo.headimgurl
          })
          .then(re => {
            console.info(re)
          })
      })
      .catch(error => console.error(error))