应用程序开发公司
软件开发

针对您的项目需求及预算规划量身制定方案

个体/中小企业/集团/政府机构/行业组织 了解详情 了解详情

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

发布时间:2024-01-01 00:00 浏览次数:28

一:同时实现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的状态都必须分离预设

TAG标签:
阅读推荐