编写微信小程序的开发与调试工作的分析与方法

菏泽炫佑科技 菏泽炫佑小程序开发 菏泽炫佑app制作 炫佑科技

编写微信小程序的开发与调试工作的分析与方法

按照图中的顺序，我们可以从官网下载微信开发工具。 之后我们主要使用这个工具来开发和调试微信小程序的前端页面。 下载并安装，如下图：

打开微信开发工具，页面如下：

按照上图的顺序，就可以新建一个微信小程序了。 点击创建后，我们来到这个界面：

1：项目名称，这个可以根据自己的意愿选择，只要不为空即可。

2：项目目录，即项目在你电脑上的具体路径

3：AppID，这个重新打开你的微信公众平台网页，点击右上角的头像，在底部的账户信息中就可以看到：

4：开发模式，我们这里选择小程序。

5：后端服务。 为了更加灵活方便，我们选择不使用云服务，而是使用服务器自己提供服务。

6、选择后，我们点击创建编写微信小程序的开发与调试工作的分析与方法，进入我们的**个微信小程序项目。

界面如下：

我们刚刚打开一个新项目，我们会发现里面有很多各种各样的文件和文件夹（界面和我的有点不一样，因为我的是测试账号，每个微信账号只能有一个正常的开发项目。但总体结构是相似的）。 目的是让大家了解它们主要功能的使用，但是过于复杂和混乱，所以我们只需要关注两个地方：

现在我们就来一一分析。 首先，index文件夹下的四个文件的后缀名都不一样微信小程序页面开发，分别是.js、.json、.wxml、.wxss。 熟悉前端开发的朋友应该能大概猜到。 是的，js主要是用来写语言，放置一些控制主页面的方法，比如弹出窗口、点击按钮时发生的事件等。 json文件用于对页面进行一些基本设置。 wxml文件类似于网页中的html页面，是主页面，用来放置各种标签的显示页面。 wxss类似于网页中的css文件。 用于编写一些类，控制主页面的样式布局。 因此，编写微信小程序需要一定的前端基础。 至于如何补充前端基础，请按照新手教程进行。

app.json文件内容如下：

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle":"black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

它主要控制整个项目的主要风格，其中*重要的是页面。 每个页面的路径都放在pages中。 如果里面没有写你的页面的路径，程序将无法检测到你的页面并报错。

知道了这一点，我们就大概可以知道，在微信小程序中，每个单独的页面都对应了pages文件夹下的一个单独的文件夹。 文件夹中有四个主要文件，分别控制页面的具体内容（wxml）、相关方法（js）、基础数据（json）和样式（wxss）。

因此，我们可以大胆地删除所有其他文件夹，只保留index文件夹。 我们的开发之路，从指数开始！

2.页面布局视图容器

视图容器，类似于HTML中的div标签，将页面分成不同的块进行显示。 每个块都可以放置我们想要显示的内容。 不过，相比div标签，视图容器可以做出一些相对简单的逻辑判断，比如if/else来根据相关数据选择性地显示内容。

例如：