微信小程序（1）——项目基础架构及页面组成结构

浅浅的花香味﹌ 2022-05-19 01:15 86阅读 0赞

从2017年年初微信小程序出世以来，因为它不用安装，不占内存，即点即用等优良特性，受到了广大人民群众的喜爱，越来越多的企业、组织和团体把目光投向了微信小程序的开发，微信小程序的热度也随之水涨船高。

▍默认基础结构（自动创建）

![70][]

【注意】app.js、app.json、app.wxss作用于全局所有的页面。

1、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
      }
    })

2、app.json：小程序公共设置，对微信小程序进行全局配置，决定页面文件的路径【pages】、窗口表现【window】、设置网络超时时间【networkTimeout】、设置多 tab【tabBar】 等。

【注意】json文件中不能添加注释，否则会报错。

{
      "pages": [
        "pages/index/index",
        "pages/logs/logs"
      ],
      "window": {
        "backgroundTextStyle": "light",
        "navigationBarBackgroundColor": "#fff",
        "navigationBarTitleText": "我的小程序",
        "navigationBarTextStyle": "black",
        "backgroundColor": "#fff",
        "enablePullDownRefresh": false,
        "onReachBottomDistance": 50
      },
      "tabBar": {
        "color": "#000",
        "selectedColor": "red",
        "backgroundColor": "#fff",
        "borderStyle": "white",
        "list": [
          {
            "pagePath": "pages/index/index",
            "text": "首页"
          },
          {
            "pagePath": "pages/logs/logs",
            "text": "日志"
          }
        ]
      },
      "networkTimeout": {
        "request": 10000,
        "connectSocket": 10000,
        "uploadFile": 10000,
        "downloadFile": 10000
      },
      "debug": true
    }

【pages】页面文件的路径。**数组的第一项代表小程序的初始页面。小程序中新增/减少页面，都需要对 pages 数组进行修改。**

【window】窗口表现。

![70 1][]

【tabBar】底部导航栏。**只能配置最少2个、最多5个 tab**，tab 按数组的顺序排序。

![70 2][]

其中 list 接受一个数组，数组中的每个项都是一个对象，其属性值如下：

![70 3][]

【networkTimeout】设置网络超时时间。

![70 4][]

【debug】是否开启调试模式。**true**或者**false**。

3、app.wxss：小程序公共样式表（类似于h5的css文件，支持class、id等选择器）。

/**app.wxss**/
    
    /* 引入框架方式，非必需 */
    @import "resources/styles/weui.wxss";
    
    .container {
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      padding: 200rpx 0;
      box-sizing: border-box;
    }

4、project.config.json：项目配置文件（若非必要，请勿修改配置）。

{
    	"description": "项目配置文件。",
    	"packOptions": {
    		"ignore": []
    	},
    	"setting": {
    		"urlCheck": true,
    		"es6": true,
    		"postcss": true,
    		"minified": true,
    		"newFeature": true
    	},
    	"compileType": "miniprogram",
    	"libVersion": "2.0.4",
    	"appid": "你的APPID",
    	"projectname": "你的项目名",
    	"isGameTourist": false,
    	"condition": {
    		"search": {
    			"current": -1,
    			"list": []
    		},
    		"conversation": {
    			"current": -1,
    			"list": []
    		},
    		"game": {
    			"currentL": -1,
    			"list": []
    		},
    		"miniprogram": {
    			"current": -1,
    			"list": []
    		}
    	}
    }

▍页面组成及结构

**创建的页面路径必须添加到app.json的page中。**

**一个页面一般由wxml、js、wxss、json四个文件组成，四个文件必须同名。**

【建议】可以直接在app.json的page中添加你想要添加的页面，此时页面的4个文件会自动生成，不需要手动创建。

1、wxml：必要文件。页面结构，其标签与H5所使用的标签有一定的区别。例如：H5主要的容器标签是<div></div>，但是在wxml文件中没有div标签，其主要容器标签为<view></view>。参考示例：

<view class='contain'>
      <text>文本控件</text>
    </view>

2、js：必要文件。页面中的数据以及函数方法处理。

3、wxss：非必要文件。页面的样式文件。当页面wxss文件配置的样式与app.wxss配置的样式出现冲突时，以页面wxss文件配置的样式为准。

4、json：非必要文件。在json文件中仅能配置下面表格中的参数（配置详情可参考app.json的【window】），当页面配置的json文件与app.json出现冲突时，以页面配置的json文件。

![70 5][]

![关注微信公众号：爱唱歌的蜗牛先生][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lfZG9udF9rbm93X2E_size_16_color_FFFFFF_t_70]

[70]: /images/20220519/8b61d155f23d48ad8f8e3bb659d57c46.png
[70 1]: /images/20220519/5c4484ff716c48caa68cb5423b873da2.png
[70 2]: /images/20220519/f84b1130cba342b2a88fe01867e63a6f.png
[70 3]: /images/20220519/40207278a92f4da18439ed6aa69fcde0.png
[70 4]: /images/20220519/8599b4ef9c174e2e9d854efe37974565.png
[70 5]: /images/20220519/415dd3ea649b4868af7f8e2eeb70cd6a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lfZG9udF9rbm93X2E_size_16_color_FFFFFF_t_70]: /images/20220519/2c558f1b866c4f1e9224027600cb05be.png