微信小程序实践心得：实现tabs选项卡效果，locationAPI接口，audio组件...

接下来直接查看源码：demo.wxml：<view class="tab"> <view class="tab-left" bindtap="tabFun"> <view class="{{tabArr.curHdIndex=='0'? 'active' : ''}}" id="tab-hd01" data-id="0">tab-hd01</view> <view class="{{tabArr.curHdIndex=='1'? 'active' : ''}}" id="tab-hd02" data-id="1">tab-hd01</view> <view class="{{tabArr.curHdIndex=='2'? 'active' : ''}}" id="tab-hd03" data-id="2">tab-hd01</view> <view class="{{tabArr.curHdIndex=='3'? 'active' : ''}}" id="tab-hd04" data-id="3">tab-hd01</view> </view> <view class="tab-right"> <view class="right-item {{tabArr.curBdIndex=='0'? 'active' : ''}}">tab-bd01</view> <view class="right-item {{tabArr.curBdIndex=='1'? 'active' : ''}}">tab-bd02</view> <view class="right-item {{tabArr.curBdIndex=='2'? 'active' : ''}}">tab-bd03</view> <view class="right-item {{tabArr.curBdIndex=='3'? 'active' : ''}}">tab-bd04</view> </view> </view> demo.js：Page( { data: { tabArr: { curHdIndex: 0, curBdIndex: 0 }, }, tabFun: function(e){ //获取触发事件组件的dataset属性 var _datasetId=e.target.dataset.id; console.log("----"+_datasetId+"----"); var _obj={}; _obj.curHdIndex=_datasetId; _obj.curBdIndex=_datasetId; this.setData({ tabArr: _obj }); }, onLoad: function( options ) { alert( "------" ); } }); demo.wxss：.tab{ display: flex; flex-direction: row; } .tab-left{ width: 200rpx; line-height: 160%; border-right: solid 1px gray; } .tab-left view{ border-bottom: solid 1px red; } .tab-left .active{ color: #f00; } .tab-right{ line-height: 160%; } .tab-right .right-item{ padding-left: 15rpx; display: none; } .tab-right .right-item.active{ display: block; } 最终演示效果如下：

二：location API接口微信小程序的位置接口共有两个：1、wx.getLocation(OBJECT)获取当前的地理位置、速度。2、wx.openLocation(OBJECT) 使用微信内置地图查看位置然后，根据object参数说明，结合module模块化重写了下两个接口在暴露出来引用，让项目更加灵活管理。具体代码如下：location.js：：/** * 获取当前的地理位置、速度。 * 1、fType： 默认为 wgs84 返回 gps 坐标，gcj02 返回可用于wx.openLocation的坐标选填 * 2、cbSuccessFun： 接口调用成功的回调函数，返回内容详见返回参数说明。 必填 * 3、cbFailFun： 接口调用失败的回调函数 选填 * 4、cbCompleteFun：接口调用结束的回调函数（调用成功、失败都会执行） 选填 */ function getLocationFun(fType, cbSuccessFun, cbFailFun, cbCompleteFun){ var getObj={}; getObj.type="wgs84"; if(fType){ getObj.type=fType; } getObj.success=function(res){ var _res=res; if(cbSuccessFun){ cbSuccessFun(_res); } } getObj.fail=function(res){ if(cbFailFun){ cbFailFun(); }else{ console.log("getLocation fail:"+res.errMsg); } } getObj.complete=function(res){ if(cbCompleteFun){ cbCompleteFun(); } } wx.getLocation(getObj); } /** * 使用微信内置地图查看位置 * 1、latitude：纬度，范围为-90~90，负数表示南纬 必填 * 2、longitude： 经度，范围为-180~180，负数表示西经 必填 * 3、scale： 缩放比例，范围1~28，默认为28 选填 * 4、name： 位置名 选填 * 5、address：地址的详细说明 选填 * 6、cbSuccessFun： 接口调用成功的回调函数 选填 * 7、cbFailFun： 接口调用失败的回调函数 选填 * 8、cbCompleteFun：接口调用结束的回调函数（调用成功、失败都会执行） 选填 */ function openLocationFun(latitude, longitude, scale, name, address, cbSuccessFun, cbFailFun, cbCompleteFun){ var openObj={}; openObj.latitude=latitude; openObj.longitude=longitude; openObj.scale=15; if(scale>0 && scale<29){ openObj.scale=scale; } if(name){ openObj.name=name; } if(address){ openObj.address=address; } openObj.success=function(res){ if(cbSuccessFun){ cbSuccessFun(); } } openObj.fail=function(res){ if(cbFailFun){ cbFailFun(); }else{ console.log("openLocation fail:"+res.errMsg); } } openObj.complete=function(res){ if(cbCompleteFun){ cbCompleteFun(); } } wx.openLocation(openObj); } module.exports={ getLocationFun: getLocationFun, openLocationFun: openLocationFun } demo.js：：var comm = require( "../../common/common.js" ); var location=require('../../common/location.js'); Page( { data: { uploadImgUrls: [], title: "" }, getlocation: function( e ) { location.getLocationFun( 'gcj02', function(cb){ console.log(cb); var _latitude=cb.latitude; var _longitude=cb.longitude; location.openLocationFun( _latitude, _longitude, null, "厦门观音山", "厦门观音山匹克大厦", null, null, null ) } ) }, onLoad: function( options ) { var _title = "ddd"; if( options.title ) { _title = options.title; } this.setData( { title: _title }) console.log("load") console.log( comm.formatDateFun( new Date(), 1 ) ); }, onShow:function(e){ console.log("show"); }, onHide: function(e){ console.log("hide"); }, onUnload:function(e){ console.log("unload"); } // onReady: function(){ // wx.setNavigationBarTitle({ //title: this.data.title // }); // } }) 经调试发现getLocation接口的type不管是传递wgs84还是gcj02返回的参数都是只有经纬度，并没有文档上提到的速度和位置的精确度两个参数

然后我在点击“去这里”页面跳转后，发现每次都是提示定位失败，不晓得是不是因为web开发工具的原因。而且好像经纬度有差距，和本人实际距离不一致。还有定义了name和address两个参数并没有发现有啥变化，最后比较严重的问题是我点击返回后提示page route错误，再次点击按钮，提示错误了，不能点击。不知道什么原因？要怎么解决！

目前针对这个接口学习到这里，后续有其他发现或者解决办法在来更新。=====================================================================================今天，微信发布新版本了【最新版本 0.10.101100】，对于位置接口也有进一步的更新，1、打开地图接口在返回不会提示page route错误了2、wx.openLocation接口传递自定义的name和address参数后，可以在地图描述框，显示出来了，不过经纬度依然不够准确。点击“去这里”依然是定位失败。

三：audio组件发现的几个问题

这个只测试了action的method=play的情况下，其它的方法我有稍微改变了下src和action方法，发现只要一切换其它action方法和src歌曲后，歌曲都是未开播状态，所以应该不会出现什么问题。主要是play的情况下有几个小问题需要注意下！先上官方源码：

wxml：

<!-- 循环播放 -->

<audio poster="{{poster}}" name="{{name}}" author="{{author}}" src="{{src}}" action="{{action}}" controls loop></audio>

<button type="primary" bindtap="audioPlay">播放</button>

js：

Page({

data: {

poster: 'http://y.gtimg.cn/music/photo_new/T002R300x300M000003rsKF44GyaSk.jpg?max_age=2592000',

name: '此时此刻',

author: '许巍',

src: 'http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E384E06DCBDC9AB7C49FD713D632D313AC4858BACB8DDD29067D3C601481D36E62053BF8DFEAF74C0A5CCFADD6471160CAF3E6A&fromtag=46',

},

audioPlay: function () {

this.setData({

action: {

method: 'play'

}

})

},

onLoad: function(options){

}

})

以上是官方源码，执行都正常，但是我做了如下测试：

1、action的赋值方式

this.setData({

'action.method': 'play'

})

我修改成这种赋值方式也能正常开启播放，如果我在page的data里面预先创建action对象，虽然值有被正常修改过来，但是音乐就是无法一开启就播放，需要按f5刷新下页面。完整测试代码如下：

Page({

data: {

poster: 'http://y.gtimg.cn/music/photo_new/T002R300x300M000003rsKF44GyaSk.jpg?max_age=2592000',

name: '此时此刻',

author: '许巍',

src: 'http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E384E06DCBDC9AB7C49FD713D632D313AC4858BACB8DDD29067D3C601481D36E62053BF8DFEAF74C0A5CCFADD6471160CAF3E6A&fromtag=46',

action:

{

method: 'pause'

}

},

audioPlay: function () {

this.setData({

'action.method': 'play'//在data里面先定义action，这种赋值方式有效但是播放无效，需要再次刷新页面

})

})

2、更改了src曲目后在开启播放状态

this.setData({

src: "../audio/files/AlexGoot&KurtSchneider&Eppic-SeeYouAgain.aac",

action: {

method: 'play'

}

})

我修改了src的曲目，发现不管有没有在data里面预先定义action对象都是能修改状态值，但是音乐就是无法播放，需要点击两次按钮，或者f5刷新下页面才有效。

最后发现修改src和action分开设定就能正常播放了。完整代码如下：

Page({

data: {

poster: 'http://y.gtimg.cn/music/photo_new/T002R300x300M000003rsKF44GyaSk.jpg?max_age=2592000',

name: '此时此刻',

author: '许巍',

src: 'http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E384E06DCBDC9AB7C49FD713D632D313AC4858BACB8DDD29067D3C601481D36E62053BF8DFEAF74C0A5CCFADD6471160CAF3E6A&fromtag=46',

action:

{

method: 'pause'

}

},

audioPlay: function () {

this.setData({

src: "../audio/files/AlexGoot&KurtSchneider&Eppic-SeeYouAgain.aac",

})

this.setData({

action: {

method: 'play'//需要分开设置

}

})

})

或者下面这种方式也可以：

[plain] view plain

Page({

data: {

poster: 'http://y.gtimg.cn/music/photo_new/T002R300x300M000003rsKF44GyaSk.jpg?max_age=2592000',

name: '此时此刻',

author: '许巍',

src: 'http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E384E06DCBDC9AB7C49FD713D632D313AC4858BACB8DDD29067D3C601481D36E62053BF8DFEAF74C0A5CCFADD6471160CAF3E6A&fromtag=46',

},

audioPlay: function () {

this.setData({

src: "../audio/files/AlexGoot&KurtSchneider&Eppic-SeeYouAgain.aac",

})

this.setData({

'action.method': 'play'//data没有定义action，使用这种赋值方式

})

})

总结以上两种方案：

1、初始化data不设定action，可以使用"action.method": "play"修改状态

2、修改src曲目的时候不管有没有初始化设定action，修改action的状态都要分开设定