微信小程序 新建项目并配置可运行的文件目录

  • Post author:
  • Post category:小程序


新建项目

下载微信小程序开发者客户端并打开,选择项目目录和项目名称,填入AppID,取消勾选快速启动模板。

1. 新建全局配置文件

点击目录左上角的+,新建后缀名为js, json, wxss(命名自定,如app.js)文件,用于全局的配置,其中json文件用于全局布局配置,wxss文件用于定义全局的样式表。此时会报错,程序找不到入口,这是因为还没有为这个小程序项目添加入口页面。

2. 新建页面

点击目录左上角的+,新建目录pages,用于存放小程序将会用到的所有页面,右击这个文件夹,选择新建目录,新建一个页面文件夹,如about,用于存放这个页面所用到的所有配置文件。继续右击about文件夹,并添加js, json, wxss, wxml,用于该页面的配置,js用于页面的逻辑交互功能,json用于该页面的全局配置,显示窗口的导航栏等,wxss用于配置该页面会用到的样式表,wxml用于配置该页面显示的内容。

3. 加入路径

在全局的json文件中加入page的路径,如我们的about页面的路径为pages/about/about,则需要在app.json中加入以下代码

{
  "pages":
  ["Pages/About/about"]
}

此时已经添加路径了,仍然会报错about.json,因为我们没有对about页面的json布局文件进行配置,在about.json中添加以下代码

{}

一个中括号,以表示我们虽然没有设置相关内容,但是对about.json文件进行了相关的配置。此时小程序就可以编译了,但是没有显示内容,显示内容可以在wxml文件中进行配置,加入以下代码

<text>HelloWrold!</text>

添加了一个text控件,在微信小程序的窗口上显示出了一个helloworld的字



版权声明:本文为this_is_my_kingdom原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。