百度智能小程序 登錄中間頁(yè)模板

page-login 登錄中間頁(yè)模板

解釋?zhuān)寒?dāng)需要獲取用戶(hù)的登錄信息時(shí)提醒用戶(hù)授權(quán)給當(dāng)前小程序。提供了默認(rèn)樣式、品牌圖片、沉浸式圖片及功能前置四種模板供選擇。

示例 

在開(kāi)發(fā)者工具中打開(kāi)

使用方式

方式一 【 NPM 】

1. 在小程序根目錄執(zhí)行下方命令，下載頁(yè)面模板的 npm 包：

   npm i @smt-ui-template/page-login
   

2. 將 /node_modules/@smt-ui-template/page-login 下的 @smt-ui-template-login 文件夾拷貝到當(dāng)前小程序合適的目錄下（如 pages ）：

   .
   ├── project.swan.json                   
   ├── app.json                            
   ├── app.js                              
   ├── pages
       └── @smt-ui-template-login    // 模板文件
   

3. 在小程序根目錄的 app.json 中配置模板頁(yè)面的 path 路徑，查看效果，如：

   {
       "pages": [
           ...
           "pages/@smt-ui-template-login/preview/preview",
           "pages/@smt-ui-template-login/index/index",
           "pages/@smt-ui-template-login/brand-logo/brand-logo",
           "pages/@smt-ui-template-login/immersive-pic/immersive-pic",
           "pages/@smt-ui-template-login/feature-forward/feature-forward"
           ...
       ]
   }
   

4. 為了方便在開(kāi)發(fā)者工具中查看模板頁(yè)的效果，可以設(shè)置模板頁(yè)為小程序預(yù)覽的首頁(yè)。該功能的說(shuō)明請(qǐng)參考自定義編譯文檔。
   

方式二 【 開(kāi)發(fā)者工具-頁(yè)面模板 】

1. 打開(kāi)開(kāi)發(fā)者工具，點(diǎn)擊“頁(yè)面模板”，在下方找到“登錄中間頁(yè)模板”，選中該模板后點(diǎn)擊右下角“立即使用”，填寫(xiě)相關(guān)信息點(diǎn)擊右下角“完成”按鈕。
2. 使用開(kāi)發(fā)者工具的編輯器或者選擇自己熟悉的編輯器對(duì)模板進(jìn)行二次開(kāi)發(fā)。

代碼示例

<view class="login-container">
    <view class="brand-atmosphere">
        <image class="app-logo" mode="widthFix" src="{{logoUrl}}"></image>
        <view class="app-title">{{title}}</view>
    </view>
    <view class="functional-part">
        <block s-for="item in descriptions">
            <view class="app-description">{{item}}</view>
        </block>
    </view>
    <view class="action-area">
        <access-btn color="#3388FF" no-border ></access-btn>
    </view>
</view>

Page({
    data: {
        logoUrl: '/images/AI分診.png', // logo地址
        title: 'AI分診助手', // 小程序名
        descriptions: ['歡迎使用北京大學(xué)國(guó)際醫(yī)院智能分診助手，我們將為您提供', '精準(zhǔn)的就診服務(wù)！'] // 推廣信息
    } 

}) ;
3. 可在 js 中配置 logo 地址、小程序名稱(chēng)、推廣信息等 同時(shí)我們提供了默認(rèn)樣式、品牌圖片、沉浸式圖片及功能前置等四種登錄中間頁(yè)模板供選擇。詳情請(qǐng)見(jiàn)如何使用小程序登錄能力-登錄中間頁(yè)，在模板中獲取用戶(hù)信息之后會(huì)彈出提示，但在實(shí)際場(chǎng)景中你可能需要跳轉(zhuǎn)到另一個(gè)頁(yè)面或返回之前的頁(yè)面，請(qǐng)注意修改。

Bug & Tip

• Tip：頁(yè)面模板功能從開(kāi)發(fā)者工具 v2.25.1-rc 版本開(kāi)始支持。