ThinkPHP Mobile (TPM) 開發指南：將 ThinkPHP 模板打包為 Hybrid App

ThinkPHP Mobile (TPM) 讓開發者一次開發、三端運行：PC 站、手機 Web、原生 Hybrid App。基於 ThinkPHP 模板引擎，打包為可安裝的 App，支援調用原生能力（相機、通訊錄等）。

核心架構認知

三類 App 對比

TPM 運行原理

• 開發模式：Action 賦值 → 模板渲染
• App 模式：自動請求 Action → 返回 JSON → 客戶端渲染模板
• 無需寫接口、無需寫 AJAX，框架自動切換響應格式

環境搭建

1. 獲取 TPM 擴展

# GitHub
https://github.com/liu21st/extend/tree/master/Extend/Tool/TPM

2. 文件部署

Tpl/ 目錄下文件          → 項目 Tpl/
SwitchMobileTplBehavior.class.php → Lib/Behavior/
TemplateMobile.class.php  → ThinkPHP/Extend/Driver/Template/

3. 配置啟用

// 配置文件
'LAYOUT_ON' => true

// Conf/tags.php
return ['action_begin' => ['SwitchMobileTpl']];

4. 修改 redirect 函數（支援 App 跳轉）

// ThinkPHP/Common/functions.php
function redirect($url, $time=0, $msg='') {
    // ... 原有代碼 ...
    if (0 === $time) {
        if (defined('IS_CLIENT') && IS_CLIENT) {
            if ('' !== __APP__) $url = substr($url, strlen(__APP__));
            header('redirect: ' . $url); // App 專用 header
        } else {
            header('Location: ' . $url);
        }
    }
    // ...
}

5. 配置入口文件

// Tpl/index.html
TPM.run("https://your-project-url");

打包發布

cd /path/to/Tpl
php build.php [platform] [name] [package] [version]

# 參數說明
platform: android/ios (預設 android)
name: 應用名稱 (預設 TPM)
package: 包名如 com.think.yourname (預設 cn.thinkphp.tpm)
version: 版本號 (預設 1.0)

# 示例
php build.php android MyApp com.mycompany.myapp 1.0.0

需啟用 zip、curl 擴展，需聯網。離線可用 PhoneGap 打包。

模板開發規範

必需結構

正在加載中...

支援的模板標簽

volist, foreach, for, empty, notempty, present, notpresent,
eq, neq, heq, nheq, egt, gt, elt, lt, if, elseif, else,
switch, case, default, in, notin, between, notbetween, include

限制與差異

• 不可使用 PHP 函數（含 U 函數）
• include 必須寫全控制器：<include file="Action:method" />
• 不支援：defined、define
• 不支援模板替換變量：__URL__、__PUBLIC__ 等
• 鏈接寫絕對路徑：/Action/method

獨立 App 模板目錄

'TPM_THEME' => 'mobile'
// Tpl/mobile/ 目錄下放置 App 專用模板
// 瀏覽器訪問用 Tpl/Index/index.html
// App 訪問用 Tpl/mobile/Index/index.html

配置參數詳解

TPM.run({
    api_base: 'https://www.xxx.com/index.php', // 入口地址
    api_index: '/Index/login'                 // 首頁接口（預設 /Index/index）
});

// 隱藏入口文件時
TPM.run({
    api_base: 'https://www.xxx.com', // 末尾無斜槓
    api_index: '/Index/login'
});

// 簡寫
TPM.run('https://www.xxx.com');

元素事件監聽：TPM.ready

// 錯誤：$(document).ready 監聽不到動態生成元素
$(document).ready(function(){ $('#id').click(...) });

// 正確：TPM.ready 在每次模板渲染後觸發
TPM.ready(function($){
    $('#id').click(function(){ alert('click'); });
});

進階特性預告

• 支援自有後端接口整合
• 原生插件：相機、掃碼、推送、地理位置
• iOS 打包支援
• 熱更新機制