MorJS 添加页面

页面配置​

1. 在 src/pages 下创建文件夹 src/pages/edits-todo 用于存放编辑 Todo 功能相关的页面
2. 在该文件夹下创建小程序页面的四个基础文件 edits-todo.wxml edits-todo.less edits-todo.ts edits-todo.json
3. 打开 edits-todo.json 文件进行编译，先写一个 {} 作为空配置
4. 在页面配置 src/app.json 中添加该页面到 pages 中

{
  "pages": [
    "pages/todos/todos",
    "pages/add-todo/add-todo",
    "pages/edit-todo/edit-todo"
  ]
}

1. 关于 xml 文件，若项目初始化时选择的是支付宝 DSL，页面的基础文件可改为 edits-todo.axml
2.  关于 css 文件，MorJS 支持 wxss/acss/less/scss 文件类型，开发者可选择适合的文件格式进行编写

页面功能​

1. 编辑入口：首页 src/pages/todos 需要添加一下编辑的入口，修改一下首页的样式，js 中需要增加点击跳转方法，并把该项的 index 传给页面，用于标记哪一项的内容需要被编辑。

<!-- src/pages/todos/todos.wxml -->
<label wx:for="{{todos}}" wx:for-item="item" class="todo-item {{item.completed ? 'checked' : ''}}" wx:key="{{index}}">
  ...
  <view class="todo-item-edit" bindtap="editTodo" data-index="{{index}}">编辑</view>
</label>

// src/pages/todos/todos.ts
import { wPage } from '@morjs/core'

wPage({
  ...,
  editTodo(e) {
    my.navigateTo({url: `../edit-todo/edit-todo?index=${e.target.targetDataset.index}`})
  },
})

/* src/pages/todos/todos.less */
.todo-items {
  padding: 50rpx 30rpx;
}
.todo-item {
  display: flex;
  align-items: center;
}
.todo-item-text {
  width: 360rpx;
}
.todo-item-edit {
  margin: 0 20rpx;
}

2. 编辑功能：

• xml 文件中需要一个 input 用于显示和修改被编辑项的内容和一个按钮用于触发完成编辑
• css 文件编辑页面样式
• js 文件中，对页面传入的 index 对应的内容进行保存，提供给 xml 中的 input 显示，并添加一个方法用于按钮点击后触发

<!-- src/pages/todos/edit-todos.wxml -->
<view class="page-edit-todo">
  <view class="edit-todo">
    <input class="edit-todo-input" placeholder="What needs to be done?" bindblur="onBlur" value="{{inputValue}}" />
  </view>
  <view class="todo-footer">
    <add-button text="Edit Todo" onClickMe="edit"></add-button>
  </view>
</view>

// src/pages/todos/edit-todos.ts
import { wPage } from '@morjs/core'

const app = getApp()

wPage({
  onLoad(query: any): void {
    this.setData({
      index: query.index,
      inputValue: app.todos[query.index].text
    })
  },

  data: {
    index: '',
    inputValue: ''
  },

  onBlur(e: any) {
    this.setData({
      inputValue: e.detail.value
    })
  },

  edit() {
    const { index, inputValue } = this.data
    app.todos[index].text = inputValue
    my.navigateBack()
  }
})

/* src/pages/todos/edit-todos.less */
.page-edit-todo {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.edit-todo {
  padding: 40px;
  flex-grow: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.edit-todo-input {
  display: block;
  font-size: 50rpx;
  font-weight: 100;
  padding: 5px 5px;
  background: none;
  border: none;
  border-bottom: 1px solid #dfdfdf;
  color: #0effd6;
  width: 100%;
}

.todo-footer {
  padding: 50rpx 0 100rpx;
  font-size: 48rpx;
  font-weight: 200;
  text-align: center;
}

// src/pages/todos/edit-todos.json
{
  "usingComponents": {
    "add-button": "/components/add-button/add-button"
  }
}

3. 通过上述流程后，我们在 todo list 的每一项后面都会有一个「编辑」按钮，点击将会调转到编辑页，修改完内容后点击编辑页下方的按钮即可报错并回到 todo list 页，以上，恭喜你学会了怎么添加和编辑页面代码！🎉 🎉 🎉