无码日韩精品无码国产_一级做a爰片久久毛片潮喷_国产欧美国日产_久久9热re这里只有国产中文精品6_每天将为您更新成人影视在线看免费观看

首頁(yè) 關(guān)于我們 小程序案例 小程序解決方案 小程序資訊 聯(lián)系我們
Menu
小程序資訊
小程序資訊
首頁(yè) > 小程序資訊 > 小程序常見(jiàn)問(wèn)題
微信小程序?qū)嵺`心得：實(shí)現(xiàn)tabs選項(xiàng)卡效果，location API接口，audio組件 ...
時(shí)間：2016-10-18 18:00:00
一：實(shí)現(xiàn)tabs選項(xiàng)卡效果
      最近微信應(yīng)用號(hào)是炒的如火如荼，熱門滿滿，但是也可以發(fā)現(xiàn)搜索關(guān)鍵詞出來(lái)，各類網(wǎng)站出現(xiàn)的還都是微信的官方文檔解釋。正好趕上這個(gè)熱潮，這幾天先把小程序技術(shù)文檔看了個(gè)遍，就直接著手寫案例了。很多組件微信內(nèi)部已經(jīng)封裝完了，正好發(fā)現(xiàn)沒(méi)有tab選項(xiàng)卡效果，這兩天正好研究了下。思路如下：
 

1、首先點(diǎn)擊導(dǎo)航的時(shí)候需要兩個(gè)變量，一個(gè)存儲(chǔ)當(dāng)前點(diǎn)擊樣式類，一個(gè)是其它導(dǎo)航默認(rèn)的樣式類

2、選項(xiàng)卡內(nèi)容列表同樣也需要兩個(gè)變量，一個(gè)存儲(chǔ)當(dāng)前顯示塊，一個(gè)存儲(chǔ)的是其它隱藏的默認(rèn)塊

3、使用三目運(yùn)算通過(guò)點(diǎn)擊獲取導(dǎo)航索引，根據(jù)索引判斷是否添加當(dāng)前類【備注，這里我將點(diǎn)擊事件綁定在父級(jí)導(dǎo)航欄，通過(guò)target對(duì)象得到點(diǎn)擊觸發(fā)的事件對(duì)象屬性】

請(qǐng)結(jié)合如下效果圖：


      接下來(lái)直接查看源碼：

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){  
    //獲取觸發(fā)事件組件的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接口
微信小程序的位置接口共有兩個(gè)：
1、wx.getLocation(OBJECT)獲取當(dāng)前的地理位置、速度。
2、wx.openLocation(OBJECT) 使用微信內(nèi)置地圖查看位置
然后，根據(jù)object參數(shù)說(shuō)明，結(jié)合module模塊化重寫了下兩個(gè)接口在暴露出來(lái)引用，讓項(xiàng)目更加靈活管理。具體代碼如下：

location.js：：
/**  
 * 獲取當(dāng)前的地理位置、速度。  
 * 1、fType：         默認(rèn)為 wgs84 返回 gps 坐標(biāo)，gcj02 返回可用于wx.openLocation的坐標(biāo)     選填  
 * 2、cbSuccessFun： 接口調(diào)用成功的回調(diào)函數(shù)，返回內(nèi)容詳見(jiàn)返回參數(shù)說(shuō)明。 必填  
 * 3、cbFailFun：    接口調(diào)用失敗的回調(diào)函數(shù) 選填  
 * 4、cbCompleteFun：接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會(huì)執(zhí)行） 選填  
 */  
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);  
}  
  
/**  
 * 使用微信內(nèi)置地圖查看位置  
 * 1、latitude：     緯度，范圍為-90~90，負(fù)數(shù)表示南緯 必填  
 * 2、longitude：    經(jīng)度，范圍為-180~180，負(fù)數(shù)表示西經(jīng) 必填  
 * 3、scale：        縮放比例，范圍1~28，默認(rèn)為28 選填  
 * 4、name：         位置名 選填  
 * 5、address：      地址的詳細(xì)說(shuō)明 選填  
 * 6、cbSuccessFun： 接口調(diào)用成功的回調(diào)函數(shù) 選填  
 * 7、cbFailFun：    接口調(diào)用失敗的回調(diào)函數(shù) 選填  
 * 8、cbCompleteFun：接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會(huì)執(zhí)行） 選填  
 */  
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  
  //   });  
  // }  
})  

經(jīng)調(diào)試發(fā)現(xiàn)getLocation接口的type不管是傳遞wgs84還是gcj02返回的參數(shù)都是只有經(jīng)緯度，并沒(méi)有文檔上提到的速度和位置的精確度兩個(gè)參數(shù)


然后我在點(diǎn)擊“去這里”頁(yè)面跳轉(zhuǎn)后，發(fā)現(xiàn)每次都是提示定位失敗，不曉得是不是因?yàn)閣eb開發(fā)工具的原因。而且好像經(jīng)緯度有差距，和本人實(shí)際距離不一致。還有定義了name和address兩個(gè)參數(shù)并沒(méi)有發(fā)現(xiàn)有啥變化，最后比較嚴(yán)重的問(wèn)題是我點(diǎn)擊返回后提示page route錯(cuò)誤，再次點(diǎn)擊按鈕，提示錯(cuò)誤了，不能點(diǎn)擊。不知道什么原因？要怎么解決！

目前針對(duì)這個(gè)接口學(xué)習(xí)到這里，后續(xù)有其他發(fā)現(xiàn)或者解決辦法在來(lái)更新。

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

今天，微信發(fā)布新版本了【最新版本 0.10.101100】，對(duì)于位置接口也有進(jìn)一步的更新，

1、打開地圖接口在返回不會(huì)提示page route錯(cuò)誤了

2、wx.openLocation接口傳遞自定義的name和address參數(shù)后，可以在地圖描述框，顯示出來(lái)了，不過(guò)經(jīng)緯度依然不夠準(zhǔn)確。點(diǎn)擊“去這里”依然是定位失敗。  


三：audio組件發(fā)現(xiàn)的幾個(gè)問(wèn)題

      這個(gè)只測(cè)試了action的method=play的情況下，其它的方法我有稍微改變了下src和action方法，發(fā)現(xiàn)只要一切換其它action方法和src歌曲后，歌曲都是未開播狀態(tài)，所以應(yīng)該不會(huì)出現(xiàn)什么問(wèn)題。主要是play的情況下有幾個(gè)小問(wèn)題需要注意下！先上官方源碼：


wxml：

<!-- 循環(huán)播放 -->  

<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: '此時(shí)此刻',  

    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){  

  

  }  

})  


以上是官方源碼，執(zhí)行都正常，但是我做了如下測(cè)試：

1、action的賦值方式

this.setData({  

      'action.method': 'play'  

    })  


我修改成這種賦值方式也能正常開啟播放，如果我在page的data里面預(yù)先創(chuàng)建action對(duì)象，雖然值有被正常修改過(guò)來(lái)，但是音樂(lè)就是無(wú)法一開啟就播放，需要按f5刷新下頁(yè)面。完整測(cè)試代碼如下：

Page({  

  data: {  

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

    name: '此時(shí)此刻',  

    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，這種賦值方式有效但是播放無(wú)效，需要再次刷新頁(yè)面  

    })  

  })  



2、更改了src曲目后在開啟播放狀態(tài)

this.setData({  

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

       action: {  

         method: 'play'  

       }  

    })  

我修改了src的曲目，發(fā)現(xiàn)不管有沒(méi)有在data里面預(yù)先定義action對(duì)象都是能修改狀態(tài)值，但是音樂(lè)就是無(wú)法播放，需要點(diǎn)擊兩次按鈕，或者f5刷新下頁(yè)面才有效。


最后發(fā)現(xiàn)修改src和action分開設(shè)定就能正常播放了。完整代碼如下：

Page({  

  data: {  

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

    name: '此時(shí)此刻',  

    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'//需要分開設(shè)置  

       }  

     })  

  })  

或者下面這種方式也可以：

[plain] view plain

Page({  

  data: {  

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

    name: '此時(shí)此刻',  

    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沒(méi)有定義action，使用這種賦值方式  

    })  

  })  


總結(jié)以上兩種方案：


1、初始化data不設(shè)定action，可以使用"action.method": "play"修改狀態(tài)


2、修改src曲目的時(shí)候不管有沒(méi)有初始化設(shè)定action，修改action的狀態(tài)都要分開設(shè)定


新手入手教程微信小程序上手開發(fā)和使用總結(jié)
秀杰實(shí)戰(zhàn)教程系列《三》：下拉篩選菜單WXDropDownMenu組件
咨詢
微信掃碼咨詢
電話咨詢
400-888-9358