用戶
 找回密碼
 立即注冊

QQ登錄

只需一步,快速開始

掃一掃,登錄網站

小程序社區 首頁 教程 實戰教程 查看內容

百度小程序與微信小程序全面對比

Rolan 2019-10-14 00:38

百度小程序已出來一段時間了,本文分享我在開發過程中遇到的一些百度小程序與微信小程序的差別。幫助你快速轉換微信小程序到百度小程序。文檔地址:https://smartprogram.baidu.com/docs/develop/tutorial/codedir/ ...

百度小程序已出來一段時間了,本文分享我在開發過程中遇到的一些百度小程序與微信小程序的差別。幫助你快速轉換微信小程序到百度小程序。文檔地址:https://smartprogram.baidu.com/docs/develop/tutorial/codedir/,有遇到問題的可以去百度小程序社區提問:https://smartprogram.baidu.com/forum/(需要登錄并且有appid)。

本文分享一些百度小程序與微信小程序的差別。

百度小程序組件hidden屬性區別

雖然百度小程序沒提到這個屬性,但我測試發現它在本地上和真機上都是支持的。但跟微信還是有一點區別:

js:

data: {
	flag:'123'
}

xml:
<view hidden="true">1</view>
<view hidden="false">2</view>
<view hidden="!false">3</view>
<view hidden="{{false}}">4</view>
<view hidden="!flag">5</view>
<view hidden="flag">6</view>
<view hidden="{{flag}}">7</view>
<view hidden="{{!flag}}">8</view>
<view hidden="{{!!flag}}">9</view>
<view hidden="">10</view>

百度小程序輸出:
2
4
8

微信輸出:
4
8
10

百度:當hidden的值為flase,或者插值{{false}}為flase時,百度組件不會隱藏。其它情況,不管是true或者是空,或者其它值,不為false,或者計算出來的值不為flase,都會被隱藏。

微信:當這個hidden屬性為空或者插值{{false}}為false,才不會隱藏。有一種特殊情況就是直接賦值它為hidden="false",這里的false不被當做布爾值,所以它也被隱藏。

結論:從上面這兩個之中我們可以看到 4 和 8 兩者都有,那我們做的時候只需要保證 hidden 的值為插值形式,并且插值的結果是布爾值,那兩者就能得到一致的表現。

js文件命名空間wx.替換為swan.

wx.request() -> swan.request()
wx.showModal() -> swan.showModal()
wx.canIuse() -> swan.canIuse()
……

swan文件整體替換wx:到s-

主要有兩個地方:

1.條件判斷

wx:if -> s-if

2.列表循環

wx:for -> s-for
wx:for-item -> s-for-item
wx:key -> s-key

這里還有3點跟微信使用起來有點區別

1.for循環里面,百度是不支持跟if放在同一條語句里面。我們可以通過增加一個block來判斷條件

2.條件判斷百度是沒有使用插值計算。

這是微信的:

<view wx:if="{{condition}}"> True </view>

這是百度的:

<view s-if="condition"> True </view>

3.組件中的3元運算符,不支持 <= 判斷,猜測可能是bug,可能是里面使用了正則判斷。

<view>{{ 1 <= 2 ? 'yes' : 'no' }}</view>

解析出來的內容為:

<view>true<="" view=""></=></view>

解決方法是改成 >=,或者<

<view>{{ 2 >= 1 ? 'yes' : 'no' }}</view>

模板

1.聲明需要使用的模板,data 是所需要傳入到模板的值,當它是對象時,對象字面量是三個大括號包裹,微信是{{}}。

<!-- template-demo.swan-->
<template name="person-card">
    <view>
        <text>位置: {{pos}}</text>
        <text>姓名: {{name}}</text>
    </view>
</template>

<!-- template-demo.swan-->
<template is="person-card" data="{{{person}}}" />

// template-demo.js
Page({
    data: {
        person: {name: 'Lebron James', pos: 'SF', age: 33}
    }
});

2.不支持動態調用

<template name="tid-1">
    <view>1</view>
    <view>{{index}}:{{msg}}</view>
</template>
<template name="tid-2">
    <view>2</view>
    <view>{{index}}:{{msg}}</view>
</template>

當我需要根據tid值來調用某個模板時,例如tid=1時,使用下面的方法調用

<template is="tid-{{tid}}" data="{{{...item}}}"/>

Page({
    data: {
        tid:1
    }
});

上面這種獲取不了template tid-1的內容。我們可以通過條件判斷來調用模板:

<block s-if="{{ tid == 1}}"><template is="template-1" data="{{{...item}}}" /></block>

Page函數不要使用getData()

由于我之前的頁面中獲取請求時用的是這個函數,然后我發現百度小程序里面這個函數在onload中無法執行到。另外就是如果直接點擊執行這個函數,會報錯。

頁面傳遞參數option,最好加上enCodeURIComponent()

我之前的一個微信小程序傳遞url時,參數沒有格式化,直接傳遞后,在百度小程序中會發現接收不完整,例如:http://xsps.pchouse.com.cn/ 轉化為 http:/xsps.pchouse.com.cn。

swan.createSelectorQuery()

這個API要在頁面DOM 加載完畢后執行,才能獲取到具體的值,如果你直接在onload或者request 的success 里面setData后獲取值,同樣獲取不到內容,可以在onReady里面獲取到。

有一種做法就是加一個定時器,在2秒后獲取,或者改為當需要的時候才開始獲取。

不要使用HTML標簽

在百度小程序中,使用了div/ul/li等HTML標簽,調試swan tab時,標簽會被過濾掉。

<div class="list">
	<ul>
		<li bindtap="test">測試</li>
		<li>測試</li>
		<li>測試</li>
	</ul>
</div>

.list ul{font-size:18px;}

test:function(){
	console.log('test');
}

會發現樣式不起作用。另外就是綁定事件也無法起作用,如上面的test,點擊后無效,跟剛才說的li標簽被過濾同樣的道理。

tabBar配置決定了首頁

在app.JSON中,我改了一下pages首頁的位置,發現并不起作用,反而tabBar改了第一個標簽的地址后,首頁也跟著改變,而微信是支持tabBar可以不是首頁進來的頁面。

wxs 改為 filter

微信的:

WXS(WeiXin Script)是小程序的一套腳本語言,結合 WXML,可以構建出頁面的結構。

<!--wxml-->
<wxs module="m1">
var msg = "hello world";

module.exports.message = msg;
</wxs>

<view> {{m1.message}} </view>

頁面輸出:

hello world

百度的:

Filter 是小程序的過濾器,結合 SWAN 模版,可以構建出頁面的結構。

// page.js
Page({
  data: {
    array: [1, 3, 6, 8, 2, 0]
  }
});

// test.filter.js
export default {
    maxin: (arr) => {
        var max = undefined;
        for (var i = 0; i < arr.length; ++i) {
            max = max === undefined ?
            arr[i] :
            (max >= arr[i] ? max : arr[i]);
        }
        return max;
    }
};

<!-- swan模版 -->
<view>{{swan.maxin(array)}}</view>
<filter src="./test.filter.js" module="swan"></filter>

頁面輸出:

8

自定義組件模板里面沒法嵌套模板

建議使用slot

圖片路徑要補全協議

如下面這兩種情況,如果沒有補全協議,會無法訪問,默認代碼為靜態解析

<image src="http://www1.pchouse.com.cn/2018/weixinminipro/loading.png"></image>

//css 
image{background:url(//www1.pchouse.com.cn/2018/weixinminipro/loading.png)}

import 和 include

import 注意微信中引入的是.wxml的文件,百度這里引入的是.swan的文件,所以要替換掉

在 index.swan 中引用了 item.swan,就可以使用item模板:

<import src="item.swan"/>
<template is="item" data="{{{preson}}}"/>

同理 include也是改文件后綴

<!-- index.swan -->
<include src="header.swan"/>
<view> body </view>
<include src="footer.swan"/>

百度小程序分享到微信,無法打開

百度雖然提供了分享到微信朋友圈和微信好友的功能,但打開微信分享的內容會先提示跳到App Store上,并無法打開百度小程序的頁面,分享體驗不好,只能分享到百度APP自身的動態,打開后才能訪問。

微信轉換為百度小程序

1.登錄百度小程序開發工具,在工具菜單,有一個一鍵轉換微信的小程序為百度小程序。(前提:有審核通過的appid,并且登錄開發者工具)

用了官方的工具還是挺好的,對照我上面提到的點,小小的調整應該就差不多了。

2.下載NPM上的一個工具:wx2swan。https://github.com/yican008/wx2swan,跟百度這個轉換好像差不多。

安裝: npm i -g wx2swan

轉換:

wx2swan 微信小程序的目錄 (生成swan的目錄)

wx2swan ./test/demo ./test/swanDemo

3.使用 Taro 開發

2018.11.20日更新:

bindscrolltolower 執行多次

scroll-view 組件的bindscrolltolower 會執行多次,需要加上防抖處理,預防接口重復加載,導致數據更新混亂,出現錯誤。

<scroll-view bindscrolltolower="loadMoreList"></scroll-view>

Page({
	timer:null,
	loadMoreList:function(){
		var self = this;
		if(this.timer){
			clearTimeout(this.timer);
		}
		this.timer = setTimeout(function(){
			console.log('your data');
			self.timer = null;
		},300);
	}
})

雙向綁定

1.scroll-view組件

里面有三個屬性是屬性雙向綁定

<scroll-view scrollTop="{= scrollTop =}" scrollLeft="{= scrollLeft =}" scroll-into-view="{= scrollIntoView =}"></scroll-view>

2.input組件

<input value="{= value =}"/>

真機的屏幕高度沒有去掉tabBar高度

2019.1.17號更新:在DOM加載完畢是正確的,屏幕高度會去掉tabBar,所以應該在onReady生命周期里面處理。

由于scroll-view組件需要確定高度,在電腦上計算出來的高度是已經對的,但到了真機上,發現高度并沒有減掉tabBar的高度,導致有些地方被隱藏在tabBar下面。沒辦法,我只能用了另外一種辦法,因為我怕到時候它修復了這個錯誤,我一hack它這個高度,那時候我又得改了。

我給scroll-view的父類加了一個絕對定位屬性。然后定義它的高度為100%,接著在scroll-view的組件里面減去頭部的導航高度。

<view class="fix-menu"></view>
<view class="tab-content">
<scroll-view class="content">
<view class="list">
</view>
</scroll-view>
</view>

.fix-menu{height:100rpx; position:fixed; top:0; left:0; width:100%;}
.tab-content{position:absolute; left:0; top:0; height:100%; width:100%;}
.content{height:100%;}
.content .list{padding-top:100rpx;}

這樣子就不需要去計算scroll-view的高度了。直接用css兼容,也不用管百度這個bug了。不過微信的還是直接計算這個高度比較好,這樣子這個scroll-view剛開始時的滾動條就不會被隱藏掉100rpx。

百度小程序分享

安卓中分享到百度動態,點擊消息進入時,無法進入具體頁面,只能進入當前頁或者首頁。

2019.1.24更新

API

微信小程序有的API,而百度小程序沒有的一個表,不對下面這些微信小程序API進行轉換

wx: {
        startRecord,
        stopRecord,
        playVoice,
        pauseVoice,
        stopVoice,
        getBackgroundAudioPlayerState,
        playBackgroundAudio,
        pauseBackgroundAudio,
        seekBackgroundAudio,
        stopBackgroundAudio,
        onBackgroundAudioPlay,
        onBackgroundAudioPause,
        onBackgroundAudioStop,
        openBluetoothAdapter,
        closeBluetoothAdapter,
        getBluetoothAdapterState,
        onBluetoothAdapterStateChange,
        startBluetoothDevicesDiscovery,
        stopBluetoothDevicesDiscovery,
        getBluetoothDevices,
        getConnectedBluetoothDevices,
        onBluetoothDeviceFound,
        createBLEConnection,
        closeBLEConnection,
        getBLEDeviceServices,
        getBLEDeviceCharacteristics,
        readBLECharacteristicValue,
        writeBLECharacteristicValue,
        notifyBLECharacteristicValueChange,
        onBLEConnectionStateChange,
        startBeaconDiscovery,
        stopBeaconDiscovery,
        getBeacons,
        onBeaconUpdate,
        onBeaconServiceChange,
        getHCEState,
        startHCE,
        stopHCE,
        onHCEMessage,
        sendHCEMessage,
        startWifi,
        stopWifi,
        connectWifi,
        getWifiList,
        onGetWifiList,
        setWifiList,
        onWifiConnected,
        getConnectedWifi,
        setTopBarText,
        showShareMenu,
        hideShareMenu,
        updateShareMenu,
        getShareInfo,
        addCard,
        openCard,
        getWeRunData,
        checkIsSupportSoterAuthentication,
        startSoterAuthentication,
        checkIsSoterEnrolledInDevice,
        faceVerifyForPay,

    }

微信小程序被廢棄的接口,建議用后面的接口替換

createContext:被廢棄的函數,建議使用createCanvasContext替代
drawCanvas:被廢棄的函數,建議使用createCanvasContext替代
createAudioContext:建議用createInnerAudioContext

兩者有些不同的,前面是微信,百度的用后面的替換

navigateToMiniProgram--->navigateToSmartProgram

微信二級API,目前百度不支持的

createLivePusherContext

自定義組件

// Component構造器中不支持的屬性
    Component: {
        moved: null,
        relations: null
    },
    Behavior: {
        // Behavior 中不支持自定義組件的擴展
        // definitionFilter: null
    },
    // 自定義組件中this上不支持的屬性和方法
    this: {
        getRelationNodes: null,
        selectComponent: {
            // 方法不允許被調用的作用域
            notAllowParents: ['onLaunch', 'onShow', 'onLoad']
        },
        selectAllComponents: {
            // 方法不允許被調用的作用域
            notAllowParents: ['onLaunch', 'onShow', 'onLoad']
        }
    },
    // 設置內置behaviors映射關系
    behaviors: {
        'wx://form-field': {
            mapping: 'swan://form-field'
        },
        'wx://component-export': {
            mapping: 'swan://component-export'
        }
    },
    json: {
        // 不支持抽象節點
        componentGenerics: null
    }

左邊是微信,右邊是百度

template組件data屬性轉換問題: {{item}} => {{{item}}}

<template is="person-card" data="{{person}}" />

wx:for不同,百度可以濃縮到一個屬性里面。

s-for="item,p in obj"---> wx:for="{{obj}}" wx:for-item="item" wx:for-index="p"

轉換wx.__route__成員表達式調用為wx.route

參考鏈接

  1. 搬家工具轉換支持的Feature List
  2. 百度小程序開發問題匯總
鮮花
鮮花
雞蛋
雞蛋
分享至 : QQ空間
收藏
原作者: 4965View 來自: caibaojian
不朽的浪漫援彩金
哈哈贵阳捉鸡麻将下 黑龙江p62中i奖号码 手机捕鱼棋牌下载 5分快3必中方法 北京快乐赛车pk拾 老11选5*? 新欢乐麻将怎么卖金币 模拟炒股app哪个 正规网上赚钱不投资 遇乐升级中国游戏大厅 极速快三开奖结果全国统一吗 黑龙江十一选五 pk10论坛 最近股票大盘 东北填大坑玩法 熊猫四川麻将*