微信公众号网页开发-Vue项目坑点分析

getWxOpenid(){
      if (!this.openid) {
        // 获取cope
        let code = this.$route.query.code;
        if (code) {
          // 获取openid
          api.get(URL.COM_GET_OPENID(1, code)).then(response => {
            this.openid = response.openid;
            localStorage.setItem('openid', this.openid);

          }).catch(error=>{
            console.log(error);
          })
        } else {
          // 获取微信认证地址
          api.get(URL.COM_GET_AUTHORIZE_URL(1, window.location.href)).then(response => {
            window.location.replace(response.authorize_url);
          }).catch(error=>{
            console.log(error);
          })
        }
      }
    }

# COM_GET_AUTHORIZE_URL对应接口
def get_authorize_url(request):
    scope = request.GET.get('scope', 'snsapi_base')  # 静默授权
    appid = settings.WX_APP_ID
    authorize_url = get_authorize_url_com(redirect_uri=url, scope=scope, appid=appid)
    return ajax.ajax_ok(dict(authorize_url=authorize_url))

# COM_GET_OPENID对应接口
def get_openid(request):
    code = request.GET.get("code")
    appid = settings.WX_APP_ID
    secret = settings.WX_APP_SECRET
    url = 'https://api.weixin.qq.com/sns/oauth2/access_token'
    params = {
        'appid': appid,
        'secret': secret,
        'code': code,
        'grant_type': 'authorization_code',
    }
    res = requests.get(url, params=params).json()
    openid = res.get("openid")  # 获取openid
    return ajax.ajax_ok(dict(openid=openid))

// 微信分享
      wechatShare(){
        let url = window.location.href;
        if (window.__wxjs_is_wkwebview) {
          url = this.$store.state.entryUrl;    // 第一次进入应用的url，否则获取签名失败
        }
        api.get(URL.COM_GET_SIGNATURE(url)).then(res => {
          wx.config({
            debug: false, //开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: res.appId, //必填，公众号的唯一标识
            timestamp: res.timestamp, // 必填，生成签名的时间戳
            nonceStr: res.nonceStr, // 必填，生成签名的随机串
            signature: res.signature, // 必填，签名
            jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData', 'hideMenuItems'] // 必填，需要使用的JS接口列表
          });

          // 分享地址
          let share_link = PUBLICITY_URL + `/wechat/xx/?yysessionid=${localStorage.getItem('sessionid')}`;

          var shareData = {
            title: '标题', // 分享标题
            desc: '描述', // 分享描述
            link: share_link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            imgUrl: '', // 分享图标
            success: function () {
              // 设置成功
            }
          }

          wx.ready(function () {   //需在用户可能点击分享按钮前就先调用
            wx.updateAppMessageShareData(shareData);
            wx.updateTimelineShareData(shareData);
            wx.hideMenuItems({
              menuList: [
                "menuItem:share:qq",
                "menuItem:share:QZone",
                "menuItem:favorite",
                "menuItem:readMode",
                "menuItem:openWithSafari",
                "menuItem:openWithQQBrowser",
              ] // 要显示的菜单项
            });
          });

          wx.error(function (res) {
            console.log(res)
            // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
          });

        }).catch(error=>{
          console.log(error);
        })
      }

from django.conf import settings
from django.core.cache import cache
from wechatpy import WeChatClient
from wechatpy.client.api import WeChatJSAPI
from wechatpy.session import SessionStorage


class CacheStorage(SessionStorage):
    """存储数据, 包括 token, ticket."""

    def __init__(self, prefix='wechatpy'):
        self.prefix = prefix

    def key_name(self, key):
        return '{0}:{1}'.format(self.prefix, key)

    def get(self, key, default=None):
        key = self.key_name(key)
        value = cache.get(key)
        if value is None:
            return default
        return value

    def set(self, key, value, ttl=None):
        if value is None:
            return
        key = self.key_name(key)
        cache.set(key, value, ttl)

    def delete(self, key):
        key = self.key_name(key)
        cache.delete(key)


# 微信客户端
wxclient = WeChatClient(
    appid=settings.WX_APP_ID, secret=settings.WX_APP_SECRET, session=CacheStorage()
)

# jsapi 客户端
jsapi_client = WeChatJSAPI(wxclient)
user_client = WeChatUser(wxclient)

def get_signature(request):
    data = Struct()
    url = request.GET.get('url', '')    # 有分享功能的页面地址
    noncestr = random_string(k=16)
    ticket = jsapi_client.get_jsapi_ticket()
    timestamp = get_timestamp()
    signature = jsapi_client.get_jsapi_signature(noncestr, ticket, timestamp, url)
    data.appId = settings.WX_APP_ID
    data.timestamp = timestamp
    data.nonceStr = noncestr
    data.signature = signature
    return ajax.ajax_ok(data)


def random_string(k=16):
    """随机字符串"""
    return ''.join(sample(CHAR, k))


def get_timestamp():
    """获取时间戳"""
    return int(time.time())

jumpPage() {
  let auth_url = window.location.href;
  let pathname = window.location.pathname;
  let entryUrl = this.entryUrl;
  if (window.__wxjs_is_wkwebview && !entryUrl.length) {
    // 微信分享获取签名，ios需要使用第一次进入应用的url，android使用当前页面url即可
    this.$store.commit('SET_ENTRY_URL',auth_url);
  }
  let sessionid = localStorage.getItem('sessionid');
  if (sessionid) {
    // 已登陆
    if (pathname === '/login' || pathname === '/') {
      this.$router.replace('/pad');
    }
  } else {
    // 未登录
    if (pathname !== '/login') {
      this.$router.replace('/login');
    }
  }
},

// 分享地址
let share_link = PUBLICITY_URL + `/wechat/xx/yysessionid=${localStorage.getItem('sessionid')}`;