Koa2微信公众号开发之消息管理,AngularJS标签页tab选项卡切换功能经典实例详解

一、简介

最近在弄cordova,又要折腾nodejs了。

本文实例讲述了AngularJS实现标签页tab选项卡功能。分享给大家供大家参考,具体如下:

上一节Koa2微信公众号开发(一),我们搭建好了本地调试环境并且接入了微信公众测试号。这一节我们就来看看公众号的消息管理。并实现一个自动回复功能。

今天安装cordova模块的时候,看到nodejs的默认模块安装路径在c盘

选项卡一:

Github源码:
github.com/ogilhinn/ko…

于是想修改下,按命令 npm config set prefix 。

JavaScript+html+css

阅读建议:微信公众平台开发文档mp.weixin.qq.com/wiki

结果就遇坑了,之后我的npm命令完全无反应,不是加载的那种状态

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>www.jb51.net js标签页tab切换</title>
    <style>
      #div1 .active{
        background:blue;
      }
      #div1 div{
        width:200px;
        height:200px;
        background:gray;
        border:1px solid black;
        display:none;
      }
    </style>
    <script>
      window.onload=function (){
        var oDiv=document.getElementById('div1');
        var aBtn=oDiv.getElementsByTagName('input');
        var aDiv=oDiv.getElementsByTagName('div');
        for(var i=0;i<aBtn.length;i++){     //遍历div1中的按钮
          aBtn[i].index=i;      //给aBth[]添加自定义属性
          aBtn[i].onclick=function (){
            for(var i=0;i<aBtn.length;i++){ //遍历按钮,将class清除
              aBtn[i].className='';
              aDiv[i].style.display='none';
            }
            this.className='active';
            aDiv[this.index].style.display='block';
          }
        }
      }
    </script>
  </head>
  <body>
    <div id="div1">
      <input class="active" type="button" value="选项1" />
      <input type="button" value="选项2" />
      <input type="button" value="选项3" />
      <input type="button" value="选项4" />
      <div style="display:block;">111</div>
      <div>222</div>
      <div>333</div>
      <div>444</div>
    </div>
  </body>
</html>

二、接收消息

而是下标不停地在哪里闪…

运行效果(直接在上测试运行):

当普通微信用户向公众账号发消息时,微信服务器将POST消息的XML数据包到开发者填写的URL上。

之后找解决方案,说要删除npmrc文件。

图片 1

2.1 接收普通消息数据格式

强调:不是nodejs安装目录npm模块下的那个npmrc文件

选项卡二:

XML的结构基本固定,不同的消息类型略有不同。

而是在C:\Users\{账户}\下的.npmrc文件….

angularjs指令:

用户发送文本消息时,微信公众账号接收到的XML数据格式如下所示:

ok,可以使用npm命令了。

ng-class、ng-click、ng-if

<xml>
 <ToUserName><![CDATA[toUser]]></ToUserName>
 <FromUserName><![CDATA[fromUser]]></FromUserName>
 <CreateTime>createTime</CreateTime>
 <MsgType><![CDATA[text]]></MsgType>
 <Content><![CDATA[this is a test]]></Content>
 <MsgId>1234567890123456</MsgId>
</xml>

以上这篇解决nodejs的npm命令无反应的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>www.jb51.net AngularJS标签页tab切换</title>
  <style>
    .active {
      background-color: orange;
    }
  </style>
  <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app="s1.app">
<div>
  <button ng-class="{ 'active' : data.current == 1 }" ng-click="actions.setCurrent(1)">张三</button>
  <button ng-class="{ 'active' : data.current == 2 }" ng-click="actions.setCurrent(2)">李四</button>
  <button ng-class="{ 'active' : data.current == 3 }" ng-click="actions.setCurrent(3)">王五</button>
</div>
<div>
  <div ng-if="data.current == 1">张三的个人信息</div>
  <div ng-if="data.current == 2">李四的个人信息</div>
  <div ng-if="data.current == 3">王五的个人信息</div>
  <script>
    var app = angular.module('s1.app', []);
    app.run(function ($rootScope) {
      $rootScope.data = {
        current: "1" // 1代表张三,2代表李四,3代表王五
      };
      $rootScope.actions =
      {
        setCurrent: function (param) {
          $rootScope.data.current = param;
        }
      }
    })
  </script>
</div>
</body>
</html>

用户发送图片消息时,微信公众账号接收到的XML数据格式如下所示:

您可能感兴趣的文章:

  • 浅析Nodejs npm常用命令
  • Node.js中npm常用命令大全
  • NodeJs安装npm包一直失败的解决方法
  • Nodejs中 npm常用命令详解

运行效果(直接在上测试运行):

<xml> 
 <ToUserName><![CDATA[toUser]]></ToUserName>
 <FromUserName><![CDATA[fromUser]]></FromUserName>
 <CreateTime>1348831860</CreateTime> 
 <MsgType><![CDATA[image]]></MsgType> 
 <PicUrl><![CDATA[this is a url]]></PicUrl>
 <MediaId><![CDATA[media_id]]></MediaId> 
 <MsgId>1234567890123456</MsgId>
</xml>

图片 2

其他消息消息类型的结构请查阅【微信公众平台开发文档】

选项卡三:

对于POST请求的处理,koa2没有封装获取参数的方法,需要通过自己解析上下文context中的原生node.js请求对象request。我们将用到row-body这个模块来拿到数据。

angularjs 指令:

2.2 先来优化之前的代码

ng-class、ng-click、ng-show

这一节的代码紧接着上一届实现的代码,在上一届的基础上轻微改动了下。

<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
  <meta charset="UTF-8">
  <title>www.jb51.net AngularJS标签页tab切换</title>
  <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<section ng-controller="myCtrl as panel">
  <ul>
    <li ng-class="{active:panel.isSelected(1)}">
      <a href ng-click="panel.selectTab(1)">1111111111</a>
    </li>
    <li ng-class="{active:panel.isSelected(2)}">
      <a href ng-click="panel.selectTab(2)">2222222222</a>
    </li>
    <li ng-class="{active:panel.isSelected(3)}">
      <a href ng-click="panel.selectTab(3)">33333333333</a>
    </li>
  </ul>
  <!--是否点击-->
  {{panel.isSelected(1)}}
  {{panel.isSelected(2)}}
  {{panel.isSelected(3)}}
  <div class="panel" ng-show="panel.isSelected(1)">
    <h1>我是1111111111111111111111</h1>
  </div>
  <div class="panel" ng-show="panel.isSelected(2)">
    <h1>我是22222222222222222</h1>
  </div>
  <div class="panel" ng-show="panel.isSelected(3)">
    <h1>我是3333333333333333333333</h1>
  </div>
</section>
<script>
  var app = angular.module("myApp", []);
  app.controller("myCtrl", function () {
    this.tab = 2;/*设置默认*/
    this.selectTab = function (setTab) {/*设置tab点击事件*/
      this.tab = setTab;
    };
    this.isSelected = function (checkedTab) {/*页面的切换*/
      return this.tab === checkedTab;
    }
  });
</script>
</body>
</html>
'use strict'

const Koa = require('koa')
const app = new Koa()
const crypto = require('crypto')
// 将配置文件独立到config.js
const config = require('./config')

app.use(async ctx => {
 // GET 验证服务器
 if (ctx.method === 'GET') {
  const { signature, timestamp, nonce, echostr } = ctx.query
  const TOKEN = config.wechat.token
  let hash = crypto.createHash('sha1')
  const arr = [TOKEN, timestamp, nonce].sort()
  hash.update(arr.join(''))
  const shasum = hash.digest('hex')
  if (shasum === signature) {
   return ctx.body = echostr
  }
  ctx.status = 401
  ctx.body = 'Invalid signature'
 } else if (ctx.method === 'POST') { // POST接收数据
  // TODO
 }
});

app.listen(7001);

运行效果(直接在上测试运行):

这儿我们在只在GET中验证了签名值是否合法,实际上我们在POST中也应该验证签名。

图片 3

将签名验证写成一个函数

选项卡四:

function getSignature (timestamp, nonce, token) {
 let hash = crypto.createHash('sha1')
 const arr = [token, timestamp, nonce].sort()
 hash.update(arr.join(''))
 return hash.digest('hex')
}

angularjs 指令

优化代码,再POST中也加入验证

第二种和第三种方式来源于下面代码的改进,产生的效果都是一样的。

...

app.use(async ctx => {
 const { signature, timestamp, nonce, echostr } = ctx.query
 const TOKEN = config.wechat.token
 if (ctx.method === 'GET') {
  if (signature === getSignature(timestamp, nonce, TOKEN)) {
   return ctx.body = echostr
  }
  ctx.status = 401
  ctx.body = 'Invalid signature'
 }else if (ctx.method === 'POST') {
  if (signature !== getSignature(timestamp, nonce, TOKEN)) {
   ctx.status = 401
   return ctx.body = 'Invalid signature'
  }
  // TODO
 }
});
...
<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
  <meta charset="UTF-8">
  <title>www.jb51.net AngularJS标签页tab切换</title>
  <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<section ng-init="tab=3">
  <ul>
    <li ng-class="{active:tab===1}">
      <a href ng-click="tab=1">1111111111</a>
    </li>
    <li ng-class="{active:tab===2}">
      <a href ng-click="tab=2">2222222222</a>
    </li>
    <li ng-class="{active:tab===3}">
      <a href ng-click="tab=3">33333333333</a>
    </li>
  </ul>
  <!--是否点击-->
  {{tab===1}}
  {{tab===2}}
  {{tab===3}}
  <div class="panel" ng-show="tab===1">
    <h1>我是1111111111111111111111</h1>
  </div>
  <div class="panel" ng-show="tab===2">
    <h1>我是22222222222222222</h1>
  </div>
  <div class="panel" ng-if="tab===3">
    <h1>我是3333333333333333333333</h1>
  </div>
</section>
<script>
  var app = angular.module("myApp", []);
  app.controller("myCtrl", function () {
  });
</script>
</body>
</html>

到这儿我们都没有开始实现接受XML数据包的功能,而是在修改之前的代码。这是为了演示在实际开发中的过程,写任何代码都不是一步到位的,好的代码都是改出来的。

运行效果(直接在上测试运行):

2.3 接收公众号普通消息的XML数据包

图片 4

现在开始进入本节的重点,接受XML数据包并转为JSON

但ng-show和ng-if是有区别的

发表评论

电子邮件地址不会被公开。 必填项已用*标注