jQuery.wechat을 사용하여 WeChat WEB 애플리케이션을 구축하기 위한 메소드 코드

이번 호에서 제가 이야기하고 싶은 것은 제가 고생 끝에 작성한 jQuery.wechat, 통일된 API. 그것이 모두에게 도움이 되기를 바랍니다.

최근 위챗 공식 계정에서 제 제품을 홍보하고 의미 있는 기능을 제공해야 해서 부득이하게 위챗을 후원하게 되면서 돌아올 수 없는 길을 가게 되었습니다.

우리 모두 알고 있듯이 Tencent는 정말 마법 같은 회사입니다. 그들의 제품은 큰 상업적 성공을 거두었지만 Nuo Da에서는 실제 공식 계정 개발 플랫폼을 찾을 수 없습니다. 네, 웹 개발에 관한 공식 문서 중 일부는 단지 개별적인 예일 뿐이고, 나머지는... 하하, 개발자 교류 및 상호 지원이라는 것이 있습니다.

위 사진을 보시면 이런 느낌이 드시나요? 많은 분들이 필사적으로 무슨 일이 있었는지 궁금해하고 계시는데 공식적인 입장은 없습니다! o(∩_∩)o ㅎㅎ

서론이 길어졌으니 이번 호에서 이야기하고 싶은 것은 제가 고생 끝에 작성한 jQuery.wechat 입니다. jQuery를 기반으로 하며 .promise에 대한 통합 API를 제공합니다. 그것이 모두에게 도움이 되기를 바랍니다.

우선

설치는 상당히 간단합니다

코드는 다음과 같습니다.

bower install --save jquery-wechat

Bower를 사용하지 않을 경우,

Git에서 직접 설치할 수 있습니다. 허브에서 다운로드하고 압축을 푸는 방법은 동일합니다!
로딩은 물처럼 자연스럽습니다

코드는 다음과 같습니다.

<script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="bower_components/jquery-wechat/dist/jquery-wechat.min.js"></script>

amd, cmd 등 지연 로딩 기술을 사용하는 경우 동일합니다. 당신은 전문가이므로 구성 방법을 가르쳐 줄 필요가 없습니다. 그렇죠?

사용법 - 간단하고 쉬우며 통일되고 재미있습니다!

jQuery.wechat 기능 활성화

$.wechat.enable(); //정말 쉽습니다!

전체 플러그인이 jQuery.promise를 기반으로 하기 때문에 체인:

코드는 다음과 같습니다:

$.wechat.enable().done(function(){
    alert('已经启用成功');
}).fail(function(){
    alert('启用失败');
});

현재 단일 페이지 기술(SPA)이 널리 보급된 것을 고려하면 도구 클래스 설계에서는 활성화/비활성화 메커니즘을 고려해야 합니다. 그렇지 않으면 알 수 없는 실수가 발생할 수 있습니다.

메뉴 숨기기/표시

코드는 다음과 같습니다.

$.wechat.hideMenu(); //隐藏菜单
$.wechat.showMenu(); //显示菜单

jQuery.wechat을 활성화한 후 추가 없이 hideMenu 등의 메소드를 마음대로 호출할 수 있습니다. other 이 메소드는 활성화의 완료 콜백에 기록됩니다. jQuery.wechat의 구현 원칙은 jQuery.wechat이 성공적으로 활성화되지 않은 경우 모든 작업이 대기열에 추가된다는 것입니다. 성공적으로 활성화되면 해당 작업은 순차적으로 실행되고, 활성화가 실패하면 절대 실행되지 않습니다.

하단 툴바 숨기기/표시
$.wechat.hideToolbar(); //하단 툴바 숨기기
$.wechat.showToolbar() //하단 툴바 표시

QR 코드 스캔 인터페이스 열기

$.wechat.scanQRcode();

사진미리 보기 도구

열기 코드는 다음과 같습니다. :

$.wechat.preview({
    current: 'http://xxx/img/pic001.jpg',  //进入预览模式后，直接显示这张图片
    urls: [
        'http://xxx/img/pic001.jpg',
        'http://xxx/img/pic002.jpg',
        'http://xxx/img/pic003.jpg',
        'http://xxx/img/pic004.jpg',
        'http://xxx/img/pic005.jpg',
        'http://xxx/img/pic006.jpg'
    ]                                      //所有要在预览模式下显示的图片
});

네트워크

상태 가져오기

코드는 다음과 같습니다.

$.wechat.getNetworkType().done(function(response) {
    $('#network').text(response.split(':')[1]); 
});

응답 형식은 다음과 같습니다.

코드는 다음과 같습니다.

network_type:wifi    wifi网络
network_type:edge    非wifi,包含3G/2G
network_type:fail    网络断开连接
network_type:wwan    (2g或者3g)

공유 형식 수정

다른 사람의 앱에서 공유한 메시지를 볼 때마다 아름다운

썸네일이 표시됩니다. , 적절한 제목과 설명, 그리고 더 많은 뉴스 메시지를 보낸 사람을 나타내는 작은 텍스트 줄도 있습니다. 제목이 일치하지 않는 파란색 기본 빈 그림을 보세요. 논리가 뭐야?

다행히 이제 이 문제를 해결해 보겠습니다.

코드는 다음과 같습니다.

$.wechat.setShareOption({
    appid: 'xxxx',                                               //小标appid
    img_width: '60',
    img_height: '60',
    img_url: window.location.toString() + 'img/demo.jpg',        //缩略图
    title: 'DEMO',                                               //标题
    desc: 'The description is set from $.wechat.setShareOption', //描述
    link: function() {
        return window.location.toString();                       //消息分享出去后，用户点击消息打开的链接地址
    },
    callback: function(response) {
        alert(response);                                         //分享后的回调函数，常见的有成功和取消
    }
});

구체적인 참고로 스크린샷은 다음과 같습니다.

이번 공유 형식 변경은 친구에게 보내기, Moments에 공유하기, Weibo에 공유하기, 이메일 보내기 등 4가지 기능에 영향을 미칩니다. 설정 후, 우측 상단의 메뉴 버튼을 눌러 메뉴를 열고, 위에서 언급한 4개 항목 중 하나를 선택하면 변경된 효과를 볼 수 있습니다

현재 페이지 닫기

코드는 다음과 같습니다:

$.wechat.closeWindow();

jQuery.wechat 메커니즘 비활성화

코드는 다음과 같습니다:

$.wechat.destroy();

비활성화 후 모든 기능이 자동으로 재설정됩니다. 초기상태로 되돌리기

싱글페이지 애플리케이션(SPA)에서 흔히 사용되는 기능입니다

위 내용은 jQuery.wechat을 사용하여 WeChat WEB 애플리케이션을 구축하기 위한 메소드 코드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!