【微信小程序】(一)创建项目与前端编写

首先，编写微信小程序必须知道三个网站：

• 微信公众平台

• 小程序代码管理

• 微信开放文档

  一.创建项目

  首先进入微信公众平台，扫码登录，选择小程序开发，我们可以看到这样的界面：

• 

   

按照图中的顺序，我们可以在官网下载微信开发者工具，之后我们主要在这个工具上进行微信小程序的前端页面的开发与调试工作。将其下载下来，安装后如下所示：

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

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

 

1:项目名称，这个按照自己的意愿可以随意取，只要不为空即可。

2:工程目录，即工程在你电脑上的具体路径

3:AppID，这个重新打开你的微信公众平台网页，点击右上角的头像，在最下方的账号信息中可以看到：

4:开发模式，我们在此选择小程序。

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

6.选好之后，我们点击创建，即可进入自己的第一个微信小程序工程中。

界面如下:

刚刚打开一个新工程，我们会发现里面的各种各样的文件与文件夹特别多(和我这个界面有些不同，因为我这个是测试号，每一个微信账号只能有一个正常的开发工程，但是大体结构差不多)。其用意应该是让你了解一下他们的主要功能的用法，但是太复杂了会让人眼花缭乱，因此我们只需要关注两个地方：

• page文件夹下面的index文件夹中的四个文件

• 最外层的app.json文件

现在我们来一个一个分析，首先index文件夹下面的四个文件的后缀名都不相同，分别为.js、.json、.wxml、.wxss。熟悉前端开发的小伙伴们应该就能猜出大概了，没错，js主要是用来写javascript语言的地方，用来放置控制主页面的一些方法，比如弹窗，比如点击按钮发生的事件。json文件用来对页面做一些基础设置。wxml文件类似于网页中的html页面，也就是主页面，用来放置各种标签的展示页面。wxss类似于网页中的css文件，用来写一些class，控制主页面的样式布局。因此写微信小程序需要有一些前端基础，至于如何补充前端基础，请移步菜鸟教程。

而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里面放置的就是各个页面的路径，如果没有在这里面写你的页面的路径，程序就无法检测到你的页面，从而报错。

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

所以，我们就可以大胆的把其他文件夹都删了，只留下index文件夹，我们的开发之路从index开始！

二、页面布局

view容器

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

比如:

<!-- index.wxml -->
<view style="width:100px; height:100px; background-color:red">
  <!-- 红色方块 -->
</view>
<view style="width:100px; height:100px; background-color:green" wx:if="{
  {1 > 2}}">
  <!-- 绿色方块 -->
</view>
<view style="width:100px; height:100px; background-color:yellow