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

一：同时实现tabs选项卡效果

最近微信应用领域号就是炒作的如火如荼，热门满满的，但是也可以辨认出搜寻关键词出，各类网站发生的还都就是微信的官方文档表述。刚好赶上这个热潮，这几天先把小程序技术文档看看了个遍，就轻易著手写下案例了。很多组件微信内部已经PCB完了，刚好辨认出没tab选项卡效果，这两天刚好研究了有。思路如下：

1、首先页面导航系统的时候须要两个变量，一个存储当前页面样式类，一个就是其它导航系统预设的样式类

2、选项卡内容列表同样也须要两个变量，一个存储当前表明块，一个存储的就是其它暗藏的预设块

3、采用三目运算通过页面以获取导航系统索引，根据索引推论与否嵌入当前类【附注，这里我将页面事件存取在父级导航系统栏，通过target对象获得页面引爆的事件对象属性】

恳请融合如下效果图：

接下来轻易查阅源码：

demo.wxml：

tab-hd01

tab-hd01

tab-hd01

tab-hd01

tab-bd01

tab-bd02

tab-bd03

tab-bd04

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 APIUSB

微信小程序的边线USB共计两个：

1、wx.getLocation(OBJECT)以获取当前的地理位置、速度。

2、wx.openLocation(OBJECT) 采用微信内置地图查阅边线

然后，根据object参数表明，融合module模块化改写了有两个USB在曝露出提及，使项目更加有效率管理。具体内容代码如下：

location.js：：

/**

* 以获取当前的地理位置、速度。

* 1、fType： 预设为 wgs84 回到 gps 座标，gcj02 回到可以用作wx.openLocation的座标 学测

* 2、cbSuccessFun： USB调用顺利的反弹函数，回到内容参见回到参数表明。 m6

* 3、cbFailFun： USB调用失利的反弹函数 学测

* 4、cbCompleteFun：USB调用完结的反弹函数（调用顺利、失利都会继续执行） 学测

*/

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，负数则表示南纬 m6

* 2、longitude： 经度，范围为-180~180，负数则表示西经 m6

* 3、scale： 翻转比例，范围1~28，预设为28 学测

* 4、name： 边线名 学测

* 5、address： 地址的详尽表明 学测

* 6、cbSuccessFun： USB调用顺利的反弹函数 学测

* 7、cbFailFun： USB调用失利的反弹函数 学测

* 8、cbCompleteFun：USB调用完结的反弹函数（调用顺利、失利都会继续执行） 学测

*/

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

// });

// }

})

经调试辨认出getLocationUSB的type不管就是传达wgs84还是gcj02回到的参数都就是只有经纬度，并没文档上提及的速度和边线的精确度两个参数

然后我在页面“回去这里”页面重定向后，辨认出每次都就是提示信息定位失利，不知道是不是因为web开发工具的原因。而且似的经纬度存有差距，和本人实际距离不一致。除了定义了name和address两个参数并没辨认出求求变化，最后比较严重的问题就是我页面回到后提示信息page route错误，再次页面按钮，提示信息错误了，无法页面。不晓得什么原因？必须怎么化解！

目前针对这个USB自学至这里，时程存有其他辨认出或者解决办法在去更新。

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

今天，微信公布新版本了【最新版本 0.10.101100】，对于边线USB也存有进一步的更新，

1、关上地图USB在回到不能提示信息page route错误了

2、wx.openLocationUSB传达自定义的name和address参数后，可以在地图叙述侧边，表明出了，不过经纬度依然比较精确。页面“回去这里”依然就是定位失利。

三：audio组件辨认出的几个问题

这个只测试了action的method=play的情况下，其它的方法我存有稍微发生改变了有src和action方法，辨认出只要一切换其它action方法和src歌曲后，歌曲都就是未首播状态，所以必须不能发生什么问题。主要就是play的情况下存有几个大问题须要特别注意下！先上官方源码：

wxml：

播出

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的状态都必须分离预设