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 >
.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#/