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

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

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": "需要获取您的位置信息以提供服务"
    }
  }
}

• pages字段定义了小程序运行时会加载的页面列表。
• window配置项设置了导航栏和全局样式。
• permission配置用来设置权限提示信息，比如请求地理位置授权。

3. 项目的配置文件介绍

除了app.json之外，项目中还有其他配置文件，如:

• miniprogram.npm.config.json: 如果你的项目使用了npm包，这个文件用于配置NPM依赖的打包规则。
• project.config.json: 微信开发者工具的项目配置文件，包含编译设置、环境变量等，一般由微信开发者工具自动生成，不建议手动修改。

要启动项目，你需要打开微信开发者工具，导入wechat_applet项目，然后点击“编译”或“预览”，在模拟器或手机上查看和调试你的小程序。记得在发布前进行真机测试并完成必要的权限申请和审核。

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