百度小程序调研&微信转百度

1、微信与百度小程序的区别

整体框架和微信小程序一致，遵循新建路由页面需要利用创建page模块，不能手动创建，分别有swan（相当于html文件）、js、json（页面配置文件）、css。

html中主要需要更改的部分如下：

循环调用： wx:for s-forindex下标 wx:for-index s-for-indexitem wx:for-item s-for-itemkey wx:key 无if判断 wx:if s-ifelse wx:else s-elseelseif wx:elif s-elif

百度小程序的s-if 与 s-for 不可在同一标签下同时使用

需要特殊注意的地方：

标签中的触发sumbit，微信为：<button formType=”submit”>Submit</button>百度为： <button form-type=”submit”>提交</button>

bindTap 换成 bind:tap

服务端中的wx.request等都转换成swan.request

以上搬家工具基本都支持

2、微信转百度小程序搬家工具

全局安装 npm install -g wx2

// 转化A文件夹的微信小程序为B文件的百度小程序$ wx2 ./A ./B -t

3、API能力

能力举例：获取系统信息、获取网络状态（wifi、4g等）、获取屏幕亮度（不支持修改），打电话、震动、设置剪贴板（需用户交互）、加速度获取、用户截屏事件、用户设备方向、跳转（可跳转百度app内页面）、登录、支付、订阅、分享、广告、等等。

还有AI相关，比如文字识别、文本审核（识别文本是否符合互联网发布规范，违禁词等）、图像识别、语音识别、人脸识别、但web端全不支持（开发者工具无法调试），且不确定兼容性。

举例-支付：https://smartprogram.baidu.com/docs/develop/api/open/payment_swan-requestPolymerPayment/

Html

<view class="wrap">
<view class="card-area">
<button bind:tap="requestPolymerPayment" type="primary" hover-stop-propagation="true">支付0.01元</button>
</view>
</view>

js

流程为：

1.请求下单接口获取支付所需订单号等信息，orderInfo

2.调用百度支付属性requestPolymerPayment 调起收银台，orderInfo参数传过去

3.收银台选择后进行支付，支付完成后跳转之前定义的orderInfo.payResultUrl（为回调地址）

4.成功后通过tpOrderId轮训支付状态

requestPolymerPayment(e) {
        swan.request({// 仅为示例，并非真实的接口地址，开发者从真实接口获取orderInfo的值url: 'https://mbd.baidu.com/xxx',success: res => {let {orderInfo} = res;// Web 态中，支付完成后跳转的页面路径（本例中跳转回当前页面：pages/index/index）// 携带 tpOrderId 参数，方便跳转后从服务端查询订单信息
            orderInfo.payResultUrl = '/pages/index/index?tpOrderId=' + orderInfo.tpOrderId;
            swan.requestPolymerPayment({
            orderInfo: orderInfo,
            success: res => {// 更新支付状态显示。// Web 态中不进入 success 回调，而是跳转回本页面，因此在onload中也要检测支付状态this.updatePayStatus(orderInfo.tpOrderId);},fail: err => {
                    swan.showModal({title: err.errCode,content: err.errMsg
            });
            console.log('pay fail', err);}});},
            fail: err => {
                swan.showToast({title: '支付失败',icon: 'none'});
            }
      });
  },
  updatePayStatus(tpOrderId) {
      if (!tpOrderId) {return;}// 通过开发者服务端接口，检测支付状态
        swan.request({// 仅为示例，并非真实的接口地址
            url: 'https://mbd.baidu.com/xxx/checkPayStatus',
            data: {tpOrderId},
            success: res => {// 仅为示例，具体判断规则由开发者服务端接口返回值决定。if (res.payStatus === 'success') {
             swan.showToast({title: '支付成功',icon: 'success'});
        }}
    });
  }

举例-广告：https://smartprogram.baidu.com/docs/develop/api/ad/swan-createRewardedVideoAd/

激励视频广告，跟微信的广告有所不同的是表现形式，为新开一个页面全屏展开的视频广告，之后通过监听广告对象来获取广告的播放的各种状态，展示（show），关闭（onClose），结束（finally）等，在进行后续操作。

onLoad() {
    let videoAd = null;
    if (swan.createRewardedVideoAd) {
        // 完整示例可参考 RewardedVideoAd：（https://smartprogram.baidu.com/docs/develop/api/ad/swan-createRewardedVideoAd/）// adUnitId 和 appSid 需要在百青藤平台上获取，打开代码片段时注意需要更改为对应的 appid 使用
        videoAd = swan.createRewardedVideoAd({
            adUnitId: '7182333',
            appSid: 'f71feede'
        });
    }
    this.videoAd = videoAd;
}

举例-文字识别：https://smartprogram.baidu.com/docs/develop/api/ai/ocr_swan-ai-ocrIdCard/

主要功能是特定的，包括：身份证、银行卡、驾驶证、行驶证

以识别身份证为例：一些值得注意的属性：id_card_side标识正面（front）or国徽面（back）、detect_risk身份证风险类型，复印件、翻拍的身份证等的验证，默认false，开启则会在返回值中加入对应识别后的结果。

swan.chooseImage({
    success: res => {
        let image = res.tempFilePaths[0];
        swan.ai.ocrIdCard({
            detect_direction: true,
            id_card_side: 'front',// 暂不支持识别网络图片
            image, 
            detect_risk: true,
            success: res => {
                console.log('ocrIdCard res', res.words_result);
            },
            fail: err => {
                console.log('ocrIdCard err', err);
            }
       });
  }})

举例-人脸识别（付费）：https://smartprogram.baidu.com/docs/develop/api/ai/face_swan-ai-faceDetect/

上传人脸照片，返回人脸相关信息，接收base64和url地址

值得注意的参数：face_field（设置需要的返回信息，不加默认只有基本信息，token等）、face_type人脸类型（LIVE：生活照，IDCARD：身份证照片等）

一些能得到的信息

swan.chooseImage({
    success: res => {
        let image = res.tempFilePaths[0];
        swan.ai.faceDetect({
            image,
            image_type: 'BASE64',
            face_field: 'age,beauty,angle,expression,face_shape,gender,glasses,eye_status,race,quality',
            max_face_num: '1',
            face_type: 'LIVE',
            success: res => {
                console.log(res.face_list);},
            fail: err => {
                    console.log( err);
            }
        });
     }
})

4、smartUI

组件库 Smart UI ，是对智能小程序基础组件的能力扩容，即完全适配百度小程序的ui组件库。

文档：https://smartprogram.baidu.com/docs/develop/extended/ui_component/smt-icon/

使用步骤

1. npm install @smt-ui/component

2. json文件中引入

{"usingComponents": {"smt-icon": "@smt-ui/component/src/icon"}}

3. swan中直接使用

<smt-icon name="arrow-left"></smt-icon>

5、组合能力使用

此部分是百度小程序对于很多页面通用功能的整合，比如信息流模板，此模板整合了下拉刷新、滚动加载、左图右文模式等，方便开发者快速建立小程序，目前官方有14种模板

https://smartprogram.baidu.com/docs/develop/example/template/templatelist/

有很多模板依赖了smartUI，使用前先安装smartUI防止报错

使用步骤

1. npm引入

npm i @smt-ui-template/page-feed  // 模板名称

2. 将对应的node_modules下的模板文件拷贝到当前小程序合适的目录下（如 pages）

3. 在json文件中配置path路径（使用后发现要配置成pages/@smt-ui-template-feed/index/index）

"pages": [
    ...
    "pages/@smt-ui-template-status/index"
    ...
]