一：實現tabs選項卡效果 最近微信應用號是炒的如火如荼，熱門滿滿，但是也可以發現搜索關鍵詞出來，各類網站出現的還都是微信的官方文檔解釋。正好趕上這個熱潮，這幾天先把小程序技術文檔看了個遍，就直接著手寫案例了。很多組件微信內部已經封裝完了，正好發現沒有tab選項卡效果，這兩天正好研究了下。思路如下：
1、首先點擊導航的時候需要兩個變量，一個存儲當前點擊樣式類，一個是其它導航默認的樣式類
2、選項卡內容列表同樣也需要兩個變量，一個存儲當前顯示塊，一個存儲的是其它隱藏的默認塊
3、使用三目運算通過點擊獲取導航索引，根據索引判斷是否添加當前類【備注，這裏我將點擊事件綁定在父級導航欄，通過target對象得到點擊觸發的事件對象屬性】
請結合如下效果圖：
接下來直接查看源碼：
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組件發現的幾個(ge) 問題
這個(ge) 隻測試了action的method=play的情況下，其它的方法我有稍微改變了下src和action方法，發現隻要一切換其它action方法和src歌曲後，歌曲都是未開播狀態，所以應該不會(hui) 出現什麽(me) 問題。主要是play的情況下有幾個(ge) 小問題需要注意下！先上官方源碼：
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: 'https://y.gtimg.cn/music/photo_new/T002R300x300M000003rsKF44GyaSk.jpg?max_age=2592000',
name: '此時此刻',
author: '許巍',
src: 'https://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對象，雖然值有被正常修改過來，但是音樂(le) 就是無法一開啟就播放，需要按f5刷新下頁麵。完整測試代碼如下：
Page({
data: {
poster: 'https://y.gtimg.cn/music/photo_new/T002R300x300M000003rsKF44GyaSk.jpg?max_age=2592000',
name: '此時此刻',
author: '許巍',
src: 'https://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'https://在data裏麵先定義(yi) action，這種賦值方式有效但是播放無效，需要再次刷新頁麵
})
})
2、更改了src曲目後在開啟播放狀態
this.setData({
src: "../audio/files/AlexGoot&KurtSchneider&Eppic-SeeYouAgain.aac",
action: {
method: 'play'
}
})
我修改了src的曲目，發現不管有沒有在data裏麵預先定義(yi) action對象都是能修改狀態值，但是音樂(le) 就是無法播放，需要點擊兩(liang) 次按鈕，或者f5刷新下頁麵才有效。
最後發現修改src和action分開設定就能正常播放了。完整代碼如下：
Page({
data: {
poster: 'https://y.gtimg.cn/music/photo_new/T002R300x300M000003rsKF44GyaSk.jpg?max_age=2592000',
name: '此時此刻',
author: '許巍',
src: 'https://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'https://需要分開設置
}
})
})
或者下麵這種方式也可以：
[plain] view plain
Page({
data: {
poster: 'https://y.gtimg.cn/music/photo_new/T002R300x300M000003rsKF44GyaSk.jpg?max_age=2592000',
name: '此時此刻',
author: '許巍',
src: 'https://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'https://data沒有定義(yi) action，使用這種賦值方式
})
})
總結以上兩(liang) 種方案：
1、初始化data不設定action，可以使用"action.method": "play"修改狀態
2、修改src曲目的時候不管有沒有初始化設定action，修改action的狀態都要分開設定
服務項目
網站首頁
TEL：021-61554458
立即谘詢