一、微信公众平台概述

1、历史起源

• 2011年1月21日，腾讯推出微信（张小龙）
• 2011年8月，用户达到1500万 。到2011年底，微信用户已超过5000万
• 2012年8月20日，腾讯推出微信公众平台功能，同年11月开放第三方接口
• 2013年1月微信突破3亿，海外版wechat用户也达到7000万
• 2013年10月24日，腾讯微信的用户数量已经超过了6亿，每日活跃用户1亿

2、微信公众平台

• 微信公众平台：给个人、企业和组织提供业务服务与用户管理能力的服务平台，如：

查看关注用户，回复用户消息，推送文章消息给用户等

• 平台地址：https://mp.weixin.qq.com/

3、微信与微信公众平台区别（★）

• 微信：是一款跨平台的通讯工具。支持单人、多人参与。通过手机网络发送语音、

图片、视频和文字。

• 微信公众平台：管理公众号的系统/平台，可以查看关注用户，推送消息给用户

4、微信公众号

二、概念

1、微信公众号：订阅号与服务号的区别

• 订阅号：针对的是个人和媒体，每天只能发送一条信息，默认有自定义菜单（不可

以自定义跳转地址），不支持微信认证（注：目前订阅号不支持升级服务号）

• 服务号：针对的是企业或组织，每月只能发送4条信息，默认有自定义的菜单，认

证（300/年），认证完成可以使用高级接口（如：微信支付，用户管理等）

微信平台的两种运营模式（★）

• 说明：在微信公众平台注册成功后可以获得一个微信公众号（订阅/服务

等），该公众号可以分享给用户关注，并且后期登录公众平台可以进去管

理（如：查看关注用户，回复关注用户消息，推送消息给关注用户等）

• 编辑模式运营：通过之前注册的公众平台管理公众号
• 开发模式运营：不用原来注册的平台管理公众号，而是自己独立开发

脚下留心：开发者模式和编辑模式相互排斥

编辑模式适用场景

• 不具备开发能力的运营者
• 主要是进行品牌宣传、新闻媒体、自助客服的公众帐号
• 运营初期，不需要特别多的功能
• 开发模式系统升级、故障等特殊情况

三、公众平台注册

1、打开官网

官网：https://mp.weixin.qq.com/

2、填写基本资料

3、验证邮箱，选择账号类型

4、选择【订阅号】后，信息录入

填写身份证姓名和身份证卡号

5、公众号信息

6、注册成功页

通过网址【https://mp.weixin.qq.com/】登录，也可以进入该页面

四、编辑模式运营（了解）

1、编辑模式和开发模式切换

脚下留心：切换开发模式后编辑模式将禁用

2、编辑模式功能

1）群发功能

2）回复功能 – 被关注添加自动回复

关注公共账号，平台发送的关注信息或欢迎语，我们通常称之为订阅回复或关注回复。

3）回复功能 – 关键词自动回复

当我们设定的关键词与用户发送的关键词相匹配时，系统自动回复执行消息。

未全匹配：当用户发送的内容包含当前关键词，系统自动回复。

已全匹配：当用户发送的内容与当前关键词完全匹配，系统自动回复

︴思考：如何修改已经存在的规则

4）回复功能 – 消息自动回复

当用户发送的关键词与我们设定的关键词不匹配时，系统自动回复此信息。

温馨提示：

1、消息自动回复：1个小时内回复1—2条内容；

2、暂不支持设置图文、网页地址消息回复；

3、消息自动回复只能设置一条信息回复。

︴案例：简单号码薄

1）功能需求和效果

用户关注后或输【？】自动弹出自定义回复文本信息如下：

回复1特种服务号码

回复2通讯服务号码

回复3银行服务号码

回复4用户反馈

2）回复1

常用特种服务号码：

匪警：110

火警：119

急救中心：120

3）回复2

常用通讯服务号码：

中移动：10086

中电信：10000

中联通：10010

4）回复3

银行服务号码

建设银行：95533

工商银行：99588

农业银行：95599

5）回复4

尊敬的用户，为了更好的为您服务，请将系统的不足之处反馈给我们。

反馈格式：@+建议内容

例如：@希望增加***号码

回复：感谢您的宝贵建议，我们会努力为您提供更好的服务！

5）关注：

欢迎关注简易号码簿！

在这里，我们为您提供常用号码查询服务。您可以通过文本菜单交互或关键字搜索的方式查找号码。

快回复？开始体验吧！

︴案例：自定义菜单

1）说明

• 自定义菜单一级菜单3个二级菜单5个（共15个菜单）
• 微信自定义菜单，默认是有24小时的缓冲期，所以无法实时预览（注：可以通过取消关注并再次关注，解决此问题）

2）需求：精仿传智播客官方微信

3）步骤

五、开发者模式运营（重要）

1、概念

1）编辑模式原理图

当用户发送消息时,直接发送到微信服务器上,经过微信服务器的处理,则返回给客户端.

2）开发者模式原理图

请求：用户发送消息 ->（XML报文）-> 微信服务器 ->（XML报文）-> 自定义服务器

响应：用户发送消息 <-（XML报文）<- 微信服务器 <-（XML报文）<- 自定义服务器

2、准备自定义服务器（SAE云 或者 阿里云）

1）SAE云（默认有PHP环境）

• 步骤1：打开官网注册进入用户中心

http://www.sinacloud.com/

• 步骤2：创建应用（相当于创建虚拟主机）

• 步骤3：服务器代码管理（svn版本控制软件）

脚下留心：仓库目录下必须有以1命名的文件下

• 步骤4：浏览器代码

#常看创建应用设置的二级域名是什么，每个人填写的不一样）

http://php0225.applinzi.com/test.php

2）创建阿里云服务器（需要自己安装PHP环境）

• 步骤1：打开官网注册并点击顶部控制台，进入控制台页点击左侧菜单购买服务器

https://www.aliyun.com/

• 步骤2：选择购买指定节点服务器

• 步骤3：选择计费方式（ps. 该方式需要账号有100元）

• 步骤4：服务器购买清单

• 步骤5：获取服务器公网IP地址

配置阿里云（LAMP环境）

• 安装apache服务

步骤1：安装

步骤2：启动（注：第一次需要修改下配置文件）

步骤3：输入ip访问

步骤4：修改网页访问

• 安装php

步骤1：安装

yum -y install php php-mysql

yum -y install gd php-gd gd-devel php-xml php-common php-curl php-mbstring php-ldap php-pear php-xmlrpc php-imap

步骤2：重启apache，创建php文件测试

• 安装MySQL

步骤1：安装

yum -y install mysql mysql-server mysql-devel

步骤2：启动服务（service mysqld start）

步骤3：登录，更改密码（注：默认密码为空）

update mysql.user set password=password(‘admin888′) where User=’root’;

flush privileges;

3、微信接口开发

1）下载微信PHP SDK

下载地址：

http://mp.weixin.qq.com/mpres/htmledition/res/wx_sample.20140819.zip

2）微信接口初体验

• 步骤1：下载微信官方SDK

http://mp.weixin.qq.com/mpres/htmledition/res/wx_sample.20140819.zip

SDK就是别人开发好的功能或者接口，一般工作中下载第三方SDK输入APPID和APPKEY即可完

成对应功能。

• 步骤2：更改微信SDK，上传服务器（代码如下）

wx.php

<?php

/**

* wechat php test

*/

//define your token

define(“TOKEN”, “itcast”); //脚下留心：token必须和微信公众平台保持一致

$wechatObj = new wechatCallbackapiTest();

$wechatObj->valid();

class wechatCallbackapiTest

{

public function valid()

{

$echoStr = $_GET[“echostr”];

//valid signature , option

if($this->checkSignature()){

echo $echoStr;

exit;

}

}

public function responseMsg()

{

//get post data, May be due to the different environments

$postStr = $GLOBALS[“HTTP_RAW_POST_DATA”];

//extract post data

if (!empty($postStr)){

/* libxml_disable_entity_loader is to prevent XML eXternal Entity Injection,

the best way is to check the validity of xml by yourself */

libxml_disable_entity_loader(true);

$postObj = simplexml_load_string($postStr, ‘SimpleXMLElement’, LIBXML_NOCDATA);

$fromUsername = $postObj->FromUserName;

$toUsername = $postObj->ToUserName;

$keyword = trim($postObj->Content);

$time = time();

$textTpl = “<xml>

<ToUserName><![CDATA[%s]]></ToUserName>

<FromUserName><![CDATA[%s]]></FromUserName>

<CreateTime>%s</CreateTime>

<MsgType><![CDATA[%s]]></MsgType>

<Content><![CDATA[%s]]></Content>

<FuncFlag>0</FuncFlag>

</xml>”;

if(!empty( $keyword ))

{

$msgType = “text”;

$contentStr = “滚!”;

$resultStr = sprintf($textTpl, $fromUsername, $toUsername, $time, $msgType, $contentStr);

echo $resultStr;

}else{

echo “Input something…”;

}

}else {

echo “”;

exit;

}

}

private function checkSignature()

{

// you must define TOKEN by yourself

if (!defined(“TOKEN”)) {

throw new Exception(‘TOKEN is not defined!’);

}

$signature = $_GET[“signature”];

$timestamp = $_GET[“timestamp”];

$nonce = $_GET[“nonce”];

$token = TOKEN;

$tmpArr = array($token, $timestamp, $nonce);

// use SORT_STRING rule

sort($tmpArr, SORT_STRING);

$tmpStr = implode( $tmpArr );

$tmpStr = sha1( $tmpStr );

if( $tmpStr == $signature ){

return true;

}else{

return false;

}

}

}

?>

• 步骤3：开启开发者模式（校验token）

打开微信公众号管理平台 -> 点击左侧菜单（开发->基本配置） -> 开启开发者模式

• 步骤4：修改SDK（关闭校验，开启响应用户请求）

wx.php

<?php

/**

* wechat php test

*/

//define your token

define(“TOKEN”, “itcast”); //脚下留心：token必须和微信公众平台保持一致

$wechatObj = new wechatCallbackapiTest();

//$wechatObj->valid();

$wechatObj->responseMsg();

class wechatCallbackapiTest

{

public function valid()

{

$echoStr = $_GET[“echostr”];

//valid signature , option

if($this->checkSignature()){

echo $echoStr;

exit;

}

}

public function responseMsg()

{

//get post data, May be due to the different environments

$postStr = $GLOBALS[“HTTP_RAW_POST_DATA”];

//extract post data

if (!empty($postStr)){

/* libxml_disable_entity_loader is to prevent XML eXternal Entity Injection,

the best way is to check the validity of xml by yourself */

libxml_disable_entity_loader(true);

$postObj = simplexml_load_string($postStr, ‘SimpleXMLElement’, LIBXML_NOCDATA);

$fromUsername = $postObj->FromUserName;

$toUsername = $postObj->ToUserName;

$keyword = trim($postObj->Content);

$time = time();

$textTpl = “<xml>

<ToUserName><![CDATA[%s]]></ToUserName>

<FromUserName><![CDATA[%s]]></FromUserName>

<CreateTime>%s</CreateTime>

<MsgType><![CDATA[%s]]></MsgType>

<Content><![CDATA[%s]]></Content>

<FuncFlag>0</FuncFlag>

</xml>”;

if(!empty( $keyword ))

{

$msgType = “text”;

$contentStr = “滚!”;

$resultStr = sprintf($textTpl, $fromUsername, $toUsername, $time, $msgType, $contentStr);

echo $resultStr;

}else{

echo “Input something…”;

}

}else {

echo “”;

exit;

}

}

private function checkSignature()

{

// you must define TOKEN by yourself

if (!defined(“TOKEN”)) {

throw new Exception(‘TOKEN is not defined!’);

}

$signature = $_GET[“signature”];

$timestamp = $_GET[“timestamp”];

$nonce = $_GET[“nonce”];

$token = TOKEN;

$tmpArr = array($token, $timestamp, $nonce);

// use SORT_STRING rule

sort($tmpArr, SORT_STRING);

$tmpStr = implode( $tmpArr );

$tmpStr = sha1( $tmpStr );

if( $tmpStr == $signature ){

return true;

}else{

return false;

}

}

}

?>

4、微信接口分析

函数认识

• 函数：simplexml_load_string
• 作用：将xml字符串载入到对象中

• 函数：sprintf()
• 作用：将字符串中的百分号替换成变量

接口代码注释

<?php

/**

* wechat php test

*/

//define your token

//定义TOKEN秘钥，用于微信服务器和自定义服务器之间的校验

define(“TOKEN”, “itcast”);

//创建一个wechatObj对象

$wechatObj = new wechatCallbackapiTest();

//调用valid方法，用于微信开发验证和回复

//$wechatObj->valid();

//

$wechatObj->responseMsg();

class wechatCallbackapiTest

{

public function valid()

{

// 接受随机字符串

$echoStr = $_GET[“echostr”];

//valid signature , option

if($this->checkSignature()){

echo $echoStr;

exit;

}

}

public function responseMsg()

{

//get post data, May be due to the different environments

//$GLOBALS[“HTTP_RAW_POST_DATA”]功能与$_POST功能类似，主要用于接收HTTP中的POST请求

//但是$GLOBALS[“HTTP_RAW_POST_DATA”]可以接收XML数据

$postStr = $GLOBALS[“HTTP_RAW_POST_DATA”];

//extract post data

if (!empty($postStr)){

/* libxml_disable_entity_loader is to prevent XML eXternal Entity Injection,

the best way is to check the validity of xml by yourself */

//安全处理：禁止引用外部xml实体， 防止XXE漏洞

// http://www.thinkphp.cn/topic/37740.html

libxml_disable_entity_loader(true);

// simplexml_load_string() 函数把 XML 字符串载入对象中

$postObj = simplexml_load_string($postStr, ‘SimpleXMLElement’, LIBXML_NOCDATA);

$fromUsername = $postObj->FromUserName; // 发送方帐号（一个OpenID）

$toUsername = $postObj->ToUserName; // 开发者微信号

$keyword = trim($postObj->Content); // 文本消息内容

$time = time();

// 文本消息XML模板

$textTpl = “<xml>

<ToUserName><![CDATA[%s]]></ToUserName>

<FromUserName><![CDATA[%s]]></FromUserName>

<CreateTime>%s</CreateTime>

<MsgType><![CDATA[%s]]></MsgType>

<Content><![CDATA[%s]]></Content>

<FuncFlag>0</FuncFlag>

</xml>”;

if(!empty( $keyword ))

{

$msgType = “text”;

$contentStr = “Welcome to wechat world!”;

// 给XML模板填充数据

$resultStr = sprintf($textTpl, $fromUsername, $toUsername, $time, $msgType, $toUsername.’__’.$fromUsername);

echo $resultStr;

}else{

echo “Input something…”;

}

}else {

echo “”;

exit;

}

}

// 验证数字签名

private function checkSignature()

{

// you must define TOKEN by yourself

// 校验TOKEN秘钥

if (!defined(“TOKEN”)) {

throw new Exception(‘TOKEN is not defined!’);

}

// 接受数字签名

$signature = $_GET[“signature”];

// 接受时间戳

$timestamp = $_GET[“timestamp”];

// 接受随机数

$nonce = $_GET[“nonce”];

// 定义$token 获取TOKEN秘钥

$token = TOKEN;

// token、timestamp、nonce组成数组

$tmpArr = array($token, $timestamp, $nonce);

// use SORT_STRING rule

//数组排序

sort($tmpArr, SORT_STRING);

// 划分成字符串

$tmpStr = implode( $tmpArr );

// 通过哈希算法进行加密

$tmpStr = sha1( $tmpStr );

// 与当前发送过来的数字签名进行比对，成功返回true，否则返回false

if( $tmpStr == $signature ){

return true;

}else{

return false;

}

}

}

?>

六、微信的6大接收接口

︴思考：如何区分数据类型（文本、图片、语音、视频、地理、链接消息）

2、使用php代码判断代码判断用户发送的消息类型

需求：用户发送图片则响应图片消息，视频响应视频消息，文本响应文本消息

发现：通过xml报文中的msgTtype可以判断类型

<?php

/**

* wechat php test

*/

//定义token

define(“TOKEN”, “itcast”);

//创建wechatObj对象

$wechatObj = new wechatCallbackapiTest();

//校验token

//$wechatObj->valid(); 仅开启开发者模式使用一下后期不需要使用

//调用方法响应用户数据

$wechatObj->responseMsg();

class wechatCallbackapiTest

{

public function valid()

{

//随机字符串

$echoStr = $_GET[“echostr”];

//校验token

if($this->checkSignature()){

echo $echoStr;

exit;

}

}

public function responseMsg()

{

//get post data, May be due to the different environments

//和POST一样获取数据，只不过他可以获取xml数据

//接受微信服务器提交过来的xml报文

$postStr = $GLOBALS[“HTTP_RAW_POST_DATA”];

//extract post data

if (!empty($postStr)) {

/* libxml_disable_entity_loader is to prevent XML eXternal Entity Injection,

the best way is to check the validity of xml by yourself */

//安全处理：禁止引用外部xml实体， 防止XXE漏洞

// http://www.thinkphp.cn/topic/37740.html

libxml_disable_entity_loader(true);

//将xml数据转化为对象

$postObj = simplexml_load_string($postStr, ‘SimpleXMLElement’, LIBXML_NOCDATA);

$fromUsername = $postObj->FromUserName; //那个用户发送的

$toUsername = $postObj->ToUserName; //发送给那个用户

$keyword = trim($postObj->Content); //发送的内容（可能是图片、文字、视频等）

$time = time();

$textTpl = “<xml>

<ToUserName><![CDATA[%s]]></ToUserName>

<FromUserName><![CDATA[%s]]></FromUserName>

<CreateTime>%s</CreateTime>

<MsgType><![CDATA[%s]]></MsgType>

<Content><![CDATA[%s]]></Content>

<FuncFlag>0</FuncFlag>

</xml>”; //被动回复文本xml报文

//根据消息xml报文的MsgType参数判断请求文件类型

switch ($postObj->MsgType) {

case ‘text’:

$resultStr = sprintf($textTpl, $fromUsername, $toUsername, $time, “text”, ‘文本消息’);

break;

case ‘image’:

$resultStr = sprintf($textTpl, $fromUsername, $toUsername, $time, “text”, ‘图片消息’);

break;

case ‘voice’:

$resultStr = sprintf($textTpl, $fromUsername, $toUsername, $time, “text”, ‘语法消息’);

break;

case ‘video’:

$resultStr = sprintf($textTpl, $fromUsername, $toUsername, $time, “text”, ‘视频消息’);

break;

case ‘shortvideo’:

$resultStr = sprintf($textTpl, $fromUsername, $toUsername, $time, “text”, ‘小视频消息’);

break;

case ‘location’:

$resultStr = sprintf($textTpl, $fromUsername, $toUsername, $time, “text”, ‘位置消息’);

break;

case ‘link’:

$resultStr = sprintf($textTpl, $fromUsername, $toUsername, $time, “text”, ‘链接消息’);

break;

default:

$resultStr = sprintf($textTpl, $fromUsername, $toUsername, $time, “text”, ‘滚！’);

break;

}

echo $resultStr;

}else {

echo “”;

exit;

}

}

private function checkSignature()

{

//检测token是否定义

if (!defined(“TOKEN”)) {

throw new Exception(‘TOKEN is not defined!’);

}

//微信加密签名，signature结合了开发者填写的token参数和请求中的timestamp参数、nonce参数。

$signature = $_GET[“signature”];

//时间戳

$timestamp = $_GET[“timestamp”];

//随机数

$nonce = $_GET[“nonce”];

//将一个常量的值赋给$token变量

$token = TOKEN;

//将token、时间戳、随机数放到一个数组中

$tmpArr = array($token, $timestamp, $nonce);

//给数组排序

sort($tmpArr, SORT_STRING);

//将数组转化为字符串

$tmpStr = implode( $tmpArr );

//哈希加密

$tmpStr = sha1( $tmpStr );

if( $tmpStr == $signature ){

return true;

}else{

return false;

}

}

}

?>

■ 代码（封装优化）

<?php

/**

* wechat php test

*/

//定义token

define(“TOKEN”, “itcast”);

//创建wechatObj对象

$wechatObj = new wechatCallbackapiTest();

//校验token

//$wechatObj->valid(); 仅开启开发者模式使用一下后期不需要使用

//调用方法响应用户数据

$wechatObj->responseMsg();

class wechatCallbackapiTest

{

public function valid()

{

//随机字符串

$echoStr = $_GET[“echostr”];

//校验token

if($this->checkSignature()){

echo $echoStr;

exit;

}

}

public function responseMsg()

{

//get post data, May be due to the different environments

//和POST一样获取数据，只不过他可以获取xml数据

//接受微信服务器提交过来的xml报文

$postStr = $GLOBALS[“HTTP_RAW_POST_DATA”];

//extract post data

if (!empty($postStr)) {

/* libxml_disable_entity_loader is to prevent XML eXternal Entity Injection,

the best way is to check the validity of xml by yourself */

//安全处理：禁止引用外部xml实体， 防止XXE漏洞

// http://www.thinkphp.cn/topic/37740.html

libxml_disable_entity_loader(true);

//将xml数据转化为对象

$postObj = simplexml_load_string($postStr, ‘SimpleXMLElement’, LIBXML_NOCDATA);

$fromUsername = $postObj->FromUserName; //发送者：那个用户发送的

$toUsername = $postObj->ToUserName; //接受者：发送给那个用户

$keyword = trim($postObj->Content); //发送的内容（可能是图片、文字、视频等）

//根据消息xml报文的MsgType参数判断请求文件类型

switch ($postObj->MsgType) {

case ‘text’:

$this->sendText($fromUsername, $toUsername, ‘文本消息’);

break;

case ‘image’:

$this->sendText($fromUsername, $toUsername, ‘图片消息’);

break;

case ‘voice’:

$this->sendText($fromUsername, $toUsername, ‘语音消息’);

break;

case ‘video’:

$this->sendText($fromUsername, $toUsername, ‘视频消息’);

break;

case ‘shortvideo’:

$this->sendText($fromUsername, $toUsername, ‘小视频消息’);

break;

case ‘location’:

$this->sendText($fromUsername, $toUsername, ‘位置消息’);

break;

case ‘link’:

$this->sendText($fromUsername, $toUsername, ‘链接消息’);

break;

default:

$this->sendText($fromUsername, $toUsername, ‘滚！’);

break;

}

}else {

echo “”;

exit;

}

}

/**

* @param stirng $fromUsername 接受消息的用户

* @param stirng $toUsername 发送消息的用户

* @param stirng $content 内容

*/

private function sendText($fromUsername, $toUsername, $content)

{

$time = time();

$textTpl = “<xml>

<ToUserName><![CDATA[%s]]></ToUserName>

<FromUserName><![CDATA[%s]]></FromUserName>

<CreateTime>%s</CreateTime>

<MsgType><![CDATA[%s]]></MsgType>

<Content><![CDATA[%s]]></Content>

<FuncFlag>0</FuncFlag>

</xml>”; //被动回复文本xml报文

$resultStr = sprintf($textTpl, $fromUsername, $toUsername, $time, “text”, $content);

echo $resultStr;

}

private function checkSignature()

{

//检测token是否定义

if (!defined(“TOKEN”)) {

throw new Exception(‘TOKEN is not defined!’);

}

//微信加密签名，signature结合了开发者填写的token参数和请求中的timestamp参数、nonce参数。

$signature = $_GET[“signature”];

//时间戳

$timestamp = $_GET[“timestamp”];

//随机数

$nonce = $_GET[“nonce”];

//将一个常量的值赋给$token变量

$token = TOKEN;

//将token、时间戳、随机数放到一个数组中

$tmpArr = array($token, $timestamp, $nonce);

//给数组排序

sort($tmpArr, SORT_STRING);

//将数组转化为字符串

$tmpStr = implode( $tmpArr );

//哈希加密

$tmpStr = sha1( $tmpStr );

if( $tmpStr == $signature ){

return true;

}else{

return false;

}

}

}

?>

七、微信订阅回复接口

1、订阅回复接口（关注回复接口）

2、编写PHP代码判断订阅回复

<?php

/**

* wechat php test

*/

//定义token

define(“TOKEN”, “itcast”);

//创建wechatObj对象

$wechatObj = new wechatCallbackapiTest();

//校验token

//$wechatObj->valid(); 仅开启开发者模式使用一下后期不需要使用

//调用方法响应用户数据

$wechatObj->responseMsg();

class wechatCallbackapiTest

{

public function valid()

{

//随机字符串

$echoStr = $_GET[“echostr”];

//校验token

if($this->checkSignature()){

echo $echoStr;

exit;

}

}

public function responseMsg()

{

//get post data, May be due to the different environments

//和POST一样获取数据，只不过他可以获取xml数据

//接受微信服务器提交过来的xml报文

$postStr = $GLOBALS[“HTTP_RAW_POST_DATA”];

//extract post data

if (!empty($postStr)) {

/* libxml_disable_entity_loader is to prevent XML eXternal Entity Injection,

the best way is to check the validity of xml by yourself */

//安全处理：禁止引用外部xml实体， 防止XXE漏洞

// http://www.thinkphp.cn/topic/37740.html

libxml_disable_entity_loader(true);

//将xml数据转化为对象

$postObj = simplexml_load_string($postStr, ‘SimpleXMLElement’, LIBXML_NOCDATA);

$fromUsername = $postObj->FromUserName; //发送者：那个用户发送的

$toUsername = $postObj->ToUserName; //接受者：发送给那个用户

$keyword = trim($postObj->Content); //发送的内容（可能是图片、文字、视频等）

//根据消息xml报文的MsgType参数判断请求文件类型

switch ($postObj->MsgType) {

case ‘event’:

//Event 事件类型，subscribe(订阅)、unsubscribe(取消订阅)

if ($postObj->Event == ‘subscribe’) {

$this->sendText($fromUsername, $toUsername, ‘感谢老板关注，需要xx请服务1’);

} else {

//后期项目封装可能需要修改数据库

}

break;

case ‘text’:

$this->sendText($fromUsername, $toUsername, ‘文本消息’);

break;

case ‘image’:

$this->sendText($fromUsername, $toUsername, ‘图片消息’);

break;

case ‘voice’:

$this->sendText($fromUsername, $toUsername, ‘语音消息’);

break;

case ‘video’:

$this->sendText($fromUsername, $toUsername, ‘视频消息’);

break;

case ‘shortvideo’:

$this->sendText($fromUsername, $toUsername, ‘小视频消息’);

break;

case ‘location’:

$this->sendText($fromUsername, $toUsername, ‘位置消息’);

break;

case ‘link’:

$this->sendText($fromUsername, $toUsername, ‘链接消息’);

break;

default:

$this->sendText($fromUsername, $toUsername, ‘滚！’);

break;

}

}else {

echo “”;

exit;

}

}

/**

* @param stirng $fromUsername 接受消息的用户

* @param stirng $toUsername 发送消息的用户

* @param stirng $content 内容

*/

private function sendText($fromUsername, $toUsername, $content)

{

$time = time();

$textTpl = “<xml>

<ToUserName><![CDATA[%s]]></ToUserName>

<FromUserName><![CDATA[%s]]></FromUserName>

<CreateTime>%s</CreateTime>

<MsgType><![CDATA[%s]]></MsgType>

<Content><![CDATA[%s]]></Content>

<FuncFlag>0</FuncFlag>

</xml>”; //被动回复文本xml报文

$resultStr = sprintf($textTpl, $fromUsername, $toUsername, $time, “text”, $content);

echo $resultStr;

}

private function checkSignature()

{

//检测token是否定义

if (!defined(“TOKEN”)) {

throw new Exception(‘TOKEN is not defined!’);

}

//微信加密签名，signature结合了开发者填写的token参数和请求中的timestamp参数、nonce参数。

$signature = $_GET[“signature”];

//时间戳

$timestamp = $_GET[“timestamp”];

//随机数

$nonce = $_GET[“nonce”];

//将一个常量的值赋给$token变量

$token = TOKEN;

//将token、时间戳、随机数放到一个数组中

$tmpArr = array($token, $timestamp, $nonce);

//给数组排序

sort($tmpArr, SORT_STRING);

//将数组转化为字符串

$tmpStr = implode( $tmpArr );

//哈希加密

$tmpStr = sha1( $tmpStr );

if( $tmpStr == $signature ){

return true;

}else{

return false;

}

}

}

?>

八、微信消息的6大回复接口

1、回复文本接口

1）xml报文

2）代码

/**

* @param stirng $fromUsername 接受消息的用户

* @param stirng $toUsername 发送消息的用户

* @param stirng $content 内容

*/

private function sendText($fromUsername, $toUsername, $content)

{

$time = time();

$textTpl = “<xml>

<ToUserName><![CDATA[%s]]></ToUserName>

<FromUserName><![CDATA[%s]]></FromUserName>

<CreateTime>%s</CreateTime>

<MsgType><![CDATA[%s]]></MsgType>

<Content><![CDATA[%s]]></Content>

<FuncFlag>0</FuncFlag>

</xml>”; //被动回复文本xml报文

$resultStr = sprintf($textTpl, $fromUsername, $toUsername, $time, “text”, $content);

echo $resultStr;

}

2、回复图片、语音、视频消息

1）图片xml报文

—————————-

【获取Mediald】

步骤1：

https://mp.weixin.qq.com/debug/cgi-bin/apiinfo?t=index&type=基础支持

2）代码

Eg2F6ND63LqjRvlOdaEV_lxGjgO9KIRDZm8e54hcTYH-P-FyBZA55FNad8a8pQMA

视频xml报文

代码

3、音乐回复接口

1）xml报文

2）代码

4、图文回复接口（重点重点）

1）xml报文

2）代码

/**

* 响应图文（优化版）

* @param stirng $fromUsername 接受消息的用户

* @param stirng $toUsername 发送消息的用户

* @param array $arr 图文消息二位数组（注；第二层数组字段 title,desc,picurl,url）

*/

private function sendImgArticle($fromUsername, $toUsername, $arr)

{

$textTpl = “<xml>

<ToUserName><![CDATA[%s]]></ToUserName>

<FromUserName><![CDATA[%s]]></FromUserName>

<CreateTime>%s</CreateTime>

<MsgType><![CDATA[news]]></MsgType>

<ArticleCount>%s</ArticleCount>

<Articles>”;

foreach ($arr as $img) {

$textTpl .= “<item>

<Title><![CDATA[{$img[‘title’]}]]></Title>

<Description><![CDATA[{$img[‘desc’]}]]></Description>

<PicUrl><![CDATA[{$img[‘picurl’]}]]></PicUrl>

<Url><![CDATA[{$img[‘url’]}]]></Url>

</item>”;

}

$textTpl .= “</Articles>

</xml>”;

$resultStr = sprintf($textTpl, $fromUsername, $toUsername, time(), count($arr));

echo $resultStr;

}

/**

* 响应单图文

* @param stirng $fromUsername 接受消息的用户

* @param stirng $toUsername 发送消息的用户

*/

private function sendImgArticle1($fromUsername, $toUsername)

{

$textTpl = “<xml>

<ToUserName><![CDATA[%s]]></ToUserName>

<FromUserName><![CDATA[%s]]></FromUserName>

<CreateTime>%s</CreateTime>

<MsgType><![CDATA[news]]></MsgType>

<ArticleCount>%s</ArticleCount>

<Articles>

<item>

<Title><![CDATA[%s]]></Title>

<Description><![CDATA[%s]]></Description>

<PicUrl><![CDATA[%s]]></PicUrl>

<Url><![CDATA[%s]]></Url>

</item>

</Articles>

</xml>”;

$imgCount = 1;

$title = ‘单图文’;

$desc = ‘xxx’;

$picurl = ‘http://47.52.95.83/zhaoxiaokang/img/b1.jpg’;

$url = ‘http://baidu.com&/#8217;;

$resultStr = sprintf($textTpl, $fromUsername, $toUsername, time(), $imgCount, $title, $desc, $picurl, $url);

echo $resultStr;

}

/**

* 响应多图文

* @param stirng $fromUsername 接受消息的用户

* @param stirng $toUsername 发送消息的用户

*/

private function sendImgArticleN($fromUsername, $toUsername)

{

$textTpl = “<xml>

<ToUserName><![CDATA[%s]]></ToUserName>

<FromUserName><![CDATA[%s]]></FromUserName>

<CreateTime>%s</CreateTime>

<MsgType><![CDATA[news]]></MsgType>

<ArticleCount>3</ArticleCount>

<Articles>

<item>

<Title><![CDATA[大图]]></Title>

<Description><![CDATA[bigimg]]></Description>

<PicUrl><![CDATA[http://47.52.95.83/zhaoxiaokang/img/b1.jpg]]></PicUrl>

<Url><![CDATA[http://baidu.com]]></Url>

</item>

<item>

<Title><![CDATA[小图1]]></Title>

<Description><![CDATA[one]]></Description>

<PicUrl><![CDATA[http://47.52.95.83/zhaoxiaokang/img/one.png]]></PicUrl>

<Url><![CDATA[http://baidu.com]]></Url>

</item>

<item>

<Title><![CDATA[小图2]]></Title>

<Description><![CDATA[two]]></Description>

<PicUrl><![CDATA[http://47.52.95.83/zhaoxiaokang/img/two.png]]></PicUrl>

<Url><![CDATA[http://baidu.com]]></Url>

</item>

</Articles>

</xml>”;

$resultStr = sprintf($textTpl, $fromUsername, $toUsername, time());

echo $resultStr;

}

︴自觉练习

复习

什么是微信：就是聊天工具

什么是公众号：企业或个人组织管理其粉丝的应用工具

什么是公众平台：管理公众号数据的后台

编辑模式运营： 通过微信提供的后台管理数据

开发者模式运营： 通过自己开发的后台管理数据

公众号常用的功能：自动回复（关注回复、关键字回复）、自定义菜单等

订阅号和服务号的区别：服务号功能更强大，但是必须有营业执照才能注册。

︴更改公众平台测试帐号

说明

因为注册的是订阅号，很多高级接口无法测试学习，所以使用微信官方提供的测试帐号，可以体验并测试微信公众平台所有高级接口。

步骤

步骤1：登录微信公众平台，点击左侧菜单后进入公众测试平台

步骤2：微信扫码登录

步骤3：配置测试账号（公众号）开发者模式

脚下留心：配置好后，需要关注测试账号（公众号）才可以进行高级接口试用

一、PHP中的cURL库

1、cURL库

说明：cURL 是一个功能强大的PHP库。

作用：使用cURL实现Get和Post请求的方法，常用于数据采集或接口请求等

cURL四步骤

• 步骤1：初始化curl，使用函数curl_init()
• 步骤2：配置，使用函数curl_setopt（）
• 步骤3：发送请求，使用函数curl_exec（）
• 步骤4：关闭请求，使用函数curl_close（）

使用cURL发送get请求

<?php

//1.初始化curl，说明： curl http 简写 ch

$ch = curl_init();

//2.配置

//2.1配置请求地址（默认get请求）

curl_setopt($ch, CURLOPT_URL, 请求地址?参数1=值1&参数2=值2);

//2.2配置数据响应方式（1.默认直接输出，2.复制给变量不输出）

curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);

//3.发送http请求

$data = curl_exec($ch);

//4.关闭

curl_close($ch);

4、使用cURL发送post请求

<?php

//1.初始化curl，说明： curl http 简写 ch

$ch = curl_init();

//2.配置

//2.1配置请求地址（默认get请求）

curl_setopt($ch, CURLOPT_URL, 请求地址?参数1=值1&参数2=值2);

//2.2配置数据响应方式（1.默认直接输出，2.复制给变量不输出）

curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);

//2.3设置请求方式

curl_setopt($ch, CURLOPT_POST, true);

//2.4设置POST请求数据(post fields)

$arrData = [

‘uname’ => ‘陈总’,

‘pwd’ => 123

];

curl_setopt($ch, CURLOPT_POSTFIELDS, $arrData);

//3.发送http请求

$data = curl_exec($ch);

//4.关闭

curl_close($ch);

■ 案例：请求api接口

1）笑话接口

http://japi.juhe.cn/joke/content/text.from?key=2ca3e19979fadf2279ac6a036669f5ad&page=1&pagesize=10

2）代码

<?php

// 请求接口：http://japi.juhe.cn/joke/content/text.from?key=您申请的KEY&page=1&pagesize=10

//1.初始化

$ch = curl_init();

//2.配置

//2.1设置请求地址

curl_setopt($ch, CURLOPT_URL, ‘http://japi.juhe.cn/joke/content/text.from?key=2ca3e19979fadf2279ac6a036669f5ad&page=1&pagesize=10’);

//2.2数据流不直接输出

curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);

//3.发送请求

$data = curl_exec($ch);

//4.释放资源

curl_close($ch);

//语法：json_encode（数组） 转化为json数据

//语法：json_decode（json数据,参数2）

//说明：将数据转化为数组或者对象，（参数2：true-数组，false-对象，默认）

// $data = iconv(‘utf-8’, ‘gbk’, $data);

// var_dump($data);die;

$data = json_decode($data, true);

echo ‘<pre>’;

print_r($data);

■ 案例：采集网站数据

场景：公司网站开发完毕，没有数据，如果不添加数据丑用户体验度不高，但是手动添加工程浩大费事

解决：http://bbs.itheima.com/forum-393-1.html 采集最新活动

采集表示抓取指定网站数据（注：数据采集就是抓取别人网站的数据保存自己的数据库）

代码

<?php

//1.初始化

$ch = curl_init();

//2.配置

//2.1设置请求地址

curl_setopt($ch, CURLOPT_URL, ‘http://bbs.itheima.com/forum-393-1.html’);

//2.2数据流不直接输出

curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);

//3.发送请求

$data = curl_exec($ch);

//4.释放资源

curl_close($ch);

// var_dump($data);

//语法：preg_match(正则表达式, 待匹配的数据)

//语法：preg_match_all(正则表达式, 待匹配的数据, 匹配的结果)

//待匹配的数据标识<a href=”thread-345001-1-1.html” onclick=”atarget(this)” class=”s xst”>论坛改版签到不变，签到福利兑换接着走起来！</a>

//[123] 只匹配1或者2或者3

//[^123] 不匹配1或2或3

//[^>]* 表示匹配不等于>的字符任意次数

preg_match_all(‘/<a[^>]* class=”s xst”>(.*)<\/a>/’, $data, $rs);

echo ‘<pre>’;

print_r($rs);

︴封装

<?php

//1.单独完成功能

//2.随便写一个空方法

//3.将刚单独写好的功能放到方法中

//4.找需要传递的参数，定义成形参

/**

* PHP发送请求

* @param string $api 接口地址

* @param array $postData POST请求数据

*/

function httpRequest($api, $postData = array())

{

//1.初始化

$ch = curl_init();

//2.配置

//2.1设置请求地址

curl_setopt($ch, CURLOPT_URL, $api);

//2.2数据流不直接输出

curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);

//2.3POST请求

if ($postData) {

curl_setopt($ch, CURLOPT_POST, true);

curl_setopt($ch, CURLOPT_POSTFIELDS, $postData);

}

//curl注意事项，如果发送的请求是https，必须要禁止服务器端校检SSL证书

curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, false);

curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);

//3.发送请求

$data = curl_exec($ch);

//4.释放资源

curl_close($ch);

return $data;

}

二、获取接口调用凭证access_token

1、说明

2、接口说明

https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140183

3、使用curl库获取access_token

<?php

$apiData = [

‘appid’ => ‘wx56e3e3d75414b3d0’,

‘secret’ => ‘f8ec8178c6dda48d1cb25c07304eff44’

];

$api = ‘https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&’.http_build_query($apiData);

$data = httpRequest($api);

echo $data[‘access_token’];

/**

* PHP发送请求

* @param string $api 接口地址

* @param array $postData POST请求数据

*/

function httpRequest($api, $postData = array())

{

//1.初始化

$ch = curl_init();

//2.配置

//2.1设置请求地址

curl_setopt($ch, CURLOPT_URL, $api);

//2.2数据流不直接输出

curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);

//2.3POST请求

if ($postData) {

curl_setopt($ch, CURLOPT_POST, true);

curl_setopt($ch, CURLOPT_POSTFIELDS, $postData);

}

//curl注意事项，如果发送的请求是https，必须要禁止服务器端校检SSL证书

curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, false);

curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);

//3.发送请求

$data = curl_exec($ch);

//4.释放资源

curl_close($ch);

return json_decode($data, true);

}

︴封装方法保存access_token

/**

* 获取access_token

* @see https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140183

* @return string

*/

function getToken() {

$apiData = [

‘appid’ => ‘wx56e3e3d75414b3d0’,

‘secret’ => ‘f8ec8178c6dda48d1cb25c07304eff44’

];

$api = ‘https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&’.http_build_query($apiData);

$data = httpRequest($api);

return $data[‘access_token’];

}

三、微信的自定义菜单

说明

在微信中，自定义菜单拥有缓存，其生效时间默认为24小时，如果想实时查看到创建或删除效果，我们可以取消关注公众平台并再次关注即可。

2、自定义菜单的创建接口

接口

参数分析

2）代码

<?php

//1.定义接口

$api = ‘https://api.weixin.qq.com/cgi-bin/menu/create?access_token=’.getToken();

//2.定义接口数据

$postData = <<<STR

{

“button”:[

{

“type”:”click”,

“name”:”程程”,

“key”:”V1001_TODAY_MUSIC”

},

{

“name”:”啊第三方”,

“sub_button”:[

{

“type”:”view”,

“name”:”搜索”,

“url”:”http://www.soso.com/”

},

{

“type”:”click”,

“name”:”赞一下我们”,

“key”:”V1001_GOOD”

}

]

}

]

}

STR;

//3.发送请求

$data = httpRequest($api, $postData);

var_dump($data);

/**

* 获取access_token

* @see https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140183

* @return string

*/

function getToken() {

$apiData = [

‘appid’ => ‘wx56e3e3d75414b3d0’,

‘secret’ => ‘f8ec8178c6dda48d1cb25c07304eff44’

];

$api = ‘https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&’.http_build_query($apiData);

$data = httpRequest($api);

return $data[‘access_token’];

}

/**

* PHP发送请求

* @param string $api 接口地址

* @param array $postData POST请求数据

*/

function httpRequest($api, $postData = array())

{

//1.初始化

$ch = curl_init();

//2.配置

//2.1设置请求地址

curl_setopt($ch, CURLOPT_URL, $api);

//2.2数据流不直接输出

curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);

//2.3POST请求

if ($postData) {

curl_setopt($ch, CURLOPT_POST, true);

curl_setopt($ch, CURLOPT_POSTFIELDS, $postData);

}

//curl注意事项，如果发送的请求是https，必须要禁止服务器端校检SSL证书

curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, false);

curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);

//3.发送请求

$data = curl_exec($ch);

//4.释放资源

curl_close($ch);

return json_decode($data, true);

}

3、自定义菜单事件推送

• 场景：创建微信自定义菜单，如果type=click点击没反映
• 解决：wx.php增加判断
• 代码：

4、自定义菜单删除接口

1）接口

2）代码

<?php

//1.定义接口

$api = ‘https://api.weixin.qq.com/cgi-bin/menu/delete?access_token=’.getToken();

//2.发送请求

$data = httpRequest($api);

var_dump($data);

/**

* 获取access_token

* @see https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140183

* @return string

*/

function getToken() {

$apiData = [

‘appid’ => ‘wx56e3e3d75414b3d0’,

‘secret’ => ‘f8ec8178c6dda48d1cb25c07304eff44’

];

$api = ‘https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&’.http_build_query($apiData);

$data = httpRequest($api);

return $data[‘access_token’];

}

/**

* PHP发送请求

* @param string $api 接口地址

* @param array $postData POST请求数据

*/

function httpRequest($api, $postData = array())

{

//1.初始化

$ch = curl_init();

//2.配置

//2.1设置请求地址

curl_setopt($ch, CURLOPT_URL, $api);

//2.2数据流不直接输出

curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);

//2.3POST请求

if ($postData) {

curl_setopt($ch, CURLOPT_POST, true);

curl_setopt($ch, CURLOPT_POSTFIELDS, $postData);

}

//curl注意事项，如果发送的请求是https，必须要禁止服务器端校检SSL证书

curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, false);

curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);

//3.发送请求

$data = curl_exec($ch);

//4.释放资源

curl_close($ch);

return json_decode($data, true);

}

删除之后重新关注公众号，发现打开直接是聊天窗口

︴wx.php

<?php

/**

* wechat php test

*/

//define your token

define(“TOKEN”, “itcast”);

$wechatObj = new wechatCallbackapiTest();

// $wechatObj->valid();

$wechatObj->responseMsg();

class wechatCallbackapiTest

{

public function valid()

{

$echoStr = $_GET[“echostr”];

//valid signature , option

if($this->checkSignature()){

echo $echoStr;

exit;

}

}

public function responseMsg()

{

//get post data, May be due to the different environments

$postStr = $GLOBALS[“HTTP_RAW_POST_DATA”];

//extract post data

if (!empty($postStr)){

/* libxml_disable_entity_loader is to prevent XML eXternal Entity Injection,

the best way is to check the validity of xml by yourself */

libxml_disable_entity_loader(true);

$postObj = simplexml_load_string($postStr, ‘SimpleXMLElement’, LIBXML_NOCDATA);

$fromUsername = $postObj->FromUserName;

$toUsername = $postObj->ToUserName;

$keyword = trim($postObj->Content);

$time = time();

//——————–

if ($postObj->MsgType == ‘event’) {

if ($postObj->Event == ‘CLICK’) {

$this->sendText($fromUsername, $toUsername, ‘坏蛋，别点我’);

}

} else {

$this->sendText($fromUsername, $toUsername, ‘php12’);

}

}else {

echo “”;

exit;

}

}

/**

* 响应音乐消息

* @param string $fromUsername 接受者

* @param string $toUsername 发送者

* @param string $title 标题

* @param string $desc 描述

* @param string $musicUrl 音乐互联网地址（.mp3）

* @param string $ThumbMediaId 封面

* @param return

*/

private function sendMusic($fromUsername, $toUsername, $title=’摇一摇歌声’, $desc=’甜美型，那是骗你的’, $musicUrl=’http://47.91.211.137/zxk/music.mp3′, $ThumbMediaId=’t96tqk6yOa_patBRMJNme_zrt3mlbKWCSZtXy5LMuSV8CZF58jXG5pRP67Xnciyb’) {

$tpl = ‘<xml>

<ToUserName><![CDATA[%s]]></ToUserName>

<FromUserName><![CDATA[%s]]></FromUserName>

<CreateTime>%s</CreateTime>

<MsgType><![CDATA[music]]></MsgType>

<Music>

<Title><![CDATA[%s]]></Title>

<Description><![CDATA[%s]]></Description>

<MusicUrl><![CDATA[%s]]></MusicUrl>

<HQMusicUrl><![CDATA[%s]]></HQMusicUrl>

<ThumbMediaId><![CDATA[%s]]></ThumbMediaId>

</Music>

</xml>’;

echo sprintf($tpl, $fromUsername, $toUsername, time(), $title, $desc, $musicUrl, $musicUrl, $ThumbMediaId);

die;

}

/**

* 响应文本消息

* @param string $fromUsername 接受者

* @param string $toUsername 发送者

* @param string $content 发送的内容

* @param return

*/

private function sendText($fromUsername, $toUsername, $content) {

$textTpl = ‘<xml>

<ToUserName><![CDATA[%s]]></ToUserName>

<FromUserName><![CDATA[%s]]></FromUserName>

<CreateTime>%s</CreateTime>

<MsgType><![CDATA[text]]></MsgType>

<Content><![CDATA[%s]]></Content>

</xml>’;

echo sprintf($textTpl, $fromUsername, $toUsername, time(), $content);

die;

}

/**

* 响应图片消息

* @param string $fromUsername 接受者

* @param string $toUsername 发送者

* @param string $MediaId 媒体ID（https://mp.weixin.qq.com/debug 先回去access_token 然后获取MediaId）

* @param return

*/

private function sendImage($fromUsername, $toUsername, $MediaId = ‘G3P8hP2UXqozqUrOpt6rkfC2LEykkeD4OGTPBUyjVFgrGy0-C1yOR3Bvg0vSalic’)

{

//响应图片的xml报文

$tpl = ‘<xml>

<ToUserName><![CDATA[%s]]></ToUserName>

<FromUserName><![CDATA[%s]]></FromUserName>

<CreateTime>%s</CreateTime>

<MsgType><![CDATA[image]]></MsgType>

<Image><MediaId><![CDATA[%s]]></MediaId></Image>

</xml>’;

//脚下留心：MediaId是需要通过接口获取的，明天详细讲解，今天通过工具获取

//https://mp.weixin.qq.com/debug 查看MediaId（G3P8hP2UXqozqUrOpt6rkfC2LEykkeD4OGTPBUyjVFgrGy0-C1yOR3Bvg0vSalic）

echo sprintf($tpl, $fromUsername, $toUsername, time(), $MediaId);

die;

}

/**

* 响应视频消息

* @param string $fromUsername 接受者

* @param string $toUsername 发送者

* @param string $MediaId 媒体ID（https://mp.weixin.qq.com/debug 先回去access_token 然后获取MediaId）

* @param return

*/

private function sendVideo($fromUsername, $toUsername, $MediaId = ‘8pudm18nSyQ5vBO8fCKQ_ucHm9BKTUtTDjfoLNYfoev_B1JY-hJ-E1mk5BncLCtm’)

{

$tpl = ‘<xml>

<ToUserName><![CDATA[%s]]></ToUserName>

<FromUserName><![CDATA[%s]]></FromUserName>

<CreateTime>%s</CreateTime>

<MsgType><![CDATA]></MsgType>

<Video>

<MediaId><![CDATA[%s]]></MediaId>

<Title><![CDATA[%s]]></Title>

<Description><![CDATA[%s]]></Description>

</Video>

</xml>’;

echo sprintf($tpl, $fromUsername, $toUsername, time(), $MediaId, ‘陈恒那些事’, ‘大战三百回合’);

}

private function checkSignature()

{

// you must define TOKEN by yourself

if (!defined(“TOKEN”)) {

throw new Exception(‘TOKEN is not defined!’);

}

$signature = $_GET[“signature”];

$timestamp = $_GET[“timestamp”];

$nonce = $_GET[“nonce”];

$token = TOKEN;

$tmpArr = array($token, $timestamp, $nonce);

// use SORT_STRING rule

sort($tmpArr, SORT_STRING);

$tmpStr = implode( $tmpArr );

$tmpStr = sha1( $tmpStr );

if( $tmpStr == $signature ){

return true;

}else{

return false;

}

}

}

?>

四、多媒体文件上传接口

1、为什么需要多媒体文件上传接口

回顾回复消息接口，图片回复接口、语音回复接口、视频回复接口，这三个接口在开发时都需要提供一个参数MediaId，在应用中，如果想获取MediaId就必须使用多媒体文件上传接口。

2、分析多媒体文件上传接口

3、编写php代码，实现素材上传

<?php

//1.定义接口

$apiData = array(

‘access_token’=>getToken(),

‘type’=>’image’

);

$api = ‘https://api.weixin.qq.com/cgi-bin/media/upload?’.http_build_query($apiData);

//2.发送请求

$filePath = dirname(__FILE__) . DIRECTORY_SEPARATOR .’zhujiao.jpg’; //脚下留心：window不区分\/但linux只支持 /

//$postData = array(‘media’ => ‘@’.$filePath); //脚下留心：PHP版本低于5.5

$postData = array(‘media’ => new Curlfile($filePath)); //脚下留心：PHP版本高于5.5

$data = httpRequest($api, $postData);

var_dump($data);

/**

* 获取access_token

* @see https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140183

* @return string

*/

function getToken() {

$apiData = array(

‘appid’ => ‘wx56e3e3d75414b3d0’,

‘secret’ => ‘f8ec8178c6dda48d1cb25c07304eff44’

);

$api = ‘https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&’.http_build_query($apiData);

$data = httpRequest($api);

return $data[‘access_token’];

}

/**

* PHP发送请求

* @param string $api 接口地址

* @param array $postData POST请求数据

*/

function httpRequest($api, $postData = array())

{

//1.初始化

$ch = curl_init();

//2.配置

//2.1设置请求地址

curl_setopt($ch, CURLOPT_URL, $api);

//2.2数据流不直接输出

curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);

//2.3POST请求

if ($postData) {

curl_setopt($ch, CURLOPT_POST, true);

curl_setopt($ch, CURLOPT_POSTFIELDS, $postData);

}

//curl注意事项，如果发送的请求是https，必须要禁止服务器端校检SSL证书

curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, false);

curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);

//3.发送请求

$data = curl_exec($ch);

//4.释放资源

curl_close($ch);

return json_decode($data, true);

}

︴封装

function getMediaId($filePath) {

//1.定义接口

$apiData = array(

‘access_token’ => getToken(),

‘type’=>’image’

);

$api = ‘https://api.weixin.qq.com/cgi-bin/media/upload?’.http_build_query($apiData);

//2.发送请求

//$filePath = dirname(__FILE__) . DIRECTORY_SEPARATOR .’zhujiao.jpg’; //脚下留心：window不区分\/但linux只支持 /

if(version_compare(PHP_VERSION,’5.5.0′,'<‘)) {

//脚下留心：PHP版本低于5.5

$postData = array(‘media’ => ‘@’.$filePath);

} else {

//脚下留心：PHP版本高于5.5

$postData = array(‘media’ => new Curlfile($filePath));

}

$data = httpRequest($api, $postData);

return $data[‘media_id’];

// var_dump($data);

}

五、封装Wechat.class.php类文件

1、为什么需要Wechat.class.php类文件

答：随着时间的推移，wx.php中的功能也越来越复杂，为了简化wx.php（微信官方SDK）中的相关操作，我们可以把一些常用的功能如获取access_token/curl库封装在一个类中。

2、封装Wechat.class.php类文件

<?php

define(‘APPID’, ‘wx56e3e3d75414b3d0’);

define(‘APPSECRET’, ‘f8ec8178c6dda48d1cb25c07304eff44’);

class Wechat

{

/**

* 获取access_token

* @see https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140183

* @return string

*/

protected function getToken()

{

$apiData = array(

‘appid’ => APPID,

‘secret’ => APPSECRET

);

$api = ‘https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&’.http_build_query($apiData);

$data = $this->httpRequest($api);

return $data[‘access_token’];

}

/**

* 上传媒体文件

* @see https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1444738726

* @return string

* 注：

* 图片（image）: 2M，支持PNG\JPEG\JPG\GIF格式

* 语音（voice）：2M，播放长度不超过60s，支持AMR\MP3格式

* 视频（video）：10MB，支持MP4格式

* 缩略图（thumb）：64KB，支持JPG格式

*/

protected function getMediaId($filePath)

{

//1.定义接口

$apiData = array(

‘access_token’ => $this->getToken(),

‘type’=>’image’

);

$api = ‘https://api.weixin.qq.com/cgi-bin/media/upload?’.http_build_query($apiData);

//2.发送请求

//$filePath = dirname(__FILE__) . DIRECTORY_SEPARATOR .’zhujiao.jpg’; //脚下留心：window不区分\/但linux只支持 /

if(version_compare(PHP_VERSION,’5.5.0′,'<‘)) {

//脚下留心：PHP版本低于5.5

$postData = array(‘media’ => ‘@’.$filePath);

} else {

//脚下留心：PHP版本高于5.5

$postData = array(‘media’ => new Curlfile($filePath));

}

$data = $this->httpRequest($api, $postData);

return $data[‘media_id’];

// var_dump($data);

}

/**

* PHP发送请求

* @param string $api 接口地址

* @param array $postData POST请求数据

*/

private function httpRequest($api, $postData = array())

{

//1.初始化

$ch = curl_init();

//2.配置

//2.1设置请求地址

curl_setopt($ch, CURLOPT_URL, $api);

//2.2数据流不直接输出

curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);

//2.3POST请求

if ($postData) {

curl_setopt($ch, CURLOPT_POST, true);

curl_setopt($ch, CURLOPT_POSTFIELDS, $postData);

}

//curl注意事项，如果发送的请求是https，必须要禁止服务器端校检SSL证书

curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, false);

curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);

//3.发送请求

$data = curl_exec($ch);

//4.释放资源

curl_close($ch);

return json_decode($data, true);

}

/**

* 响应音乐消息

* @param string $fromUsername 接受者

* @param string $toUsername 发送者

* @param string $title 标题

* @param string $desc 描述

* @param string $musicUrl 音乐互联网地址（.mp3）

* @param string $ThumbMediaId 封面

* @param return

*/

protected function sendMusic($fromUsername, $toUsername, $title=’摇一摇歌声’, $desc=’甜美型，那是骗你的’, $musicUrl=’http://47.91.211.137/zxk/music.mp3′, $ThumbMediaId=’t96tqk6yOa_patBRMJNme_zrt3mlbKWCSZtXy5LMuSV8CZF58jXG5pRP67Xnciyb’) {

$tpl = ‘<xml>

<ToUserName><![CDATA[%s]]></ToUserName>

<FromUserName><![CDATA[%s]]></FromUserName>

<CreateTime>%s</CreateTime>

<MsgType><![CDATA[music]]></MsgType>

<Music>

<Title><![CDATA[%s]]></Title>

<Description><![CDATA[%s]]></Description>

<MusicUrl><![CDATA[%s]]></MusicUrl>

<HQMusicUrl><![CDATA[%s]]></HQMusicUrl>

<ThumbMediaId><![CDATA[%s]]></ThumbMediaId>

</Music>

</xml>’;

echo sprintf($tpl, $fromUsername, $toUsername, time(), $title, $desc, $musicUrl, $musicUrl, $ThumbMediaId);

die;

}

/**

* 响应文本消息

* @param string $fromUsername 接受者

* @param string $toUsername 发送者

* @param string $content 发送的内容

* @param return

*/

protected function sendText($fromUsername, $toUsername, $content) {

$textTpl = ‘<xml>

<ToUserName><![CDATA[%s]]></ToUserName>

<FromUserName><![CDATA[%s]]></FromUserName>

<CreateTime>%s</CreateTime>

<MsgType><![CDATA[text]]></MsgType>

<Content><![CDATA[%s]]></Content>

</xml>’;

echo sprintf($textTpl, $fromUsername, $toUsername, time(), $content);

die;

}

/**

* 响应图片消息

* @param string $fromUsername 接受者

* @param string $toUsername 发送者

* @param string $MediaId 媒体ID（https://mp.weixin.qq.com/debug 先回去access_token 然后获取MediaId）

* @param return

*/

protected function sendImage($fromUsername, $toUsername, $MediaId = ‘G3P8hP2UXqozqUrOpt6rkfC2LEykkeD4OGTPBUyjVFgrGy0-C1yOR3Bvg0vSalic’)

{

//响应图片的xml报文

$tpl = ‘<xml>

<ToUserName><![CDATA[%s]]></ToUserName>

<FromUserName><![CDATA[%s]]></FromUserName>

<CreateTime>%s</CreateTime>

<MsgType><![CDATA[image]]></MsgType>

<Image><MediaId><![CDATA[%s]]></MediaId></Image>

</xml>’;

//脚下留心：MediaId是需要通过接口获取的，明天详细讲解，今天通过工具获取

//https://mp.weixin.qq.com/debug 查看MediaId（G3P8hP2UXqozqUrOpt6rkfC2LEykkeD4OGTPBUyjVFgrGy0-C1yOR3Bvg0vSalic）

echo sprintf($tpl, $fromUsername, $toUsername, time(), $MediaId);

die;

}

/**

* 响应视频消息

* @param string $fromUsername 接受者

* @param string $toUsername 发送者

* @param string $MediaId 媒体ID（https://mp.weixin.qq.com/debug 先回去access_token 然后获取MediaId）

* @param return

*/

protected function sendVideo($fromUsername, $toUsername, $MediaId = ‘8pudm18nSyQ5vBO8fCKQ_ucHm9BKTUtTDjfoLNYfoev_B1JY-hJ-E1mk5BncLCtm’)

{

$tpl = ‘<xml>

<ToUserName><![CDATA[%s]]></ToUserName>

<FromUserName><![CDATA[%s]]></FromUserName>

<CreateTime>%s</CreateTime>

<MsgType><![CDATA]></MsgType>

<Video>

<MediaId><![CDATA[%s]]></MediaId>

<Title><![CDATA[%s]]></Title>

<Description><![CDATA[%s]]></Description>

</Video>

</xml>’;

echo sprintf($tpl, $fromUsername, $toUsername, time(), $MediaId, ‘陈恒那些事’, ‘大战三百回合’);

}

}

让wx.php中的wechatCallbackapiTest类继承Wechat类

<?php

require ‘./Wechat.class.php’;

/**

* wechat php test

*/

//define your token

define(“TOKEN”, “itcast”);

class wechatCallbackapiTest extends Wechat

{

public function valid()

{

$echoStr = $_GET[“echostr”];

//valid signature , option

if($this->checkSignature()){

echo $echoStr;

exit;

}

}

public function responseMsg()

{

//get post data, May be due to the different environments

$postStr = $GLOBALS[“HTTP_RAW_POST_DATA”];

//extract post data

if (!empty($postStr)){

/* libxml_disable_entity_loader is to prevent XML eXternal Entity Injection,

the best way is to check the validity of xml by yourself */

libxml_disable_entity_loader(true);

$postObj = simplexml_load_string($postStr, ‘SimpleXMLElement’, LIBXML_NOCDATA);

$fromUsername = $postObj->FromUserName;

$toUsername = $postObj->ToUserName;

$keyword = trim($postObj->Content);

$type = trim($postObj->MsgType);

$time = time();

switch ($type) {

case ‘text’:

if ($keyword == ‘来图片’) {

$filePath = dirname(__FILE__) . DIRECTORY_SEPARATOR .’zhujiao.jpg’;

$this->sendImage($fromUsername, $toUsername, $this->getMediaId($filePath));

} else {

$this->sendText($fromUsername, $toUsername, ‘陈总’);

}

break;

default:

$this->sendText($fromUsername, $toUsername, ‘兄弟，不在服务器’);

# code…

break;

}

}else {

echo “”;

exit;

}

}

private function checkSignature()

{

// you must define TOKEN by yourself

if (!defined(“TOKEN”)) {

throw new Exception(‘TOKEN is not defined!’);

}

$signature = $_GET[“signature”];

$timestamp = $_GET[“timestamp”];

$nonce = $_GET[“nonce”];

$token = TOKEN;

$tmpArr = array($token, $timestamp, $nonce);

// use SORT_STRING rule

sort($tmpArr, SORT_STRING);

$tmpStr = implode( $tmpArr );

$tmpStr = sha1( $tmpStr );

if( $tmpStr == $signature ){

return true;

}else{

return false;

}

}

}

$wechatObj = new wechatCallbackapiTest();

//脚下留心：

//如果通信不成功

//解决思路：

//1.检查URL是否能正常访问

//2.检查调用的是否是valid方法

//$wechatObj->valid();

$wechatObj->responseMsg();

六、客服消息接口

1、什么是客服消息接口

2、分析客服消息接口

︴发送文本消息

<?php

require ‘Wechat.class.php’;

$Wechat = new Wechat;

$api = “https://api.weixin.qq.com/cgi-bin/message/custom/send?access_token=”.$Wechat->getToken();

$postData = <<<STR

{

“touser”:”oPOJgwXPeavENw-hHUdZhjz_P8sk”,

“msgtype”:”text”,

“text”:

{

“content”:”靠你青蛙”

}

}

STR;

//脚下留心：OPENID是用户和公众号之间的唯一表示

$data = $Wechat->httpRequest($api, $postData);

var_dump($data);

︴发送图文消息

<?php

require ‘Wechat.class.php’;

$Wechat = new Wechat;

$api = “https://api.weixin.qq.com/cgi-bin/message/custom/send?access_token=”.$Wechat->getToken();

// $postData = <<<STR

// {

// “touser”:”oPOJgwXPeavENw-hHUdZhjz_P8sk”,

// “msgtype”:”text”,

// “text”:

// {

// “content”:”靠你青蛙”

// }

// }

// STR;

$filePath = dirname(__FILE__) . DIRECTORY_SEPARATOR .’zhujiao.jpg’;

$postData = array(

“touser” => “oPOJgwUiVGmM4Vmt3H3YDRBCoJYI”,

“msgtype” => “image”,

“image” => array(

“media_id” => $this->getMediaId($filePath)

)

);

//脚下留心：OPENID是用户和公众号之间的唯一表示

$data = $Wechat->httpRequest($api, json_encode($postData));

var_dump($data);

︴产品化

七、群发消息接口

1、什么是群发消息接口

2、接口说明

使用php代码实现群发功能

<?php

require ‘Wechat.class.php’;

$Wechat = new Wechat;

$api = “https://api.weixin.qq.com/cgi-bin/message/mass/send?access_token=”.$Wechat->getToken();

$postData = ‘{

“touser”:[

“oPOJgwUiVGmM4Vmt3H3YDRBCoJYI”,

“oPOJgwXPeavENw-hHUdZhjz_P8sk”,

“oPOJgwbZ6m5mwBKzQZFb2alSLr0s”

],

“msgtype”: “text”,

“text”: { “content”: “美国大片：下载.com”}

}’;

//脚下留心：OPENID是用户和公众号之间的唯一表示

$data = $Wechat->httpRequest($api, json_encode($postData));

var_dump($data);

︴微信大总结

wx.php接口

<?php

require ‘./Wechat.class.php’;

/**

* wechat php test

*/

//define your token

define(“TOKEN”, “itcast”);

class wechatCallbackapiTest extends Wechat

{

public function valid()

{

$echoStr = $_GET[“echostr”];

//valid signature , option

if($this->checkSignature()){

echo $echoStr;

exit;

}

}

public function responseMsg()

{

//get post data, May be due to the different environments

$postStr = $GLOBALS[“HTTP_RAW_POST_DATA”];

//extract post data

if (!empty($postStr)){

/* libxml_disable_entity_loader is to prevent XML eXternal Entity Injection,

the best way is to check the validity of xml by yourself */

libxml_disable_entity_loader(true);

$postObj = simplexml_load_string($postStr, ‘SimpleXMLElement’, LIBXML_NOCDATA);

$fromUsername = $postObj->FromUserName;

$toUsername = $postObj->ToUserName;

$keyword = trim($postObj->Content);

$type = trim($postObj->MsgType);

$time = time();

switch ($type) {

case ‘text’:

if ($keyword == ‘来图片’) {

$filePath = dirname(__FILE__) . DIRECTORY_SEPARATOR .’zhujiao.jpg’;

$this->sendImage($fromUsername, $toUsername, $this->getMediaId($filePath));

} else {

$this->sendText($fromUsername, $toUsername, ‘陈总’);

}

break;

default:

$this->sendText($fromUsername, $toUsername, ‘兄弟，不在服务器’);

# code…

break;

}

}else {

echo “”;

exit;

}

}

private function checkSignature()

{

// you must define TOKEN by yourself

if (!defined(“TOKEN”)) {

throw new Exception(‘TOKEN is not defined!’);

}

$signature = $_GET[“signature”];

$timestamp = $_GET[“timestamp”];

$nonce = $_GET[“nonce”];

$token = TOKEN;

$tmpArr = array($token, $timestamp, $nonce);

// use SORT_STRING rule

sort($tmpArr, SORT_STRING);

$tmpStr = implode( $tmpArr );

$tmpStr = sha1( $tmpStr );

if( $tmpStr == $signature ){

return true;

}else{

return false;

}

}

}

$wechatObj = new wechatCallbackapiTest();

//脚下留心：

//如果通信不成功

//解决思路：

//1.检查URL是否能正常访问

//2.检查调用的是否是valid方法

//$wechatObj->valid();

$wechatObj->responseMsg();

Wechat.class.php

<?php

define(‘APPID’, ‘wx56e3e3d75414b3d0’);

define(‘APPSECRET’, ‘f8ec8178c6dda48d1cb25c07304eff44’);

class Wechat

{

/**

* 获取access_token

* @see https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140183

* @return string

*/

public function getToken()

{

$apiData = array(

‘appid’ => APPID,

‘secret’ => APPSECRET

);

$api = ‘https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&’.http_build_query($apiData);

$data = $this->httpRequest($api);

return $data[‘access_token’];

}

/**

* 上传媒体文件

* @see https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1444738726

* @return string

* 注：

* 图片（image）: 2M，支持PNG\JPEG\JPG\GIF格式

* 语音（voice）：2M，播放长度不超过60s，支持AMR\MP3格式

* 视频（video）：10MB，支持MP4格式

* 缩略图（thumb）：64KB，支持JPG格式

*/

public function getMediaId($filePath)

{

//1.定义接口

$apiData = array(

‘access_token’ => $this->getToken(),

‘type’=>’image’

);

$api = ‘https://api.weixin.qq.com/cgi-bin/media/upload?’.http_build_query($apiData);

//2.发送请求

//$filePath = dirname(__FILE__) . DIRECTORY_SEPARATOR .’zhujiao.jpg’; //脚下留心：window不区分\/但linux只支持 /

if(version_compare(PHP_VERSION,’5.5.0′,'<‘)) {

//脚下留心：PHP版本低于5.5

$postData = array(‘media’ => ‘@’.$filePath);

} else {

//脚下留心：PHP版本高于5.5

$postData = array(‘media’ => new Curlfile($filePath));

}

$data = $this->httpRequest($api, $postData);

return $data[‘media_id’];

// var_dump($data);

}

/**

* PHP发送请求

* @param string $api 接口地址

* @param array $postData POST请求数据

*/

public function httpRequest($api, $postData = array())

{

//1.初始化

$ch = curl_init();

//2.配置

//2.1设置请求地址

curl_setopt($ch, CURLOPT_URL, $api);

//2.2数据流不直接输出

curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);

//2.3POST请求

if ($postData) {

curl_setopt($ch, CURLOPT_POST, true);

curl_setopt($ch, CURLOPT_POSTFIELDS, $postData);

}

//curl注意事项，如果发送的请求是https，必须要禁止服务器端校检SSL证书

curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, false);

curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);

//3.发送请求

$data = curl_exec($ch);

//4.释放资源

curl_close($ch);

return json_decode($data, true);

}

/**

* 响应音乐消息

* @param string $fromUsername 接受者

* @param string $toUsername 发送者

* @param string $title 标题

* @param string $desc 描述

* @param string $musicUrl 音乐互联网地址（.mp3）

* @param string $ThumbMediaId 封面

* @param return

*/

protected function sendMusic($fromUsername, $toUsername, $title=’摇一摇歌声’, $desc=’甜美型，那是骗你的’, $musicUrl=’http://47.91.211.137/zxk/music.mp3′, $ThumbMediaId=’t96tqk6yOa_patBRMJNme_zrt3mlbKWCSZtXy5LMuSV8CZF58jXG5pRP67Xnciyb’) {

$tpl = ‘<xml>

<ToUserName><![CDATA[%s]]></ToUserName>

<FromUserName><![CDATA[%s]]></FromUserName>

<CreateTime>%s</CreateTime>

<MsgType><![CDATA[music]]></MsgType>

<Music>

<Title><![CDATA[%s]]></Title>

<Description><![CDATA[%s]]></Description>

<MusicUrl><![CDATA[%s]]></MusicUrl>

<HQMusicUrl><![CDATA[%s]]></HQMusicUrl>

<ThumbMediaId><![CDATA[%s]]></ThumbMediaId>

</Music>

</xml>’;

echo sprintf($tpl, $fromUsername, $toUsername, time(), $title, $desc, $musicUrl, $musicUrl, $ThumbMediaId);

die;

}

/**

* 响应文本消息

* @param string $fromUsername 接受者

* @param string $toUsername 发送者

* @param string $content 发送的内容

* @param return

*/

protected function sendText($fromUsername, $toUsername, $content) {

$textTpl = ‘<xml>

<ToUserName><![CDATA[%s]]></ToUserName>

<FromUserName><![CDATA[%s]]></FromUserName>

<CreateTime>%s</CreateTime>

<MsgType><![CDATA[text]]></MsgType>

<Content><![CDATA[%s]]></Content>

</xml>’;

echo sprintf($textTpl, $fromUsername, $toUsername, time(), $content);

die;

}

/**

* 响应图片消息

* @param string $fromUsername 接受者

* @param string $toUsername 发送者

* @param string $MediaId 媒体ID（https://mp.weixin.qq.com/debug 先回去access_token 然后获取MediaId）

* @param return

*/

protected function sendImage($fromUsername, $toUsername, $MediaId = ‘G3P8hP2UXqozqUrOpt6rkfC2LEykkeD4OGTPBUyjVFgrGy0-C1yOR3Bvg0vSalic’)

{

//响应图片的xml报文

$tpl = ‘<xml>

<ToUserName><![CDATA[%s]]></ToUserName>

<FromUserName><![CDATA[%s]]></FromUserName>

<CreateTime>%s</CreateTime>

<MsgType><![CDATA[image]]></MsgType>

<Image><MediaId><![CDATA[%s]]></MediaId></Image>

</xml>’;

//脚下留心：MediaId是需要通过接口获取的，明天详细讲解，今天通过工具获取

//https://mp.weixin.qq.com/debug 查看MediaId（G3P8hP2UXqozqUrOpt6rkfC2LEykkeD4OGTPBUyjVFgrGy0-C1yOR3Bvg0vSalic）

echo sprintf($tpl, $fromUsername, $toUsername, time(), $MediaId);

die;

}

/**

* 响应视频消息

* @param string $fromUsername 接受者

* @param string $toUsername 发送者

* @param string $MediaId 媒体ID（https://mp.weixin.qq.com/debug 先回去access_token 然后获取MediaId）

* @param return

*/

protected function sendVideo($fromUsername, $toUsername, $MediaId = ‘8pudm18nSyQ5vBO8fCKQ_ucHm9BKTUtTDjfoLNYfoev_B1JY-hJ-E1mk5BncLCtm’)

{

$tpl = ‘<xml>

<ToUserName><![CDATA[%s]]></ToUserName>

<FromUserName><![CDATA[%s]]></FromUserName>

<CreateTime>%s</CreateTime>

<MsgType><![CDATA

]></MsgType>

<Video>

<MediaId><![CDATA[%s]]></MediaId>

<Title><![CDATA[%s]]></Title>

<Description><![CDATA[%s]]></Description>

</Video>

</xml>’;

echo sprintf($tpl, $fromUsername, $toUsername, time(), $MediaId, ‘陈恒那些事’, ‘大战三百回合’);

}

}

一、微信带参数二维码接口

1、什么是微信二维码

使用php代码获取微信二维码

接口说明

2）代码

• 需求：生成带参数的二维码，用户扫码后出现下述提醒

• 步骤1；生成带参数的二维码

<?php

require ‘Wechat.class.php’;

$Wechat = new Wechat;

//步骤1：生成ticket

$api = “https://api.weixin.qq.com/cgi-bin/qrcode/create?access_token=”.$Wechat->getToken();

$postData = ‘{“expire_seconds”: 604800, “action_name”: “QR_STR_SCENE”, “action_info”: {“scene”: {“scene_str”: “php12”}}}’;

//脚下留心：OPENID是用户和公众号之间的唯一表示

$data = $Wechat->httpRequest($api, $postData);

// var_dump($data);

//步骤2：生成二维码

$api = “https://mp.weixin.qq.com/cgi-bin/showqrcode?ticket=”.$data[‘ticket’];

//方法1

//header(“location: $api”);

//方法2

$imageInfo = file_get_contents($api);

file_put_contents(‘./erweima.jpg’, $imageInfo);

• 步骤2；修改wx.php接口，当用户扫码时候提示需求信息

//推荐采用冗余策略，将支付宝支付，或者微信通知存放到mongodb中

//file_put_contents(‘./getxmldata.text’, $postStr);

switch ($type) {

case ‘event’:

if ($postObj->Event == ‘subscribe’)

{

if (isset($postObj->EventKey) && $postObj->EventKey != ”) {

//新用户扫码

$this->sendText($fromUsername, $toUsername, ‘新用户：’.$postObj->EventKey);

} else {

//关注

$this->sendText($fromUsername, $toUsername, ‘感谢老铁关注，双击666’);

}

} else if ($postObj->Event == ‘SCAN’ && isset($postObj->EventKey)) {

//老用户扫码

$this->sendText($fromUsername, $toUsername, ‘老用户：’.$postObj->EventKey);

} else if ($postObj->Event == ‘unsubscribe’) {

//取关

//业务逻辑去数据库，给用户mark已经取消关注，后期网站判断用户是否关注，如果没有

//就在页面显示一个弹框让他关注

$this->sendText($fromUsername, $toUsername, ‘妈的，要你何用’);

} else {

$this->sendText($fromUsername, $toUsername, ‘弄啥嘞！’);

}

break;

case ‘text’:

if ($keyword == ‘来图片’) {

$filePath = dirname(__FILE__) . DIRECTORY_SEPARATOR .’zhujiao.jpg’;

$this->sendImage($fromUsername, $toUsername, $this->getMediaId($filePath));

} else {

$this->sendText($fromUsername, $toUsername, ‘陈总’);

}

break;

default:

$this->sendText($fromUsername, $toUsername, ‘兄弟，不在服务器’);

# code…

break;

}

︴应用场景

问：首先明确搞活动吸粉使用微信默认提供的二维码是否而已？

答：明确可以，但是有效次没法统计门店吸粉量。

解决：通过程序生成不同参数的二维码

应用场景：门店吸粉统计二维码

二、微信LBS接口

1、什么是LBS

就是地理位置服务（获取你的位置，经度纬度）

2、接口说明（微信获取用户地理位置信息，经度和纬度）

4、使用php代码获取

1）需求

说明：用户发送位置坐标

提示：您发送的是地理位置消息，经度：xxx，纬度：xxx

2）代码

case ‘location’:

$tips = ‘您发送的是地理位置消息，经度：’.$postObj->Location_Y.’，纬度：xxx’.$postObj->Location_X;

$this->sendText($fromUsername, $toUsername, $tips);

break;

︴LBS案例：周边检索功能

步骤1：注册账号（登录）-> 创建应用 -> 获取key（b94b446f4ecad8b4f0e6cf758bacf915）

http://lbs.amap.com/dev/key/app

步骤2：获取周边检索功能接口

高德地图开发平台 http://lbs.amap.com/

步骤3：PHP获取周边数据

接口：

http://restapi.amap.com/v3/place/around?key=您的key&location=121.611812,31.034795&keywords=传智播客&types=&radius=10000&offset=20&page=1&extensions=all

<?php

//1.定义接口

$apiData = array(

‘key’ => ‘b94b446f4ecad8b4f0e6cf758bacf915’,

‘location’ => ‘121.611812,31.034795’,

‘keywords’ => ‘传智播客’,

‘types’ => ”,

‘radius’ => ‘10000’,

‘offset’ => ’20’,

‘page’ => ‘1’,

‘extensions’ => ‘all’

);

$api = ‘http://restapi.amap.com/v3/place/around?’.http_build_query($apiData);

//2.请求

$data = file_get_contents($api);

$data = json_decode($data, true);

echo ‘<pre>’;

print_r($data);

︴应用场景

场景1：用户发送地理位置 -> 直接文字响应周边商家门店

场景2：用户发送地理位置 -> 响应网址/或图文消息，点击网址看到下图效果

场景3：用户发送地理位置 -> 响应网址，点击网址看到下图效果（可以搜索附近关键词）

三、微信的语音识别接口

1、什么是语音识别

就是发送语音转化为文字

接口说明

使用php代码获取微信的语音识别结果

步骤1：开启语音识别功能（注：因为缓存开启前已经关注需要取消关注）

步骤2：wx.php接口检测是语音，响应文字消息

//脚下留心：只有开启语音识别才有Recognition参数

$this->sendText($fromUsername, $toUsername, $postObj->Recognition);

break;

四、图灵机器人接口（第三方平台）

1、什么是图灵机器人

就是智能聊天机器人（定义一个php接口传递关键词他会自动识别响应合理的内容）

以前使用的叫小黄鸡

图灵机器人接口

1）步骤1：注册/登录获取APPKEY（105042050cc245fd9ec31f21f5da6952）

http://www.tuling123.com/

2）接口说明

使用php代码对接图灵机器人

<?php

require ‘Wechat.class.php’;

$Wechat = new Wechat;

//1.定义接口

$api = “http://www.tuling123.com/openapi/api”;

//2.定义接口数据

$postData = array(

‘key’ => ‘105042050cc245fd9ec31f21f5da6952’,

‘info’ => $_GET[‘k’],

‘userid’ => ‘chenheng’,

);

//3.发送请求

$data = $Wechat->httpRequest($api, json_encode($postData), true);

echo ‘<pre>’;

print_r($data);

在微信中整合图灵机器人

$content = $this->liaotian($keyword, $userid = ‘aaaa’);

$this->sendText($fromUsername, $toUsername, $content);

/***

* 聊天机器人

* @param string $keyword 聊天内容

* @param string $userid 用户标识

*/

private function liaotian($keyword, $userid = ”)

{

//1.定义接口

$api = “http://www.tuling123.com/openapi/api”;

//2.定义接口数据

$postData = array(

‘key’ => ‘105042050cc245fd9ec31f21f5da6952’,

‘info’ => $keyword,

‘userid’ => $userid,

);

//3.发送请求

$data = $this->httpRequest($api, json_encode($postData), true);

return isset($data[‘text’]) ? $data[‘text’] : ”;

}

︴扩展：发语音美女陪聊

说明：就是语音识别+图灵机器人

五、微信接口与MySQL数据库

1、需求

用户输入【新闻】可以查看网站最新的新闻数据（推送图文消息）

创建相应数据库

create database wechat;

use wechat;

create table news (

id int unsigned primary key auto_increment,

title varchar(30) not null,

description varchar(200) not null,

picurl varchar(50) not null,

url varchar(50) not null

)engine=MyISAM charset=utf8;

insert into news

values

(null,’美女’,’大河绕青山,知己又红颜’,’http://47.91.211.137/zxk/img/b1.png’,’http://www.baidu.cn’),

(null,’靓仔’,’我是你爸爸’,’http://47.91.211.137/zxk/img/one.png’,’http://www.baidu.cn’),

(null,’adsf’,’我是手动阀’,’http://47.91.211.137/zxk/img/two.png’,’http://www.baidu.cn’),

(null,’sdfsd’,’我手动阀’,’http://47.91.211.137/zxk/img/three.png’,’http://www.baidu.cn’),

(null,’释放掉’,’发送的爸’,’http://47.91.211.137/zxk/img/one.png’,’http://www.baidu.cn’),

(null,’水电费’,’手动阀’,’http://47.91.211.137/zxk/img/one.png’,’http://www.baidu.cn’),

(null,’水电费’,’我手动阀爸爸’,’http://47.91.211.137/zxk/img/two.png’,’http://www.baidu.cn’),

(null,’第三方’,’啥地方爸爸’,’http://47.91.211.137/zxk/img/three.png’,’http://www.baidu.cn’);

3、在微信的代码读取表中对的数据,然后拼接图文消息

if ($keyword == ‘来新闻’) {

$pdo = new PDO(‘mysql:dbname=wechat’, ‘root’, ”);

$pdostatement = $pdo->query(“select * from news order by id desc limit 5”);

$newsData = $pdostatement->fetchAll(PDO::FETCH_ASSOC);

foreach ($newsData as $key => $news) {

$temp[] = array(

‘title’=> $news[‘title’],

‘desc’=> $news[‘description’],

‘img’ => $news[‘picurl’],

‘url’ => $news[‘url’]

);

}

$this->sendNews($fromUsername, $toUsername, $temp);

die;

}

/**

* 响应图文消息

* @param string $fromUsername 接受者

* @param string $toUsername 发送者

* @param string $data 数据

* @param return

*/

protected function sendNews($fromUsername, $toUsername, $datas)

{

// 格式：

// $datas = array(

// array(‘title’=>’a’, ‘desc’=> ‘bb’, ‘img’ => ‘http://47.91.211.137/zxk/img/b1.jpg’, ‘url’ => ‘http://baidu.com&/#8217;),

// array(‘title’=>’a’, ‘desc’=> ‘bb’, ‘img’ => ‘http://47.91.211.137/zxk/img/b1.jpg’, ‘url’ => ‘http://baidu.com&/#8217;),

// array(‘title’=>’a’, ‘desc’=> ‘bb’, ‘img’ => ‘http://47.91.211.137/zxk/img/b1.jpg’, ‘url’ => ‘http://baidu.com&/#8217;),

// array(‘title’=>’a’, ‘desc’=> ‘bb’, ‘img’ => ‘http://47.91.211.137/zxk/img/b1.jpg’, ‘url’ => ‘http://baidu.com&/#8217;)

// );

//响应图文消息，切记：ArticleCount是几则有几个item

$tpl = ‘<xml>

<ToUserName><![CDATA[%s]]></ToUserName>

<FromUserName><![CDATA[%s]]></FromUserName>

<CreateTime>%s</CreateTime>

<MsgType><![CDATA[news]]></MsgType>

<ArticleCount>%s</ArticleCount>

<Articles>’;

foreach ($datas as $data) {

$tpl .= “<item>

<Title><![CDATA[{$data[‘title’]}]]></Title>

<Description><![CDATA[{$data[‘desc’]}]]></Description>

<PicUrl><![CDATA[{$data[‘img’]}]]></PicUrl>

<Url><![CDATA[{$data[‘url’]}]]></Url>

</item>”;

}

$tpl .= ‘</Articles></xml>’;

echo sprintf($tpl, $fromUsername, $toUsername, time(), count($datas));

}

六、网页授权接口（Oauth2.0） 【★★★★★★★★】

1、什么是网页授权接口（Oauth2.0）

2、网页授权模式说明

3、实现网页授权功能

1）授权回调页面域名

2）用户同意授权，获取code

接口：

https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=用户同意后处理的PHP程序&response_type=

code&scope=snsapi_userinfo&state=STATE#wechat_redirect

替换自己的链接后，登录PC端将链接发送给自己然后手机端访问

https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx56e3e3d75414b3d0&redirect_uri=http://php.skschool.cn/zhaoxiaokang/member.php&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect

3）通过code换取网页授权access_token 和 openid（创建member.php页面输入下属代码）

<?php

//步骤1：设置安全回调地址

//步骤2：手动访问https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx56e3e3d75414b3d0&redirect_uri=http://47.91.211.137/zxk/member.php&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect

//步骤3：根据code获取access_token和openid

$apiData = array(

‘appid’=>’wx56e3e3d75414b3d0’,

‘secret’=>’f8ec8178c6dda48d1cb25c07304eff44’,

‘code’=>$_GET[‘code’],

‘grant_type’=>’authorization_code’

);

$api = ‘https://api.weixin.qq.com/sns/oauth2/access_token?’.http_build_query($apiData);

$data = file_get_contents($api);

$data = json_decode($data, true);

︴拉取用户信息（需scope为 snsapi_userinfo）

<?php

//步骤1：设置安全回调地址

//步骤2：手动访问https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx56e3e3d75414b3d0&redirect_uri=http://47.91.211.137/zxk/member.php&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect

//步骤3：根据code获取access_token和openid

$apiData = array(

‘appid’=>’wx56e3e3d75414b3d0’,

‘secret’=>’f8ec8178c6dda48d1cb25c07304eff44’,

‘code’=>$_GET[‘code’],

‘grant_type’=>’authorization_code’

);

$api = ‘https://api.weixin.qq.com/sns/oauth2/access_token?’.http_build_query($apiData);

$data = file_get_contents($api);

$data = json_decode($data, true);

//步骤4：获取用户信息

$apiData = array(

‘access_token’ => $data[‘access_token’],

‘openid’ => $data[‘openid’],

‘lang’ => ‘zh_CN’

);

$api = ‘https://api.weixin.qq.com/sns/userinfo?’.http_build_query($apiData);

$data = file_get_contents($api);

$data = json_decode($data, true);

echo ‘<pre>’;

print_r($data);

︴小总结【★★★★★】

需 求：获取用户信息

步骤1：设置回调域名（测试账号页面）

步骤2：获取code

替换自己的链接后，登录PC端将链接发送给自己然后手机端访问

https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx56e3e3d75414b3d0&redirect_uri=http://47.91.211.137/zxk/member.php&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect

步骤3：根据code获取access_token和openid（member.php）

步骤4：根据openid和access_token获取用户信息（member.php）

实战开发流程

用户访问某需要登录的页面 -> 通过会话技术判断用户是否登录（openid） ： 已登录-> 不用管正常访问，未登录-> 程序跳转到

（https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx56e3e3d75414b3d0&redirect_uri=http://php.skschool.cn/zhaoxiaokang/member.php&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect）获取openid并通过会话技术保存即可。

七、微信JSSDK接口【★★★★★】

1、什么是JSSDK接口

2、下载JSSDK官方接口

http://demo.open.weixin.qq.com/jssdk/sample.zip

实现JSSDK接口功能

步骤1：设置安全域名

步骤2：解压JSSDK

步骤3：修改sample.php文件

步骤4：修改sample.php配置接口

步骤4：上传到服务器访问

综合案例

需求

发送关键词【1024】响应链接参加活动（PC端：说明用微信打开，微信端：已登录不管，未登录授权登录）

代码

步骤1：加载静态页面

步骤2：判断用户是否登录

思路：通过session中的openid判断用户是否登录

逻辑：当用户访问index.php 通过 isWeixinApp.php判断用户是否通过微信客户端打开，通过isLogin.php是否登录（是-则不管，否-则跳转到网页授权）

index.php

isWeixinApp.php

<?php

$user_agent = $_SERVER[‘HTTP_USER_AGENT’];

if (strpos($user_agent, ‘MicroMessenger’) === false) {

// 非微信浏览器禁止浏览

//echo “HTTP/1.1 401 Unauthorized”;

echo ‘你有瑕疵，because 你 out 了，快用微信客户端’;

die;

}

isLogin.php

<?php

//步骤1：设置安全回调地址

//步骤2：手动访问https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx56e3e3d75414b3d0&redirect_uri=http://47.91.211.137/zxk/member.php&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect

//步骤3：根据code获取access_token和openid

$apiData = array(

‘appid’=>’wx56e3e3d75414b3d0’,

‘secret’=>’f8ec8178c6dda48d1cb25c07304eff44’,

‘code’=>$_GET[‘code’],

‘grant_type’=>’authorization_code’

);

$api = ‘https://api.weixin.qq.com/sns/oauth2/access_token?’.http_build_query($apiData);

$data = file_get_contents($api);

$data = json_decode($data, true);

// //步骤4：获取用户信息

$apiData = array(

‘access_token’ => $data[‘access_token’],

‘openid’ => $data[‘openid’],

‘lang’ => ‘zh_CN’

);

$api = ‘https://api.weixin.qq.com/sns/userinfo?’.http_build_query($apiData);

$data = file_get_contents($api);

$data = json_decode($data, true);

//登录成功，保存用户信息，并跳转到首页

session_start();

$_SESSION[‘userinfo’] = array(

‘openid’ => $data[‘openid’],

‘nickname’ => $data[‘nickname’],

‘headimgurl’ => $data[‘headimgurl’]

);

header(“location: ./index.php”);

扫码抽奖

一、App开发概述

1、什么是APP

就是苹果、安卓手机上装的软件/应用，如：微信、QQ、陌陌、王者荣耀等

2、手机软件开发的3种模式

1）Web App

说明：内嵌浏览器，打开指定网页

优点：快

缺点：用户体验度低，功能少

2）Native App（原生开发）

说明：就是安卓攻城狮开发安装应用，ios攻城狮开发苹果应用

优点：用户体验度高，可以使用n多功能

缺点：成本大，耗时间

3）Hybrid App（混合模式移动应用）

说明：就是直接写html + css + js就可以同时开发安卓和苹果APP

优点：成本低 + 功能强大

︴效果（广场舞）

二、使用APICloud框架开发HyBrid App前期准备

1、APICloud介绍

• 说明：APICloud就是开发移动app平台
• 特点：

1. 写一套代码，可以同时在 苹果 和 安卓手机上使用
2. 使用js代码就可以轻松调用手机功能，如：摄像头、手机灯等功能。

2、注册APICloud平台

注册完毕后登录，进入开发控制台

创建应用（app）

5、使用svn获取代码

• 步骤1：在桌面创建一个【广场舞】文件夹
• 步骤2：进入【广场舞】文件夹右击检出

三、【预览】安装海马玩/天天模拟器软件，用于模拟安卓手机，随时看到开发效果

1、下载

• 下载地址：http://droid4x.haimawan.com/，
• 下载地址：http://www.ttmnq.com/

安装（双击下一步安装）

开发完毕生成app软件

海马模拟器安装app软件并预览

更新app后重新编译安装

• 需求：将标题更新为【php@itcast】
• 操作：

步骤1：打开【C:\Users\赵小康\Desktop\广场舞\html\main.html】文件进行开发

步骤2：提交apicloud平台

步骤3：云编译（打包）

步骤4：下载到本地安装

四、【预览】配置开发工具与模拟器

1、安装Sublime text3（傻瓜式下一步安装）

下载Sublime Text3，下载地址：http://www.sublimetext.com/3

————————-

创建桌面快捷方式

2、汉化Sublime text3

3、Sublime集成预览功能

1）获取APICloud插件

2）配置Sublime Text3

———————————-

如何检测是否配置成功，看下图打开项目鼠标右击查看是否有（真机运行选项）

3）打开app项目（注：svn检出目录）

4）使用Sublime+模拟器+真机同步显示App

︴验证：真机同步（更新app同步预览）

步骤1：打开index.php修改内容

步骤2：右击真机同步即可查看效果（注：不需要提交代码）

五、手机App前端界面设计

Logo与引导页的设计（云端）

使用自定义loader实现真机同步

http://docs.apicloud.com/

1）上传本地的代码的到云端

2）编译Android自定义loader

3）下载并重命名

步骤1：下载

步骤2：更名

4）移动到指定目录中

步骤1：创建文件夹

步骤2：移动

5）创建配置文件

步骤1：创建文件

步骤2：写入固定格式数据

6）真机同步测试

六、APP框架分析

1、目录结构分析

2、App代码分析（从index.html入手）

<meta name=”viewport” content=”maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width”/>

width – viewport的宽度 height – viewport的高度

initial-scale – 初始的缩放比例

minimum-scale – 允许用户缩放到的最小比例

maximum-scale – 允许用户缩放到的最大比例

user-scalable – 用户是否可以手动缩放

<meta name=”format-detection” content=”telephone=no,email=no,date=no,address=no”>

让手机设备不直接识别手机号码、邮箱、日期以及address地址，也就是说不会直接有下划线

3、核心代码分析（针对Javascript）

4、App整体框架原理图

5、分析html/main.html核心代码

七、移动前段框架（AUICSS）

1、什么是AUICSS

就是前段框架，专门为apicloud而生，同bootstrap框架只要复制其规定的带css或者js的div就可以快速搭建一个网站。

下载AUICSS

网址：http://www.auicss.com/

3、使用AUICSS框架（前端框架）

步骤1：打开auicss框架拖拽【css】【js】【html】【image】文件夹到本地的广场舞文件中

步骤2：替换入口文件

步骤3：打开sublime右击真机同步

4、卡片列表

1）效果

2）index.html

<!doctype html>

<html>

<head>

<meta charset=”utf-8″>

<meta name=”viewport” content=”maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0″/>

<meta name=”format-detection” content=”telephone=no,email=no,date=no,address=no”>

<link rel=”stylesheet” type=”text/css” href=”./css/aui.css” />

</head>

<body>

哈啊哈哈哈哈

</body>

<script type=”text/javascript” src=”./script/api.js”></script>

<script type=”text/javascript”>

apiready = function(){

api.openWin({

name: ‘随意你开心就好’,

url: ‘./html/1.html’,

pageParam: {

name: ‘test’

}

});

}

</script>

</html>

3）1.html

<!DOCTYPE HTML>

<html>

<head>

<meta charset=”utf-8″>

<meta name=”viewport” content=”maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0″/>

<meta name=”format-detection” content=”telephone=no,email=no,date=no,address=no”>

<title></title>

<link rel=”stylesheet” type=”text/css” href=”../css/aui.css” />

</head>

<body>

<section class=”aui-content”>

<div class=”aui-card-list”>

<div class=”aui-card-list-header aui-card-list-user aui-border-b”>

<div class=”aui-card-list-user-avatar”>

<img src=”../image/demo4.png” class=”aui-img-round” />

</div>

<div class=”aui-card-list-user-name”>

<div>AUI</div>

<small>1天前</small>

</div>

<div class=”aui-card-list-user-info”>北京朝阳</div>

</div>

<div class=”aui-card-list-content-padded”>

<img src=”../image/l2.png” />

</div>

<div class=”aui-card-list-footer aui-border-t”>

<div><i class=”aui-iconfont aui-icon-note”></i> 666</div>

<div><i class=”aui-iconfont aui-icon-laud”></i> 888</div>

<div><i class=”aui-iconfont aui-icon-star”></i> 888</div>

</div>

<div class=”aui-card-list-header aui-card-list-user aui-border-b”>

<div class=”aui-card-list-user-avatar”>

<img src=”../image/demo4.png” class=”aui-img-round” />

</div>

<div class=”aui-card-list-user-name”>

<div>AUI</div>

<small>1天前</small>

</div>

<div class=”aui-card-list-user-info”>北京朝阳</div>

</div>

<div class=”aui-card-list-content-padded”>

<img src=”../image/l2.png” />

</div>

<div class=”aui-card-list-footer aui-border-t”>

<div><i class=”aui-iconfont aui-icon-note”></i> 666</div>

<div><i class=”aui-iconfont aui-icon-laud”></i> 888</div>

<div><i class=”aui-iconfont aui-icon-star”></i> 888</div>

</div>

<div class=”aui-card-list-header aui-card-list-user aui-border-b”>

<div class=”aui-card-list-user-avatar”>

<img src=”../image/demo4.png” class=”aui-img-round” />

</div>

<div class=”aui-card-list-user-name”>

<div>AUI</div>

<small>1天前</small>

</div>

<div class=”aui-card-list-user-info”>北京朝阳</div>

</div>

<div class=”aui-card-list-content-padded”>

<img src=”../image/l2.png” />

</div>

<div class=”aui-card-list-footer aui-border-t”>

<div><i class=”aui-iconfont aui-icon-note”></i> 666</div>

<div><i class=”aui-iconfont aui-icon-laud”></i> 888</div>

<div><i class=”aui-iconfont aui-icon-star”></i> 888</div>

</div>

</div>

</section>

</body>

</html>

八、实战案例之广场舞App静态页面

复习

什么是APP：就是安卓或者苹果上的软件

APP开发多种模式：

1. web app ： 内嵌浏览器，好处（开发快）瑕疵（用户体验差，功能不够强大）
2. 原生开发：就是安卓开发安卓app 、ios开发苹果app 好处：用户体验度高，瑕疵：成本大
3. 混合app：使用html + css + js 就可以开发app并且一套代码就可以搞定安卓和苹果app

注册apicloud账号并且创建app应用

安装模拟器

sublime 配合模拟器开发使用

设置APP的logo和引导页

实战广场舞app静态页面

■ 实战案例之广场舞App静态页面

1、顶部导航栏的制作

1）效果图

代码

• 步骤1：将auicss2的css、script、image文件夹拖拽到框架中
• 步骤2：头部代码

<!doctype html>

<html>

<head>

<meta charset=”utf-8″>

<meta name=”viewport” content=”maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width”/>

<meta name=”format-detection” content=”telephone=no,email=no,date=no,address=no”>

<title>Hello APP</title>

<link rel=”stylesheet” type=”text/css” href=”./css/api.css” />

<link rel=”stylesheet” type=”text/css” href=”./css/aui.css” />

<style type=”text/css”>

.aui-bar-nav { background: #FD4E56; }

</style>

</head>

<body>

<div id=”wrap”>

<div id=”header”>

<header class=”aui-bar aui-bar-nav”>热门</header>

</div>

<div id=”main”>

哈哈

</div>

<div id=”footer”>

</div>

</div>

</body>

<script type=”text/javascript” src=”./script/api.js”></script>

<script type=”text/javascript”>

apiready = function(){

};

</script>

</html>

2、底部导航栏的切换

1）效果图

2）代码

<!doctype html>

<html>

<head>

<meta charset=”utf-8″>

<meta name=”viewport” content=”maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width”/>

<meta name=”format-detection” content=”telephone=no,email=no,date=no,address=no”>

<title>Hello APP</title>

<link rel=”stylesheet” type=”text/css” href=”./css/api.css” />

<link rel=”stylesheet” type=”text/css” href=”./css/aui.css” />

<style type=”text/css”>

.aui-bar-nav { background: #FD4E56; }

</style>

<style type=”text/css”>

#demo {

width: 4rem;

height: 4rem;

position: absolute;

left: 50%;

top: 50%;

margin-left: -2rem;

margin-top: -2rem;

background-color: #e0e0e0;

border-radius: 50%;

line-height: 4rem;

text-align: center;

color: #212121;

font-size: 1.2rem;

}

</style>

</head>

<body>

<div id=”wrap”>

<div id=”header”>

<header class=”aui-bar aui-bar-nav” id=”title”>热门</header>

</div>

<div id=”main”>

</div>

<footer class=”aui-bar aui-bar-tab” id=”footer”>

<div class=”aui-bar-tab-item aui-active” tapmode>

<i class=”aui-iconfont aui-icon-home”></i>

<div class=”aui-bar-tab-label”>热门</div>

</div>

<div class=”aui-bar-tab-item” tapmode>

<i class=”aui-iconfont aui-icon-star”></i>

<div class=”aui-bar-tab-label”>广场</div>

</div>

<div class=”aui-bar-tab-item” tapmode>

<i class=”aui-iconfont aui-icon-wechat-circle”></i>

<div class=”aui-bar-tab-label”>动态</div>

</div>

<div class=”aui-bar-tab-item” tapmode>

<div class=”aui-dot”></div>

<i class=”aui-iconfont aui-icon-my”></i>

<div class=”aui-bar-tab-label”>关于</div>

</div>

</footer>

</div>

</body>

<script type=”text/javascript” src=”./script/api.js”></script>

<script type=”text/javascript” src=”./script/aui-tab.js” ></script>

<script type=”text/javascript”>

apiready = function(){

api.parseTapmode();

//默认打开热门页面

openPage(‘hot’, ‘热门’);

}

var tab = new auiTab({

element:document.getElementById(“footer”)

},function(ret){

console.log(ret);

if(ret){

//document.getElementById(“demo”).textContent = ret.index;

switch (ret.index) {

case 1:

openPage(‘hot’, ‘热门’);

break;

case 2:

openPage(‘guangchang’, ‘广场’);

break;

case 3:

openPage(‘action’, ‘动态’);

break;

case 4:

openPage(‘about’, ‘关于我们’);

break;

default:

openPage(‘hot’, ‘热门’);

break;

}

}

});

//打开页面方法

function openPage(pageName, title) {

var header = $api.byId(‘header’);

//适配iOS7+，Android4.4+状态栏沉浸式效果，详见config文档statusBarAppearance字段

$api.fixStatusBar(header);

//动态计算header的高度，因iOS7+和Android4.4+上支持沉浸式效果，

//因此header的实际高度可能为css样式中声明的44px加上设备状态栏高度

//其中，IOS状态栏高度为20px，Android为25px

var headerH = $api.offset(header).h;

//footer高度为css样式中声明的30px

var footerH = 50;

//frame的高度为当前window高度减去header和footer的高度

var frameH = api.winHeight – headerH – footerH;

api.openFrame({

name: ‘main’,

url: ‘html/’+pageName+’.html’,

bounces: true,

rect: {

x: 0,

y: headerH,

w: ‘auto’,

h: frameH

}

});

//切换头部标题

$api.byId(‘title’).innerHTML = title;

}

</script>

</html>

热门页（frame_host.html）

1）效果图

2）代码

<!DOCTYPE HTML>

<html>

<head>

<meta charset=”utf-8″>

<meta name=”viewport” content=”maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0″/>

<meta name=”format-detection” content=”telephone=no,email=no,date=no,aItemress=no”>

<title>热门</title>

<link rel=”stylesheet” type=”text/css” href=”../css/aui.css” />

<style type=”text/css”>

.aui-content { padding: 0 8px; }

.aui-content .aui-card-list { padding: 0px 6px; }

.aui-content .aui-card-list-footer { padding: 0px; }

</style>

</head>

<body>

<section class=”aui-content”>

<div class=”aui-card-list”>

<div class=”aui-card-list-content”>

<img src=”../image/demo.png” />

</div>

<div class=”aui-card-list-footer”>

是打发斯蒂芬

</div>

</div>

<div class=”aui-card-list”>

<div class=”aui-card-list-content”>

<img src=”../image/demo.png” />

</div>

<div class=”aui-card-list-footer”>

是打发斯蒂芬

</div>

</div>

<div class=”aui-card-list”>

<div class=”aui-card-list-content”>

<img src=”../image/demo.png” />

</div>

<div class=”aui-card-list-footer”>

是打发斯蒂芬

</div>

</div>

</section>

</body>

<script type=”text/javascript” src=”../script/api.js” ></script>

<script type=”text/javascript”>

apiready = function(){

api.parseTapmode();

}

</script>

</html>

广场页（frame_square.html）

1）效果图

2）代码

<!DOCTYPE HTML>

<html>

<head>

<meta charset=”utf-8″>

<meta name=”viewport” content=”maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0″/>

<meta name=”format-detection” content=”telephone=no,email=no,date=no,aItemress=no”>

<title>AUI快速完成布局</title>

<link rel=”stylesheet” type=”text/css” href=”../css/aui.css” />

<style type=”text/css”>

/*大层*/

.container{margin: 0 auto;}

/*瀑布流层*/

.waterfall{

-moz-column-count:2; /* Firefox */

-webkit-column-count:2; /* Safari 和 Chrome */

column-count:2;

-moz-column-gap: 1em;-webkit-column-gap: 1em;column-gap: 1em;}

/*一个内容层*/

.item{ padding: 1em;margin: 0 0 1em 0;-moz-page-break-inside: avoid;-webkit-column-break-inside: avoid;break-inside: avoid;/*border: 1px solid #000;*/ background: #fff;}

.item img{ width: 100%;margin-bottom:10px;}

</style>

</head>

<body>

<div class=”container”>

<div class=”waterfall”>

<div class=”item”>

<img src=”../image/1.png”>

<p>瀑布流效果</p>

</div>

<div class=”item”>

<img src=”../image/5.png”>

<p>瀑布流效果</p>

</div>

<div class=”item”>

<img src=”../image/2.png”>

<p>瀑布流效果</p>

</div>

<div class=”item”>

<img src=”../image/3.png”>

<p>瀑布流效果</p>

</div>

<div class=”item”>

<img src=”../image/4.png”>

<p>瀑布流效果</p>

</div>

<div class=”item”>

<img src=”../image/1.png”>

<p>瀑布流效果</p>

</div>

<div class=”item”>

<img src=”../image/5.png”>

<p>瀑布流效果</p>

</div>

<div class=”item”>

<img src=”../image/4.png”>

<p>瀑布流效果</p>

</div>

</div>

</div>

</body>

<script type=”text/javascript” src=”../script/api.js” ></script>

<script type=”text/javascript”>

apiready = function(){

api.parseTapmode();

}

</script>

</html>

动态页（frame_news.html）

1）效果图

2）代码

<!DOCTYPE HTML>

<html>

<head>

<meta charset=”utf-8″>

<meta name=”viewport” content=”maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0″/>

<meta name=”format-detection” content=”telephone=no,email=no,date=no,address=no”>

<title>AUI快速完成布局</title>

<link rel=”stylesheet” type=”text/css” href=”../css/aui.css” />

</head>

<body>

<div class=”aui-content aui-margin-b-15″>

<ul class=”aui-list aui-media-list”>

<li class=”aui-list-item aui-list-item-middle”>

<div class=”aui-media-list-item-inner”>

<div class=”aui-list-item-media wechat-avatar”>

<img src=”../image/m1.png” />

</div>

<div class=”aui-list-item-inner”>

<div class=”aui-list-item-text”>

<div class=”aui-list-item-title”>张三</div>

<div class=”aui-list-item-right”>》》</div>

</div>

<div class=”aui-list-item-text aui-font-size-12″>

Hello AUI 2.0!

</div>

</div>

</div>

</li>

<li class=”aui-list-item aui-list-item-middle”>

<div class=”aui-media-list-item-inner”>

<div class=”aui-list-item-media wechat-avatar”>

<img src=”../image/m2.png” />

</div>

<div class=”aui-list-item-inner”>

<div class=”aui-list-item-text”>

<div class=”aui-list-item-title”>张三</div>

<div class=”aui-list-item-right”>》》</div>

</div>

<div class=”aui-list-item-text aui-font-size-12″>

Hello AUI 2.0!

</div>

</div>

</div>

</li>

<li class=”aui-list-item aui-list-item-middle”>

<div class=”aui-media-list-item-inner”>

<div class=”aui-list-item-media wechat-avatar”>

<img src=”../image/m3.png” />

</div>

<div class=”aui-list-item-inner”>

<div class=”aui-list-item-text”>

<div class=”aui-list-item-title”>张三</div>

<div class=”aui-list-item-right”>》》</div>

</div>

<div class=”aui-list-item-text aui-font-size-12″>

Hello AUI 2.0!

</div>

</div>

</div>

</li>

<li class=”aui-list-item aui-list-item-middle”>

<div class=”aui-media-list-item-inner”>

<div class=”aui-list-item-media wechat-avatar”>

<img src=”../image/m4.png” />

</div>

<div class=”aui-list-item-inner”>

<div class=”aui-list-item-text”>

<div class=”aui-list-item-title”>张三</div>

<div class=”aui-list-item-right”>》》</div>

</div>

<div class=”aui-list-item-text aui-font-size-12″>

Hello AUI 2.0!

</div>

</div>

</div>

</li>

</ul>

</div>

</body>

<script type=”text/javascript” src=”../script/api.js” ></script>

<script type=”text/javascript”>

</script>

</html>

关于页（frame_about.html）

1）效果图

2）代码

<!DOCTYPE HTML>

<html>

<head>

<meta charset=”utf-8″>

<meta name=”viewport” content=”maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0″/>

<meta name=”format-detection” content=”telephone=no,email=no,date=no,address=no”>

<title>AUI快速完成布局</title>

<link rel=”stylesheet” type=”text/css” href=”../css/aui.css” />

</head>

<body>

<div class=”aui-content aui-margin-b-15″>

<ul class=”aui-list aui-media-list”>

<li class=”aui-list-item aui-list-item-middle” onclick=”openMusic()”>

<div class=”aui-media-list-item-inner”>

<div class=”aui-list-item-media wechat-avatar”>

<img src=”../image/m1.png” />

</div>

<div class=”aui-list-item-inner”>

<div class=”aui-list-item-text”>

<div class=”aui-list-item-title”>张三</div>

<div class=”aui-list-item-right”>》》</div>

</div>

<div class=”aui-list-item-text aui-font-size-12″>

Hello AUI 2.0!

</div>

</div>

</div>

</li>

<li class=”aui-list-item aui-list-item-middle” onclick=”openMusic()”>

<div class=”aui-media-list-item-inner”>

<div class=”aui-list-item-media wechat-avatar”>

<img src=”../image/m2.png” />

</div>

<div class=”aui-list-item-inner”>

<div class=”aui-list-item-text”>

<div class=”aui-list-item-title”>张三</div>

<div class=”aui-list-item-right”>》》</div>

</div>

<div class=”aui-list-item-text aui-font-size-12″>

Hello AUI 2.0!

</div>

</div>

</div>

</li>

<li class=”aui-list-item aui-list-item-middle” onclick=”openMusic()”>

<div class=”aui-media-list-item-inner”>

<div class=”aui-list-item-media wechat-avatar”>

<img src=”../image/m3.png” />

</div>

<div class=”aui-list-item-inner”>

<div class=”aui-list-item-text”>

<div class=”aui-list-item-title”>张三</div>

<div class=”aui-list-item-right”>》》</div>

</div>

<div class=”aui-list-item-text aui-font-size-12″>

Hello AUI 2.0!

</div>

</div>

</div>

</li>

<li class=”aui-list-item aui-list-item-middle” onclick=”openMusic()”>

<div class=”aui-media-list-item-inner”>

<div class=”aui-list-item-media wechat-avatar”>

<img src=”../image/m4.png” />

</div>

<div class=”aui-list-item-inner”>

<div class=”aui-list-item-text”>

<div class=”aui-list-item-title”>张三</div>

<div class=”aui-list-item-right”>》》</div>

</div>

<div class=”aui-list-item-text aui-font-size-12″>

Hello AUI 2.0!

</div>

</div>

</div>

</li>

</ul>

</div>

</body>

<script type=”text/javascript” src=”../script/api.js” ></script>

<script type=”text/javascript”>

function openMusic () {

api.openFrame({

name: ‘frame_music’,

url: ‘./music.html’,

bounces: true,

rect: {

x: 0,

y: 0,

w: ‘auto’,

h: ‘auto’

}

});

}

</script>

</html>

音乐详情页（frame_music.html）

1）效果图

2）代码

<!doctype html>

<html>

<head>

<meta charset=”utf-8″>

<meta name=”viewport” content=”maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width”/>

<meta name=”format-detection” content=”telephone=no,email=no,date=no,address=no”>

<title>甜椒广场舞</title>

<link rel=”stylesheet” type=”text/css” href=”../css/api.css” />

<link rel=”stylesheet” type=”text/css” href=”../css/aui.css” />

<style type=”text/css”>

.aui-bar-dark {background-color:#E65A65;}

#music {padding:50px 0; text-align:center;}

#music img {margin: auto; border-radius:100px; width:200px; height:200px;}

#title {text-align:center; margin: 10px 0px;}

.aui-range { width: 100%;}

/*.aui-range input[type=’range’] { background-color: #E65A65; }*/

.aui-range input[type=’range’]::-webkit-slider-thumb { background-color: #E65A65; }

</style>

</head>

<body>

<header id=”aui-header” class=”aui-bar aui-bar-nav aui-bar-dark”>

<a class=”aui-pull-left aui-btn” onclick=”closeWin()”>

<span class=”aui-iconfont aui-icon-left”></span>

</a>

<div class=”aui-title”>甜椒广场舞</div>

</header>

<div id=’music’>

<img src=’../image/music.png’ />

</div>

<h5 id=’title’>买买买 – By2</h5>

<br />

<div class=”aui-list-item-input”>

<div class=”aui-range”>

<input type=”range” class=”aui-range” value=”0″ max=”100″ min=”1″ step=”1″ id=”range”>

<div class=”aui-range-tip aui-hide”>0</div>

</div>

</div>

<br />

<p><div class=”aui-btn aui-btn-danger aui-btn-block”>播放音乐(start)</div></p>

<br />

<p><div class=”aui-btn aui-btn-danger aui-btn-block”>停止播放(pause)</div></p>

</body>

<script type=”text/javascript” src=”../script/api.js” ></script>

<script type=”text/javascript” src=”../script/aui-range.js” ></script>

<script type=”text/javascript”>

var range = new auiRange({

element:document.getElementById(“range”)

},function(ret){

})

apiready = function(){

api.parseTapmode();

}

function closeWin() {

api.closeFrame({

name: ‘frame_music’

});

}

</script>

</html>

一、使用TP完成APP后台

1、需求

后台可以动态添加、显示音乐数据

实现

见tools

App与TP框架整合（App接口）

1、App接口请求/运行原理图

使用TP框架开发App接口

<?php

namespace Api\Controller;

use Think\Controller;

class MusicController extends Controller

{

public function index()

{

$offset = I(‘post.offset’); // 相当于 $_POST[‘id’]

$limit = I(‘post.limit’); // 相当于 $_POST[‘id’]

//步骤1：从数据库获取数据

$musicData = M(‘music’)->order(‘id desc’)->limit($offset, $limit)->select();

//步骤2：数据过滤

foreach ($musicData as $key => $value) {

$musicData[$key][‘logo’] = ‘http://192.168.72.56/tp32_app_guangchangwu/Public/Uploads/’ . $musicData[$key][‘logo’];

}

//步骤3：响应json数据

echo json_encode($musicData);

}

}

在App中使用api.ajax调用App接口

接口

4、JQ遍历显示数据

<!DOCTYPE HTML>

<html>

<head>

<meta charset=”utf-8″>

<meta name=”viewport” content=”maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0″/>

<meta name=”format-detection” content=”telephone=no,email=no,date=no,address=no”>

<title>AUI快速完成布局</title>

<link rel=”stylesheet” type=”text/css” href=”../css/aui.css” />

</head>

<body>

<div class=”aui-content aui-margin-b-15″>

<ul class=”aui-list aui-media-list”><!–

<li class=”aui-list-item aui-list-item-middle” onclick=”openMusic()”>

<div class=”aui-media-list-item-inner”>

<div class=”aui-list-item-media wechat-avatar”>

<img src=”../image/m1.png” />

</div>

<div class=”aui-list-item-inner”>

<div class=”aui-list-item-text”>

<div class=”aui-list-item-title”>张三</div>

<div class=”aui-list-item-right”>》》</div>

</div>

<div class=”aui-list-item-text aui-font-size-12″>

Hello AUI 2.0!

</div>

</div>

</div>

</li> –>

</ul>

</div>

</body>

<script src=”https://cdn.bootcss.com/jquery/1.8.3/jquery.js”></script>

<script type=”text/javascript” src=”../script/api.js” ></script>

<script type=”text/javascript”>

apiready = function(){

//脚下留心：必须写本机的ip 因为模拟器也是一个单独的操作系统

api.ajax({

url: ‘http://192.168.72.56/tp32_app_guangchangwu/index.php/api/music/index’,

method: ‘post’,

data: {

values: {

offset: 0,

limit: 2,

}

}

}, function(ret, err) {

if (ret) {

//api.alert({ msg: JSON.stringify(ret) });

var html = ”;

$.each(ret, function(i, itemObj) {

html += ‘<li class=”aui-list-item aui-list-item-middle” onclick=”openMusic()”>’ +

‘<div class=”aui-media-list-item-inner”>’ +

‘<div class=”aui-list-item-media wechat-avatar”>’ +

‘<img src=”‘+itemObj.logo+'” />’ +

‘</div>’ +

‘<div class=”aui-list-item-inner”>’ +

‘<div class=”aui-list-item-text”>’ +

‘<div class=”aui-list-item-title”>’+itemObj.title+'</div>’ +

‘<div class=”aui-list-item-right”>》》</div>’ +

‘</div>’ +

‘<div class=”aui-list-item-text aui-font-size-12″>’ +

itemObj.author + ‘</div>’ +

‘</div>’ +

‘</div>’ +

‘</li>’;

});

//拼接最终在页面显示

$(“ul”).html(html);

} else {

api.alert({ msg: JSON.stringify(err) });

}

});

}

function openMusic () {

api.openFrame({

name: ‘frame_music’,

url: ‘./music.html’,

bounces: true,

rect: {

x: 0,

y: 0,

w: ‘auto’,

h: ‘auto’

}

});

}

</script>

</html>

实现下拉的刷新

什么是下拉刷新

———————–

下拉刷新接口

api.setRefreshHeaderInfo({

loadingImg: ‘widget://image/refresh.png’,

bgColor: ‘#ccc’,

textColor: ‘#fff’,

textDown: ‘下拉刷新…’,

textUp: ‘松开刷新…’

}, function(ret, err) {

//在这里从服务器加载数据，加载完成后调用api.refreshHeaderLoadDone()方法恢复组件到默认状态

});

使用下拉刷新获取数据

<!DOCTYPE HTML>

<html>

<head>

<meta charset=”utf-8″>

<meta name=”viewport” content=”maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0″/>

<meta name=”format-detection” content=”telephone=no,email=no,date=no,address=no”>

<title>AUI快速完成布局</title>

<link rel=”stylesheet” type=”text/css” href=”../css/aui.css” />

</head>

<body>

<div class=”aui-content aui-margin-b-15″>

<ul class=”aui-list aui-media-list”><!–

<li class=”aui-list-item aui-list-item-middle” onclick=”openMusic()”>

<div class=”aui-media-list-item-inner”>

<div class=”aui-list-item-media wechat-avatar”>

<img src=”../image/m1.png” />

</div>

<div class=”aui-list-item-inner”>

<div class=”aui-list-item-text”>

<div class=”aui-list-item-title”>张三</div>

<div class=”aui-list-item-right”>》》</div>

</div>

<div class=”aui-list-item-text aui-font-size-12″>

Hello AUI 2.0!

</div>

</div>

</div>

</li> –>

</ul>

</div>

</body>

<script src=”https://cdn.bootcss.com/jquery/1.8.3/jquery.js”></script>

<script type=”text/javascript” src=”../script/api.js” ></script>

<script type=”text/javascript”>

apiready = function(){

//默认点击动态，发送请求，显示第一页数据

getData(0);

api.setRefreshHeaderInfo({

loadingImg: ‘widget://image/refresh.png’,

bgColor: ‘#ccc’,

textColor: ‘#fff’,

textDown: ‘下拉刷新…’,

textUp: ‘松开刷新…’

}, function(ret, err) {

//在这里从服务器加载数据，加载完成后调用api.refreshHeaderLoadDone()方法恢复组件到默认状态

getData(1);

api.refreshHeaderLoadDone();

});

}

function openMusic () {

api.openFrame({

name: ‘frame_music’,

url: ‘./music.html’,

bounces: true,

rect: {

x: 0,

y: 0,

w: ‘auto’,

h: ‘auto’

}

});

}

//全局变量起始位置

var offset = 0;

function getData(isAdd) {

if (isAdd) offset+=2;

//脚下留心：必须写本机的ip 因为模拟器也是一个单独的操作系统

api.ajax({

url: ‘http://192.168.72.56/tp32_app_guangchangwu/index.php/api/music/index’,

method: ‘post’,

data: {

values: {

offset: offset,

limit: 2,

}

}

}, function(ret, err) {

//将json对象数据转化为字符串

if (ret && JSON.stringify(ret) !== ‘[]’) {

//api.alert({ msg: JSON.stringify(ret) });

var html = ”;

$.each(ret, function(i, itemObj) {

html += ‘<li class=”aui-list-item aui-list-item-middle” onclick=”openMusic()”>’ +

‘<div class=”aui-media-list-item-inner”>’ +

‘<div class=”aui-list-item-media wechat-avatar”>’ +

‘<img src=”‘+itemObj.logo+'” />’ +

‘</div>’ +

‘<div class=”aui-list-item-inner”>’ +

‘<div class=”aui-list-item-text”>’ +

‘<div class=”aui-list-item-title”>’+itemObj.title+'</div>’ +

‘<div class=”aui-list-item-right”>》》</div>’ +

‘</div>’ +

‘<div class=”aui-list-item-text aui-font-size-12″>’ +

itemObj.author + ‘</div>’ +

‘</div>’ +

‘</div>’ +

‘</li>’;

});

//拼接最终在页面显示

//$(“ul”).html(html);

//append(); 后面追加

//prepend() 前面追加

$(‘ul’).prepend(html);

} else {

alert(‘没有更多数据’);

// api.alert({ msg: JSON.stringify(err) });

}

});

}

</script>

</html>

四、使用APICloud中的模块让音乐响起来

1、音乐详情页CD旋转

• 步骤1：广场舞文件夹引入旋转jq插件

• music页面引入jquery并且让cd转动起来

<!doctype html>

<html>

<head>

<meta charset=”utf-8″>

<meta name=”viewport” content=”maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width”/>

<meta name=”format-detection” content=”telephone=no,email=no,date=no,address=no”>

<title>甜椒广场舞</title>

<link rel=”stylesheet” type=”text/css” href=”../css/api.css” />

<link rel=”stylesheet” type=”text/css” href=”../css/aui.css” />

<style type=”text/css”>

.aui-bar-dark {background-color:#E65A65;}

#music {padding:50px 0; text-align:center;}

#music img {margin: auto; border-radius:100px; width:200px; height:200px;}

#title {text-align:center; margin: 10px 0px;}

.aui-range { width: 100%;}

/*.aui-range input[type=’range’] { background-color: #E65A65; }*/

.aui-range input[type=’range’]::-webkit-slider-thumb { background-color: #E65A65; }

</style>

</head>

<body>

<header id=”aui-header” class=”aui-bar aui-bar-nav aui-bar-dark”>

<a class=”aui-pull-left aui-btn” onclick=”closeWin()”>

<span class=”aui-iconfont aui-icon-left”></span>

</a>

<div class=”aui-title”>甜椒广场舞</div>

</header>

<div id=’music’>

<img src=’../image/music.png’ />

</div>

<h5 id=’title’>买买买 – By2</h5>

<br />

<div class=”aui-list-item-input”>

<div class=”aui-range”>

<input type=”range” class=”aui-range” value=”0″ max=”100″ min=”1″ step=”1″ id=”range”>

<div class=”aui-range-tip aui-hide”>0</div>

</div>

</div>

<br />

<p><div class=”aui-btn aui-btn-danger aui-btn-block”>播放音乐(start)</div></p>

<br />

<p><div class=”aui-btn aui-btn-danger aui-btn-block”>停止播放(pause)</div></p>

</body>

<script type=”text/javascript” src=”../script/api.js” ></script>

<script type=”text/javascript” src=”../script/aui-range.js” ></script>

<script type=”text/javascript” src=”../script/jquery.min.js” ></script>

<script type=”text/javascript” src=”../script/jquery.rotate.min.js” ></script>

<script type=”text/javascript”>

apiready = function(){

api.parseTapmode();

//默认打开旋转

startMusic();

}

//进度条拖拽

var range = new auiRange({

element:document.getElementById(“range”)

},function(ret){

})

//关闭当前窗口，返回动态列表页

function closeWin() {

api.closeFrame({

name: ‘frame_music’

});

}

/*光盘旋转*/

var angle = 0;

var timer;

function startMusic() {

//清除已存在的定时器

clearInterval(timer);

timer = setInterval(function(){

angle+=3;

$(“#music img”).rotate(angle);

},50);

}

//清除旋转

function stopMusic() {

clearInterval(timer);

}

</script>

</html>

音乐播放功能

1）添加模块

让本地支持模块调试

3、查看netAudio手册，让音乐响起来（播放/停止按钮）

1）播放

• 接口

2）停止

• 接口

完整代码

action.html

music.html

<!doctype html>

<html>

<head>

<meta charset=”utf-8″>

<meta name=”viewport” content=”maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width”/>

<meta name=”format-detection” content=”telephone=no,email=no,date=no,address=no”>

<title>甜椒广场舞</title>

<link rel=”stylesheet” type=”text/css” href=”../css/api.css” />

<link rel=”stylesheet” type=”text/css” href=”../css/aui.css” />

<style type=”text/css”>

.aui-bar-dark {background-color:#E65A65;}

#music {padding:50px 0; text-align:center;}

#music img {margin: auto; border-radius:100px; width:200px; height:200px;}

#title {text-align:center; margin: 10px 0px;}

.aui-range { width: 100%;}

/*.aui-range input[type=’range’] { background-color: #E65A65; }*/

.aui-range input[type=’range’]::-webkit-slider-thumb { background-color: #E65A65; }

</style>

</head>

<body>

<header id=”aui-header” class=”aui-bar aui-bar-nav aui-bar-dark”>

<a class=”aui-pull-left aui-btn” onclick=”closeWin()”>

<span class=”aui-iconfont aui-icon-left”></span>

</a>

<div class=”aui-title”>甜椒广场舞</div>

</header>

<div id=’music’>

<img src=’../image/music.png’ />

</div>

<h5 id=’title’>买买买 – By2</h5>

<br />

<div class=”aui-list-item-input”>

<div class=”aui-range”>

<input type=”range” class=”aui-range” value=”0″ max=”100″ min=”1″ step=”1″ id=”range”>

<div class=”aui-range-tip aui-hide”>0</div>

</div>

</div>

<br />

<p><div class=”aui-btn aui-btn-danger aui-btn-block” onclick=”startMusic()”>播放音乐(start)</div></p>

<br />

<p><div class=”aui-btn aui-btn-danger aui-btn-block” onclick=”stopMusic();”>停止播放(pause)</div></p>

</body>

<script type=”text/javascript” src=”../script/api.js” ></script>

<script type=”text/javascript” src=”../script/aui-range.js” ></script>

<script type=”text/javascript” src=”../script/jquery.min.js” ></script>

<script type=”text/javascript” src=”../script/jquery.rotate.min.js” ></script>

<script type=”text/javascript”>

apiready = function(){

api.parseTapmode();

//默认打开旋转+播放

startMusic();

}

//进度条拖拽

var range = new auiRange({

element:document.getElementById(“range”)

},function(ret){

})

//关闭当前窗口，返回动态列表页

function closeWin() {

api.closeFrame({

name: ‘frame_music’

});

}

/*光盘旋转*/

var angle = 0;

var timer;

function startMusic() {

//清除已存在的定时器

clearInterval(timer);

timer = setInterval(function(){

angle+=3;

$(“#music img”).rotate(angle);

},50);

//播放

var netAudio = api.require(‘netAudio’);

netAudio.play({

// path: ‘http://7xisq1.com1.z0.glb.clouddn.com/apicloud/0d0b81b8bd5ab81bda9ca54267eb9b98.mp3’

path: api.pageParam.musicUrl

}, function(ret, err) {

if (ret) {

//alert(JSON.stringify(ret));

//当前已经播放 ret.current

//总时间 ret.duraion 单位：秒

// alert(ret.current / ret.duration * 100);

$(‘.aui-range input’).val(ret.current / ret.duration * 100);

} else {

alert(JSON.stringify(err));

}

});

}

//清除旋转

function stopMusic() {

//暂停旋转

clearInterval(timer);

//暂停播放

var netAudio = api.require(‘netAudio’);

netAudio.pause();

}

</script>

</html>

4、拖动播放进度（拖动滑块到某一个位置时，让歌曲也在相应的位置播放）

//检测是否拖动，说明：只要是表单标签设置值，统一用jq的val方法

//点击用onclick

//点击之后让用户选择用：onchange

$(‘.aui-range input’).change(function(){

//获取拖拽的进度

var bofangjindu = $(‘.aui-range-tip’).html();

//设置播放进去

var netAudio = api.require(‘netAudio’);

netAudio.setProgress({

progress: bofangjindu

});

});

五、Vuejs框架

1、什么是vue

vue是用js写的一个web框架，它提供数据和视图的绑定。修改数据，视图自动更新。

2、vue.js的下载

下载地址：https://v1.vuejs.org/guide/installation.html

vue.js初体验

1）渲染数据

<!DOCTYPE html>

<html>

<head>

<title>测试</title>

</head>

<body>

<div id=”app”>

{{ message }}

{{ data1 }}

{{ abc }}

</div>

<script type=”text/javascript” src=”./vue.js”></script>

<script type=”text/javascript”>

new Vue({

el: ‘#app’, //那个元素对象

data: {

message: ‘今天喜洋洋’,

data1: ‘今天喜洋洋2’,

abc: ‘打发斯蒂芬’,

}

});

</script>

</body>

</html>

2）双向绑定

<!DOCTYPE html>

<html>

<head>

<title>测试</title>

</head>

<body>

<div id=”app”>

{{ message }}

{{ data1 }}

{{ abc }}

<input type=”text” name=”” v-model=”message”>

<input type=”text” name=”” v-model=”data1″>

</div>

<script type=”text/javascript” src=”./vue.js”></script>

<script type=”text/javascript”>

new Vue({

el: ‘#app’, //那个元素对象

data: {

message: ‘今天喜洋洋’,

data1: ‘今天喜洋洋2’,

abc: ‘打发斯蒂芬’,

}

});

</script>

</body>

</html>

3）渲染列表

<!DOCTYPE html>

<html>

<head>

<title>测试</title>

</head>

<body>

<div id=”app”>

<ul>

<li v-for=”music in musicList”>{{ music.name }}</li>

</ul>

</div>

<script type=”text/javascript” src=”./vue.js”></script>

<script type=”text/javascript”>

new Vue({

el: ‘#app’,

data: {

musicList: [

{‘name’:’哈1′, ‘author’: ‘成大1’},

{‘name’:’哈11′, ‘author’: ‘成大2’},

{‘name’:’哈111′, ‘author’: ‘成大3’},

{‘name’:’哈1111′, ‘author’: ‘成大4’}

]

}

});

</script>

</body>

</html>

4、使用Vuejs遍历音乐替换JQ

步骤1：action.html引入vue

步骤2：在页面new Vue显示数据

︴扩展：视频播放

步骤1：安装模块，然后自定义loader

步骤2：查看手册，调用播放器

var moviePlayer = api.require(‘moviePlayer’);

moviePlayer.open({

rect:{

x: 0,

y: 0,

w:api.frameWidth,

h:300

},

styles:{

head:{

bg: ‘rgba(161,161,161,0.5)’,

height: 44,

y:20,

title:{

size:20,

color:’#fff’,

width:40,

leftMargin:10

},

backSize: 30,

backImg:’widget://image/back.png’,

customButtons:[{

w:30,

h:30,

rightMagin:10,

img:’widget://image/image/collect.png’,

imgSelected:’fs://image/collectSelected.png’,

}]},

foot:{

bg: ‘rgba(0,0,0,0.5)’,

height: 44,

palyBtn:{

size: 20,

playImg:’widget://image/play.png’,

pauseImg:’widget://image/pause.png’,

marginLeft:5

},

currentTimeLabel:{

textSize:14,

textColor:”#FFF”,

textWidth: 43,

marginLeft:5

},

seekBar:{

sliderImg:’widget://image/circle.png’,

sliderW : 20,

sliderH : 20,

progressColor: ‘#696969’,

progressSelected: ‘#76EE00’,

marginLeft:10,

marginRight:10

},

totalTimeLabel:{

textSize:14,

textColor:”#FFF”,

textWidth: 43,

marginRight:5

},

fullscreenBtn:{

size:20,

verticalImg:’widget://image/vertical.png’,

horizontalImg:’widget://image/horizontal.png’,

}

} },

path:’http://baobab.wdjcdn.com/1455782903700jy.mp4′,

autoPlay: true

},function(ret, err){

if(ret){

// alert(JSON.stringify(ret));

// } else {

// alert(JSON.stringify(err));

}

});