WeApp-HiApp 微信小程序开发教程

WeApp-HiApp 微信小程序开发教程

weapp-hiappHiApp 微信小程序版项目地址:https://gitcode.com/gh_mirrors/we/weapp-hiapp

1、项目的目录结构及介绍

WeApp-HiApp 项目的目录结构如下：

weapp-hiapp/
├── src/
│   ├── components/
│   ├── pages/
│   ├── app.wpy
│   ├── config.js
│   ├── index.template.html
├── .editorconfig
├── .eslintignore
├── .eslintrc.js
├── .gitattributes
├── .gitignore
├── .prettierrc
├── .wepyignore
├── LICENSE.md
├── README.md
├── package-lock.json
├── package.json
├── project.config.json
├── wepy.config.js

目录结构介绍

• src/：项目的源代码目录。
  • components/：存放小程序的自定义组件。
  • pages/：存放小程序的页面文件。
  • app.wpy：小程序的入口文件。
  • config.js：项目的配置文件。
  • index.template.html：小程序的模板文件。
• .editorconfig：编辑器配置文件。
• .eslintignore：ESLint 忽略配置文件。
• .eslintrc.js：ESLint 配置文件。
• .gitattributes：Git 属性配置文件。
• .gitignore：Git 忽略配置文件。
• .prettierrc：Prettier 代码格式化配置文件。
• .wepyignore：Wepy 忽略配置文件。
• LICENSE.md：项目许可证文件。
• README.md：项目说明文件。
• package-lock.json：npm 依赖锁定文件。
• package.json：npm 项目配置文件。
• project.config.json：微信开发者工具项目配置文件。
• wepy.config.js：Wepy 框架配置文件。

2、项目的启动文件介绍

项目的启动文件是 src/app.wpy，它是小程序的入口文件，包含了小程序的全局配置和生命周期函数。

app.wpy 文件内容示例

import wepy from 'wepy';

export default class extends wepy.app {
  config = {
    pages: [
      'pages/index',
      'pages/logs'
    ],
    window: {
      backgroundTextStyle: 'light',
      navigationBarBackgroundColor: '#fff',
      navigationBarTitleText: 'WeChat',
      navigationBarTextStyle: 'black'
    }
  };

  onLaunch() {
    console.log('App Launch');
  }

  onShow() {
    console.log('App Show');
  }

  onHide() {
    console.log('App Hide');
  }
}

启动文件介绍

• config：小程序的全局配置，包括页面路径、窗口表现等。
• onLaunch：小程序启动时的回调函数。
• onShow：小程序显示时的回调函数。
• onHide：小程序隐藏时的回调函数。

3、项目的配置文件介绍

项目的配置文件主要包括 project.config.json 和 wepy.config.js。

project.config.json 文件内容示例

{
  "miniprogramRoot": "dist/",
  "projectname": "weapp-hiapp",
  "description": "HiApp 微信小程序版",
  "appid": "touristappid",
  "setting": {
    "urlCheck": true,
    "es6": false,
    "postcss": false,
    "minified": false
  },
  "compileType": "miniprogram"
}

project.config.json 配置文件介绍

• miniprogramRoot：小程序的输出目录。
• projectname：项目名称。
• description：项目描述。
• appid：小程序的 AppID。
• setting：编译设置，包括 URL 检查、ES6 转 ES5、PostCSS、代码压缩等。
• compileType：编译类型，这里是小程序。

wepy.config.js 文件内容示例

weapp-hiappHiApp 微信小程序版项目地址:https://gitcode.com/gh_mirrors/we/weapp-hiapp