Baidu Mini Program Research & WeChat to Baidu

1. The difference between WeChat and Baidu mini programs

The overall framework is consistent with the WeChat applet. To create a new routing page, you need to use the create page module, which cannot be created manually. They include swan (equivalent to an HTML file), js, json (page configuration file), and css.

The main parts that need to be changed in html are as follows:

Loop call: wx:for s-forindex subscript wx:for-index s-for-indexitem wx:for-item s-for-itemkey wx:key no if judgment wx:if s-ifelse wx:else s-elseelseif wx :elif s-elif

Baidu Mini Program's s-if and s-for cannot be used at the same time under the same tag.

Areas that require special attention:

The trigger sumbit in the tag, WeChat is: <button formType=”submit”>Submit</button> Baidu is: <button form-type=”submit”>Submit</button>

Replace bindTap with bind:tap

wx.request, etc. in the server are converted into swan.request

Basically all the above moving tools are supported

2. WeChat to Baidu applet moving tool

Global installation npm install -g wx2

// Convert the WeChat applet of folder A into the Baidu applet of file B $ wx2 ./A ./B -t

3. API capabilities

Examples of capabilities:Get system information, get network status (wifi, 4g, etc.), get screen brightness (modification not supported), make phone calls, vibrate, set clipboard (required User interaction), acceleration acquisition, user screenshot event, user device direction, jump (can jump to the page in Baidu app), login, payment, subscription , sharing, advertising, etc.

There are also AI related, such astext recognition, text review (identifying whether the text complies with Internet publishing specifications, prohibited words, etc.), image recognition , speech recognition, and face recognition, but they are not supported on the web side (the developer tools cannot be debugged), and the compatibility is not sure.

举例-支付：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

The process is:

1. Request the order interface to obtain the order number and other information required for payment, orderInfo

2. Call Baidu payment attributesrequestPolymerPayment Call up the cashier and pass the orderInfo parameter

3. Make payment after selecting the cashier. After the payment is completed, jump to the previously defined orderInfo.payResultUrl (which is the callback address)

4. After success, rotate the payment status through 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/

Incentive video ads are different from WeChat ads in the form of presentation, which is a video ad that opens a new page and expands to full screen. Then, by monitoring the advertising object, we can obtain the various statuses of the advertising playback, such as display (show), close (onClose), end (finally), etc., and then perform subsequent operations.

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

Example - text recognition:https://smartprogram.baidu.com/docs/develop/api/ai/ocr_swan-ai- ocrIdCard/

The main functions are specific, including:ID card, bank card, driver's license, driving license

Take the identification of ID cards as an example: some noteworthy attributes: id_card_side logo front (front) or national emblem side (back), detect_risk ID card risk type, verification of copies, duplicated ID cards, etc. The default is false. If it is turned on, it will The corresponding recognition result is added to the return value.

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

Example - Face recognition (paid):https://smartprogram.baidu.com/docs/develop/api/ai/face_swan-ai-faceDetect/

Upload face photos, return face related information, receive base64 and url address

Noteworthy parameters: face_field (set the required return information, without default only basic information, token, etc.), face_type face type (LIVE: life photos, IDCARD: ID card photos, etc.)

some information available

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

Component library Smart UI is a capacity expansion of the basic components of smart mini programs, that is, a UI component library that is fully adapted to Baidu mini programs.

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

Steps for usage

1. npm install @smt-ui/component

2. Imported in json file

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

3. Used directly in swan

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

5. Use of combined abilities

This part is the integration of Baidu mini programs for many common page functions, such as information flow templates. This template integrates pull-down refresh, scrolling loading, left image and right text mode, etc. to facilitate developers to quickly create mini programs. Currently, there are 14 official templates

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

There are many templates that rely on smartUI. Install smartUI before using it to prevent errors.

Steps for usage

1. npm introduction

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

2. Copy the template file under the corresponding node_modules to the appropriate directory of the current applet (such as pages)

3. Configure the path in the json file (after using it, I found that it needs to be configured as pages/@smt-ui-template-feed/index/index)

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