微信小程序組件化開發(fā)框架WePY
2021-07-26 10:10:52

?

wepy-CLI
安裝

npm install -g wepy-cli
wepy init standard my-project

https://github.com/Tencent/wepy

特性：

• 類Vue開發(fā)風(fēng)格

• 支持自定義組件開發(fā)

• 支持引入NPM包

• 支持Promise

• 支持ES2015+特性，如Async Functions

• 支持多種編譯器，Less/Sass/Stylus/PostCSS、Babel/Typescript、Pug

• 支持多種插件處理，文件壓縮，圖片壓縮，內(nèi)容替換等

• 支持 Sourcemap，ESLint等

• 小程序細(xì)節(jié)優(yōu)化，如請求列隊，事件優(yōu)化等

Demo

<style lang="less">
    @color: #4D926F;
    .num {
        color: @color;
    }
</style>
<template>
<div class="container">
<div class="num" @tap="num++">
      {{num}}
</div>
<div>{{text}}</div>
<input v-model="text"></input>
</div>
</template>
<config>
{
  usingComponents: {
    customCompoent: '@/components/customComponent',
    vendorComponent: 'module:vendorComponent'
  }
}
</config>

<script>
import wepy from '@wepy/core';

  wepy.page({
data: {
num: 0,
text: 'Hello World',
    },
  });
</script>

npm install @wepy/cli@next -g

wepy init standard myproject

cd myproject
npm install

wepy build --watch

Usage: init <template-name> [project-name]

  generate a new project from a template


  Options:

    -c --clone  use git clone
    --offline   use cached template
    -h, --help  output usage information

  Example:

# create a new project with an official template
  $ wepy init standard my-project

# create a new project straight from a github template
  $ wepy init username/repo my-project

image.png

?

查看官方、第三方模板資源

Usage: list [options]

list available official templates


  Options:

    -g, --github  list all registered github projects
    -h, --help    output usage information

image.png

Usage: build [options]

  build your project


  Options:

    -f, --file <file>      待編譯wpy文件
    -s, --source <source>  源碼目錄
    -t, --target <target>  生成代碼目錄
    -o, --output <type>    編譯類型：web，weapp。默認(rèn)為weapp
    -p, --platform <type>  編譯平臺：browser, wechat，qq。默認(rèn)為browser
    -w, --watch            監(jiān)聽文件改動
    --no-cache             對于引用到的文件，即使無改動也會再次編譯
    -h, --help             output usage information

升級wepy-cli

Usage: upgrade [options]

  upgrade to the latest version


  Options:

    --cli   upgrade wepy-cli
    --wepy  upgrade wepy
    -h, --help  output usage information

切換至項目目錄

cd myproject

安裝依賴

npm  install

開啟實(shí)時編譯

wepy build --watch

├── dist                   小程序運(yùn)行代碼目錄（該目錄由WePY的build指令自動編譯生成，請不要直接修改該目錄下的文件）
├── node_modules
├── src                    代碼編寫的目錄（該目錄為使用WePY后的開發(fā)目錄）
|   ├── components         WePY組件目錄（組件不屬于完整頁面，僅供完整頁面或其他組件引用）
|   |   ├── com_a.wpy      可復(fù)用的WePY組件a
|   |   └── com_b.wpy      可復(fù)用的WePY組件b
|   ├── pages              WePY頁面目錄（屬于完整頁面）
|   |   ├── index.wpy      index頁面（經(jīng)build后，會在dist目錄下的pages目錄生成index.js、index.json、index.wxml和index.wxss文件）
|   |   └── other.wpy      other頁面（經(jīng)build后，會在dist目錄下的pages目錄生成other.js、other.json、other.wxml和other.wxss文件）
|   └── app.wpy            小程序配置項（全局?jǐn)?shù)據(jù)、樣式、聲明鉤子等；經(jīng)build后，會在dist目錄下生成app.js、app.json和app.wxss文件）
└── package.json           項目的package配置

版本init新生成的代碼包會在根目錄包含project.config.json文件

如果存在，使用微信開發(fā)者工具-->添加項目，項目目錄請選擇項目根目錄即可根據(jù)配置完成項目信息自動配置。

如果不存在，建議手動創(chuàng)建該文件后再添加項目。project.config.json文件內(nèi)容如下：

{
"description": "project description",
"setting": {
"urlCheck": true,
"es6": false,
"postcss": false,
"minified": false
  },
"compileType": "miniprogram",
"appid": "touristappid",
"projectname": "Project name",
"miniprogramRoot": "./dist"
}

es6: 對應(yīng)關(guān)閉ES6轉(zhuǎn)ES5選項，關(guān)閉。重要：未關(guān)閉會運(yùn)行報錯。

postcss: 對應(yīng)關(guān)閉上傳代碼時樣式自動補(bǔ)全選項，關(guān)閉。重要：某些情況下漏掉此項也會運(yùn)行報錯。

minified: 對應(yīng)關(guān)閉代碼壓縮上傳選項，關(guān)閉。重要：開啟后，會導(dǎo)致真機(jī)computed, props.sync 等等屬性失效。（注：壓縮功能可使用WePY提供的build指令代替，詳見后文相關(guān)介紹以及Demo項目根目錄中的wepy.config.js和package.json文件。）

urlCheck: 對應(yīng)不檢查安全域名選項，開啟。如果已配置好安全域名則建議關(guān)閉。

原生代碼：

//index.js

//獲取應(yīng)用實(shí)例
var app = getApp()

//通過Page構(gòu)造函數(shù)創(chuàng)建頁面邏輯
Page({
//可用于頁面模板綁定的數(shù)據(jù)
    data: {
motto: 'Hello World',
userInfo: {}
    },

//事件處理函數(shù)
    bindViewTap: function() {
console.log('button clicked')
    },

//頁面的生命周期函數(shù)
    onLoad: function () {
console.log('onLoad')
    }
})

基于WePY的代碼：

//index.wpy中的<script>部分

import wepy from 'wepy';

//通過繼承自wepy.page的類創(chuàng)建頁面邏輯
export default class Index extends wepy.page {
//可用于頁面模板綁定的數(shù)據(jù)
    data = {
motto: 'Hello World',
userInfo: {}
    };

//事件處理函數(shù)(集中保存在methods對象中)
    methods = {
        bindViewTap () {
console.log('button clicked');
        }
    };

//頁面的生命周期函數(shù)
    onLoad() {
console.log('onLoad');
    };
}

若本號內(nèi)容有做得不到位的地方（比如：涉及版權(quán)或其他問題），請及時聯(lián)系我們進(jìn)行整改即可，會在第一時間進(jìn)行處理。

?

?