跟我来学小程序（一）项目目录和项目文件介绍

大家好，我是一个爱举铁的程序员Shr。

 

本篇文件介绍小程序项目的目录和项目文件。

 

源码地址：

https://github.com/ShrMus/wechat_xcx/tree/master/demo_20180603

 

一、新建项目

打开微信web开发者工具，选择小程序项目，由于没有新建过项目，打开之后是下图的界面，选择项目目录，填写注册之后获得的AppID，填写项目名称，点击确定。

 

然后就打开了新建的项目，如图所示。

 

二、文件的作用

先说一下项目中出现的文件，文件有四种，js，json，wxml，wxss。

 

大家熟悉的js就是用来交互的了。

 

json是一种数据格式，那这里放的就是数据了。

 

还有wxml和wxss那是干嘛用的，

 

千万不要以为wxml是和xml文件一样，xml文件也是用来存储数据的，但是已经有一种json文件存储数据了。

 

这里的wxml可以理解成html，那wxss就可以理解成css了。

 

三、目录结构介绍

目录结构如下图所示。

 

接下来了解一下各个目录的作用。

 

3.1 pages目录

pages目录里面放的是页面，当前的项目中有两个页面，一个是index.wxml，一个是logs.wxml，每个页面都有对应的wxss和js。

 

3.2 utils目录

utils目录，顾名思义，工具，这里可以放公共的wxss和js等，这样就不用在每个页面做重复的工作了。

 

3.3 app.json

官方文档的说法是对当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。

来看看里面是什么。

 

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  }
}

 

这个文件还有很多其他的属性，我把这些属性都加上去之后的代码如下，由于JSON格式的文件不能用//或者/* */加注释，我就用这种数据格式定义key/value加注释了。

 

{
  "pages注释":"必填。数组类型，每一项都是字符串，来指定小程序由哪些页面组成。每一项代表对应页面的【路径+文件名】信息，数组的第一项代表小程序的初始页面。小程序中新增/减少页面，都需要对 pages 数组进行修改。",
  "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window注释":"选填。对象类型。用于设置小程序的状态栏、导航条、标题、窗口背景色。",
  "window": {
    "backgroundTextStyle注释":"下拉 loading 的样式，仅支持 dark/light，默认值dark",
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor注释":"导航栏背景颜色，如#000000，默认值#000000",
    "navigationBarBackgroundColor": "#000000",
    "navigationBarTitleText注释":"导航栏标题文字内容",
    "navigationBarTitleText": "Shr",
    "navigationBarTextStyle注释": "导航栏标题颜色，仅支持 black/white，默认值white",
    "navigationBarTextStyle": "white",
    "navigationStyle注释": "导航栏样式，仅支持 default/custom。custom ",
    "navigationStyle": "default",
    "backgroundColor注释": "窗口的背景色，默认值#ffffff",
    "backgroundColor": "#eeeeee",
    "enablePullDownRefresh注释": "是否开启下拉刷新，默认值false",
    "enablePullDownRefresh": false,
    "onReachBottomDistance注释": "页面上拉触底事件触发时距页面底部距离，单位为px，默认值50",
    "onReachBottomDistance": "100",
    "backgroundColorTop注释":"顶部窗口的背景色，仅 iOS 支持",
    "backgroundColorTop":"#ffffff",
    "backgroundColorBottom注释":"底部窗口的背景色，仅 iOS 支持",
    "backgroundColorBottom":"#ffffff"
  },
  "tabBar注释": "选填。对象类型。如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。可以理解成页面底部的导航",
  "tabBar": {
    "color注释": "必填。tab 上的文字默认颜色",
    "color": "#000000",
    "selectedColor注释": "必填。tab 上的文字选中时的颜色",
    "selectedColor":"#FF0000",
    "backgroundColor注释": "必填。tab 的背景色",
    "backgroundColor": "#B0B0B0",
    "borderStyle注释": "选填。tabbar上边框的颜色， 仅支持 black/white，默认black",
    "borderStyle": "white",
    "list注释": "必填。list接受一个数组，数组中的每个项都是一个对象",
    "list": [
      {
        "pagePath注释": "必填。页面路径，必须在 pages 中先定义",
        "pagePath": "pages/index/index",
        "text注释": "必填。tab 上按钮文字",
        "text": "首页",
        "iconPath注释": "选填。图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px，当 postion 为 top 时，此参数无效，不支持网络图片",
        "iconPath": "utils/TIM截图20180605012119.png",
        "selectedIconPath注释": "选填。选中时的图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px ，当 postion 为 top 时，此参数无效",
        "selectedIconPath": "utils/TIM截图20180605012210.png"
      },
      {
        "pagePath": "pages/logs/logs",
        "text": "日志",
        "iconPath": "utils/TIM截图20180605012119.png",
        "selectedIconPath": "utils/TIM截图20180605012210.png"
      }
    ],
    "position注释": "选填。可选值 bottom、top，默认bottom，为 top 时，将不会显示 icon",
    "position": "top"
  },
  "networkTimeout注释": "选填。对象类型。可以设置各种网络请求的超时时间。",
  "networkTimeout": {
    "request注释": "选填。wx.request的超时时间，单位毫秒，默认为：60000",
    "request": 20000,
    "connectSocket注释": "选填。wx.connectSocket的超时时间，单位毫秒，默认为：60000",
    "connectSocket": 20000,
    "uploadFile注释": "选填。wx.uploadFile的超时时间，单位毫秒，默认为：60000",
    "uploadFile": 20000,
    "downloadFile注释": "选填。wx.downloadFile的超时时间，单位毫秒，默认为：60000",
    "downloadFile": 20000
  },
  "debug注释": "选填。Boolean类型。可以在开发者工具中开启 debug 模式，在开发者工具的控制台面板，调试信息以 info 的形式给出，其信息有Page的注册，页面路由，数据更新，事件触发 。 可以帮助开发者快速定位一些常见的问题。",
  "debug": true
}

 

看看小程序的页面。

 

将tabBar中的position改成top之后，导航就到页面顶部了，但是图片就没了。

 

这是对全局页面的配置，也可以对单个页面建立一个JSON文件，这样就只配置app.json中的window属性。页面中配置项会覆盖 app.json 的 window 中相同的配置项。

 

3.4 project.config.json

项目的配置文件，对项目进行个性化配置，例如界面颜色、编译配置，打包配置等等。来看看默认是什么。

{
    "description": "项目配置文件。",
    "packOptions": {
        "ignore": []
    },
    "setting": {
        "urlCheck": true,
        "es6": true,
        "postcss": true,
        "minified": true,
        "newFeature": true
    },
    "compileType": "miniprogram",
    "libVersion": "2.0.9",
    "appid": "填你注册小程序账号之后获得的appid",
    "projectname": "demo_20180603",
    "isGameTourist": false,
    "condition": {
        "search": {
            "current": -1,
            "list": []
        },
        "conversation": {
            "current": -1,
            "list": []
        },
        "game": {
            "currentL": -1,
            "list": []
        },
        "miniprogram": {
            "current": -1,
            "list": []
        }
    }
}

 

具体配置详情请看官方文档，我就不一一写注释了。

https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html

 

3.5 app.wxss

来看看里面有什么。

/**app.wxss**/
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 200rpx 0;
  box-sizing: border-box;
}

 

CSS样式，这个能看懂，WXSS有CSS大部分特性，它对CSS进行了扩充和修改。这个app.wxss是公共样式表。

 

3.6 app.js

来看看里面是什么。

//app.js
App({
  onLaunch: function () {
    // 展示本地存储能力
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)
    // 登录
    wx.login({
      success: res => {
        // 发送 res.code 到后台换取 openId, sessionKey, unionId
      }
    })
    // 获取用户信息
    wx.getSetting({
      success: res => {
        if (res.authSetting['scope.userInfo']) {
          // 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
          wx.getUserInfo({
            success: res => {
              // 可以将 res 发送给后台解码出 unionId
              this.globalData.userInfo = res.userInfo
              // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
              // 所以此处加入 callback 以防止这种情况
              if (this.userInfoReadyCallback) {
                this.userInfoReadyCallback(res)
              }
            }
          })
        }
      }
    })
  },
  globalData: {
    userInfo: null
  }
})

 

App() 函数用来注册一个小程序。接受一个 object 参数，其指定小程序的生命周期函数等。onLaunch监听小程序初始化，当小程序初始化完成时，会触发 onLaunch（全局只触发一次）。

 

3.6.1 object参数说明

属性	类型	描述	触发时机
onLaunch	Function	生命周期函数--监听小程序初始化	当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
onShow	Function	生命周期函数--监听小程序显示	当小程序启动，或从后台进入前台显示，会触发 onShow
onHide	Function	生命周期函数--监听小程序隐藏	当小程序从前台进入后台，会触发 onHide
onError	Function	错误监听函数	当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息
onPageNotFound	Function	页面不存在监听函数	当小程序出现要打开的页面不存在的情况，会带上页面信息回调该函数，详见下文
其他	Any		开发者可以添加任意的函数或数据到 Object 参数中，用 this 可以访问

 

3.6.2 小程序前台、后台的定义

当用户点击左上角关闭，或者按了设备 Home 键离开微信，小程序并没有直接销毁，而是进入了后台；当再次进入微信或再次打开小程序，又会从后台进入前台。

 

3.6.3 小程序的生命周期

小程序启动会有两种情况，一种是「冷启动」，一种是「热启动」。 假如用户已经打开过某小程序，然后在一定时间内再次打开该小程序，此时无需重新启动，只需将后台态的小程序切换到前台，这个过程就是热启动；冷启动指的是用户首次打开或小程序被微信主动销毁后再次打开的情况，此时小程序需要重新加载启动。

 

小程序销毁的情况，当小程序进入后台，客户端会维持一段时间的运行状态，超过一定时间后（目前是5分钟）会被微信主动销毁

当短时间内（5s）连续收到两次以上收到系统内存告警，会进行小程序的销毁

 

修改app.js

//app.js
App({
  onLaunch: function () {
    console.log("小程序onLaunch");
    // 展示本地存储能力
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)
    // 登录
    wx.login({
      success: res => {
        // 发送 res.code 到后台换取 openId, sessionKey, unionId
      }
    })
    // 获取用户信息
    wx.getSetting({
      success: res => {
        if (res.authSetting['scope.userInfo']) {
          // 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
          wx.getUserInfo({
            success: res => {
              // 可以将 res 发送给后台解码出 unionId
              this.globalData.userInfo = res.userInfo
              // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
              // 所以此处加入 callback 以防止这种情况
              if (this.userInfoReadyCallback) {
                this.userInfoReadyCallback(res)
              }
            }
          })
        }
      }
    })
  },
  onShow: function (options) {
    console.log("小程序onShow");
  },
  onHide: function () {
    console.log("小程序onHide");
  }, 
  onError: function (msg) {
    console.log(msg)
  },
  globalData: {
    userInfo: null
  }
})

 

我在后面加了几个方法，然后看控制台打印的内容。

 

3.6.4 onLaunch, onShow 参数​

字段	类型	说明
path	String	打开小程序的路径
query	Object	打开小程序的query
scene	Number	打开小程序的场景值
shareTicket	String	shareTicket，详见 获取更多转发信息
referrerInfo	Object	当场景为由从另一个小程序或公众号或App打开时，返回此字段
referrerInfo.appId	String	来源小程序或公众号或App的 appId，详见下方说明
referrerInfo.extraData	Object	来源小程序传过来的数据，scene=1037或1038时支持

 

修改onShow方法，加上参数，然后打印参数。

  onShow: function (options) {
    console.log("小程序onShow");
    console.log(options);
  },

 

看看控制台。

 

其他的属性就看官方文档吧。

https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/app.html

 

3.6.5 注意事项

App() 必须在app.js中注册，且不能注册多个。

不要在定义于App()内的函数中调用 getApp()使用 this就可以拿到app实例。

不要在onLaunch的时候调用 getCurrentPages()，此时page还没有生成。

通过getApp()获取实例之后，不要私自调用生命周期函数。

 

3.6.6 场景值

刚刚控制台打印的options参数中的scene就是一个场景值，它表示在发现栏小程序主入口打开小程序。其他还有扫描二维码进入小程序等等场景。详见：

https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/scene.html

 

3.7 index.js

index.js当中有一个Page()，App()函数用来注册一个小程序。Page()函数就是用来注册一个页面。

 

接受一个object 参数，其指定页面的初始数据、生命周期函数、事件处理函数等。

 

3.7.1 object参数说明​

属性	类型	描述
data	Object	页面的初始数据
onLoad	Function	生命周期函数--监听页面加载
onReady	Function	生命周期函数--监听页面初次渲染完成
onShow	Function	生命周期函数--监听页面显示
onHide	Function	生命周期函数--监听页面隐藏
onUnload	Function	生命周期函数--监听页面卸载
onPullDownRefresh	Function	页面相关事件处理函数--监听用户下拉动作
onReachBottom	Function	页面上拉触底事件的处理函数
onShareAppMessage	Function	用户点击右上角转发
onPageScroll	Function	页面滚动触发事件的处理函数
onTabItemTap	Function	当前是 tab 页时，点击 tab 时触发
其他	Any	开发者可以添加任意的函数或数据到 object 参数中，在页面的函数中用 this 可以访问

 

3.7.2 页面的生命周期

onLoad: 页面加载，一个页面只会调用一次，可以在 onLoad 中获取打开当前页面所调用的 query 参数。

 

onShow: 页面显示，每次打开页面都会调用一次。

 

onReady: 页面初次渲染完成，一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。对界面的设置如wx.setNavigationBarTitle，在onReady之后设置。

 

onHide: 页面隐藏，当navigateTo或底部tab切换时调用。

 

onUnload: 页面卸载，当redirectTo或navigateBack的时候调用。

 

3.8 index.wxml

看看里面有什么。

 

<view class="container">
  <view class="userinfo">
    <button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 button>
    <block wx:else>
      <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover">image>
      <text class="userinfo-nickname">{{userInfo.nickName}}text>
    block>
  view>
  <view class="usermotto">
    <text class="user-motto">{{motto}}text>
  view>
view>

 

看不太明白，WXML有属于自己的组件，事件绑定，后面再介绍。你可以认为它就是小程序的HTML，但是它有不同于HTML的地方。

 

四、总结

小程序和Web中的网页相似，网页是用HTML，CSS，JS的组合，小程序是WXML，WXSS，JS，数据传输用JSON。

 

我在配置app.json的时候，window中的backgroundColor配置无效。

 

tabBar设置position为top时，将不会显示 icon

 

tabBar 中的 list 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序。

 

各个文件的内容和作用就介绍完了。