百度小程序已经推出有一段时间了。 本文分享了我在开发过程中遇到的一些百度小程序和微信小程序的区别。 帮助您快速将微信小程序转换为百度小程序。 文档地址：如果遇到问题，可以到百度小程序社区提问：（需要登录并存在）。 本文分享了百度小程序和微信小程序的一些区别。

百度小程序组件属性差异

虽然百度小程序没有提到这个属性，但我测试发现本地和真机上都支持。 但和微信还是有一点区别：

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

百度小程序输出：248 微信输出：4810 百度：当值为 ，或插值 {{}} 为 时，不会隐藏百度组件。 其他情况下，无论是true还是空，或者其他值，，或者计算出来的值为，都会被隐藏。 微信：当该属性为空或者插值{{}}时，不会隐藏。 有一种特殊情况，直接将其赋值给“”，此时它不被视为布尔值，因此它也被隐藏。 结论：从上面两个我们可以看出，都有4和8，所以我们做的时候，只需要保证对值进行插值微信小程序开发如何获取定位信息，并且插值的结果是一个布尔值，那么两者就可以保持一致的性能。 js 文件命名空间 wx.js 被天鹅取代。

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放在同一个语句中。 我们可以通过加一来判断条件2。 条件判断百度不使用插值计算。 这是来自微信的：

True

这是来自百度的：

True

3、组件中的三元运算符不支持=、<

{{ 2 >= 1 ? 'yes' : 'no' }}

模板 1. 声明需要使用的模板。 data 是需要传递到模板中的值。 当是对象时，对象字面量用三个大括号括起来，微信是{{}}。

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

2.不支持动态调用

1 {{index}}:{{msg}} 2 {{index}}:{{msg}}

当我需要根据tid值调用模板时，例如当tid=1时，我使用以下方法来调用

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

上面无法获取到tid-1的内容。 我们可以通过条件判断来调用模板：

Page函数不要使用()，因为我在上一个页面中用这个函数来获取请求，然后发现百度小程序中的这个函数在. 另外，如果直接点击执行该函数，会报错。 在页面传递参数时，最好加上()，之前在微信小程序中传递url时，参数没有格式化。 直接通过后，百度小程序会发现接收不完整，例如：转换为http://。 swan.() API必须在页面DOM加载后执行才能获取具体值。 如果直接进去或者后面取值的话，是拿不到内容的，但是里面可以取到。 一种方法是添加一个计时器，在 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'); }

你会发现这些样式不起作用。 另外，绑定事件也不起作用，比如上面的测试，点击后就失效了，这和刚才提到的li标签被过滤是同样的原因。 配置确定主页位于app.json中。 我改变了主页的位置，发现不起作用。 相反，在更改第一个标签的地址后，主页也发生了变化。 微信支持无需首页即可进入的页面。 。 wxs改为微信：WXS()是一套小程序的脚本语言。 结合WXML，可以构建页面的结构。

var msg = "hello world"; module.exports.message = msg; {{m1.message}} 页面输出： hello world

百度的：是小程序的过滤器。 结合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.maxin(array)}} 页面输出： 8

无法在自定义组件模板中嵌套模板。 建议使用插槽图像路径来完成协议，如下两种情况。 如果没有完成协议，则无法访问。 默认代码是静态分析。

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

并且注意，.wxml文件是微信中引入的，而.swan文件是百度引入的，所以要替换.swan中引用的item.swan，可以使用item模板：

同样的方法，修改文件后缀

body

百度小程序分享到微信，无法打开虽然百度提供了分享到微信朋友圈、微信好友的功能，但打开微信分享的内容时，会先提示跳转到App，百度小程序页面打不开被打开，分享体验不好嗯，只能分享百度APP本身的动态，而且打开后才能访问。 微信转百度小程序 1.登录百度小程序开发工具，在工具菜单中，有微信小程序一键转换为百度小程序。 （前提条件：已批准并登录开发者工具）

使用官方工具就好了。 和我上面提到的几点相比，小调整应该是差不多的。 2. 在NPM上下载一个工具： 。 ，好像和百度的转换类似。 安装：npm i -g 转换：微信小程序目录（生成swan的目录）./test/demo ./test/。 使用Taro开发2018.11.20更新：执行多次——视图组件会执行多次，需要添加防止界面重复加载，导致数据更新混乱和错误。

<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.视图组件中有3个属性是属性双向绑定

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

2. 组件

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

真实设备的屏幕高度并未被去除。 2019.1.17更新：DOM加载后正确，屏幕高度会被移除，所以应该在生命周期中处理。 由于-view组件需要确定高度，所以在电脑上算出的高度已经是正确的，但是到了真机上，发现高度并没有被减去，导致有些地方被隐藏在下面了。 没办法，我只能用另外的方法，因为我怕到时候它会修复这个错误，一旦我破解了它的高度，到时候我就得重新改了。 我在-view的父类中添加了绝对定位属性。 然后定义它的高度为100%，然后减去-view组件中head的导航高度。

.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;}

这样就不需要计算-view的高度了。 直接兼容css，不用担心百度的bug。 不过微信最好直接计算这个高度，这样这个-view开头的滚动条就不会被隐藏了。 百度小程序分享在中分享百度动态，点击消息进入时无法进入具体页面，只能进入当前页面或首页。 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 }

左边是微信，右边是百度组件的数据属性转换问题：{{item}} => {{{item}}}