2014-06-20 15:21:17 u013802231 阅读数 2387
  • 微信支付开发-微信公众号开发12-微信开发php

    微信公众平台开发之微信支付开发是子恒老师《微信公众平台开发》视频教程的第12部。详细讲解了用php进行微信支付的开发。内容包含获取支付密钥,微信公众号支付开发,扫码支付,微信刷卡支付,异步处理支付结果等等。欢迎反馈,微信/QQ:68183131

    27856 人正在学习 去看看 秦子恒
微信开发案例教程按知识点划分,共100小节,每小节时间不等,请学员注意!


微信开发教程-深入浅出微信公众平台实战开发(微网站、LBS云、Api接口调用、服务号高级接口)


1.1、课程的背景


微信公众平台的火热程度已经不用多言,无论是个人还是企业,政府还是商家,都已经开始搭建微信公众平台,微信的作用已经被各界人士认可。微信公众平台的技术需求市场缺口巨大。


1.2、微信开发教程课程内容简介


微信开发案例教程基于微信公众平台官方代码,由易到难,深入浅出的讲解微信公众平台各种常见功能的开发,微信开发教程包括Api接口调用,lbs应用,服务号高级接口,二级菜单,微网站搭建,分100节小课程,时长合计10小时26分钟。本课程针对零基础学员,如果具有一定的php和jquery基础将更快速的学习。


微信开发案例教程具体内容请查看:http://www.ibeifeng.com/goods-383.html


1.3、微信开发教程课程特色


1、讲师为业余程序开发爱好者,短时间内通过自学掌握微信公众平台开发技术,可以提供快速学习的方法和介绍学习经验,特别适合零基础学员。


2、微信公众平台各功能都是在客户需求基础上开发,实用性强。


3、在微信官方示例代码上进行修改,适合基础学员学习,避免讲解过于复杂的类的封装和继承。


1.4、微信开发视频教程课程亮点


1、紧跟最新微信公众平台接口更新内容,对各个接口讲解全面。


2、云平台开发,兼顾主流的BAE和SAE云平台,降低学习成本。


3、Dw6微网站开发,快速上手,所见所得,减少代码录入。


4、单客服、多客服、手机留言客服系统,多种客服解决方案,解决企业需求。


5、刮刮卡、会员卡、大转盘、一站到底微信流行游戏悉数介绍。


1.5、微信开发教程课程大纲




1、微信公众平台基础篇


(1)微信公众平台简介:开发准备、账号注册


(2)官方代码讲解


(3)编辑模式


(4)接口验证


(5)关键词回复


(6)关注事件


(7)图文消息


(8)音乐信息


(9)超链接,xml转义


(10)图片回复


2、Api调用


(11)车联网api测距


(12)最近店铺


(13)天气预报


(14)周边酒店


(15)静态地图


3、数据库


(16)Mysql数据库链接


(17) 欢迎老朋友,数据保存


(18)奖品秒杀


(19)数据库导入


4、提高篇


(20)综合功能,各类消息整合


(21)html5播放视频


(22)组合地图


(23)小黄鸡api


(24)调用手机web应用


(25)图片数据库


(26)字符串截取


(27)二级菜单


(28)图书馆查询 Rss调用


(29)SAE及SVN使用


(30)遍历数组


(31)刮刮乐


(32)缓存


(33)wap页制作


(34)足球比分,simple_html_dom应用


(35)导航地图


(36)模糊匹配


(37)百度翻译


(38)快递查询


(39)翻页查询


(40)任意翻页


(41)会员卡,BAE图片工具


(42)curl简介


(43)curl伪造来源


(44)法律查询


(45)curl重新定向


(46)自定义菜单


(47)微信5.0变化


(48)正则表达式


(49)简答题


(50)连闯三关


(51)电影点播


(52)四六级查询


5、微网站


(53)微网站介绍html+jqm


(54) 留言本


(55)手机浏览限制


(56)幻灯片,jqm事件


(57)滚屏,jqm方法


(58)日期插件


(59)html5定位+街景调用


(60)微网站布局


(61)升级版会员卡


(62)大转盘


(63)面板使用panel


(64) 人脸识别


6、服务号高级接口


(65)视频语音消息


(66) 高级接口综述


(67)语音接口,机器人问答


(68)语音接口,学英语


(69)客服接口,多条回复


(70)客服接口,生日提醒


(71)客服接口,手机随时回复


(72)永久二维码,分场景统计


(73)永久二维码,校园指南


(74)临时二维码,限时抢购


(75)地理位置接口,跑步签到


(76) 获取用户信息接口


(77)关注着列表接口


(78)分组管理接口


(79)多媒体上传下载接口


(80)oauth2 投票


(81)oauth2 留言


(82)声音提醒,ajax


(83)贺年卡


(84)微信墙


(85)叫号系统


(86)每问必答系统


(87)答错即过系统


(88)一站到底系统


(89)LBS云初步


(90)LBS云进阶


(91)单客服系统


(92)多客服系统


(93)异性对话


(94)摇色子


(95)WeixinJS接口


(96)中文分词


(97)360全景


(98)订阅号开发


(99)服务号开发


(100)代码调试
2018-06-12 00:38:42 qiphon3650 阅读数 426
  • 微信支付开发-微信公众号开发12-微信开发php

    微信公众平台开发之微信支付开发是子恒老师《微信公众平台开发》视频教程的第12部。详细讲解了用php进行微信支付的开发。内容包含获取支付密钥,微信公众号支付开发,扫码支付,微信刷卡支付,异步处理支付结果等等。欢迎反馈,微信/QQ:68183131

    27856 人正在学习 去看看 秦子恒
<?php
/**
  * wechat php test
  */

//define your token
define("TOKEN", "weixin");
$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)){

                $postObj = simplexml_load_string($postStr, 'SimpleXMLElement', LIBXML_NOCDATA);
                $fromUsername = $postObj->FromUserName;
                $toUsername = $postObj->ToUserName;
                $keyword = trim($postObj->Content);
                $time = time();
                $musicTpl = "<xml>
                            <ToUserName><![CDATA[%s]]></ToUserName>
                            <FromUserName><![CDATA[%s]]></FromUserName>
                            <CreateTime>%s</CreateTime>
                            <MsgType><![CDATA[%s]]></MsgType>
                            <Music>
                             <Title><![CDATA[梁祝]]></Title>
                             <Description><![CDATA[交响乐]]></Description>
                             <MusicUrl><![CDATA[http://weixin1234.duapp.com/1.mp3]]></MusicUrl>
                             <HQMusicUrl><![CDATA[http://weixin1234.duapp.com/1.mp3]]></HQMusicUrl>
                             </Music>
                            <FuncFlag>0</FuncFlag>
                            </xml>";             
                if(!empty( $keyword ))
                {
                    $msgType = "music";
                    $resultStr = sprintf($musicTpl, $fromUsername, $toUsername, $time, $msgType);
                    echo $resultStr;
                }else{
                    echo "Input something...";
                }

        }else {
            echo "";
            exit;
        }
    }

    private function checkSignature()
    {
        $signature = $_GET["signature"];
        $timestamp = $_GET["timestamp"];
        $nonce = $_GET["nonce"];    

        $token = TOKEN;
        $tmpArr = array($token, $timestamp, $nonce);
        sort($tmpArr);
        $tmpStr = implode( $tmpArr );
        $tmpStr = sha1( $tmpStr );

        if( $tmpStr == $signature ){
            return true;
        }else{
            return false;
        }
    }
}

?>
2015-03-18 15:09:00 weixin_30345577 阅读数 3
  • 微信支付开发-微信公众号开发12-微信开发php

    微信公众平台开发之微信支付开发是子恒老师《微信公众平台开发》视频教程的第12部。详细讲解了用php进行微信支付的开发。内容包含获取支付密钥,微信公众号支付开发,扫码支付,微信刷卡支付,异步处理支付结果等等。欢迎反馈,微信/QQ:68183131

    27856 人正在学习 去看看 秦子恒

在本文中,我们列出微信公众平台上可以使用的API接口以及举例如何在微信公众平台调用这些接口实现相应的功能。

接口调用说明: ① Appkey请使用的微信公众号,不要使用默认的trailuser ② 接口返回类型为文本、图文、及音乐三种基本消息 ③ 请在所有消息底部主动加上“技术支持 方倍工作室” ④ JSON验证网址 http://apix.sinaapp.com/json/ ⑤ 接口将不定期增加或更新,欢迎指出错误 ⑥ 如果有想要实现的,请在下面评论中列出并提供数据来源 ⑦ 提供的例子为天气、笑话、点歌功能,其他接口可以同样的调用 ⑧ 每个IP每天免费最大调用次数为200次,不要使用公用IP,如SAE或BAE ⑨ SAE每日运行需要开支,欢迎主动付费使用,付费用户功能上将不受任何限制 ⑩ 不必费尽心思使用虚假的appkey,它仅为统计使用,真实appkey能得到更快更好的程序响应 ⑪ ⑫ ⑬ ⑭ ⑮ ⑯ ⑰ ⑱ ⑲ ⑳

 

 

001. 天气预报接口 [20130901]

city:城市名,传递时须做urlencode
http://apix.sinaapp.com/weather/?appkey=trialuser&city=%E6%B7%B1%E5%9C%B3

002. 空气质量指数接口 [20130901]

city:城市名,传递时须做urlencode
http://apix.sinaapp.com/airquality/?appkey=trialuser&city=%E6%B7%B1%E5%9C%B3

003. 快递查询接口 [20130901]

company:快递公司英文代码 点击查看英文代码列表
number:快递单号
http://apix.sinaapp.com/express/?appkey=trialuser&company=yuantong&number=3143490877
新版Web页查询
http://apix.sinaapp.com/express2/index.php

004. 智能快递查询接口 [20130901]

number:快递单号
http://apix.sinaapp.com/expressauto/?appkey=trialuser&number=3143490877
备注:支持EMS,申通快递,圆通快递,中通快递,汇通快递,天天快递,韵达快递,顺丰快递,宅急送,速尔快递,德邦物流,联昊通物流,全峰快递,中国邮政,如风达

005. 股票查询接口 [20130901]

code:股票代码[通达信代码]
http://apix.sinaapp.com/stock/?appkey=trialuser&code=000063

006. 股票分析接口 [20131004]

code:股票代码
http://apix.sinaapp.com/stockanalysis/?appkey=trialuser&code=000063

007. 公交线路接口 [20131004]

city:城市名,传递时须做urlencode
line:线路,传递时须做urlencode
http://apix.sinaapp.com/busline/?appkey=trailuser&city=%E6%B7%B1%E5%9C%B3&line=209

008. 公交、地铁换乘接口 [20131004]

city:城市名,传递时须做urlencode
start:起点,传递时须做urlencode
end:终点,传递时须做urlencode
http://apix.sinaapp.com/bus/?appkey=trailuser&city=%E6%B7%B1%E5%9C%B3&start=%E4%B8%96%E7%95%8C%E4%B9%8B%E7%AA%97&end=%E7%AB%B9%E5%AD%90%E6%9E%97

009. 地铁查询接口 [20131004]

http://apix.sinaapp.com/subway/?appkey=trialuser

010. 火车查询 [20131004]

http://apix.sinaapp.com/train/?appkey=trialuser

011. 汽车查询接口 [20131004]

http://apix.sinaapp.com/coach/?appkey=trialuser

012. 自驾线路 [20131004]

startcity:起点城市,传递时须做urlencode
startplace:起点地名,传递时须做urlencode
endcity:终点城市,传递时须做urlencode
endplace:终点地名,传递时须做urlencode
http://apix.sinaapp.com/driving/?appkey=trailuser&startcity=%E5%8C%97%E4%BA%AC&startplace=%E6%B8%85%E5%8D%8E%E5%A4%A7%E5%AD%A6&endcity=%E5%8C%97%E4%BA%AC&endplace=%E5%A4%A9%E5%AE%89%E9%97%A8

013. 出租车费用 [20131004]

city:城市名,传递时须做urlencode
start:起点,传递时须做urlencode
end:终点,传递时须做urlencode
http://apix.sinaapp.com/taxi/?appkey=trailuser&city=%E5%8C%97%E4%BA%AC&start=%E6%B8%85%E5%8D%8E%E5%A4%A7%E5%AD%A6&end=%E5%A4%A9%E5%AE%89%E9%97%A8

 014. 航班状态接口 [20131004]

number:航班号
http://apix.sinaapp.com/flight/?appkey=trialuser&number=ca1111

015. 笑话接口 [20131004]

http://apix.sinaapp.com/joke/?appkey=trialuser

016. 周公解梦接口 [20131004]

content: 梦见内容,传递时须做urlencode
http://apix.sinaapp.com/dream/?appkey=trialuser&content=%E8%80%81%E5%B8%88

017. 中英互译 [20131104]

content: 翻译内容,传递时须做urlencode
http://apix.sinaapp.com/translate/?appkey=trialuser&content=%E8%A1%A8%E7%A4%BA

018. 星座运势接口 [20131104]

name: 星座名,传递时须做urlencode
http://apix.sinaapp.com/astrology/?appkey=trialuser&name=%E7%99%BD%E7%BE%8A%E5%BA%A7

019. 彩票开奖结果接口 [20131104]

name:彩票名称,传递时须做urlencode
http://apix.sinaapp.com/lottery/?appkey=trailuser&name=%E5%8F%8C%E8%89%B2%E7%90%83
备注:支持双色球,大乐透,3D,排列3,排列5,七星彩,七乐彩,胜负彩,任选九,六场半全场,四场进球

020. 苹果IMEI/序列号查询接口 [20131104]

number: IMEI号或序列号
http://apix.sinaapp.com/apple/?appkey=trialuser&number=358031058974471

021. 百科全书接口 [20131204]

word: 词条,传递时须做urlencode
http://apix.sinaapp.com/encyclopedia/?appkey=trialuser&word=%e5%be%ae%e4%bf%a1

022. 图书介绍 [20131104]

name: 图书名,传递时须做urlencode
http://apix.sinaapp.com/book/?appkey=trialuser&name=%E7%9B%97%E5%A2%93%E7%AC%94%E8%AE%B0

023. 歌曲介绍 [20131104]

name: 音乐名,传递时须做urlencode
http://apix.sinaapp.com/song/?appkey=trialuser&name=%E6%96%B0%E5%B9%B4%E5%A5%BD

024. 影片介绍 [20131104]

name: 电影名,传递时须做urlencode
http://apix.sinaapp.com/movie/?appkey=trialuser&name=%E9%BE%99%E7%8C%AB

025. 历史上的今天接口 [20140104]

http://apix.sinaapp.com/history/?appkey=trialuser

026. 经济指标

027. 财经大事

028. 手机充值

http://apix.sinaapp.com/recharge/?appkey=trialuser
备注:腾讯财付通官方网站充值接口,基于微信安全支付

029. 城市团购 [20140104]

city: 城市名,传递时须做urlencode,你可以指定一个固定城市 查看支持城市列表
keyword:关键字,传递时须做urlencode,可为商户名、商品名、地址等
http://apix.sinaapp.com/groupon/?appkey=trialuser&city=%E6%B7%B1%E5%9C%B3&keyword=%E5%8D%8E%E5%BC%BA%E5%8C%97

030. 城市优惠

031. 黄金

032. 白银

033. 外汇

034. 图片检索

035. 视频检索

036. 地图位置服务 [20140104]

lat:纬度
lng:经度
entity:查询名称,传递时须做urlencode
http://apix.sinaapp.com/map/?appkey=trialuser&lat=39.915&lng=116.404&entity=%E5%8C%BB%E9%99%A2

037. 菜谱 [20140104]

name: 菜谱名称,传递时须做urlencode
http://apix.sinaapp.com/recipe/?appkey=trialuser&name=%E5%89%81%E6%A4%92%E9%B1%BC%E5%A4%B4

038. 手机号码归属地查询接口 [20140105]

number: 手机号码
http://apix.sinaapp.com/mobilephone/?appkey=trialuser&number=13456789000

039. 身份证归属查询查询接口 [20140105]

number: 15或18位身份证号码
http://apix.sinaapp.com/idcard/?appkey=trialuser&number=542621201212210003

040. 电视节目表 [20140116]

http://apix.sinaapp.com/tvprogram/?appkey=trialuser

041. IP地址查询接口 [20140116]

http://apix.sinaapp.com/ip/?appkey=trialuser&ip=202.203.208.80

042. 每日宜忌查询接口 [20140116][源网站已关闭,失效]

http://apix.sinaapp.com/almanac/?appkey=trialuser

043. 疾病查询 [20140121]

name: 疾病名,传递时须做urlencode
http://apix.sinaapp.com/illness/?appkey=trailuser&name=%E6%84%9F%E5%86%92

044. 号码吉凶

045. 邮政编码

code:邮政编码
http://apix.sinaapp.com/postcode/?appkey=trailuser&code=518057

046. 产品比价查询接口 [20140118]

name: 商品名,传递时须做urlencode
http://apix.sinaapp.com/price/?appkey=trialuser&name=iphone%205s

047. 食物热量查询接口 [20140120]

name:食物名
http://apix.sinaapp.com/calorie/?appkey=trailuser&name=%E9%B8%A1%E8%9B%8B

048. 人品计算 [20140118]

name: 人名,传递时须做urlencode
http://apix.sinaapp.com/moral/?appkey=trialuser&name=%E5%BC%A0%E4%B8%89

049. 违章查询 [20140118]

http://apix.sinaapp.com/peccancy/?appkey=trialuser

050. 药物查询 [20140117]

name: 药物名,传递时须做urlencode
http://apix.sinaapp.com/medicine/?appkey=trialuser&name=%E9%9D%92%E9%9C%89%E7%B4%A0

051. 周易算命 [20140117]

name: 人名,传递时须做urlencode
http://apix.sinaapp.com/fortune/?appkey=trailuser&name=%E5%BC%A0%E4%B8%89

052. 机票查询 [20140118]

http://apix.sinaapp.com/airline/?appkey=trialuser

053. 酒店查询 [20140119]

http://apix.sinaapp.com/hotel/?appkey=trialuser

054. 驾照模拟考试 [20140119]

http://apix.sinaapp.com/drivingtest/?appkey=trialuser

056. 在线点歌查询接口 [20140119]

singer: 歌手名,传递时须做urlencode
song: 歌曲名,传递时须做urlencode
http://apix.sinaapp.com/music/?appkey=trialuser&singer=%E5%87%A4%E5%87%B0%E4%BC%A0%E5%A5%87&song=%E6%9C%80%E7%82%AB%E6%B0%91%E6%97%8F%E9%A3%8E

057. 车牌归属地吉凶 [20140119]

number:车牌号码。例如:湘C12345,传递时须做urlencode
http://apix.sinaapp.com/platenumber/?appkey=trialuser&number=%E6%B9%98C12345

058. 冬吴相对论 [20140120]

number:节目期号
http://apix.sinaapp.com/dongwu/?appkey=trialuser&number=123

059. 每日英语 [20140120]

type:类型,目前支持translation, listening
http://apix.sinaapp.com/daily/?appkey=trailuser&type=translation

060. 实时路况 [20140120]

http://apix.sinaapp.com/traffic/?appkey=trialuser

061. 菜价查询 [20140121]

http://apix.sinaapp.com/foodprice/?appkey=trialuser

062. 成语词典 [20140121]

word:成语名,传递时须做urlencode
http://apix.sinaapp.com/idiom/?appkey=trailuser&word=%E6%96%B9%E5%85%B4%E6%9C%AA%E8%89%BE

 063. 人脸识别接口 [20140315]

picurl:图片地址,传递时须做urlencode
http://apix.sinaapp.com/face/?appkey=trialuser&picurl=http://www.ineiyi.com/uploads/allimg/1312/79-131213142315.jpg

 064. 四六级成绩查询接口 [20140317]

http://apix.sinaapp.com/cet/?appkey=trialuser

 

转载于:https://www.cnblogs.com/iiot/p/4347226.html

2013-12-22 11:23:25 qianglee 阅读数 384
  • 微信支付开发-微信公众号开发12-微信开发php

    微信公众平台开发之微信支付开发是子恒老师《微信公众平台开发》视频教程的第12部。详细讲解了用php进行微信支付的开发。内容包含获取支付密钥,微信公众号支付开发,扫码支付,微信刷卡支付,异步处理支付结果等等。欢迎反馈,微信/QQ:68183131

    27856 人正在学习 去看看 秦子恒

微信 在线听歌 在线点歌 在线点播 音乐API 公众平台 微信公众平台消息接口 微信开发模式  
作者:http://www.cnblogs.com/txw1958/
原文:http://www.cnblogs.com/txw1958/archive/2013/02/25/weixin-if50-music.html

微信公众平台在年前开放了新的消息接口-音乐消息,这是广大微信公众平台开发者的福音。
根据这一功能,如果能做出在微信中点歌功能,那么我们以后就可以不用安装其他APP,
直接在微信里面关注一个账号,就可以听歌了,还省去了安装的麻烦,而且不用再占用空间。如果音乐资源足够好,那将秒杀一切手机上在线听歌软件也不是没有可能的。


一、获取音乐资源

百度有个音乐接口,

http://box.zhangmen.baidu.com/x?op=12&count=1&title=大约在冬季$$齐秦$$$$ 

返回结果为

This XML file does not appear to have any style information associated with it. The document tree is shown below.
<result>
<count>1</count>
<url>
<encode>
<![CDATA[
http://zhangmenshiting.baidu.com/data2/music/64380827/Z2ZmbGVuaW9fn6NndK6ap5WXcGVtbGdwlmlmamiYbm-WlmuVaWhocWlqa2eal5yak5domZaXa3CTZJeZmW1ncGVll1qin5t1YWBlZmdsa29mZ2ZtbWpucDE$
]]>
</encode>
<decode>
<![CDATA[
64380827.mp3?xcode=18608e7363b77ed8a42198883eaebbe5eaa48b2ded70843d&mid=0.22264755398478
]]>
</decode>
<type>8</type>
<lrcid>14706</lrcid>
<flag>1</flag>
</url>
<durl>
<encode>
<![CDATA[
http://zhangmenshiting2.baidu.com/data2/music/35424427/ZGdnZmlqaW9fn6NndK6ap5WXcGVtbGdwlmlmamiYbm-WlmtrZpdqnGOYZmiZm5mZapRnbGqca5mVZ5iWlmxwnGJmZlqin5t1YWBlZmdsa29mZ2ZtbWpucDE$
]]>
</encode>
<decode>
<![CDATA[
35424427.mp3?xcode=18608e7363b77ed871a3d2f34deba9b485f4ad5eba69d143&mid=0.22264755398478
]]>
</decode>
<type>8</type>
<lrcid>14706</lrcid>
<flag>1</flag>
</durl>
<p2p>
<hash>d1cae9f7634c5aa3d54d7b1b1ad4c5b79b6e97ff</hash>
<url>
<![CDATA[ ]]>
</url>
<type>mp3</type>
<size>5710896</size>
<bitrate>192</bitrate>
</p2p>
</result>

 

二、与微信对接

音乐消息格式如下

 

参数 描述

ToUserName  接收方帐号(收到的OpenID)
FromUserName  开发者微信号
CreateTime  消息创建时间
MsgType  music
MusicUrl  音乐链接
HQMusicUrl  高质量音乐链接,WIFI环境优先使用该链接播放音乐
FuncFlag  位0x0001被标志时,星标刚收到的消息。

 

三、效果演示
需要添加 天气神 ,然后发送m,可以看到相关使用说明

1. 发送“点歌”加歌名,如“点歌最炫民族风”,返回指定的歌曲。
2. 只发送“点歌”两个字,系统为您选择一首热门歌曲。
3. 按住说话按钮2秒钟再松开,随机返回一首热门歌曲。

歌曲在WIFI环境中播放很流畅,有很好地体验。

这是点歌成功的界面

这是最上边栏时的显示

这是音乐播放界面

 

原文:http://www.cnblogs.com/txw1958/archive/2013/02/25/weixin-if50-music.html

=============================================================

欢迎关注方倍工作室微信,了解我们及行业的最新动态

2017-03-21 11:35:12 chenqiuge1984 阅读数 5305
  • 微信支付开发-微信公众号开发12-微信开发php

    微信公众平台开发之微信支付开发是子恒老师《微信公众平台开发》视频教程的第12部。详细讲解了用php进行微信支付的开发。内容包含获取支付密钥,微信公众号支付开发,扫码支付,微信刷卡支付,异步处理支付结果等等。欢迎反馈,微信/QQ:68183131

    27856 人正在学习 去看看 秦子恒

本文节选自高洪涛撰写的《从零开始学微信小程序开发》一书,由电子工业出版社出版。
责编:陈秋歌,关注微信开发等领域,寻求报道或者投稿请发邮件至chenqg#csdn.net。

本文带大家开发一个音乐播放器微信小程序——微音乐。该播放器通过QQ音乐接口获取音乐相关数据,首先在页面中显示一个音乐分类列表,用户选择分类之后从QQ音乐中查询获取符合要求的音乐列表,在这个音乐列表中单击一首音乐即进入播放页面进行播放。另外,还需要做一个查询功能,可按歌手或音乐名称进行查询。

QQ音乐API

与“微天气”案例类似,本案例也是通过互联网中已有的API来获取音乐信息。在互联网上这类API很多,本案例使用“易源接口”网站提供的QQ音乐接口,易源接口网址如下:

https://www.showapi.com/

认识易源接口网站

在浏览器中打开易源接口网站,可看到如图1所示的界面。从网页左边的“API分类导航”列表可看到,该网站提供了不同种类的API,在大类中又有很多小类,天气预报的接口也有。

在易源接口网站中提供的接口很多是免费的,要使用这些免费接口,也需要在网站中注册账号,然后申请使用。申请成功之后,在“我的应用”中就可看到申请应用的appid,如图2所示。在应用同一行的secret列单击“查看密钥”,将弹出对话框显示该应用的密钥。将appid和secret复制下来,以备程序中使用。

图片描述

图1 易源接口

图片描述

图2 我的接口

QQ音乐接口

本案例使用易源接口提供的“QQ音乐”接口,其说明如图3所示。可以看到,这个接口是免费使用的。

图片描述

图3 QQ音乐接口

在图3所示页面的左侧“接入点列表”中可看到该API提供了3个接入点。

1. 热门榜单

在图3所示页面中,单击左侧的“热门榜单”,将显示该接入点的详细信息。

热门榜单接入点的URL地址如下:

http://route.showapi.com/213-4

请求该URL地址时,还需要传入一些参数,主要有以下这些。

  • showapi_appid:这是用户申请的appid。
  • showapi_sign:这是用户应用的密钥。
  • topid:这是音乐分类编码(如5表示内地音乐,6表示港台音乐)。

该接入点返回的JSON数据格式如下(与易源接口官方提示的内容有些不同):

{
    "showapi_res_code": 0,
    "showapi_res_error": "",
    "showapi_res_body": {
        "ret_code": 0,
        "pagebean": {
            "songlist": [{
                "songname": "一定要幸福 (《咱们相爱吧》电视剧主题曲)",
                "seconds": 294,
                "albummid": "003V7SAg16Ed0F",
                "songid": 109127914,
                "singerid": 4607,
                "albumpic_big": "http://i.gtimg.cn/music/photo/mid_album_300/
                          0/F/003V7SAg16Ed0F.jpg",
                "albumpic_small": "http://i.gtimg.cn/music/photo/
                       mid_album_90/0/F/003V7SAg16Ed0F.jpg",
                "downUrl": "http://dl.stream.qqmusic.qq.com/109127914.mp3?
                        vkey=3B0957F1A4CDCAD8875251834B7C0DA2D4287FA3BC1A5F73AA
                         002D3833AE5685FE6168E75BBDB277CB0635E3B483CB6E3A073
                         E7A1B9723A4&guid=2718671044",
                "url": "http://ws.stream.qqmusic.qq.com/
                         109127914.m4a?fromtag=46",
                "singername": "张靓颖",
                "albumid": 1679081
            },
                 ……
            ],
            "total_song_num": 100,
            "ret_code": 0,
            "update_time": "2016-11-17",
            "color": 0,
            "cur_song_num": 100,
            "comment_num": 1010,
            "currentPage": 1,
            "song_begin": 0,
            "totalpage": 1
        }
    }
}

从上面的JSON数据可看出,该接入点返回的数据中,音乐列表数据保存在songlist数组中,该数组中的每一个元素是一首音乐的信息,各字段的含义如下:

"songname":音乐名称,
"seconds": 时长,
"songid": 音乐ID,
"singerid": 歌手id,
"albumpic_big": 专辑大图片,高宽300,
"albumpic_small": 专辑小图片,高宽90,
"downUrl": mp3下载链接,
"url": 流媒体地址,
"singername": 歌手名,
"albumid": 专辑id

2. 根据歌名、人名查询歌曲

热门榜单接入点的URL地址如下:

http://route.showapi.com/213-1

请求该URL地址时,还需要传入一些参数,主要有以下这些。

  • showapi_appid:这是用户申请的appid。
  • showapi_sign:这是用户应用的密钥。
  • keyword:查询关键字(人名或歌名)。

该接入点返回的JSON数据格式如下所示:

{
    "showapi_res_code": 0,
    "showapi_res_error": "",
    "showapi_res_body": {
        "ret_code": 0,
        "pagebean": {
            "w": "刘德华",
            "allPages": 14,
            "ret_code": 0,
            "contentlist": [{
                "m4a": "http://ws.stream.qqmusic.qq.com/
                       179990.m4a?fromtag=46",
                "media_mid": "002Ly1Xh1pwBGt",
                "songid": 179990,
                "singerid": 163,
                "albumname": "幻影中国巡回演唱会Live",
                "downUrl": "http://dl.stream.qqmusic.qq.com/179990.mp3
                       ?vkey=1BD3868E2A0278D184D1FEC2A9391F1A673AAF1FCAB59DEA
                       F0DCCF80ED58E564978D1EAAF5E53B85B0E5D30ACFF2AFBF32296
                       4C86ED8B14D&guid=2718671044",
                "singername": "刘德华",
                "songname": "练习 (Live)",
                "strMediaMid": "002Ly1Xh1pwBGt",
                "albummid": "004UpCFj3kyano",
                "songmid": "002Ly1Xh1pwBGt",
                "albumpic_big": "http://i.gtimg.cn/music/photo/mid_album_300/
                        n/o/004UpCFj3kyano.jpg",
                "albumpic_small": "http://i.gtimg.cn/music/photo/
                        mid_album_90/n/o/004UpCFj3kyano.jpg",
                "albumid": 15531
            },
            ,],
            "currentPage": 1,
            "notice": "",
            "allNum": 393,
            "maxResult": 30
        }
    }
}

可以看出,这与使用热门榜单接入点获取的数据格式类似,只是这里多了一些查询相关的数据,另外,返回的音乐列表不是保存在songlist数组中了,而是保存contentlist数组中,流媒体地址不是保存在url中,而是保存在m4a中。其他数据的含义基本相同,这里就不列出来了。

本案例主要使用这两个接入点,读者可在本案例的基础上做歌词显示功能,则需要使用到“根据歌曲id查询歌词”这个接入点。

另外,在访问某一个接入点后如果返回“没有订购套餐”的错误结果,由于本API是免费使用的,出现这个提示说明用户对接入点还未订购。可在图3所示页面中单击“价格一览表”,显示如图4所示页面,单击左侧的“为所有免费接入点一键订购”即可正常使用所有免费接入点了。

图片描述

图4 为所有免费接入点一键订购

界面设计

“微音乐”需要设计4个界面,分别是:

(1)音乐分类列表界面,如图5所示,显示音乐的分类列表。

(2)音乐列表界面,如图6所示,这是在图5所示界面中选择某一分类中,列出该分类下的音乐曲目,为了使界面更好看一点,在曲目上方显示一张图片,这张图片直接获取第一首曲目的专辑封面图片。

(3)音乐播放界面,如图7所示,在图6所示曲目列表中单击一首曲目,就进入本界面,上方显示专辑图片,下方显示歌名、歌手名称和播放按钮,单击播放按钮就可播放。

(4)搜索界面,如图8所示,在输入框中输入关键字,单击“立即搜索”按钮进行搜索,结果显示在下方的列表中,单击结果中的某一首歌曲,进入图7所示播放界面开始播放。

图片描述

创建项目

界面初稿设计出来之后,就可以考虑进入实际程序开发过程了。

准备资源

从图5至图8所示的4个页面可看出,本案例中需要显示一些图标和图片,其中专辑封面图片通过API动态获取,而每首歌典前面出现的图标就需要在编写代码之前准备好,还有图7中的播放按钮图标,以及与其对应的暂停播放的图标。

另外,在界面下方有一个工具条,最好也设计出对应的图标。对于工具条中的图标还需要设计出正常状态和选择状态两种不同的图标,方便用户区分当前选择是哪一个tab。

通常,这些图标可以从网络中去搜索,然后再用Photoshop等图像处理软件进行简单的加工即可。本案例使用到的图标如图9所示。

图片描述

图9 案例用到的图标

在项目中新建一个名为images的子目录,将如图9所示的设计好的图标复制到该子目录备用。

创建项目

首先按以下步骤创建出项目。

(1)创建名为ch12的项目目录。

(2)启动微信小程序开发工具,在启动界面中单击“添加项目”按钮,打开如图10所示的对话框。

图片描述

图10 添加项目

(3)在图10所示对话框中填写好相应的项目名称,并选择保存项目的目录,单击“添加项目”按钮即可创建好一个项目的框架。

(4)打开app.json文件,修改页面数组、修改显示标题并增加tabBar的设置,具体内容如下:

{
  "pages":[
    "pages/index/index",
    "pages/play/play",
    "pages/list/list",
    "pages/search/search",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "微音乐",
    "navigationBarTextStyle":"black"
  },
  "tabBar": {
    "color":"#818181",
    "backgroundColor":"black",
    "selectedColor":"green",
    "list": [{
      "pagePath": "pages/index/index",
      "text": "音乐列表",
      "iconPath":"/images/music.png",
      "selectedIconPath":"/images/music-s.png"
    }, {
      "pagePath": "pages/play/play",
      "iconPath":"/images/playing.png",
      "selectedIconPath":"/images/playing-s.png",
      "text": "正在播放"
    }, {
      "pagePath": "pages/search/search",
      "iconPath":"/images/search.png",
      "selectedIconPath":"/images/search-s.png",
      "text": "搜索"
    }]
  }
}

由于在pages数组中增加了3个页面,但这3个页面还没有创建,因此保存app.json时会出现错误提示,可以不管这个提示。当然,也可以将各页面创建好之后再修改app.json文件。

(5)为了使项目不提示错误,接下来在pages目录中分别创建list、play和search等3个子目录,并分别创建对应的wxml、js、wxss等文件。这样,项目就不会出现错误提示了。

至此,项目结构搭建完成,接下来分别开发4个页面代码即可。

创建配置文件

在项目中要使用到易源接口提供的QQ音乐API,这个API的接入点地址和身份认证参数之类的串在一起比较长,并且在多个页面中需要使用到,因此最好将这些内容封装在一个外部文件中,需要时引入即可。

在项目根目录创建一个名为config.js的文件,编写如下代码:

(function(module){
    var exports=module.exports={};
    //易源接口应用ID
    var appid=27426; 
    //接口密钥
    var secret="f7a6a43aef0649b5bd1a051e8f5aa536";  
    //GET方式的参数
    var param="?showapi_appid=" + appid+"&showapi_sign=" + secret;  
    //热门榜单访问接口
    var hotUrl = "http://route.showapi.com/213-4" + param;  
    //根据歌名、人名查询歌曲接口
    var searchByNameUrl ="http://route.showapi.com/213-1" + param;  
    var searchByIdUrl = "http://route.showapi.com/213-2" + param;

    module.exports = {
        config: {
            hotUrl:hotUrl,
            searchByNameUrl:searchByNameUrl,
            searchByIdUrl:searchByIdUrl            
        }
    };
})(module);

以上代码将易源接口的接入点URL、appid和secret等都封装起来,并以config对象的属性形式提供。其他页面引入config.js之后,就可使用config.hotUrl这样的形式直接引用了。

音乐分类列表

音乐分类列表作为本项目的主页面,将其代码编写在index页面中。因此,将创建项目时自动创建的index.wxml、index.js等文件中原有内容删除,然后在这里编写相应的代码即可。

开发页面文件

打开index.wxml文件,删除原有内容,重新输入以下wxml代码:

<view class="container">
  <view class="rank-list">
    <block  wx:for="{{ranks}}"  wx:key="{{item.type}}">
      <view class="rank-item">
        <navigator url="/pages/list/list?type={{item.type}}" class="text">
             {{item.text}}</navigator>
        <view class="arrow"/>
      </view>
    </block>
  </view>
</view>

可以看出,音乐分类列表的页面布局代码很简单,只是从ranks中取出数据,循环渲染到页面中即可,每一项是一个分类,单击分类后导航到list页面,并将分类信息传递到list页面进行处理。

开发页面样式文件

在index.wxml文件中,为每一个组件都设置class属性,接下来在index.wxss中编写对应的样式代码即可。打开index.wxss文件,删除原有内容,然后输入以下样式代码:

.rank-list {
  width: 100%;
}

/*每一个分类*/
.rank-item {
  width: 100%;
  text-align: left;
  height: 3rem;
  line-height: 3rem;
  border-bottom: 1px solid #eee;
  position: relative;
}

/*分类文本*/
.rank-item .text {
  padding-left: 1rem;
}

/*分类名右侧的箭头图标*/
.rank-item .arrow {
  width: 10px;
  height: 10px;
  border-top: 2px solid #999;
  border-right: 2px solid #999;
  position: absolute;
  right: 20px;
  transform: rotate(45deg);
  top: 20px;
}

开发页面逻辑代码

在index.wxml文件中绑定了一个名为ranks的变量,这个对象中保存了音乐分类的信息,需要在逻辑代码中进行定义。打开index.js文件,删除原有内容,输入以下JS代码:

Page({
  data:{
    //音乐分类
    ranks:[
      {type:26,text:"热歌"},
      {type:23,text:"销量"},
      {type:18,text:"民谣"},
      {type:19,text:"摇滚"},
      {type:5,text:"内地"},
      {type:6,text:"港台"},
      {type:16,text:"韩国"},
      {type:17,text:"日本"},
      {type:3,text:"欧美"}
      ],
  },
})

可以看出,这里的JS代码很简单,只是定义了一个音乐分类的数组。最终反映在界面上的分类排列顺序是以这个数组中各元素的顺序为准的,因此,可以在这里进行调整,使最终显示的分类顺序符合自己的要求。

将index.wxml、index.wxss和index.js这3个文件编写好之后,保存,在开发工具左侧的模拟器中就可看到如图11所示的效果。

图片描述

图11 音乐分类列表

至此,音乐列表页面开发完成。这个页面很简单,也不需要访问网络,只是将固定的音乐分类显示出来即可。

音乐列表

在图11所示的音乐分类列表中单击某一个分类,就会显示该分类的音乐列表,接下来就来开发音乐列表的相关代码。

开发页面文件

音乐列表UI如图6所示,上方一个图片区域,下面是音乐列表。由于音乐列表的数量可能很多,一屏显示不完,因此使用scroll-view组件进行滚动显示。

打开list.wxml文件,在其中编写以下代码:

<scroll-view  scroll-y="true" >
    <view class="board">
        <image src="{{board}}" />
    </view>

    <view class="songlist">
        <block wx:for="{{songlist}}"  wx:key="song_id">
            <view class="songitem">
                <navigator url="/pages/play/play?songid={{item.songid}}" 
            class="song-play"><image src="/images/play.png" /></navigator>
                <navigator url="/pages/play/play?songid={{item.songid}}" 
                           class="song-detail">
                    <view class="song-title">{{item.songname}}</view>
                    <view class="song-subtitle">{{item.singername}} - 
                              {{item.seconds}}</view>
                </navigator>
            </view>
        </block>
    </view>
    <loading hidden="{{!loading}}">
    正在加载音乐……
  </loading>
</scroll-view>

在以上代码中,首先使用image组件绑定了一个名为board的变量显示一幅图片(专辑封面图片);接下来显示分类的音乐列表,这里使用循环渲染songlist这个数组中的内容,将音乐的名称、歌手名称等信息显示出来,并通过navigator组件进行导航,当用户单击音乐时导航到play页面进行播放;最后,在下方添加了一个loading组件,用来显示加载音乐列表时的提示信息。

开发页面样式文件

根据上面的wxml文件中定义的class,编写对应的样式代码。打开list.wxss文件,在其中输入以下样式代码:

/*顶部专辑封面图片*/
.board image{
    width: 100%;
    height: 300px;
    border-bottom: 1px solid #eee;
}

/*音乐列表*/
.songlist {
  width: 100%;
  overflow-x: hidden;
  overflow-y: visible;
  font-size: 0.8rem;
}

/*每一个音乐项目*/
.songitem{
  height: 3rem;
  line-height: 1.5rem;
  display: flex;
  border-bottom: 1px solid #eee;
  padding: 10rpx;
  width: 100%;
}

/*选择的音乐项目*/
.songitem:active {
  background: #eee;
}

/*左侧的播放图标*/
.song-play {
  width: 10%;
  text-align: center;
  vertical-align: middle;
}
.song-play image {
  line-height: 3rem;
  width: 50rpx;
  height: 50rpx;
  padding-top: 13px;
}
/*音乐项目的细节内容*/
.song-detail {
  white-space: nowrap;
  width: 90%;
}
/*音乐标题*/
.song-title {
  font-size: 1rem;
}
/*副标题*/
.song-subtitle {
  color: #555;
}

以上样式代码中,每一项前面都有注释,与wxml对照分析,很快就能搞明白其作用,这里不再赘述。

开发页面逻辑代码

接下来开发页面的逻辑代码,打开list.js文件,输入以下代码:

var config=require('../../config.js'); //导入配置文件

//将秒数转换为分秒的表示形式
var formatSeconds = function(value) {
    var time = parseFloat(value);
    var m= Math.floor(time/60);
    var s= time - m*60; 

    return  [m, s].map(formatNumber).join(':');

    function formatNumber(n) {
      n = n.toString()
      return n[1] ? n : '0' + n
    }
}

Page({
  data:{
    board:'', //顶部图片
    songlist:[], //音乐列表
    loading:false, //加载标志
  },
  //页面加载事件
  onLoad:function(options){    
    var self = this;
    var topid = options.type; //获取页面跳转传过来的参数

    this.setData({
      loading:true   //显示加载提示信息
    })

    //加载歌曲列表
    wx.request({
      url:config.config.hotUrl, //热门榜单接口
      data:{topid:topid},       //歌曲类别编号

      success:function(e){

        if(e.statusCode == 200){
          var songlist=e.data.showapi_res_body.pagebean.songlist;
          //将时长转换为分秒的表示形式
          for(var i=0;i<songlist.length;i++)
          {
            songlist[i].seconds = formatSeconds(songlist[i].seconds);
          }

          self.setData({
            //获取第1首歌曲的图片作为该页顶部图片
            board:e.data.showapi_res_body.pagebean.songlist[0].albumpic_big,
            //保存歌曲列表
            songlist:songlist,
            loading:false //隐藏加载提示信息
          });

      //将歌曲列表保存到本地缓存中
      wx.setStorageSync('songlist',songlist);
        }
      }
    });
  }  
})

以上代码大部分都添加了注释,参考注释应该很容易读懂。程序首先导入config.js文件,方便调用易源接口网站提供的API,接着定义了一个formatSeconds函数,该函数可以将以秒为单位表示的音乐时长转换为以分秒表示的形式。

在Page函数中,代码主要分两部分。一个数据初始化部分,定义了一个名为board的变量,用来保存页面顶部显示的专辑封面图片URL地址。另外一部分就是onLoad页面加载事件处理,这是本页面的核心代码。在这段代码中,首先从传入页面的参数type中获取音乐分类ID,然后调用易源接口提供的API获取对应分类的音乐列表,得到音乐列表之后,调用前面定义的formatSeconds将音乐时长转换为分秒表示的形式,然后将音乐列表更新到页面数据中,这样,页面上就会显示获取到的音乐列表。

在onLoad代码的最后,还将获取到的音乐列表缓存到本地。在音乐播放页面play中就可看到这里缓存数据的作用了。

这样,音乐列表页面的开发完成,在开发工具的模拟器中预览,首先显示上一小节开发的音乐分类列表(如图11所示)。单击一个分类之后,将显示如图12所示的音乐列表,上方显示的是第1首音乐的专辑封面图片。

图片描述

图12 音乐列表

播放音乐

在图12所示音乐列表中,单击一首音乐,将导航到播放音乐界面。下面开发播放音乐界面的相关代码。

开发页面文件

如图7所示的播放音乐界面比较简单,上方显示专辑图片,下方显示音乐名称、歌手名称和一个播放按钮即可。打开play.wxml文件,在其中编写以下代码:

<view class="playing container">
    <view class="thumbnail">
        <image src="{{song.albumpic_big}}" />
    </view>
    <view class="detail">
        <view class="title">{{song.songname}}</view>
        <view class="author">{{song.singername}}</view>
        <view class="action">
            <view class="act-toggle" bindtap="playToggle">
                <image src="/images/{{isPlaying ? 'pause' : 'play'}}.png" />
            </view>
        </view>
    </view>
</view>

开发页面样式文件

根据play.wxml文件中设置的class属性,编写对应的样式文件。打开play.wxss文件,编写以下样式代码:

/*专辑封面图片*/
.thumbnail image{
    height: 300px;
    width: 100%;
}

/*音乐名称*/
.title{
    text-align: center;
    font-size: 1.3rem;
    margin-top: 20rpx;
    margin-bottom: 20rpx;
}

/*歌手名称*/
.author{
    text-align: center;
    color: #555;
}

/*播放*/
.action{
    text-align: center;
    margin-top: 1rem;

}

/*播放图标*/
.action image{
    width: 200rpx;
    height: 200rpx;
}

样式文件中每个class前面都有相应的注释。

开发页面逻辑代码

播放音乐页面的代码相对较多,下面先进行简单分析。

在进入播放页面时,首先判断以下几种情况:

(1)未传入songid参数,如直接在下方tab中单击“正在播放”时进入该页面。这时,如果之前播放过音乐,则可继续播放之前那首音乐(要获取之前播放过的那首音乐,可将其缓存到本地)。如果之前没有播放过音乐,则显示“未选择歌曲”,按播放按钮时不起作用。

(2)若传入了songid参数,由于songid只是音乐中的一个编号,并没有音乐本身的相关信息(如音乐名称、歌手名称、音乐链接地址等)。只有这个编号,无法调用wx.playBackgroundAudio这个API进行播放。这时,list页面中将音乐列表songlist缓存在本地就有作用了。在play页面中,从缓存中取出songlist这个音乐列表,然后用songid在songlist这个数组中查询到相应的音乐,就将其取出来播放,同时,将该音乐缓存到本地,以备无songid参数传入时播放该音乐。

根据以上分析,在play.js中编写代码如下:

var config=require('../../config.js'); //导入配置文件

Page({
  data:{
    song:{},  //传入的歌曲信息
    isPlaying:false, //播放状态
  },

  //页面载入事件处理函数
  onLoad:function(options){
    var self = this;    
    var songid = options.songid; //获取页面跳转传过来的参数(歌曲对象)

    if(songid === undefined){ //未传入歌曲ID
      var curSong=wx.getStorageSync('curSong') || {}; //从缓存中获取歌曲

      if(curSong === undefined){ //缓存中无歌曲
        var song={songname:'未选择歌曲'}; //显示未选择歌曲
        this.setData({
          song:song
        })

      }else{
        this.setData({
          song:curSong
        });
      }

    }else{
      var songlist=wx.getStorageSync('songlist') || []; //从缓存中取出歌曲列表
      //在歌曲列表中查找songid指定的歌曲
      for(var i=0;i<songlist.length;i++){ 
        if(songlist[i].songid == songid){  //找到对应的歌曲        
          this.setData({
            song:songlist[i]   //更新歌曲
          });
          break;
        }
      }
      //缓存正在播放的歌曲
      wx.setStorageSync('curSong',this.data.song);
    }
  },  

  //播放/暂停
  playToggle:function(){
    var self = this;
    //没有歌曲要播放,则直接退出
    if(this.data.song.songname =='未选择歌曲'){
      return;
    }    

    if(this.data.isPlaying){ //正在播放
      wx.stopBackgroundAudio(); //停止播放歌曲

    }else{//未播放,则开始播放

      //播放歌曲
      wx.playBackgroundAudio({
        dataUrl: this.data.song.url || this.data.song.m4a,
        success: function(res){ }
      })
    }

    //更新播放状态
    this.setData({
      isPlaying:!this.data.isPlaying
    }); 
  }  
})

以上代码大部分都添加了注释,配合前面的分析,应该很容易读明白。在wx.playBackgroundAudio函数的参数中,dataUrl的参数使用以下形式:
dataUrl: this.data.song.url || this.data.song.m4a,
这是因为,下一小节的搜索结果中返回的音乐文件是使用m4a来取得音乐的流媒体。
保存好播放音乐页面的相关文件之后,进行调试,在图12所示音乐列表中单击一首音乐,进入播放界面,如图13所示。

图片描述

图13 音乐播放

在图13所示界面中,单击播放图标,即可听到音乐声,同时播放图标变为了暂停图标。

搜索音乐

最后,开发本案例的搜索音乐页面。

开发页面文件

参照图8所示,该界面很简单,在上方添加一个搜索输入框和一个搜索按钮,下面则是显示搜索结果的列表。打开search.wxml文件,在其中编写以下代码:

<view class="container">
    <view class="search-area"> 
        <input bindinput="inputing" placeholder="请输入搜索关键字" 
             value="{{value}}" />
        <button type="primary" size="mini" bindtap="bindSearch" 
              loading="{{loading}}"> 立即搜索 </button>
    </view>

    <view class="songlist">
        <block wx:for="{{list}}" wx:key="{{index}}">
            <view class="songitem">
                <navigator url="/pages/play/play?songid={{item.songid}}" 
                      class="song-play">
                <image src="/images/play.png" /></navigator>
                <navigator url="/pages/play/play?songid={{item.songid}}" 
                        class="song-detail">
                    <view class="song-title">{{item.songname}}-
                             {{item.singername}}</view>
                    <view class="song-subtitle">{{item.albumname}}</view>
                </navigator>
            </view>
        </block>
    </view>

    <loading hidden="{{!loading}}">
        正在搜索音乐...
    </loading>
</view>

以上代码中,除了图8所示设计界面元素之外,在下方还添加了一个loading组件,用来显示提示信息。

开发页面样式文件

接着根据searrch.wxml中使用的class属性编写样式文件,从上面的代码可看出,其中很多class与list.wxml中定义的相同,因此,可以进行复用。最好的方法是将这两个页面中重复的class定义剪切粘贴到app.wxss文件中,这样,list.wxml和search.wxml这两个页面文件都可以使用这些样式了。

然后,将search.wxml中特有的class进行单独定义,打开search.wxss文件,编写以下样式代码:

.search-area{
    background: #f4f4f4;
    padding: 1rem 0.5rem;
}

.search-area input{
    background: #fff;
    border-radius: 3px;
    height: 2rem;
    line-height: 2rem;
    margin-bottom: 0.5rem;
    padding-left: 0.5rem;
    font-size: 0.8rem;
}

开发页面逻辑代码

接下来开发搜索页面的逻辑代码,打开search.js文件,编写以下代码:

var config=require('../../config.js');  //导入配置文件

Page({
  data:{
    value:'', //搜索关键字
    loading:false, //按键前的loading图标
    list:[], //搜索结果
  },

  //保存输入的关键字  
  inputing:function(e){
    this.setData({
      value:e.detail.value  //更新搜索关键字
    });
  },

  //立即搜索按钮
  bindSearch:function(){
    var self=this;

    this.setData({
      loading:!self.data.loading //更新立即搜索按钮的loading图标
    });

    //开始搜索
    wx.request({
      url:config.config.searchByNameUrl, //搜索接口
      data:{keyword:self.data.value},    //搜索关键字

      success:function(e){        
        if(e.statusCode == 200){ //搜索成功

          self.setData({            
            list:e.data.showapi_res_body.pagebean.contentlist,  //更新搜索结果
            loading:!self.data.loading
          });

   //将歌曲列表保存到本地缓存中
  wx.setStorageSync('songlist',e.data.showapi_res_body.pagebean.contentlist);
        }
      }
    });
  }
})

以上代码首先导入配置文件。

接着初始化数据,在初始化数据部分定义了3个变量,value用来保存用户输入的查询关键字,而loading变量用来控制是否显示查询提示信息,list数组则用来保存查询到的音乐列表。

在搜索按钮的事件处理函数中,使用wx.request函数调用配置文件中定义的接口,并传入关键字进行搜索,如果搜索成功,则将音乐文件列表更新到list数组中,同时还要将音乐文件列表缓存到本地,方便play页面播放时查找。

虽然搜索结果中的音乐列表与list页面中的音乐列表有些字段不相同,但在播放页面中,已经进行了逻辑合并处理,因此,这些差异并不会影响play页面中的播放。
保存搜索页面的文件,最后就可以测试搜索的效果了。

在调试页面中,单击下方tab中的“搜索”进入搜索页面,输入搜索关键字,单击“立即搜索”按钮,下方将显示搜索的结果,如图14所示。

图片描述

图14 搜索结果

在图14所示的列表中,单击某一首音乐,即可进入图13所示的播放界面,可播放收听该音乐。

至此,本案例开发完成。由于篇幅所限,这里就不截图显示测试的各界面了,读者可自行测试效果。

欢迎加入“CSDN微信开发”群,与更多专家、技术同行进行热点、难点技术交流。请扫描以下二维码加群主微信,申请入群,务必注明「姓名+公司+职位」
图片描述

没有更多推荐了,返回首页