wepy项目创建和打包

创建项目

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

<style lang="less">
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
}
</style>

<script>
import wepy from 'wepy'

//页面开发中用到async/await需要引入，否则编译会报错
import 'wepy-async-function'

import { setStore } from 'wepy-redux'
import configStore from './store'

const store = configStore()
setStore(store)

export default class extends wepy.app {
  config = {
    pages: [ //路由配置
      'pages/index',
      'pages/news',
      'pages/my'
    ],
    window: { //导航栏配置
      backgroundTextStyle: 'light',
      navigationBarBackgroundColor: 'red',
      navigationBarTitleText: 'WeChat',
      navigationBarTextStyle: 'black'
    },
    tabBar:{ //底部栏配置
      "color": "#a9b7b7", 
      "selectedColor": "#11cd6e", 
      "borderStyle":"black",
　    "backgroundColor": "#ffffff",  
      "list": [
        {
          "pagePath": "pages/index",
          "text": "首页"
        },
        {
          "pagePath": "pages/news",
          "text": "新闻"
        },
        {
          "pagePath": "pages/my",
          "text": "我的"
        }
      ]
    }
  }
  //全局参数配置
  globalData = {
    userInfo: null
  }
  //拦截器配置
  constructor () {
    super()
    this.use('requestfix')
  }
  //页面加载
  onLaunch() {
    this.testAsync()
  }

  sleep (s) {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve('promise resolved')
      }, s * 1000)
    })
  }

  async testAsync () {
    const data = await this.sleep(3)
  }
  //获取用户信息
  getUserInfo(cb) {
    const that = this
    if (this.globalData.userInfo) {
      return this.globalData.userInfo
    }
    wepy.getUserInfo({
      success (res) {
        that.globalData.userInfo = res.userInfo
        cb && cb(res.userInfo)
      }
    })
  }
}
</script>

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目录发布
具体编译过程如下：

参考文章（小程序官方站点）：https://tencent.github.io/wepy/document.html#/