Сводка по совместному использованию WeChat в режиме истории проекта Vue

Vue.js

Каждый раз, когда я сталкиваюсь с обменом WeChat, это яма. Текущий проект торгового центра использует Vue для разработки, принимает исторический режим маршрутизации и сталкивается со многими проблемами при настройке обмена WeChat и, наконец, решил их. Теперь я поделюсь процессом решения Это.

оригинальныйjustyeh.top/post/39

Технические моменты

Вью, история

Часто задаваемые вопросы и инструкции

Режим ОТЛАДКИ Сообщить о ложном

Это нечего сказать, это звонитьwx.configЕсли параметр метода неверен, подтвердите следующее:

  1. Успешно ли привязано доменное имя (должен быть доступен файл проверки доменного имени)
  2. Используйте последний файл js-sdk, потому что WeChat изменит некоторые API.
  3. Правильно ли переданы параметры метода конфигурации (орфографические ошибки, использование заглавных букв...)
  4. Написан ли используемый метод наjsApiListсередина
  5. Для получения подписанного URL требуетсяdecodeURIComponent
  6. Метод шифрования для генерации подписей в фоновом режиме необходимо сравнить с официальными документами.

отладка возвращает нормально, обмен не удался

  1. Убедитесь, что код написан правильно
  2. Имя домена общей ссылки или путь должны соответствовать имени домена безопасности JS общедоступной учетной записи, соответствующему текущей странице.
  3. Вызов интерфейса должен быть помещен вwx.readyметод

Некоторые моменты в одностраничном проекте (SPA)

Все страницы, которые должны использовать JS-SDK, должны сначала вводить информацию о конфигурации, иначе они не могут быть вызваны (один и тот же URL-адрес нужно вызывать только один раз, а веб-приложение SPA, которое меняет URL-адрес, может вызываться каждый раз при изменении URL-адреса). В настоящее время клиент WeChat для Android. Новая функция pushState H5 не поддерживается, поэтому использование pushState для реализации страниц веб-приложения приведет к сбою подписи. Эта проблема будет исправлена ​​в Android 6.2).

Приведенный выше отрывок взят изофициальная документация

Примечания для разработчиков:

  1. android и ios нужно обрабатывать отдельно
  2. Его необходимо вызывать снова при изменении URL-адреса страницы.wx.configметод, Android получает подписанный URL-адрес и передает егоwindow.location.href
  3. Когда проект Vue переключает страницы, URL-адрес браузера в IOS не изменится, это по-прежнему адрес первой записи страницы, поэтому IOS необходимо передать URL-адрес первой страницы входа, чтобы получить подписанный URL-адрес.

Code

router/index.js

......
import { wechatAuth } from "@/common/wechatConfig.js";
......

const router = new Router({
    mode: "history",
    base: process.env.BASE_URL,
    routes: [
        {
            path: "/",
            name: "home",
            meta: {
                title: "首页",
                showTabbar: true,
                allowShare: true
            },
        },
        {
            path: "/cart",
            name: "cart",
            meta: {
                title: "购物车",
                showTabbar: true
            },
            component: () => import("./views/cart/index.vue")
        }
        ......
    ]
});


router.afterEach((to, from) => {
    let authUrl = `${window.location.origin}${to.fullPath}`;
    let allowShare = !!to.meta.allowShare;

    if (!!window.__wxjs_is_wkwebview) {// IOS
        if (window.entryUrl == "" || window.entryUrl == undefined) {
            window.entryUrl = authUrl; // 将后面的参数去除
        }
        wechatAuth(authUrl, "ios", allowShare);
    } else {
        // 安卓
        setTimeout(function () {
            wechatAuth(authUrl, "android", allowShare);
        }, 500);
    }
});

Суть кода:

  1. Параметр allowShare в мета используется для определения того, можно ли поделиться страницей.
  2. window.__wxjs_is_wkwebview можно использовать, чтобы определить, является ли это браузером WeChat IOS.
  3. entryUrl — это адрес страницы, на которую впервые зашел проект, кэшированный в объекте окна.
  4. Зачем нужно добавлять устройство задержки для Android, ведь в Android бывают некоторые ситуации, то есть даже в случае успешной подписи функция все равно не сможет быть вызвана, вроде бы это относительно безопасное решение.

wechatConfig.js

import http from "../api/http";
import store from "../store/store";

export const wechatAuth = async (authUrl, device, allowShare) => {
    let shareConfig = {
        title: "xx一站式服务平台",
        desc: "xxxx",
        link: allowShare ? authUrl : window.location.origin,
        imgUrl: window.location.origin + "/share.png"
    };

    let authRes = await http.get("/pfront/wxauth/jsconfig", {
        params: {
            url: decodeURIComponent(device == "ios" ? window.entryUrl : authUrl)
        }
    });

    if (authRes && authRes.code == 101) {
        wx.config({
            //debug: true,
            appId: authRes.data.appId,
            timestamp: authRes.data.timestamp,
            nonceStr: authRes.data.nonceStr,
            signature: authRes.data.signature,
            jsApiList: ["updateAppMessageShareData", "updateTimelineShareData", "onMenuShareAppMessage", "onMenuShareTimeline"]
        });

        wx.ready(() => {
            wx.updateAppMessageShareData({
                title: shareConfig.title,
                desc: shareConfig.desc,
                link: shareConfig.link,
                imgUrl: shareConfig.imgUrl,
                success: function () {//设置成功
                    //shareSuccessCallback();
                }
            });
            wx.updateTimelineShareData({
                title: shareConfig.title,
                link: shareConfig.link,
                imgUrl: shareConfig.imgUrl,
                success: function () {//设置成功
                    //shareSuccessCallback();
                }
            });
            wx.onMenuShareTimeline({
                title: shareConfig.title,
                link: shareConfig.link,
                imgUrl: shareConfig.imgUrl,
                success: function () {
                    shareSuccessCallback();
                }
            });
            wx.onMenuShareAppMessage({
                title: shareConfig.title,
                desc: shareConfig.desc,
                link: shareConfig.link,
                imgUrl: shareConfig.imgUrl,
                success: function () {
                    shareSuccessCallback();
                }
            });
        });
    }
};

function shareSuccessCallback() {
    if (!store.state.user.uid) {
        return false;
    }
    store.state.cs.stream({
        eid: "share",
        tpc: "all",
        data: {
            uid: store.state.user.uid,
            truename: store.state.user.truename || ""
        }
    });
    http.get("/pfront/member/share_score", {
        params: {
            uid: store.state.user.uid
        }
    });
}

Суммировать

Метод hideMenuItems использовался для скрытия соответствующих кнопок на страницах, которые изначально планировалось не публиковать, пробовал под ios, были баги: страница с переключением страниц кнопки и страница со скрытой кнопкой, кнопка "поделиться" иногда все же есть, и нет проблем с ее обновлением.Это глубокая яма.Если у вас нет сил бросать, вы можете изменить ее на частную страницу и поделиться ею на главной странице, и общедоступной странице чтобы поделиться исходным адресом.Если есть какое-либо хорошее решение, пожалуйста, свяжитесь со мной!

В начале у меня была ссылка на блог на sfсегмент fault.com/ah/119000001…，В соответствии с приведенным выше кодом телефоны Android могут быть успешными, но у IOS есть странная проблема, то есть периодически происходит сбой обмена.Для одной и той же страницы общий доступ происходит сразу после ее вызова, и он терпит неудачу после повторной попытки. (иконки, заголовка нет, только Перейти на главную страницу), после "непрерывных" усилий проблема должна решиться, поговорим о процессе:

  1. Сначала я подумал, что проблема в неудачном асинхронном возбуждении, поэтому добавил в IOS таймер, вызывающий метод wechatAuth, как и в android, протестировал еще раз, не сработало, поэтому сдался.

  2. Исходный js-sdk устанавливается через npm, а версия имеет тест.Я немного волнуюсь.Вместо этого я напрямую использую тег script для ссылки на официальную версию.

  3. Я перечитал документ и обнаружил, что такие методы, как onMenuShareTimeline, скоро будут заброшены, поэтому я изменил jsApiList наjsApiList:['updateAppMessageShareData','updateTimelineShareData'], после изменения становится IOS может преуспеть, совместное использование Android не удается

  4. Причины сбоя Baidu updateAppMessageShareData Android, см. эту ссылкуwoohoo.brief.com/afraid/1 не 6 о 04 из 29…，Добавить старый апи в jsApiList, тщательно и неоднократно пробовал оба устройства, оба в порядке, вроде успешно, говоря "кажется" потому что не знаю, всякие "магические" коды!

Наконец, я надеюсь, что официальный Tencent сможет перекусить, вовремя обновить документ и сможет ли демо предоставить полную информацию....

Ссылка на ссылку

сегмент fault.com/ah/119000001… woohoo.brief.com/afraid/1 не 6 о 04 из 29… сегмент fault.com/ah/119000001… GitHub.com/v UE JS/v UE-день…

Категории