微信开发的环境配置流程

好久没写东西了,闲来无事,写点东西。每天过的充实点。

##微信开发
一、首先大家应该了解以下内容:

1、一个注册好的微信公众号,订阅号和服务号都行。不过一般个人开发用的是订阅号。服务号需要企业的认证才能申请。比较麻烦。至于需要哪一种,看个人选择。

2、一个版本控制工具GitLab和SourceTree(本地的软件)。对修改后的代码进行一个跟新和版本的控制。GitLab还具备服务器的作用。使得开发的微信页面得以显示。(当然这里你也可以使用其他的服务器比如说:新浪的SAE工具)

3、下载微信的开发者文档。我们需要用到当中的“微信网页开发”部分的文档。

接下来就跟大家分享下具体的操作步骤:

###微信订阅号的申请:
1、你可以在百度中搜索微信公众平台:进行账号的注册。如下图填写信息完成注册。

由于我申请的是订阅号,所以在开发中需要借助微信的测试账号进行操作。接下来继续申请测试账号。如下图所示:点击左下角的开发者工具,找到右图的公众平台测试账号

2、进入到测试账号之后,需要记住自己的appID和appsecret账号。在以后的开发文档中需要用到。当然你也可以之后粘贴复制。接着还需要修改“js接口安全域名”,这个域名就是在gitlab上面需要关联的域名了。需要注意的是,这个域名一定要是一级域名。因为使用的是测试号的原因,这里在使用之前需要先关注下测试公众号。具体的方法就是扫描左下角的二维码。以上操作可以参考下图:

###GitLab的配置

说实话本人是最烦这种配置环境的事情,不过有时候工作需要,我们也是没有办法的,凡事慢慢来吧。
1、登录GitLab,点击左下角的profile setting ,弹出如下页面,设置自己的名字(英文名),自己的邮箱,然后点击左下角的按钮。
如图所示:


2、以上设置完之后,点击返回首页,点击help按钮,然后找到右边的ssh,点进去如下图所示,复制例如:ssh-keygen -t rsa -C “zh66j66w66@qq.com”的代码,邮箱以刚才设置的邮箱为准。
如图所示


3、把刚才复制的代码添加到终端中。如下图所示

对微信开发文档的操作

1、找到微信的开发者文档。我们需要用到当中的“微信网页开发”部分中的“微信JS-SDK”文档。 在网页的底部找到示例代码:下载下来。这是一个文件。我们可以需要用到文件中的php中的sample.php文件。
代码如下:需要改动的看后面的注释部分

<?php
require_once "jssdk.php";
$jssdk = new JSSDK("wxe7438173d2c401dd", "47b14e27c12de2e3213be5721ccab28c");//这里是要用字上面需要大家记住的appID和appsecret账号
$signPackage = $jssdk->GetSignPackage();
?>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>

</body>
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script>
  /*
   * 注意:
   * 1. 所有的JS接口只能在公众号绑定的域名下调用,公众号开发者需要先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
   * 2. 如果发现在 Android 不能分享自定义内容,请到官网下载最新的包覆盖安装,Android 自定义分享接口需升级至 6.0.2.58 版本及以上。
   * 3. 常见问题及完整 JS-SDK 文档地址:http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html
   *
   * 开发中遇到问题详见文档“附录5-常见错误及解决办法”解决,如仍未能解决可通过以下渠道反馈:
   * 邮箱地址:weixin-open@qq.com
   * 邮件主题:【微信JS-SDK反馈】具体问题
   * 邮件内容说明:用简明的语言描述问题所在,并交代清楚遇到该问题的场景,可附上截屏图片,微信团队会尽快处理你的反馈。
   */
  wx.config({
    debug: true,
    appId: '<?php echo $signPackage["appId"];?>',
    timestamp: <?php echo $signPackage["timestamp"];?>,
    nonceStr: '<?php echo $signPackage["nonceStr"];?>',
    signature: '<?php echo $signPackage["signature"];?>',
    jsApiList: [
      // 所有要调用的 API 都要加到这个列表中。这里是添加文件的代码。具体的参考开发文档。
        'onMenuShareTimeline',
        'onMenuShareAppMessage' 
    ]
  });
  wx.ready(function () {
    var link=location.href;
    // 在这里调用 API
    wx.onMenuShareTimeline({
    title: '什么玩意', // 分享标题
    link: '', // 分享链接
    imgUrl: '', // 分享图标
    success: function () { 
        // 用户确认分享后执行的回调函数
    },
    cancel: function () { 
        // 用户取消分享后执行的回调函数
    }
});

    wx.onMenuShareAppMessage({
    title: '什么意思', // 分享标题
    desc: '没什么意思', // 分享描述
    link: '链接是吧', // 分享链接
    imgUrl: '', // 分享图标
    type: '', // 分享类型,music、video或link,不填默认为link
    dataUrl: '', // 如果type是music或video,则要提供数据链接,默认为空
    success: function () { 
        // 用户确认分享后执行的回调函数
        alert("什么意思");
    },
    cancel: function () { 
        // 用户取消分享后执行的回调函数
    }
});
  });
</script>
</html>

使用SourceTree对文件进行管理:

1、打开界面如下

2、对修改的文件:先进行提交,在进行推送。
3、之后登录例如:“http://sh01-james.ilanou.com/sample.php”进行在手机上进行二维码的扫描。
之后就可以看到自己在开发者文档中修改的内容。包括主题、描述、图片、内容等。
经过以上的千辛万苦终于完成了配置。其实这才是微信号开发的开始,接下来继续努力吧!