百度小程序与微信小程序全面对比

百度小程序已出来一段时间了，本文分享我在开发过程中遇到的一些百度小程序与微信小程序的差别。帮助你快速转换微信小程序到百度小程序。文档地址：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="//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. 百度小程序开发问题汇总

这篇文章后续有更新，欢迎收藏原文，编辑于2018.11.15

更新于2019.1.17：1.高度不正确问题是由于DOM没加载完毕，此时无法获取到实际高度，所以处理关于高度和查询节点的位置都应该在onReady生命周期里面。

2019.1.24更新，增加API对比

关注我

我的微信公众号：前端开发博客，在后台回复以下关键字可以获取资源。

• 回复「小抄」，领取Vue、JavaScript 和 WebComponent 小抄 PDF
• 回复「Vue脑图」获取 Vue 相关脑图
• 回复「思维图」获取 JavaScript 相关思维图
• 回复「简历」获取简历制作建议
• 回复「简历模板」获取精选的简历模板
• 回复「加群」进入500人前端精英群
• 回复「电子书」下载我整理的大量前端资源，含面试、Vue实战项目、CSS和JavaScript电子书等。
• 回复「知识点」下载高清JavaScript知识点图谱

每日分享有用的前端开发知识，加我微信:caibaojian89 交流