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

fobnn 發布于2019-08-22 13:50 / 2693人閱讀

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

項目地址：wn-cli

wn-cli

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

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

Install

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

Usage

// 構建
npx wn ./examples ./dist

// 監聽模式
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

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

API 注冊小程序

創建 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 "自定義公共函數" }

  // 生命周期函數
  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 同目錄下創建 app.css ，來書寫公用的 css 。

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

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

創建頁面

創建第一個頁面，在 src/pages 下面創建頁面文件，如 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("系統信息", systemInfo);
  }

  data = {
    name: "小程序"
  }

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

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

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

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

創建組件

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

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

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

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

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

使用組件

創建了組件后，在頁面中使用，首先在頁面中導入：

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 方法并沒有代理

以上

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

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

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

云服務器 GPU云服務器免費開發微信小程序哪里能開發微信小程序哪里開發微信小程序怎樣開發微信小程序

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/92504.html

微信小程序開發最佳實踐

摘要：于是，我重新思考了下，最佳的微信小程序開發實踐應該是無痛的，且舒服的，無痛的是指在小程序的飛速發展變更中，我們不用重復的浪費學習第三方框架和原生框架。以上，便可以在微信小程序中使用了。 weapp-starter 微信小程序開發最佳實踐項目地址為什么會有這個 repo 在小程序之初便開發應用了，現在小程序的開發也越來越成熟了，完善了很多的API、組件、架構等，社區也由原來的零星點點...

Developer 2019-08-22 13:58 評論0 收藏0
使用TypeScript開發微信小程序

摘要：使用開發微信小程序基礎接口核心設計原則之一就是類型檢查，通過使用接口可以進行類型檢查，滿足傳統面向對象思想，利于有效開發，有效避免類型轉換問題。使用開發微信小程序基礎迭代器為每一個對象定義了默認的迭代器。使用TypeScript開發微信小程序（1）——基礎：數據類型（Type） ?TypeScript 的基本數據類型有boolean、number、string 、array、enum...

xingpingz 2019-08-20 13:52 評論0 收藏0
IDE已破解，不用預熱，馬上進入「微信小程序」開發

摘要：在眾多消息里，啃先生排除掉預測類的信息，汲取了對于技術從業者有用的信息，整理出此文章，說說微信小程序開發的設計理念和入門。以上至少四個文件，即可生成一個最簡單的微信小程序。昨晚臨睡覺前，還在想應該給xx打個電話，問問微信應用號應該有原生 UI 吧，要不然跟直接跑 HTML 5 有什么區別？而今天一大早我便一本正經胡說八道猜想，微信小程序不會有 JS IDE ，一個小時之后，發現被打...

ghnor 2019-08-20 11:13 評論0 收藏0
搜集React、Vue、Angular和傳統UI組件庫以及后臺管理平臺模板

摘要：高顏值好用易擴展的微信小程序庫，有贊。一套高質量的微信小程序組件庫。用和搭建的一個通用管理后臺基于實現的后臺管理系統模板一個后臺管理系統模板是一套組件化框架，支持定制主題，主要服務于前臺及中后臺產品。基于后臺管理系統。快來Star，在這里哦Awesome UIKit。 showImg(https://segmentfault.com/img/remote/14600000059942...

zhangrxiang 2019-08-29 13:59 評論0 收藏0
搜集React、Vue、Angular和傳統UI組件庫以及后臺管理平臺模板

摘要：高顏值好用易擴展的微信小程序庫，有贊。一套高質量的微信小程序組件庫。用和搭建的一個通用管理后臺基于實現的后臺管理系統模板一個后臺管理系統模板是一套組件化框架，支持定制主題，主要服務于前臺及中后臺產品。基于后臺管理系統。快來Star，在這里哦Awesome UIKit。 showImg(https://segmentfault.com/img/remote/14600000059942...

source 2019-08-21 18:01 評論0 收藏0