web微信开发前期准备最新详细流程

一、申请配置测试公众号与配置本地服务器  

1、打开浏览器,输入:http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login,微信扫码确认登录

web微信开发前期准备最新详细流程

 

2、进入到该页面,可以看到测试公众号的微信名,以及非常重要的appID和

web微信开发前期准备最新详细流程

 

3、填写服务器url,这个地址是要可以外网访问的,同时给微信服务器认证的,所以分两步走,一是先弄个外网可以访问的服务器地址,二是在该地址下放置微信官方要求的php文件

  • 网上许多教程都是配置外网服务器,比如百度云服务或者新浪云服务,不利于提高开发效率,本人推荐配置本地服务器,主要是通过花生壳与阿帕奇,具体怎么配置外网可访问的本地服务器,请看我这篇文章的前半部分:http://www.cnblogs.com/ahao68/p/6250398.html

        我的配置以及本地服务器文件夹如下,因此http://162c24l811.iok.la是我的服务器地址,但是这不是微信想要的哦

         web微信开发前期准备最新详细流程

  web微信开发前期准备最新详细流程

         http://162c24l811.iok.la/core/wx_sample.php

 web微信开发前期准备最新详细流程

 

4、填写Token,可以自行填写,但是必须与wx_sample.php中的Token一致,打开wx_sample.php即可看到,可修改

web微信开发前期准备最新详细流程

 

5、填写域名,域名即为花生壳给你的域名,我的是162c24l811.iok.la

web微信开发前期准备最新详细流程

 到此测试公众号与本地服务器配置完毕。

 

二、配置调用微信接口需要的access_token和签名

     微信有写好各种语言版本的,自己突然暂时找不到,就在这里分享自己的云盘链接吧:http://pan.baidu.com/s/1gfgKOHP,我用的是php语言版。不过,里面有些东西还是要自己配置,不懂php还是难搞得的,所以,送给看到这篇文章又有需要的人一个礼,分享个基本弄好的,简单配置就可以用的版本吧:http://pan.baidu.com/s/1sk9qySl

目录如下:

web微信开发前期准备最新详细流程

 

     接下来说说怎么配置吧:

1、access_token.json和jsapi_ticket.json建立好内容保持为空哦,这里是接收自动更新生成的access_token和jsapi_ticket用的。

2、配置get_jjsdk.php,require_once后为jssdk.php的路径,我都是放在一起的,直接写jssdk.php;$jssdk = new JSSDK()里面前两个更换为你的测试公众号的appID和

web微信开发前期准备最新详细流程

3、配置jssdk.php,把以下file_get_contents后的改为你的json,注意路径,这里是生成签名等写入json文件的地方

web微信开发前期准备最新详细流程

到此不出意外便成功了。

 

三、开始调用接口和使用微信调试工具


1、除了微信网页js-sdk等不能通过微信开发文档带的在线调试工具开发的功能,其他均可按照官方文档的要求,通过在线调试工具直接操作和写上自己的代码,微信公众号会更新相应的功能,比如自定义菜单、语音回复等。

web微信开发前期准备最新详细流程

 

2、关于使用微信jssdk进行开发,首先先在html页面引入微信js(官方文档为1.1版本,部分功能不支持苹果,比如苹果不支持1版本的图片预览,在这里贡献找了好久的1.2版本):<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js "></script>

3、创建一个js文件引入,这个文件用来请求之前配置好的php文件,更新生成和缓存签名等,以及初始化微信接口,即config。

//获取当前url
var host = window.location.host;
//请求的php地址
get_jjsdk=‘http://‘+window.location.host+‘/core/get_jjsdk.php‘;
$(function(){ 
       var url = window.location.href;
        $.ajax({
          url : get_jjsdk,
          type: "post", 
            data:{‘url‘:url},
          error : function(XMLHttpRequest,textStatus, errorThrown) {
                    console.log(XMLHttpRequest.status);//200客户端请求已成功
                    console.log(XMLHttpRequest.readyState);//4响应内容解析完成,可以在客户端调用了
                    console.log(textStatus);//parsererror
          },
            success:function(data){
                //返回的签名时间戳id等等
                  var jssdk = data;
                //console.log(data);
                //初始化接口config
                  wx.config({
                        debug: false , // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
                        appId: jssdk.appId, // 必填,公众号的唯一标识
                        timestamp:jssdk.timestamp, // 必填,生成签名的时间戳
                        nonceStr: jssdk.nonceStr, // 必填,生成签名的随机串
                        signature: jssdk.signature,// 必填,签名,见附录1
                        // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
                      jsApiList: [
                          ‘checkJsApi‘,
                          ‘onMenuShareTimeline‘,
                          ‘onMenuShareAppMessage‘,
                          ‘onMenuShareQQ‘,
                          ‘onMenuShareWeibo‘,
                          ‘hideMenuItems‘,
                          ‘showMenuItems‘,
                          ‘hideAllNonBaseMenuItem‘,
                          ‘showAllNonBaseMenuItem‘,
                          ‘translateVoice‘,
                          ‘startRecord‘,
                          ‘stopRecord‘,
                          ‘onRecordEnd‘,
                          ‘playVoice‘,
                          ‘pauseVoice‘,
                          ‘stopVoice‘,
                          ‘uploadVoice‘,
                          ‘downloadVoice‘,
                          ‘chooseImage‘,
                          ‘previewImage‘,
                          ‘uploadImage‘,
                          ‘downloadImage‘,
                          ‘getNetworkType‘,
                          ‘openLocation‘,
                          ‘getLocation‘,
                          ‘hideOptionMenu‘,
                          ‘showOptionMenu‘,
                          ‘closeWindow‘,
                          ‘scanQRCode‘,
                          ‘chooseWXPay‘,
                          ‘openProductSpecificView‘,
                          ‘addCard‘,
                          ‘chooseCard‘,
                          ‘openCard‘
                      ]
                          });    
            }
        })  
})

4、开始根据官方文档jssdk开发想要的功能吧~~,这里举例选择图片和上传图片接口的简单案例:

wx.ready(function () {
    //点击触发选择图片
$(‘.chooseImage‘).click(function(){

    wx.chooseImage({
        count: 9, // 默认9
        sizeType: [‘original‘, ‘compressed‘], // 可以指定是原图还是压缩图,默认二者都有
        sourceType: [‘album‘, ‘camera‘], // 可以指定来源是相册还是相机,默认二者都有
        success: function(res) {
            console.log(res);
            images.localId = res.localIds;
            alert(‘已选择 ‘ + res.localIds.length + ‘ 张图片‘);
          var i=0;length = images.localId.length;

            function upload() {
                //上传图片到微信服务器
                //if (images.localId.length == 0) {
                //    alert(‘请先使用 chooseImage 接口选择图片‘);
                //    return;
                //}
                wx.uploadImage({
                    localId: images.localId[i],
                    isShowProgressTips: 1, // 默认为1,显示进度提示
                    success: function(res) {
                        console.log(res);
                        i++;
                      if (i < length) {
                            upload();
                        }else{
                           
                        }

                    },
                    fail: function(res) {
                        alert(JSON.stringify(res));
                    }
                });
            }
            upload();
           



        }
    });
});

 



 

 


 

web微信开发前期准备最新详细流程

上一篇:Jquery生成二维码(微信中长按图片识别二维码功能)


下一篇:判断微信浏览器