微信小程序开发入门基础

这里以一个“猜拳游戏”小程序为例进行介绍：
小程序账号的注册、开放工具的下载比较简单，此处不在赘述。

• 一、开发工具

名字就叫微信开发者工具，官网可以下载，开发工具界面如下：
界面有三个区域：包括模拟预览区、编辑代码区、调试区，分别对应左上角三个绿色按钮。

• 二、文件类型

共四种文件类型：

1.wxml：微信模板文件，类似网页开发的html文件。

2.wxss：微信样式表文件，用于定于页面样式。

3.js：脚本文件，代码逻辑写在这。

4.json：静态数据配置文件。

• 三、 项目结构

其中有两个文件非常重要：
1.文件app.json—小程序全局配置文件
代码示例如下

{
  "pages": [
    "pages/index/index"
    "pages/logs/logs"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#363527",
    "navigationBarTitleText": "石头剪刀布",
    "navigationBarTextStyle": "white"
  },
  "sitemapLocation": "sitemap.json"
}

此文件主要管理小程序的全局配置，包括小程序页面路径，界面风格(标题，背景色，字体色)，网络超时时间，底部tab等；

每个文件夹中的json，定义了文件夹内的wxml的界面风格，可覆盖app.json中的全局风格

2.project.config.json—开发者工具配置

此文件用于定义开发者工具的个性化定制，比如界面颜色，编译配置等等。

大家用过npm都知道下载三方库都会生成一个package.json文件，此文件记录了下载过得所有库名与版本信息，如果我们换了电脑，其实不用将之前下载的文件拷贝过去，而是只用拷贝一个package.json再次执行下载就可以复原你需要的三方库。

那么project.config.json类似如此，它保存了你对于开发者工具的相关配置，如果你换电脑了，你可以通过此文件直接还原你最初习惯的开发设置。

• 四、页面跳转
  1.首次进入程序，入口由文件app.json控制，如下所示，入口为pages/index/index.wxml文件

{
  "pages": [
    "pages/index/index",（说明：第一行的这个页面代表小程序的入口）
    "pages/logs/logs"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#363527",
    "navigationBarTitleText": "石头剪刀布",
    "navigationBarTextStyle": "white"
  },
  "sitemapLocation": "sitemap.json"
}

2.怎么跳转到第二个页面
在pages/index/index.wxml文件中设置一个按钮，给按钮绑定一个跳转事件，则点击跳转到另一个页面。

index.wxml文件，代码示例

        <navigator url="../ts/ts" 
        hover-class="navigator-hover"
         open-type="switchTab">我是个按钮demo
         </navigator>

• 五、新增页面

最佳做法是：
1.直接在app.json文件的pages数组中新增一条页面路径
2.按ctrl+s,保存
pages文件夹会自动生成一个新的页面，这样做更加方便和保险。