前置条件

1. 账号和技能的配置

1. 【重要】TPL1.0 迁移到 TPL 2.0 需要使用相同账号。
2. 并且 TPL1.0 和 TPL2.0 的 模版标识必须保持一致，发布上线之后链路下发会优先使用 TPL 2.0 的 bundle 文件。

TPL1.0 的模版标识配置

TPL 2.0 的模版标识配置

2. 开发环境的差异

• TPL1.0 只支持在线开发及预览
• TPL2.0 需要在本地环境开发（当前只支持 MAC，建议使用 VSCode），支持本地模拟器预览或者局域网真机调试

  项目工程

  1. TPL1 & TPL2 项目工程对比

  我们先看 TPL1 项目的工程，在 Web IDE 环境中分为以下四个 4 个文件
  

  root
    |- layout.axml        # 页面 dom 结构文件 
    |- style.acss          # 页面 dom 的样式文件
    |- logic.js                # 页面的交互逻辑处理文件
    |- data.json            # 在预览中的 mock 数据

  TPL2 工程和小程序结构一致，相对于 TPL1 的能力也比较丰富，有了 app、page 和 component 的能力，可以比较自由的定制开发业务，我们看看在 Web IDE 中的项目工程结构。
  

  root
    |- src
        |- components                                # 自定义组件
        |- pages                                        # 项目的 page 目录
        |- index                                        # index 页面
        |- index.axml                                # 页面 dom 结构                                        
        |- index.acss                                # 页面 css 文件                                    
        |- index.ts                                    # 页面逻辑文件
        |- index.json                                # 页面配置 usingComponents 配置
    |- app.ts                                            # app.ts 这里是 app 的生命周期逻辑处理
    |- app.json                                     # app.json 文件    app 的 pages 配置 ## 包括默认页面 ##
    |- mock.json                                    # mock 的数据文件
  |- asconfig.json                            # waft 项目工程配置
  |- tsconfig.json                            # as 编译的配置文件

  2. 对应迁移的文件

  对应项目需要迁移的文件

2.1 布局和样式的迁移

1. AXML 代码迁移

AXML 迁移 TPL1 和 TPL2 的 开发语法 90% 都是相同的，只有针对于个别组件需要注意一下，需要查看标签是否支持和属性规范文档，另外个别注意有以下几点：

1. TPL2 中组件的属性不支持类似于 scroll-top=”{{scrollY}}” 这种带有 - 中划线的名称，尽量尝试大小写驼峰写法 scrollTop=”{{scrollY}}”，但是 a:for-item=”item” 这种结构式属性除外。
2. 行间样式属性绑定不支持 key 的绑定例如：

不支持 style=”{{xCard_has_padding}}”
不支持 style=”{{xCard_has_padding:’15rpx’}}”
只支持 style=”border-radius: {{xCard_has_padding? ‘0rpx’:’15rpx’}}”
3. 如果发现在迁移过程有标签不符合预期的，请查阅相关技术规范文档。

2. ACSS 代码迁移

TPL1 和 TPL2 的 css 都是来自于同一个子集，如果发现 css 不符合预期，请查阅相关文档。

2.2 逻辑代码迁移

逻辑代码的迁移，是相对来说改动比较大的地方。因为TPL1 的底层基于cube（类小程序），而TPL2 的技术框架是 Waft。Waft采用webAssembly 作为运行时载体，性能优于 js 引擎，但它存在一定的学习成本。
逻辑代码的迁移，总的来说有以下几个要点：

1. 页面声明的方式有所差别，小程序采用Page()式声明页面，Waft采用class来声明页面
2. 页面的生命周期能一一映射上，但写法上稍微有所差异
3. 数据状态更新的调用，一个是 this.setData，一个是this.setState
4. TPL1采用 my.xxx 系列的API调用，而TPL2采用 module.function（如 navigator.open ）的API进行调用
5. TPL1采用 JavaScript，TPL2采用 AssemblyScript。语法上有一定差异，具体可以参考：《常用AssemblyScript语法差异》

对比 Demo 差异：

TPL1 和 TPL2 相同的 DOM 文件，包含了点击事件tapBubble

<!-- layout.axml == index.axml -->
<view class="template-container">
  <image src="{{ bgImage }}" mode="aspectFill" class="bg"/>
  <text class="title">{{ keyword }}</text>
  <view class="content">
    <view a:for="{{ hintList }}" class="bubble" onTap="tapBubble" data-text="{{ item }}">
      <text class="bubble-text">{{ item }}</text>
    </view>
  </view>
</view>

主要在于逻辑脚本的区别，在 TPL2 中同学们需要关注链路下发的 dataSource 页面的构造函数和生命周期过程，这些都是在 TPL1 中不必关心的。看下图：

最后我们再来讨论快速学习 Waft 脚本的路径：

1. 熟悉 as 语言
2. 框架的使用，了解生命周期参数。
3. 交互事件的使用
4. 数据状态管理
5. 编译发布

参考资料链接：

技术支持

如有问题请在客户合作群进行反馈，我们会尽快进行响应。