微信小程序项目快速入门指南-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00771/article/details/141214932

微信小程序项目快速入门指南

wechat_appletOpen-Shop小程序商城，包括：分销（支持三级）、团购（拼多多模式）、秒杀、优惠券、等功能，前后端全部开源。做全网最开源、最稳定、功能做强大的开源小程序商城。项目地址:https://gitcode.com/gh_mirrors/we/wechat_applet

1. 项目目录结构及介绍

在wechat_applet项目中，主要的目录结构如下：

wechat_applet/
├── app.js       # 应用级逻辑代码
├── app.json     # 应用配置文件
├── components/  # 自定义组件目录
│   └── example_component/  # 示例自定义组件
│       ├── index.js        # 组件逻辑代码
│       ├── index.wxml       # 视图层模板
│       └── index.wxss       # 样式表
├── pages/         # 页面目录
│   ├── home/         # 首页
│   │   ├── index.js    # 页面逻辑代码
│   │   ├── index.wxml  # 视图层模板
│   │   └── index.wxss  # 样式表
│   └── ...
└── static/        # 静态资源目录（图片、字体等）
└── utils/          # 工具函数库

解释：

app.js: 应用程序的主要入口文件，包含全局方法和生命周期事件。
app.json: 应用配置文件，用于设置应用的基础信息、页面列表以及全局样式等。
components/: 存放自定义组件的目录，每个组件有自己的子目录，包括逻辑代码、视图模板和样式表。
pages/: 包含所有页面的目录，每个页面有各自的逻辑代码、视图模板和样式表。
static/: 放置不参与编译的静态资源，如图片、图标等。
utils/: 存放通用的工具函数，供各页面和组件调用。

2. 项目的启动文件介绍

`app.js`

在app.js中，你会看到一个基础的微信小程序应用的初始化代码，例如注册应用程序、声明全局变量、监听生命周期函数等。示例代码可能如下：

// 引入API库
import wx from 'wx'

App({
  // 应用启动时执行
  onLaunch: function() {
    console.log('App Launch')
  },
  
  // 当前页面进入可视区
  onShow: function() {
    console.log('App Show')
  },
  
  // 全局共享数据
  globalData: {
    someKey: 'someValue'
  }
})

onLaunch和onShow是微信小程序生命周期中的两个重要回调函数，通常在这里进行初始化操作或者处理用户登录状态。

`app.json`

app.json是一个JSON文件，用于配置整个小程序的基本属性，如应用名称、图标、页面路径等。以下是app.json的一个基本示例：

{
  "name": "MyWechatApplet",
  "description": "我的微信小程序示例",
  "pages": [
    "pages/home/index",
    "pages/about/index"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "小程序"
  },
  "permission": {
    "scope.userLocation": {
      "desc": "需要获取您的位置信息以提供服务"
    }
  }
}