第一个微信小程序
安装所需的开发工具后,我们可以使用这些工具开始创建我们的第一个应用程序!
使用WX创建基本项目
1.首先需要手动创建一个空文件夹,为了演示,我们创建一个-test文件夹
2.创建完成后,使用Code打开文件,待文件夹箭头展开后,在空白处右键选择WX,创建基础工程。
3. 系统将要求您输入项目名称。
4. 输入名称,按 键进入下一步。
目前主要有三件事要做。
4.1.创建基础项目所需的文件。
4.2. 自动安装项目依赖项。
可以看到输出栏输出了一些信息,需要等待片刻。
4.3、自动编译并输出dist文件目录,当看到下图所示的输出结果时,就说明内容文件已经创建完成,可以看到我们创建的项目多了一个dist目录。
dist目录下就是WX项目编译出来的小程序项目,你可以直接通过微信开发者工具打开并预览。
预览 WX 项目
1、按照提示打开微信开发者工具,新建小程序项目,在如图所示的项目目录中,指向创建的-test项目中的dist目录,并填写相应信息。
选择 dist 目录
2.填写完毕后,点击确认。就可以看到我们创建的基础项目了。如图:
启动WX项目
创建基础项目后会在dist目录下生成小程序的初始项目文件,开发时需要先启动开发服务,这样每次增加或者修改页面时都会将文件差异输出到dist目录下。
1、右键选择WX启动开发服务,会自动跳转到终端栏,执行tui dev命令。
2、启动开发服务后,假设我们修改了.wx文件,保存后,修改后的文件会在对应的dist目录下被编译成.html、.js、.json、.wxss。
3. 如果你修改了app.wxa文件,它将全部重新输出到dist
创建新页面
1. 创建新页面时,右键单击要在其中创建页面的目录。
2. 弹出如下窗口,要求输入文件名,以test为例,输入文件名后按键。
3. 系统会要求您输入文件标题。以测试为例。输入的文件标题将显示为“xt”。
4.回车确定后,会创建test.wx文件,并且会自动将该页面的路径添加到app.wxa中的路由配置列表中。
WX 标识为 WX 工程
在多人开发中,我们可能会遇到一个项目不是我们自己创建的,而是别人传过来的,或者从 git/svn 克隆过来的。这种情况下,项目基础目录是完整的,但是右键菜单中可能没有 WX 项。这是因为我们的项目没有被标识为 WX 项目。所以需要展开项目,右键选择 WX 标识为 WX 项目。
另外,如果已经安装了E插件,但是code page没有颜色,如下图:
这也是因为项目没有被识别为WX导致的,被识别为WX项目后会生成一个.目录。
在.json文件中,写入了如下配置。
{ "touchuiwx.enable": true, "vetur.extensions": [ ".wxa", ".wx" ], "files.associations": { "*.wxa": "vue", "*.wx": "vue" }, "git.ignoreLimitWarning": true }
当识别为WX项目后,会根据vue的格式对项目代码进行识别和着色。
一般在git或者其他代码库中,我们会忽略这些文件。所以在识别为WX项目后,需要安装依赖项。
进出口
当你使用UI开发H5应用时,可以直接导入WX进行转换,稍加调整即可生成小程序。
反过来说,当你开发完微信小程序之后,也可以将其导出为UI项目,生成H5应用。
详细文档:转换H5
防范措施
1、一个工作区内不能同时存在多个文件夹,否则基础项目创建会失败;
2. 目录层次错误会导致编译失败,不能在项目目录之外添加其他目录;
3.当项目文件夹图标关闭时,右键无法出现插件菜单,必须展开小三角;
4. 在项目根目录右键无法出现插件菜单,需要在空白处点击。