微信小程序教程
8.4 代码编辑
阅读(

微信小程序介绍

微信小程序设计指南

微信小程序开发简介

微信小程序开发框架

微信小程序框架视图层

微信小程序框架组件

微信小程序框架 API

微信开发者工具

概述

界面

快捷键

代码编辑

编辑区可以对当前项目进行代码编写和文件的添加、删除以及重命名等基本操作。

文件格式

因 iOS 下仅支持UTF8编码格式,最新版本的开发者工具会在上传代码时候对代码文件做一次编码格式校验。

文件支持

工具目前提供了 5 种文件的编辑:wxmlwxssjsjsonwxs以及图片文件的预览。

文件操作

新建页面有两种方式

  1. 在目录树上右键,选择新建 Page,将自动生成页面所需要的wxmlwxssjsjson
  2. 在 app.json 的 pages 字段,添加需要新建的页面的路径,将会自动生成改页面所需要的文件

自动保存

编辑代码后,工具会自动帮助用户保存当前的代码编辑状态,直接关闭工具或者切换到别的项目,并不会丢失已经编辑的文件状态,但需要注意的是,只有用户主动保存文件,修改内容才会真实的写到硬盘上。

如果设置中开启了 “修改文件时自动保存”(设置-编辑设置-修改文件自动保存),工具在修改文件时会自动保存到硬盘中,无需手动保存的效果。

设置中开启 “编译时自动保存所有文件”(设置-编译设置-编译时自动保存所有文件),在点击编译时自动保存所有文件的效果。

实时预览

如果设置中开启了 “文件保存时自动编译小程序”(设置-编辑设置-保存时自动编译小程序),那么当wxmlwxssjsjson文件修改时,可以通过模拟器实时预览编辑的情况:

注意:如果同时开启了 ”修改文件时自动保存“ 的设置,编译动作会有一定的延迟,来避免频繁的编译,手动点击编译按钮将立即编译。

自动补全

同大部分编辑器一样,工具提供了较为完善的自动补全

  • js 文件编辑会帮助开发补全所有的 API 及相关的注释解释,并提供代码模板支持
  • wxml 文件编辑会帮助开发者直接写出相关的标签和标签中的属性
  • json 文件编辑会帮助开发者补全相关的配置,并给出实时的提示

js 补全

代码模板支持

json 补全

3

wxml 补全

3

项目配置文件

可以在项目根目录使用project.config.json文件对项目进行配置。

字段名 类型 说明
miniprogramRoot Path String 指定小程序源码的目录(需为相对路径)
qcloudRoot Path String 指定腾讯云项目的目录(需为相对路径)
setting Object 项目设置

setting 中可以指定以下设置

字段名 类型 说明
es6 Boolean 是否启用 es5 转 es6
postcss Boolean 上传代码时样式是否自动补全
minified Boolean 上传代码时是否自动压缩
urlCheck Boolean 是否检查安全域名和 TLS 版本

示例:

{
  "miniprogramRoot": "./src",
  "qcloudRoot": "./svr",
  "setting": {
    "postcss": true,
    "es6": true,
    "minified": true,
    "urlCheck": false
  }
}

Git 状态展示

如果所在的小程序工程目录(project.config.json所在目录)存在 Git 仓库,编辑器可以展示目前的 Git 状态。

目录树

如图所示,当某些文件存在变动时,目录树的文件右侧将展示相应的图标来表明这一状态。当某一处于收起状态的目录下存在有变动的文件时,此目录的右侧亦会展示一个圆点图标表明此情况。

文件图标状态的含义如下:

图标 含义
U 文件未追踪(Untracked)
A 新文件(Added, Staged)
M 文件有修改(Modified)
+M 文件有修改(Modified, Staged)
C 文件有冲突(Conflict)
D 文件被删除(Deleted)

文件夹目录图标状态的含义如下:

图标 含义
小红点 目录下至少存在一个删除状态的文件
小橙点 目录下至少存在一个冲突状态的文件
小蓝点 目录下至少存在一个未追踪状态的文件
小绿点 目录下至少存在一个修改状态的文件

如果某一文件存在修改(Modified),可以右键点击此文件,并选择 “与上一版本比较”,则可以查看当前工作区文件与 HEAD 版本的比较。

文件编辑

存在 Git 仓库时,状态栏会展示此 Git 仓库目前的分支信息。例如,下图表明目前 Git 仓库处于v2分支。

同时,编辑文件内容时,将会在所编辑代码左侧实时显示相对于上一版本内容的比较。

样式说明如下:

文件夹目录图标状态的含义如下:

样式 含义
蓝色线条 此处的代码有变动
绿色线条 此处的代码是新增的
红色三角箭头 此处有代码被删除
Windows 风格回车设置

如需忽略 Windows 风格的回车符,可以前往 “设置” - “编辑”,并勾选 “Git 比较文件内容时,忽略 Windows 风格回车符”。

勾选后,在编辑文件进行内容比较时,所有 Windows 风格的回车符将被当作 Unix 风格的回车符对待。

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我们提供更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验