小程序入门

最近公司做小程序项目，现在做的差不多了，就想着写文章记录下学习的过程，本篇主要讲一些最基本知识，适合没了解过小程序的人看。

首先打开微信开发者工具创建新的项目

如图，填入自己的AppID之后点确定之后微信开发者工具会帮助创建基本的项目目录，如图：

这里我们说一下app.json文件中的配置项

{
  "pages": [  // 页面路径列表
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window": {
　　"navigationStyle":"custom", // 导航栏样式，仅支持以下值：default 默认样式,custom 自定义导航栏，只保留右上角胶囊按钮
　　"backgroundTextStyle": "dark",  // 下拉 loading 的样式，仅支持 dark / light
　　"navigationBarBackgroundColor": "#000", // 导航栏背景颜色
    "navigationBarTitleText": "标题", // 导航栏标题文字内容
    "navigationBarTextStyle": "white", // 导航栏标题颜色，仅支持 black / white
    "enablePullDownRefresh": true, // 是否全局开启下拉刷新
    "onReachBottomDistance":50 // 页面上拉触底事件触发时距页面底部距离，单位为px
  },
  "tabBar":{  // tabBar 配置项
    "color":"#000", // 文字默认颜色
    "selectedColor":"red", // 文字选中时的颜色
    "backgroundColor": "#fff", // 背景色
    "borderStyle":"black", // tabbar上边框的颜色， 仅支持 black / white
    "position":"bottom", // tabBar的位置，仅支持 bottom / top
    "list": [ // tab 的列表，详见 list 属性说明，最少2个、最多5个 tab
      {
        "pagePath": "pages/index/index", // 页面路径，必须在 pages 中先定义
        "text": "首页",  // tab 上按钮文字
        "iconPath":"images/home.jpg", // 图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px，不支持网络图片。当 postion 为 top 时，不显示 icon
        "selectedIconPath":"images/home_active.jpg" // 选中时的图片路径
      },
      {
        "pagePath": "pages/product/product",
        "text": "产品",
        "iconPath": "images/product.jpg",
        "selectedIconPath": "images/product_active.jpg"
      },
      {
        "pagePath": "pages/customer/customer",
        "text": "客户",
        "iconPath": "images/customer.jpg",
        "selectedIconPath": "images/customer_active.jpg"
      },
      {
        "pagePath": "pages/mine/mine",
        "text": "我的",
        "iconPath": "images/mine.jpg",
        "selectedIconPath": "images/mine_active.jpg"
      }
    ]
  },
  "networkTimeout": {// 各类网络请求的超时时间，单位均为毫秒
    "request": 10000,
    "downloadFile": 10000,
    "uploadFile": 10000,
    "connectSocket": 10000,
  },
  "debug": true // 是否开启 debug 模式

 

以上的配置项在小程序开发文档中都有详细的配置，这里主要为自己记录一下，也可以为刚接触小程序的朋友免去翻阅文档的过程。

需要注意的是每次新建页面目录后都要在app.json 的pages里边配置上页面路径，不然开发者工具会报错。

另外pages列表的第一项即为小程序打开后的首页，所以在开发过程中想调试某个页面，可以在app.json里边把它放在第一个，这样就不用每次编译后还要跳转到调试的页面。

在开发过程中发现一个有趣的东西就是每次新建页面的时候都要在pages文件夹下新建页面文件夹并在里边新建wxml,wxss,js,json四个文件，这样很麻烦，便捷的方法是想要新建目录的时候直接在app.json的pages数组中添加新的页面的路径，开发者工具会自动生成新的页面文件夹并初始化里面的四个文件。

本篇文章就写到这里，如有表述不准确之处，欢迎指正，欢迎补充，感谢阅读。