神码前端操作手册-01

# 快速上手

### 新建项目

登录后在页面右上角选择新建项目

![](/storage/md_editor/content/jsovXLU08P0FLforBjmTM36MFo3HNWucl7WuHY3L.png)

填写对应项目名称，小程序分包名称，以及页面所在目录

![](/storage/md_editor/content/Fqo30upf4W92ZTD0V2mwyoDVVBVQMLkBk9WfFty8.png)
![](/storage/md_editor/content/kWDXVlYsbkEvcbTfO9Bo4QnLjg6yxF04pGFKKPO4.png)

后续也可以进行编辑修改

![](/storage/md_editor/content/7t3qqUklgebgj7MKD0OVgDmU4BdDhcTzlXxmVqGF.png)

### 导入页面

点击进入项目

![](/storage/md_editor/content/eOAsY5oLYS9gf2BwNceZmkhGKG8sEacVTs5FQ15B.png)

选择单页面导入

![](/storage/md_editor/content/726AKt7ivSm7TB3K61iwg7wDQJl02EzMIMxnOA6k.png)

填写页面名称及文件名，将codefun的图片路径，WXML与WXSS拷贝都对应位置（JS、JSON、全局样式无需用到），然后点击提交

![](/storage/md_editor/content/pHdQxZX1upDidfL2hBfHZbLZKYkfOT5XzUNlOjAK.png)

### 查看代码

提交后进入页面详情，如图所示

![](/storage/md_editor/content/acnYA6ap7Rm2MZRIxdDrDaK9iNt1cnBlevvXtvtZ.png)

详情页总体分为左中右三部分

- 左边栏显示文档树
	- 中间是画布区域，可以用于选择元素对象
	- 右边栏是被选节点的属性面板，用于展示样式属性、组件选择、标签标记
  
未选中元素时可进行页面设置，常用“必须登录”、“页面列表”等，配置完记得保存

![](/storage/md_editor/content/OOkGX3gLCYgrFBSQ32DlJ6lCHrxtejZfAW00aHY1.png)

右上角点击“查看代码”，可查看修改后的内容

![](/storage/md_editor/content/BFgGzjU8jspSdK0rpuwIBHFQbLDcOVRGaxHl2Mpy.png)

选择元素后，可进行标签标记，如标记为“标题栏”，在拉取时会将这部分代码忽略

![](/storage/md_editor/content/AwOT6vqYC87q9IjqKwtOoVgcQS1vCBXfrGJRY6mz.png)

选择元素后，可修改组件类型

![](/storage/md_editor/content/0xM3sRn0N28qHs9oIv0PDtVr3grY2R15PhfqZ5zD.png)

点击上方“资源管理”，下载当前页面的资源图片

![](/storage/md_editor/content/3azqRXhBcxQzwU42Y1S6OaIAA5RxqHoY09wMQwiG.png)

操作完保存，打开神码前端客户端，选择拉取代码

![](/storage/md_editor/content/tRX4oYggsmICaGZYdVdP9jxnQv5uUdHM8SFSY04r.png)

拉取成功，打开小程序，选择对应页面的编译，快速查看生成后的页面

![](/storage/md_editor/content/2nmB4vOV2XzxSQ7MBzUCUPdkOWSmy7MjKPswiFNh.png)