wepy项目创建和打包

「爱情、让人受尽委屈。」 2022-04-17 07:10 352阅读 0赞

## 创建项目 ##

1.全局安装  
npm install @wepy/cli -g  
2.新建项目目录，生成Demo开发项目  
wepy init standard myproject  
3.切换至项目目录  
cd myproject  
4.安装依赖  
npm install  
5.开启实时编译  
wepy build --watch  
生成如下的项目目录：

├── dist                   小程序运行代码目录（该目录由WePY的build指令自动编译生成，请不要直接修改该目录下的文件）
    ├── node_modules           
    ├── src                    代码编写的目录（该目录为使用WePY后的开发目录）
    |   ├── components         WePY组件目录（组件不属于完整页面，仅供完整页面或其他组件引用）
    |   |   ├── com_a.wpy      可复用的WePY组件a
    |   |   └── com_b.wpy      可复用的WePY组件b
    |   ├── pages              WePY页面目录（属于完整页面）
    |   |   ├── index.wpy      index页面（经build后，会在dist目录下的pages目录生成index.js、index.json、index.wxml和index.wxss文件）
    |   |   └── other.wpy      other页面（经build后，会在dist目录下的pages目录生成other.js、other.json、other.wxml和other.wxss文件）
    |   └── app.wpy            小程序配置项（全局数据、样式、声明钩子等；经build后，会在dist目录下生成app.js、app.json和app.wxss文件）
    └── package.json           项目的package配置

## 配置文件 ##

**入口文件配置app.wpy**

**wpy模块中的属性**

export default class Index @extends wepy.page{
        customData = {}  // 自定义数据
        customFunction ()　{}  //自定义方法
        onLoad () {}  // 在Page和Component共用的生命周期函数
        onShow () {}  // 只在Page中存在的页面生命周期函数
        config = {};  // 只在Page实例中存在的配置数据，对应于原生的page.json文件
        data = {};  // 页面所需数据均需在这里声明，可用于模板数据绑定
        components = {};  // 声明页面中所引用的组件，或声明组件中所引用的子组件
        mixins = [];  // 声明页面所引用的Mixin实例
        computed = {};  // 声明计算属性
        watch = {};  // 声明数据watcher监听器
        methods = {};  // 声明页面wxml中标签的事件处理函数。注意，此处只用于声明页面wxml中标签的bind、catch事件，自定义方法需以自定义方法的方式声明
        events = {};  // 存放响应组件之间通过broadcast、emit、$invoke所传递的事件的函数
    }

## 打包项目 ##

类VUE  
开发环境为  
npm run dev 实时监听文件改动  
正式环境为  
npm run build  
将开发的项目编译打包到dist目录发布  
具体编译过程如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDk3MDk4Nw_size_16_color_FFFFFF_t_70]  
参考文章（小程序官方站点）：https://tencent.github.io/wepy/document.html\#/

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDk3MDk4Nw_size_16_color_FFFFFF_t_70]: /images/20220417/3cd9c004df4a40c68be403fe99fc1367.png