项目地址: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. 2015级C++第4周项目 函数

    [项目1-求最大公约数] 參考解答 (1)输入两个数.并求出其最大公约数 #include <iostream> using namespace std; //自己定义函数的原型(即函数声 ...

  2. javaweb:推断当前请求是否为移动设备訪问

    这段时间都是在做pc端的业务.结果经理找到我说,可能要做移动端的应用,后台逻辑还是用我写的逻辑.可是须要修改一些,看看怎么处理. 因为移动端和pc端还是略微有些差别的,我认为最好是在一个地儿统一推断, ...

  3. Ubuntu 编译安装 OpenCV 3.1

    目标系统:Ubuntu 16.04-64bit OpenCV 版本:opencv-3.1.0 安装步骤 安装 cmake.sudo apt-get isntall cmake cmake-qt-gui ...

  4. MPSOC之3——centos环境配置及petalinux安装及使用

    ubuntu虽然能正常安装,但是build时会出现闪退情况,闪退后一切归零,没啥错误提示,改用centos来安装petalinux. 0.环境 vmware pro 14,centos 7.3 pet ...

  5. MQTT Client library for C (MQTT客户端C语言库-paho)

    原文:http://www.eclipse.org/paho/files/mqttdoc/MQTTClient/html/index.html 来自我的CSDN博客   最近在使用Paho的MQTT客 ...

  6. 《程序设计方法》【PDF】下载

    内容简介 <程序设计方法>主要以方法为主导,结合C语言,把程序设计方法学研究中若干成熟的理论和方法用通俗易懂的语言描述出来.<程序设计方法>还选取趣味性强.技巧性高.能够启发学 ...

  7. PHP是干什么用?

    掌握PHP就是使用电脑制定规则.框架tp3.2/5.2 在结构化编程中,程序围绕着要解决的任务来设计. 面向对象编程中,程序围绕着问题域中的对象来设计. 面对对象的识别事物的方式: ●类比----&g ...

  8. JMeter脚本java代码String数组要写成String[] args,不能写成String args[],否则报错。

    JMeter脚本java代码String数组中括号要写在类型关键字后面,不能写在变量名后面.

  9. 查看windows、linux的SN

     gwmi win32_bios    [root@live-al-ops-pxe-2 ~]# dmidecode | grep Number | sed -n '1p' Serial Number: ...

  10. 用VS2015写一个简单的ASP.net网站

    第一步:打开VS2015,然后新建一个空的解决方案,其中解决方案的名称WebSiteTest可类似认为是本次网站的名称,系统会以该名称(WebSiteTest)生成一个文件夹,在WebSites文件夹 ...