WePY WeUI 示例项目使用教程

姬如雅Brina

于 2024-08-19 09:48:02 发布

阅读量389

点赞数 3

本文链接：https://blog.csdn.net/gitblog_00096/article/details/141312005

版权

WePY WeUI 示例项目使用教程

wepy-weui-demoWeUI 在 WePY 中的使用示例，同一份代码可以运行在小程序上和Web上项目地址:https://gitcode.com/gh_mirrors/we/wepy-weui-demo

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

wepy-weui-demo/
├── src/
│   ├── components/
│   ├── pages/
│   ├── app.wpy
│   ├── index.template.html
│   ├── package.json
│   ├── wepy.config.js
├── dist/
├── node_modules/
├── .editorconfig
├── .eslintignore
├── .eslintrc.js
├── .gitignore
├── LICENSE
├── README.md

src/：源代码目录，包含组件、页面和应用配置文件。
- components/：存放项目中使用的组件。
- pages/：存放项目中的页面。
- app.wpy：小程序的入口文件，包含全局配置和生命周期函数。
- index.template.html：Web 版本的入口模板文件。
- package.json：项目的依赖和脚本配置文件。
- wepy.config.js：WePY 项目的配置文件。
dist/：编译后的代码目录，用于小程序开发者工具导入。
node_modules/：项目的依赖包目录。
.editorconfig、.eslintignore、.eslintrc.js、.gitignore：编辑器和代码风格配置文件。
LICENSE：项目许可证文件。
README.md：项目说明文档。

2. 项目的启动文件介绍

`app.wpy`

app.wpy 是小程序的入口文件，包含全局配置和生命周期函数。以下是主要内容：

import wepy from '@wepy/core';

wepy.app({
  config: {
    pages: [
      'pages/index',
      'pages/logs'
    ],
    window: {
      backgroundTextStyle: 'light',
      navigationBarBackgroundColor: '#fff',
      navigationBarTitleText: 'WePY WeUI Demo',
      navigationBarTextStyle: 'black'
    }
  },
  onLaunch() {
    console.log('App Launch');
  },
  onShow() {
    console.log('App Show');
  },
  onHide() {
    console.log('App Hide');
  }
});

config：小程序的全局配置，包括页面路径、窗口表现等。
onLaunch、onShow、onHide：小程序的生命周期函数。

3. 项目的配置文件介绍

`wepy.config.js`

wepy.config.js 是 WePY 项目的配置文件，用于配置编译选项、插件等。以下是主要内容：

const path = require('path');

module.exports = {
  wpyExt: '.wpy',
  eslint: true,
  cliLogs: !process.env.NODE_ENV === 'production',
  build: {
    web: {
      htmlTemplate: path.join('src', 'index.template.html'),
      htmlOutput: path.join('dist', 'index.html'),
      jsOutput: path.join('dist', 'web', 'index.js')
    }
  },
  resolve: {
    alias: {
      counter: path.join(__dirname, 'src', 'components', 'counter')
    },
    modules: ['node_modules']
  },
  plugins: []
};