微信小程序开发【三】-- 项目结构概述

老六聊编程

已于 2023-04-25 23:32:51 修改

阅读量440

点赞数 2

分类专栏：微信小程序开发文章标签：微信小程序

于 2023-04-07 12:45:34 首次发布

本文链接：https://blog.csdn.net/u011646838/article/details/130001727

版权

微信小程序开发专栏收录该内容

10 篇文章 3 订阅

订阅专栏

系列文章目录

微信小程序开发【一】-- 初识小程序传送门
微信小程序开发【二】-- 小程序入门传送门
微信小程序开发【三】-- 项目结构概述传送门
微信小程序开发【四】-- 配置详解传送门
微信小程序开发【五】-- wxml详解传送门
微信小程序开发【六】-- wxss详解传送门
微信小程序开发【七】-- js详解传送门
微信小程序开发【八】-- 页面栈和模块化传送门
微信小程序开发【九】-- 初识小程序云开发传送门
微信小程序开发【十】-- 云函数/云数据库/云存储传送门

一、项目目录

1. 代码总体结构

在这里插入图片描述
在小程序项目的根目录下面包含3个app开头的文件（app.js、app.json、app.wxss）以及pages目录与utils目录。其中pages目录存放了2个页面（index和log）的构成文件。每个页面都是一个目录，目录名就是唯一的页面名，其下由以页面名为前缀的2~4个文件组成。
在这里插入图片描述
左侧的3个app文件必须放在小程序根目录下面，其他文件由开发者自由控制。

2. 小程序根目录代码结构

app.js是小程序的脚本代码，用来监听并处理小程序的生命周期、声明全局变量、调用框架提供的丰富API等。

app.js代码示例

// app.js
App({
  onLaunch() {
    // 展示本地存储能力
    const logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)

    // 登录
    wx.login({
      success: res => {
        // 发送 res.code 到后台换取 openId, sessionKey, unionId
      }
    })
  },
  globalData: {
    userInfo: null
  }
})

app.json是对整个小程序的全局配置，配置小程序是由哪些页面组成，配置小程序的窗口背景颜色、配置导航条样式、配置默认标题等。（json文件中不可以加注释）

app.json代码示例

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle": "black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json",
  "lazyCodeLoading": "requiredComponents"
}

app.wxss是整个小程序的公共样式表。

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;
}

其中app.js和app.json是必需的。

3. 页面代码结构

小程序页面是由同路径下同名不同后缀的2~4个文件组成：

.js后缀的文件是脚本文件。

index.js代码示例

// index.js
// 获取应用实例
const app = getApp()

Page({
  data: {
    motto: 'Hello World',
    userInfo: {},
    hasUserInfo: false,
    canIUse: wx.canIUse('button.open-type.getUserInfo'),
    canIUseGetUserProfile: false,
    canIUseOpenData: wx.canIUse('open-data.type.userAvatarUrl') && wx.canIUse('open-data.type.userNickName') // 如需尝试获取用户信息可改为false
  },
  // 事件处理函数
  bindViewTap() {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  onLoad() {
    if (wx.getUserProfile) {
      this.setData({
        canIUseGetUserProfile: true
      })
    }
  },
  getUserProfile(e) {
    // 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认，开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
    wx.getUserProfile({
      desc: '展示用户信息', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
      success: (res) => {
        console.log(res)
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
      }
    })
  },
  getUserInfo(e) {
    // 不推荐使用getUserInfo获取用户信息，预计自2021年4月13日起，getUserInfo将不再弹出弹窗，并直接返回匿名的用户个人信息
    console.log(e)
    this.setData({
      userInfo: e.detail.userInfo,
      hasUserInfo: true
    })
  }
})

.json后缀的文件是配置文件。（如存在，会层叠覆盖app.json的window中相同的配置项，json文件中不可以加注释）
.wxss后缀的样式表文件。（如存在，会层叠覆盖app.wxss中的样式规则）

index.wxss代码示例

/**index.wxss**/
.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #aaa;
}

.userinfo-avatar {
  overflow: hidden;
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
}

.usermotto {
  margin-top: 200px;
}

.wxml后缀的文件是页面结构文件。

index.wxml代码示例

<!--index.wxml-->
<view class="container">
  <view class="userinfo">
    <block wx:if="{{canIUseOpenData}}">
      <view class="userinfo-avatar" bindtap="bindViewTap">
        <open-data type="userAvatarUrl"></open-data>
      </view>
      <open-data type="userNickName"></open-data>
    </block>
    <block wx:elif="{{!hasUserInfo}}">
      <button wx:if="{{canIUseGetUserProfile}}" bindtap="getUserProfile"> 获取头像昵称 </button>
      <button wx:elif="{{canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>
      <view wx:else> 请使用1.4.4及以上版本基础库 </view>
    </block>
    <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>

其中.js文件和.wxml文件时必需的。

二、app.js和page.js

.js文件是页面逻辑处理层。我们可以按需在app.js和page.js中添加程序在生命周期的每个阶段相应的事件。如在页面的onLoad时进行数据的下载，onShow的时候进行数据的更新。

app.js

App({
  onLaunch: function(){
    // 启动时执行的初始化工作
  },
  onShow: function(){
    // 小程序从后台进入前台时，触发执行的操作
  },
  onHide: function(){
    // 小程序从前台进入后台时，触发执行的操作
  },
  globalConf: {
    indexDate:'',
    matchdata:''
  },
  dataCache:[],
  globalData:'I am global data'
})

page.js

Page({
  Data:{
    Text:'This is page data.'
  },
  onLoad: function(options){
    // 页面加载时执行的初始化工作
  },
  onReady: function(){
    // 页面就绪后触发执行的操作
  },
  onShow: function(){
    // 页面打开时，触发执行的操作
  },
  onHide: function(){
    // 页面隐藏时，触发执行的操作
  },
  onUnload: function(){
    // 页面关闭时，触发执行的操作
  },
  //Event Handler
  viewTap: function(){
    this.setData({
      text:'set some data for updating view.'
    })
  },
})

app.js文件中有3个生命周期函数：onLaunch、onShow、onHide（还有一个onError，程序出现错误时触发）
page.js文件中有5个生命周期函数：onLoad、onReady、onShow、onHide、onUnload。

三、生命周期

完整的小程序执行生命周期
一个page的生命周期从onLoad开始，整个生命周期内onLoad、onReady、onUnload这三个时间仅执行一次，而onHide和onShow在每次页面隐藏和显示时都会触发。
当用户手动触发左上角的退出箭头时，小程序仅触发app.onHide，下次进入小程序时会触发app.onShow以及当前page.onShow。
仅当小程序在后台运行超过一定时间未被唤起、或者用户手动在小程序的控制栏里点击退出程序、或者小程序内存占用过大被关闭时，小程序将被销毁，会触发page.onUnload事件。

四、开发步骤

创建小程序实例（定义、配置及页面执行关联）。即编写3个app前缀的文件，它们共通描述了整个小程序主体逻辑、生命周期及页面构成、样式等。小程序实例将由appServer线程运行。
创建页面（页面结构与事务处理逻辑）。在小程序中一个完整的页面（page）是由.js、.json、.wxml、.wxss这四个文件组成。小程序页面由view线程执行。