微信小程序組件化開發(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)化，如請(qǐng)求列隊(duì)，事件優(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>  編譯平臺(tái)：browser, wechat，qq。默認(rèn)為browser
    -w, --watch            監(jiān)聽文件改動(dòng)
    --no-cache             對(duì)于引用到的文件，即使無(wú)改動(dòng)也會(huì)再次編譯
    -h, --help             output usage information

升級(jí)wepy-cli

Usage: upgrade [options]

  upgrade to the latest version


  Options:

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

切換至項(xiàng)目目錄

cd myproject

安裝依賴

npm  install

開啟實(shí)時(shí)編譯

wepy build --watch

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

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

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

如果不存在，建議手動(dòng)創(chuàng)建該文件后再添加項(xià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: 對(duì)應(yīng)關(guān)閉ES6轉(zhuǎn)ES5選項(xiàng)，關(guān)閉。重要：未關(guān)閉會(huì)運(yùn)行報(bào)錯(cuò)。

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

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

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

原生代碼：

//index.js

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

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

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

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

基于WePY的代碼：

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

import wepy from 'wepy';

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

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

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

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

?

?