项目地址: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 (
<view class="test">
你好,{name}
</view>
)
}
}

添加文件作用域的样式文件,相当于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 (
<view class="header">
<slot></slot>
</view>
)
}
}
  • slot 表示组件的 children 放置的位置,还可以指定位置,设置 slot 的 name
/* src/components/header/header.css */
.header {
color: blue;
}

使用组件

创建了组件后,在页面中使用,首先在页面中导入:

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

然后在需要的时候使用:

render() {
return (
<view class="test">
<header>
hello
</header>
你好,{name}
</view>
)
}

也可以组件嵌套等。

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

wn-cli 像React组件开发一样来开发微信小程序的更多相关文章

  1. 微信小程序开发系列五:微信小程序中如何响应用户输入事件

    微信小程序开发系列教程 微信小程序开发系列一:微信小程序的申请和开发环境的搭建 微信小程序开发系列二:微信小程序的视图设计 微信小程序开发系列三:微信小程序的调试方法 微信小程序开发系列四:微信小程序 ...

  2. 微信小程序开发系列二:微信小程序的视图设计

    大家如果跟着我第一篇文章 微信小程序开发系列一:微信小程序的申请和开发环境的搭建 一起动手,那么微信小程序的开发环境一定搭好了.效果就是能把该小程序的体验版以二维码的方式发送给其他朋友使用. 这个系列 ...

  3. 微信小程序开发系列四:微信小程序之控制器的初始化逻辑

    微信小程序开发系列教程 微信小程序开发系列一:微信小程序的申请和开发环境的搭建 微信小程序开发系列二:微信小程序的视图设计 微信小程序开发系列三:微信小程序的调试方法 这个教程的前两篇文章,介绍了如何 ...

  4. 微信小程序开发系列七:微信小程序的页面跳转

    微信小程序开发系列教程 微信小程序开发系列一:微信小程序的申请和开发环境的搭建 微信小程序开发系列二:微信小程序的视图设计 微信小程序开发系列三:微信小程序的调试方法 微信小程序开发系列四:微信小程序 ...

  5. 两天快速开发一个自己的微信小程序

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px "Songti SC" } p.p2 { margin: 0.0px 0. ...

  6. 快速开发一个自己的微信小程序

    一.写在前面 1.为什么要学小程序开发? 对于前端开发而言,微信小程序因为其简单快速.开发成本低.用户流量巨大等特点,也就成了前端开发工程师必会的一个技能. 2.先看看小程序效果 (1)欢迎页 (2) ...

  7. 【原创】前端开发人员如何制作微信小程序模板

    (我的博客网站中的原文:http://www.xiaoxianworld.com/archives/305,欢迎遇到的小伙伴常来瞅瞅,给点评论和建议,有错误和不足,也请指出.) 最近接触了一下微信小程 ...

  8. 小程序红包开发跳坑记 微信小程序红包接口开发过程中遇到的问题 微信小程序红包开发

    现在做小程序的越来越多,商家推广也是一个瓶颈,谁不发点红包,都很难找到人来用你的微信小程序了.于是不管你开发什么小程序功能,你或多或少都要用到小程序来发红包吧.  我们自己之前做公众号发红包,做了两三 ...

  9. 微信小程序开发系列一:微信小程序的申请和开发环境的搭建

    我最近也刚刚开始微信小程序的开发,想把我自学的一些心得写出来分享给大家. 这是第一篇,从零开始学习微信小程序开发.主要是小程序的注册和开发环境的搭建. 首先我们要在下列网址申请一个属于自己的微信小程序 ...

  10. 微信小程序(应用号)开发资源汇总整理 - 一直更新中

    开源项目 wechat-weapp-gank - 微信小程序版Gank客户端 wechat-dribbble - 微信小程序-Dribbble wechatApp-demo - 微信小程序 DEMO ...

随机推荐

  1. @Autowired注解在抽象类中实效的原因分析

    最近在工作中遇到这个问题,在抽象类中使用Autowired这个注解,注入mybatis的dao时,总是出现空指针异常,通过日志的打印,发现是这个dao注入失败为空.然后通过new出spring上下文对 ...

  2. MQTT 设计原则

    MQTT 设计原则 简单. 没有杂七杂八的花俏功能,作为一个基础组件构建实用的系统,易于实现. "发布/订阅"消息传递方式. 随时接入随时发布.接收消息,无需太多其他"事 ...

  3. JNI的使用总结初篇

    前言:以下内容是个人在写JNI Demo前后进行查找理解总结得出的一些结论,如有错误的地方希望路过的朋友能够指正. 一.JNI是Java native interface的简称,目前就我所知这类方法的 ...

  4. 【ASP.NET系列】详解Views

    描述 本片文章内容属于ASP.NET MVC系列视图篇,主要讲解View,大致内容如下: 1.Views文件夹讲解 2.View种类 3.Razor语法 4.对视图的基本操作 一   Views文件夹 ...

  5. KVM(一):KVM安装

    KVM通俗的说就是一台服务器当多台用,详细介绍去百度和谷歌. 首先查看服务器是否支持虚拟化 [root@KVM ~]# grep -E '(vmx|svm)' /proc/cpuinfo --colo ...

  6. CKEditor 集成CKFinder集成

    lCKEditor原名FckEditor,著名的HTML编辑器,可以在线编辑HTML内容,演示一下.打开.自己人用CKEditor,网友用UBBEditor. l配置参考文档,主要将ckeditor中 ...

  7. NodeJS初介

    之前很多环境搭建中都使用到了Nodejs,所以这边对Nodejs做一个简单总结. 1.什么是Nodejs Node.js是一个Javascript运行环境(runtime),发布于2009年5月,由R ...

  8. 麻瓜之我要学sql,啦啦啦啦

    四张表 学生表:编号,姓名,性别,班级,生日 CREATE TABLE IF NOT EXISTS student( sno TINYINT UNSIGNED NOT NULL, sname ) NO ...

  9. Ubuntu16.04下编译安装OpenCV3.4.0(C++ & python)

    Ubuntu16.04下编译安装OpenCV3.4.0(C++ & python) 前提是已经安装了python2,python3 1)安装各种依赖库 sudo apt-get update ...

  10. python calendar(日历)模块

    内置函数month() #!/usr/bin/python import calendar print calendar.month(2017,12) 输出: December 2017 Mo Tu ...