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

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

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

項(xiàng)目地址：wn-cli

wn-cli

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

名字由來：wn -> weapp native 取第一個(gè)字母

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

如果你遇到一個(gè)錯(cuò)誤，讓拷貝 wn.js 文件，請(qǐng)按提示信息將 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 注冊(cè)小程序

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

// src/app.jsx
import { App } from "wn";
// 引入所有的頁面，相對(duì)路徑
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;
}

如此，小程序就注冊(cè)好了。

創(chuàng)建頁面

創(chuàng)建第一個(gè)頁面，在 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;
}

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

創(chuàng)建組件

創(chuàng)建第一個(gè)組件，如 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";

然后在需要的時(shí)候使用：

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

也可以組件嵌套等。

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

如：

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

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

以上

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

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

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

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/92504.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

fobnn

男|高級(jí)講師

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

TA的文章

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

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

閱讀 3545·2021-11-16 11:40
前端知識(shí)雜談

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

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

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

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

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

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

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

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

相關(guān)文章

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

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

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

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

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

發(fā)表評(píng)論

0條評(píng)論

fobnn

男|高級(jí)講師

TA的文章

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

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

前端知識(shí)雜談

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

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

好文 - 收藏集 - 掘金

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

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

最新活動(dòng)

資訊專欄INFORMATION COLUMN

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

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

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

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