Movatterモバイル変換


[0]ホーム

URL:


Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

微信公众号测试项目

NotificationsYou must be signed in to change notification settings

qutz/vue-mall

Repository files navigation

微信公众号测试项目

测试功能

1、微信网页授权

授权方案采用image

图片引用地址SegmentFault

这种授权在第4步请求服务器返回token后,vue客服端直接重定向到最开始进入的页面

    let params = { ...to.query }    // api接口登录    wxmp.login(params).then(res => {      setToken(res.data.token)      window.location.href = window.location.origin + getToUrl()    })

2、微信自定义分享

微信分享使用的是history模式实现自定义分享

经过测试实现步骤如下:

  • 授权后进入router.beforeEach时判断系统类型,是IOS系统就记录当前URL到vuex中

注意:如果进入路由有重定向,需要加入重定向后的路由名称,比如'/'重定向到'/home'

    if (!Vue.device.isAndroid) {      if (!store.state.app.iosJsUrl) {        let landingPage = document.URL        // 如果进入路由有跳转需要加入跳转后的路由名称,比如/跳转到/home        if (to.name === HOME && landingPage.indexOf(HOME) === -1) {          landingPage = landingPage + HOME        }        store.commit(types.SET_WX_JS_URL, {iosJsUrl: landingPage})      }    }
  • 进入router.afterEach时判断系统类型,获取不同的jssdk签名地址
router.afterEach(to => {  // store.commit(types.UPDATE_LOADING_STATUS, {isLoading: false})  let _url = window.location.origin + to.fullPath  if (!Vue.device.isAndroid) {    _url = store.state.app.iosJsUrl.split('#')[0]  }  wechat.getJSSDK(_url)})
  • vue全局公用函数实现分享
  Vue.prototype.wxShare = wechat.setWxShare  setWxShare (title, desc, link, imgUrl) {    Vue.wechat.ready(() => {      // 分享给朋友      Vue.wechat.onMenuShareAppMessage({        title: title, // 分享标题        desc: desc,   // 分享描述        link: link,   // 分享链接 默认以当前链接        imgUrl: imgUrl, // 分享图标        success () {        },        cancel () {        }      })      // 分享到朋友圈      Vue.wechat.onMenuShareTimeline({        title: title, // 分享标题        desc: desc,   // 分享描述        link: link,   // 分享链接 默认以当前链接        imgUrl: imgUrl, // 分享图标        success () {        },        cancel () {        }      })    })  }
  • 页面中调用wxShare实现自定义分享
  activated () {    this.share()  },  methods: {    share () {      let link = window.location.href.split('#')[0]      this.wxShare('首页', '首页内容', link, 'https://o3e85j0cv.qnssl.com/tulips-1083572__340.jpg')    }  }

最后最重要的一点是:

调试分享的时候使用域名地址,不要使用ip+端口

调试分享的时候使用域名地址,不要使用ip+端口

调试分享的时候使用域名地址,不要使用ip+端口

重要的事情得说三遍,被这个坑惨了

Build Setup

# install dependenciesnpm install# serve with hot reload at localhost:8080npm run dev# build for production with minificationnpm run build# build for production and view the bundle analyzer reportnpm run build --report# run unit testsnpm run unit# run e2e testsnpm run e2e# run all testsnpmtest

For a detailed explanation on how things work, check out theguide anddocs for vue-loader.

About

微信公众号测试项目

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors2

  •  
  •  

Languages


[8]ページ先頭

©2009-2025 Movatter.jp