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

Posted 2020-09-02 奋斗中的小人物

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了web微信开发前期准备最新详细流程相关的知识，希望对你有一定的参考价值。

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

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

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

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

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

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

配置完毕并且确认花生壳外网地址可以访问得到后，在微信官方开发者文档接入指南页面下载认证php文件：wx_sample.php https://mp.weixin.qq.com/wiki/8/f9a0b8382e0b77d87b3bcc1ce6fbc104.html#.E7.AC.AC.E4.B8.80.E6.AD.A5.EF.BC.9A.E5.A1.AB.E5.86.99.E6.9C.8D.E5.8A.A1.E5.99.A8.E9.85.8D.E7.BD.AE
放到服务器地址或者服务器里的文件夹，此时访问到wx_sample.php 为止的路径才是微信想要的服务器可验证url地址，比如我的放在core里面，因此这个url地址为：

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

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

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

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

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

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

目录如下：

接下来说说怎么配置吧：

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和appsecret

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

到此不出意外便成功了。

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

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

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();
           



        }
    });
});

PS:如果你接手的不是自己一手开发的微信网页，那么你首先要找后台要接口地址和Token；比如我的一个项目接口和Token是后台配置的，直接在本地运行会出现报错：

后台给我配置是这样的：

除了把这个接入微信测试公众号，记得集成服务器也得修改地址，我的是阿帕奇xampp，每次修改记得重启集成服务器！！

再次访问项目入口文件，ok了：

以上是关于web微信开发前期准备最新详细流程的主要内容，如果未能解决你的问题，请参考以下文章