MorJS 教程
MorJS 教程
  1. MorJS 指南
    1. MorJS 介绍
      1. MorJS 是什么
      2. MorJS 优势与核心能力
      3. MorJS 的由来
      4. MorJS 什么时候不用
      5. MorJS 项目使用情况
      6. MorJS 如何工作?
        1. MorJS 架构概览
        2. MorJS 静态编译原理
        3. MorJS 运行时补偿原理
        4. MorJS 功能定制
          1. MorJS 工程能力定制
          2. MorJS 运行时能力定制
    2. MorJS 教程
      1. MorJS 快速上手
        1. MorJS 环境准备
        2. MorJS 创建项目
        3. MorJS 初始化项目
        4. MorJS 编译运行
      2. MorJS 开发一个 To-Do List
        1. MorJS 微信 DSL
          1. MorJS 成果展示
          2. MorJS 环境准备
          3. MorJS 配置小程序
          4. MorJS 实作页面组件
            1. MorJS 添加页面
            2. MorJS 添加组件
        2. MorJS 支付宝 DSL
          1. MorJS 成果展示
          2. MorJS 环境准备
          3. MorJS 配置小程序
          4. MorJS 实作页面组件
            1. MorJS 添加页面
            2. MorJS 添加组件
          5. MorJS 多端部署
      3. MorJS 原生小程序接入
        1. MorJS 环境准备
        2. MorJS 增加必要的依赖
        3. MorJS 调整目录结构
        4. MorJS 增加配置
        5. MorJS 配置脚本
        6. MorJS 开发和验证
    3. MorJS 基础用法
      1. MorJS 目录结构
        1. MorJS 根目录
          1. MorJS package.json
          2. MorJS .env
          3. MorJS mor.config.ts
          4. MorJS .mor 目录
          5. MorJS dist 目录
          6. MorJS mock 目录
          7. MorJS src 目录
      2. MorJS 配置
        1. MorJS 配置说明
          1. MorJS 配置文件
          2. MorJS 多配置支持
        2. MorJS 编译相关配置
          1. MorJS alias - 别名配置
          2. MorJS analyzer - 包大小分析
          3. MorJS autoClean - 自动清理
          4. MorJS autoInjectRuntime - 运行时自动注入
          5. MorJS cache - 缓存开关
          6. MorJS compileMode - 编译模式
          7. MorJS compilerOptions - 编译配置
          8. MorJS compileType - 编译类型
          9. MorJS conditionalCompile - 条件编译
          10. MorJS copy - 文件拷贝
          11. MorJS cssMinimizer - CSS 压缩器
          12. MorJS cssMinimizerOptions - CSS 压缩选项
          13. MorJS customEntries - 自定义入口文件配置
          14. MorJS define - 变量替换
          15. MorJS devtool - SourceMap 配置
          16. MorJS experiments - 实验特性
          17. MorJS externals - 外部依赖
          18. MorJS generateAppJSONScript - 生成 app.json 脚本文件
          19. MorJS globalNameSuffix - 全局文件名称后缀
          20. MorJS globalObject - 全局对象
          21. MorJS ignore - 忽略配置
          22. MorJS jsMinimizer - JS 压缩器
          23. MorJS jsMinimizerOptions - JS 压缩选项
          24. MorJS minimize - 压缩开关
          25. MorJS mock - Mock 配置
          26. MorJS mockAppEntry - 模拟 app 入口
          27. MorJS mode - 模式
          28. MorJS outputPath - 输出产物目录
          29. MorJS phantomDependency - 幽灵依赖检测
          30. MorJS plugins - 插件配置
          31. MorJS processNodeModules - 是否处理 node_modules
          32. MorJS processPlaceholderComponents - 是否处理占位组件
          33. MorJS sourceType - 源码类型
          34. MorJS srcPath - 源码目录
          35. MorJS srcPaths - 多源码目录
          36. MorJS target - 编译目标平台
          37. MorJS watch - 是否开启监听
          38. MorJS watchNodeModules - 监听特定 node_modules
          39. MorJS web - Web 编译配置
          40. MorJS webpackChain - 配置 Webpack
          41. MorJS xmlMinimizer - XML 压缩器
          42. MorJS xmlMinimizerOptions - XML 压缩选项
        3. MorJS 集成相关配置
          1. MorJS compose - 是否开启集成
          2. MorJS consumes - 需要消费的共享依赖
          3. MorJS host - 宿主配置
          4. MorJS modules - 模块配置
          5. MorJS shared - 共享依赖
      3. MorJS 运行时
        1. MorJS 动态运行时示例
          1. MorJS 安装与使用
          2. MorJS 扩展能力使用
        2. MorJS aApp/wApp
          1. MorJS aApp/wApp基础使用
        3. MorJS aPage/wPage
          1. MorJS aPage/wPage基础使用
          2. MorJS aPage/wPage生命周期拓展
          3. MorJS aPage/wPage Mixins 支持
          4. MorJS aPage/wPage eventListener 语法糖
        4. MorJS aComponent/wComponent
          1. MorJS aComponent/wComponent 基础使用
          2. MorJS aComponent/wComponent 生命周期拓展
          3. MorJS aComponent/wComponent Mixins 支持
          4. MorJS aComponent/wComponent $eventListener 语法糖
          5. MorJS aComponent/wComponent 注意事项
      4. MorJS 插件
        1. MorJS 插件类型介绍
        2. MorJS 如何使用插件？
          1. MorJS 使用工程插件
          2. MorJS 使用运行时插件/解决方案
        3. MorJS 如何开发插件？
          1. MorJS 开发工程插件
          2. MorJS 开发运行时插件
          3. MorJS 开发运行时 Solution
      5. MorJS Mock
        1. MorJS Mock能力概览
        2. MorJS Mock目录约定
        3. MorJS Mock 快速接入
        4. MorJS Mock类型说明
          1. MorJS Mock JSAPI 类型详细说明
          2. MorJS Mock mock 文件类型说明
        5. MorJS Mock mock 配置
        6. MorJS Mock Adapter 扩展配置
          1. MorJS Mock 如何使用 Adapter
          2. MorJS Mock 如何编写 Adapter
      6. MorJS 环境变量
        1. Morjs 如何设置环境变量
          1. Morjs 环境变量约定
          2. Morjs 执行命令时设置
          3. Morjs 设置在 .env 文件中
        2. Morjs 环境变量列表
          1. Morjs ANALYZE
          2. Morjs PROGRESS
          3. Morjs CACHE
          4. Morjs HOST
          5. Morjs PORT
          6. Morjs MOR_PLUGINS
      7. MorJS 命令行
        1. MorJS 命令行概览
        2. MorJS 编译命令 — compile
        3. MorJS 清理命令 — clean
        4. MorJS 集成命令 — compose
        5. MorJS 分析命令 — analyze
        6. MorJS 脚手架命令 — create 或 init
        7. MorJS 微生成器 — generate 或 g
      8. MorJS FAQ
        1. MorJS 怎么编译成微信或抖音小程序
        2. MorJS 怎么指定产物的路径
        3. MorJS 未被使用的文件会被编译到产物里吗？
        4. MorJS 小程序可以转换为小程序插件或分包吗？
        5. MorJS 可以接入第三方的 UI 框架吗，接入的组件会一同转端吗？
        6. MorJS 运行时提供的 hooks 的执行顺序是在页面原始方法前还是后？
    4. MorJS 进阶用法
      1. MorJS 条件编译
        1. MorJS 条件编译(代码维度)
          1. MorJS 代码维度 背景
          2. MorJS 代码维度 语法支持
            1. MorJS 代码维度 目前支持的语法
            2. MorJS 代码维度 目前支持的文件类型
            3. MorJS 代码维度 尚未支持的文件类型
            4. MorJS 代码维度 默认注入的变量
            5. MorJS 代码维度 自定义条件编译变量
          3. MorJS 代码维度 代码示例
            1. MorJS 代码维度 mor.config.ts 配置示例
            2. MorJS 代码维度 #ifdef（判断是否有变量）
            3. MorJS 代码维度 #ifndef（判断是否无变量）
            4. MorJS 代码维度 #if（判断变量值）
        2. MorJS 条件编译(文件维度)
          1. MorJS 文件维度 注意事项
          2. MorJS 文件维度 目前支持的文件类型
          3. MorJS 文件维度 各端特殊后缀列表
            1. MorJS 文件维度 mor.config.ts 配置示例
          4. MorJS 文件维度 实现效果
          5. MorJS 文件维度 js 引用说明
      2. MorJS 复杂小程序集成
        1. MorJS 复杂小程序背景
        2. MorJS 复杂小程序动机
        3. MorJS 复杂小程序目标
        4. MorJS 复杂小程序示意图
        5. MorJS 复杂小程序集成概念
          1. MorJS 复杂小程序的集成
          2. MorJS 复杂小程序 模块类型
          3. MorJS 复杂小程序 集成模式
          4. MorJS 复杂小程序 集成状态
          5. MorJS 复杂小程序 下载类型
          6. MorJS 复杂小程序 集成脚本
        6. MorJS 复杂小程序 集成配置
          1. MorJS 复杂小程序 集成开启方式
          2. MorJS 复杂小程序 集成模块配置
        7. MorJS 复杂小程序 集成产物规范
          1. MorJS 复杂小程序 集成产物临时目录
          2. MorJS 复杂小程序 模块描述文件 mor.compose.json
          3. MorJS 复杂小程序 模块产物配置文件 [config].json
          4. MorJS 复杂小程序 实际模块示例
        8. MorJS 复杂小程序 用法举例
          1. MorJS 复杂小程序 主/子分包研发模式
          2. MorJS 复杂小程序 SDK 研发模式
          3. MorJS 复杂小程序 小程序插件研发模式
        9. MorJS 复杂小程序 命令行说明
        10. MorJS 复杂小程序 集成流程定制
      3. MorJS 小程序形态一体化
        1. MorJS 小程序形态一体化 背景
        2. MorJS 小程序形态一体化 能力概览
        3. MorJS 小程序形态一体化 形态差异
        4. MorJS 小程序形态一体化 解决方案
          1. MorJS 小程序形态一体化 适用范围
          2. MorJS 小程序形态一体化 实现方案
        5. MorJS 小程序形态一体化 配置示例
          1. MorJS 小程序形态一体化 前置准备
          2. MorJS 小程序形态一体化 小程序转分包
          3. MorJS 小程序形态一体化 小程序转插件
          4. MorJS 小程序形态一体化 插件转分包
          5. MorJS 小程序形态一体化 其他情况
    5. MorJS 多端兼容性
      1. MorJS 微信 DSL 多端兼容性
        1. MorJS 微信转支付宝
          1. MorJS WXML 中避免使用不支持的组件
          2. MorJS 开启 component2 配置
          3. MorJS 使用较新的基础库版本
          4. MorJS ESModule 和 CommonJS 语法
          5. MorJS 不同的样式隔离支持
        2. MorJS 微信转 Web
          1. MorJS JSAPI 差异
          2. MorJS 组件差异
        3. MorJS 微信条件编译
          1. MorJS 微信代码维度
          2. MorJS 微信文件维度
      2. MorJS 支付宝转微信
        1. MorJS 支付宝自定义组件
          1. MorJS 支付宝props 必须完整
          2. MorJS 支付宝props 中的函数名字必须为 on 开头的 onEvent 格式
          3. MorJS 支付宝样式覆盖优先级
          4. MorJS 支付宝获取 props 中的函数返回值
          5. MorJS 获取各种事件中目标元素 data 属性时优先从 currentTarget 获取
          6. MorJS 支付宝不能使用 default slot 默认插槽
          7. MorJS 微信端没有 $spliceData
        2. MorJS 支付宝AXML
          1. MorJS AXML 中动态定义高度要加 PX 单位
          2. MorJS AXML 中的 style 属性不能传递对象
          3. MorJS AXML 中不支持 \`` 模版字符串
          4. MorJS AXML 不能使用 {{{}}} 方式传递对象，除 template 的 data 属性之外，也不能使用解构语法
        3. MorJS SJS 不能使用 namedExport
        4. MorJS 支付宝原生组件
          1. MorJS 支付宝slider
          2. MorJS 支付宝scroll-view 中 flex 布局失效
        5. MorJS 支付宝使用自定义顶部导航栏时
  2. MorJS Web开发
    1. MorJS Web开发介绍
      1. MorJS Web开发快速上手
        1. MorJS Web开发新建 MorJS 工程
        2. MorJS Web开发已有 MorJS 工程
          1. MorJS Web开发 增加配置
          2. MorJS Web开发 运行项目
      2. MorJS Web开发 API 支持情况
        1. MorJS Web开发 域内独有 API
        2. MorJS Web开发 基础
        3. MorJS Web开发 应用级事件
        4. MorJS Web开发 界面
          1. MorJS 界面 导航栏
          2. MorJS 界面 TabBar
          3. MorJS 界面 路由
          4. MorJS 界面 交互反馈
          5. MorJS 界面 下拉刷新
          6. MorJS 界面 联系人
          7. MorJS 界面 选择城市
          8. MorJS 界面 选择地区
          9. MorJS 界面 选择日期
          10. MorJS 界面 动画
          11. MorJS 界面 画布
          12. MorJS 界面 地图
          13. MorJS 界面 计算路径
          14. MorJS 界面 键盘
          15. MorJS 界面 滚动
          16. MorJS 界面 节点查询
          17. MorJS 界面 选项选择器
          18. MorJS 界面 级联选择
          19. MorJS 界面 设置窗口背景
          20. MorJS 界面 设置页面是否支持下拉
          21. MorJS 界面 字体
        5. MorJS Web开发 多媒体
          1. MorJS 多媒体 图片
          2. MorJS 多媒体 视频
          3. MorJS 多媒体 音频播放
          4. MorJS 多媒体 lottie 动画
        6. MorJS Web开发 缓存
        7. MorJS Web开发 文件
        8. MorJS Web开发 位置
        9. MorJS Web开发 网络
        10. MorJS Web开发 设备
          1. MorJS 设备 系统信息
          2. MorJS 设备 网络状态
          3. MorJS 设备 剪切板
          4. MorJS 设备 摇一摇
          5. MorJS 设备 振动
          6. MorJS 设备 加速度计
          7. MorJS 设备 陀螺仪
          8. MorJS 设备 罗盘
          9. MorJS 设备 设备方向
          10. MorJS 设备 拨打电话
          11. MorJS 设备 获取服务器时间
          12. MorJS 设备 用户截屏事件
          13. MorJS 设备 屏幕亮度
          14. MorJS 设备 设置
          15. MorJS 设备 添加手机联系人
          16. MorJS 设备 无障碍
          17. MorJS 设备 权限引导
          18. MorJS 设备 扫码
          19. MorJS 设备 内存不足告警
          20. MorJS 设备 获取设备电量
          21. MorJS 设备 WiFi
          22. MorJS 设备 worker
        11. MorJS Web开发 数据安全
        12. MorJS Web开发 分享
        13. MorJS Web开发 自定义通用菜单
        14. MorJS Web开发 更新管理
        15. MorJS Web开发 web-view 组件控制
        16. MorJS Web开发 跳转支付宝应用或页面
        17. MorJS Web开发 升级支付宝最新版本
        18. MorJS Web开发 开放能力 API
          1. MorJS 开放能力API 基础能力
          2. MorJS 开放能力API 支付能力
          3. MorJS 开放能力API 资金能力
          4. MorJS 开放能力API 会员能力
          5. MorJS 开放能力API 营销能力
          6. MorJS 开放能力API 安全能力
        19. MorJS Web开发 模板配置
    2. MorJS Web开发基础用法
      1. MorJS 基础配置
        1. MorJS 基础配置介绍
        2. MorJS globalComponentsConfig
        3. MorJS styleScope
        4. MorJS rpxRootValue
        5. MorJS responsiveRootFontSize
        6. MorJS needRpx
        7. MorJS usePx
        8. MorJS showHeader
        9. MorJS showBack
        10. MorJS appConfig
        11. MorJS 基础配置其他
      2. MorJS 路由设置
        1. MorJS 配置路由
        2. MorJS 路由参数介绍
          1. MorJS 路由参数 mode
          2. MorJS 路由参数 baseName
          3. MorJS 路由参数 customRoutes
        3. MorJS 路由 API
    3. MorJS Web开发其他用法
      1. MorJS 自定义 Api 全局变量名称
        1. MorJS 自定义 Api 全局变量名称背景
        2. MorJS 自定义 Api 全局变量名称 使用方式
        3. MorJS 自定义 Api 全局变量名称 原理
      2. MorJS Tabbar IOS 小黑条适配开关
        1. MorJS Tabbar 简介
        2. MorJS Tabbar 背景
        3. MorJS Tabbar 如何使用
  3. MorJS 社区
    1. MorJS 参与贡献
      1. MorJS 参与贡献 环境准备
        1. MorJS Node.js 和 pnpm
        2. MorJS Clone 项目
        3. MorJS 安装依赖并构建
      2. MorJS 开发 MorJS
        1. MorJS 启动 dev 命令
        2. MorJS 跑 Example
      3. MorJS 贡献 MorJS 文档
        1. MorJS 撰写 MorJS 文档
      4. MorJS 新增 package
      5. MorJS 发布
      6. MorJS 加入 Contributor 群
    2. MorJS 社区指南
      1. MorJS 资源
        1. MorJS 行为规范
        2. MorJS 保持关注
        3. MorJS 获得帮助
      2. MorJS 参与方式
        1. MorJS 帮助同伴用户
        2. MorJS 协助分流 Issue
        3. MorJS 贡献代码
        4. MorJS 分享 (并积累) 经验
    3. MorJS 规范
      1. MorJS 规范介绍
        1. MorJS 研发规范
        2. MorJS 技术规范
        3. MorJS 文档规范
      2. MorJS 研发规范
        1. MorJS 代码样式规范
          1. MorJS eslint 配置
          2. MorJS tsconfig.json 配置
          3. MorJS prettier 配置
        2. MorJS 代码提交和审查规范
          1. MorJS 约定式代码提交（Git Commit）
            1. MorJS Git Commit概述
            2. MorJS Git Commit示例
            3. MorJS Git Commit 约定式提交规范
            4. MorJS Git Commit 为什么使用约定式提交
            5. MorJS Git Commit FAQ
          2. MorJS 代码审查规范（Code Review）
            1. MorJS Code Review 概要
            2. MorJS 尊重大家的时间
            3. MorJS 始终提供建设性反馈
            4. MorJS 明确需要改进的地方
            5. MorJS 不能只要求代码能工作
            6. MorJS 强化代码提交的最佳实践
            7. MorJS 严格审阅临时代码
            8. MorJS 检查项目的卫星文件
            9. MorJS 始终考虑长期可维护性
          3. MorJS 代码提交和审查规范参考
      3. MorJS 技术规范
        1. MorJS JS依赖库规范
          1. MorJS JS依赖库规范概要
          2. MorJS 代码约束
            1. MorJS 禁止使用动态函数
            2. MorJS 严格模式下开发
            3. MorJS TypeScript 的 Polyfill 支持
          3. MorJS 代码规范
          4. MorJS 如何实现多端支持
            1. MorJS 的加载规范
            2. MorJS 可兼容多端的 JS
            3. MorJS 正常情况下的多端规范示例
            4. MorJS 复杂情况下的多端规范示例
        2. MorJS 多端组件库规范
          1. MorJS 多端组件库规范概要
          2. MorJS 多端组件库规范特别说明
          3. MorJS 多端适配简要说明
            1. MorJS 目录字段配置
            2. MorJS 多端适配输出目录结构说明
          4. MorJS 组件完整示例
            1. MorJS 组件源代码
            2. MorJS 小程序目录规范完善项目
            3. MorJS 构建处理
        3. MorJS 多端运行时基础库规范
          1. MorJS 多端运行时基础库规范 概要
          2. MorJS 多端运行时基础库基础规范
          3. MorJS 多端运行时基础库 注意事项
          4. MorJS 多端运行时基础库 生命周期列表
          5. MorJS 多端运行时基础库规范 插件示例
            1. MorJS 插件示例 初始化
            2. MorJS 插件示例 类型声明
            3. MorJS 插件示例 插件源代码示例
            4. MorJS 插件示例 插件编译输出
            5. MorJS 插件示例 使用方式
      4. MorJS 文档规范
        1. MorJS 如何写好文档？
        2. MorJS 文案排版规范
          1. MorJS 文案排版规范 空格
          2. MorJS 文案排版规范 标点符号
          3. MorJS 文案排版规范 全角和半角
          4. MorJS 文案排版规范 名词
          5. MorJS 文案排版规范 争议
          6. MorJS 文案排版规范 工具
          7. MorJS 文案排版规范 谁在这样做？
          8. MorJS 文案排版规范 参考文献
          9. MorJS 文案排版规范 Forks
阅读(430) 书签 赞(0) 我要纠错

MorJS 实作页面组件

2023-10-27 17:58 更新

接下来我们将对目前的初始化项目添加页面和组件。如你所见，初始化后的页面已经具备了显示 Tode List 和添加 Todo 功能，下面我们使用添加页面来实现编辑 Todo 功能，使用添加组件来实现删除 Todo 功能。


以上内容是否对您有帮助：
← MorJS 配置小程序
MorJS 添加页面 →
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号