wn-cli 像React组件开发一样来开发微信小程序

fobnn 发布于2019-08-22 13:50 / 2556人阅读

摘要：最后的目的是能满足所有微信小程序开发者的需求，全面覆盖小程序开发。像开发一样，用开发微信小程序。

项目地址：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。

混合云专线服务免费开发微信小程序哪里能开发微信小程序哪里开发微信小程序怎样开发微信小程序

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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