wn-cli 像React組件開發(fā)一樣來開發(fā)微信小程序

fobnn 發(fā)布于2019-08-22 13:50 / 2764人閱讀

摘要：最后的目的是能滿足所有微信小程序開發(fā)者的需求，全面覆蓋小程序開發(fā)。像開發(fā)一樣，用開發(fā)微信小程序。

項目地址：wn-cli

wn-cli

wn-cli 像React組件開發(fā)一樣來開發(fā)微信小程序

名字由來：wn -> weapp native 取第一個字母

Install

npm install wn-cli --save-dev
// 或者
yarn add wn-cli --dev

Usage

// 構(gòu)建
npx wn ./examples ./dist

// 監(jiān)聽模式
npx wn ./examples ./dist -w

如果你遇到一個錯誤，讓拷貝 wn.js 文件，請按提示信息將 node_modules 中的 node_modules/wn-cli/dist/wn.js 文件拷貝到 modules 文件夾中

你的目錄可能是這樣的：

├── dist
│?? ├── app.js
│?? ├── app.json
│?? ├── app.wxss
│?? ├── modules
│?? │?? └── wn.js
│?? ├── pages
│?? │?? ├── index
│?? │?? │?? ├── index.js
│?? │?? │?? ├── index.json
│?? │?? │?? └── index.wxml
│?? │?? │?? └── index.wxss
│?? │?? └── me
│?? │??     ├── me.js
│?? │??     ├── me.json
│?? │??     └── me.wxml
│?? │??     └── me.wxss
│?? └── project.config.json
├── package.json
├── project.config.json
├── src
│?? ├── app.jsx
│?? ├── app.css
│?? └── pages
│??     ├── index
│??     │?? ├── index.css
│??     │?? └── index.jsx
│??     └── me
│??     │?? ├── me.css
│??         └── me.jsx
└── yarn.lock

然后在微信開發(fā)者工具中打開 dist/ 文件夾，就可以預(yù)覽開發(fā)了，可以選擇你喜歡的編輯器。

API 注冊小程序

創(chuàng)建 app.jsx 文件，這也是小程序的入口文件，可能像下面這樣寫

// src/app.jsx
import { App } from "wn";
// 引入所有的頁面，相對路徑
import "./pages/index/index.jsx";
import "./pages/me/me.jsx";

export default class extends App {
  debug = true

  window = {
    navigationBarTitleText: "hello",
    navigationBarTextStyle: "black",
    navigationBarBackgroundColor: "#f4f5f6",
    backgroundColor: "#f4f5f6",
  }

  tabBar = {
    color: "#333333",
    backgroundColor: "#ffffff",
    list: [
      {
        pagePath: "pages/index/index", // 編譯后js路徑
        text: "首頁",
      },
      {
        pagePath: "pages/me/me",
        text: "我",
      },
    ],
  }

  myData = "自定義公共變量"

  hello() { return "自定義公共函數(shù)" }

  // 生命周期函數(shù)
  onLaunch() { console.log("app: hello onLaunch") }
  onShow() { console.log("app: hello onShow") }
  onHide() { console.log("app: hello onHide") }
  onError() { console.log("app: hello onError") }
}

同樣的，可以通過在 app.js 同目錄下創(chuàng)建 app.css ，來書寫公用的 css 。

/* src/app.css */
.test {
  color: red;
}

如此，小程序就注冊好了。

創(chuàng)建頁面

創(chuàng)建第一個頁面，在 src/pages 下面創(chuàng)建頁面文件，如 index/index.jsx，可以這樣寫：

// src/pages/index/index.jsx
import { Page, wx } from "wn"

export default class extends Page {
  window = {
    navigationBarTitleText: "hello"
  }
  navigationBarTextStyle = "black"

  async onShow() {
    const systemInfo = await wx.getSystemInfo()
    console.log("系統(tǒng)信息", systemInfo);
  }

  data = {
    name: "小程序"
  }

  render() {
    return (
      
        你好，{name}      
      
    )
  }
}

添加文件作用域的樣式文件，相當(dāng)于css module，在 src/pages/index 文件夾下面創(chuàng)建同名 css 文件 index.css，不用再導(dǎo)入，只需要命名和同文件下的 .jsx 文件相同就可以了

/* src/pages/index/index.css */
.test {
  color: blue;
  text-align: center;
}

如此第一個頁面就創(chuàng)建好了，接下來你可以添加自己的 me.jsx 頁面。

創(chuàng)建組件

創(chuàng)建第一個組件，如 header，在 src/components下面創(chuàng)建 header/header.jsx 和 header/header.css，兩文件

// src/components/header/header.jsx
import { Component } from "wn"

export default class extends Component {
  render() {
    return (
      
          
      
    )
  }
}

slot 表示組件的 children 放置的位置，還可以指定位置，設(shè)置 slot 的 name。

/* src/components/header/header.css */
.header {
  color: blue;
}

使用組件

創(chuàng)建了組件后，在頁面中使用，首先在頁面中導(dǎo)入：

import header from "../../components/header/header.jsx";

然后在需要的時候使用：

render() {
    return (
      
        
          hello
        
        你好，{name}      
      
    )
  }

也可以組件嵌套等。

Promise 化微信 API，即使用 Promise 代理 wx 中的異步方法

如：

// ...
async onShow() {
    const systemInfo = await wx.getSystemInfo()
    console.log(systemInfo);
  }
// ...

注：原生 API 配置中的 complete 方法并沒有代理

以上

暫時的功能能滿足大多數(shù)簡單的微信小程序開發(fā)，后續(xù)在使用中遇到瓶頸了，再配置兼容性開發(fā)高級 API 滿足需求。

最后的目的是能滿足所有（99%）微信小程序開發(fā)者的需求，全面（99%）覆蓋小程序開發(fā)。像 React Native 開發(fā) APP 一樣，用wn-cli 開發(fā) weapp （微信小程序）。

離目標(biāo)還有不小的距離，如果你也是 React 派，對微信小程序有興趣，可以 fork 代碼共同建設(shè)維護這個工程，或許比較懶，那就直接提 ISSUE，這兩樣都會使我開心一整天的 => 項目地址：wn-cli。

GPU云服務(wù)器云服務(wù)器免費開發(fā)微信小程序哪里能開發(fā)微信小程序哪里開發(fā)微信小程序怎樣開發(fā)微信小程序

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/92504.html

發(fā)表評論

登陸后可評論

0條評論

fobnn

男|高級講師

我要關(guān)注我要私信

TA的文章

畢業(yè)設(shè)計 - 題目：基于單片機的錄音器設(shè)計與實現(xiàn) - 物聯(lián)網(wǎng) 嵌入式

閱讀 1813·2021-11-17 09:33
雖然中國注冊人沒有答復(fù)，但還是保住了WithU.com的所有權(quán)

閱讀 3600·2021-11-16 11:40
前端知識雜談

閱讀 3114·2019-08-30 11:23
前端工具【0】—— Emmet插件

閱讀 1102·2019-08-29 16:36
挑逗Bootstrap4源代碼 - Grid篇（下）

閱讀 2525·2019-08-29 13:23
好文 - 收藏集 - 掘金

閱讀 1820·2019-08-29 12:59
CSS3如何實現(xiàn)0.5邊框

閱讀 1609·2019-08-29 12:42
圖解CSS3 讀書筆記——選擇器

閱讀 2033·2019-08-28 18:22

成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲中文字幕日韩无码

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

wn-cli 像React組件開發(fā)一樣來開發(fā)微信小程序

相關(guān)文章

**微信小程序開發(fā)最佳實踐**

使用TypeScript開發(fā)微信小程序

IDE已破解，不用預(yù)熱，馬上進入「微信小程序」開發(fā)

**搜集React、Vue、Angular和傳統(tǒng)UI組件庫以及后臺管理平臺模板**

**搜集React、Vue、Angular和傳統(tǒng)UI組件庫以及后臺管理平臺模板**

發(fā)表評論

0條評論

fobnn

男|高級講師

TA的文章

畢業(yè)設(shè)計 - 題目：基于單片機的錄音器設(shè)計與實現(xiàn) - 物聯(lián)網(wǎng) 嵌入式

雖然中國注冊人沒有答復(fù)，但還是保住了WithU.com的所有權(quán)

前端知識雜談

前端工具【0】—— Emmet插件

挑逗Bootstrap4源代碼 - Grid篇（下）

好文 - 收藏集 - 掘金

CSS3如何實現(xiàn)0.5邊框

圖解CSS3 讀書筆記——選擇器

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

wn-cli 像React組件開發(fā)一樣來開發(fā)微信小程序

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！