1 | # weact 用JSX快速开发小程序
|
2 |
|
3 | weact实现了用JSX和ES6/7来开发小程序,你可以在一个jsx文件中编写页面或组件,并把关联的JSX代码和引用包编译成小程序代码,然后在*小程序开发者工具*中调试代码。因为使用了JSX和ES标准语法,你可以轻松地把已有的JSX代码重构成小程序,当然你也可以使用喜欢的语法高亮,语法检查器等工具。支持
|
4 | * JSX,ES6/7标准语法
|
5 | * 单文件开发小程序模块
|
6 | * 引用NPM包
|
7 | * 自动添加组件关系
|
8 | * 在jsx文件中编写小程序样式WXSS
|
9 |
|
10 | ## 快速上手
|
11 | ---
|
12 | - [ 安装 ](#安装)
|
13 | - [ JSX小程序 ](#JSX小程序)
|
14 | - [ 生成小程序 ](#生成小程序)
|
15 | - [ 从JSX到WXML ](#从JSX到WXML)
|
16 | - [ App.jsx ](#App.jsx)
|
17 | - [ Page.jsx ](#Page.jsx)
|
18 | - [ 模版==函数式Component ](#模版==函数式Component)
|
19 | - [ 组件 ](#组件)
|
20 | - [ 引用模块 ](#引用模块)
|
21 |
|
22 |
|
23 | ### 安装
|
24 | ---
|
25 |
|
26 | 在项目里安装,
|
27 | ```bash
|
28 | npm install -D weact-cli
|
29 | npx weact-cli
|
30 | # No app.jsx
|
31 | ```
|
32 |
|
33 | 也可以全局安装weact客户端NPM包,同时也需要在执行目录安装相关babel插件,因为weact依赖这些插件,而babel只能识别当前模块路径下的插件。
|
34 |
|
35 | ```bash
|
36 | npm install -g weact-cli
|
37 | npm install babel-preset-env babel-preset-react babel-plugin-external-helpers babel-plugin-transform-class-properties babel-plugin-transform-object-rest-spread
|
38 | weact-cli
|
39 | # No app.jsx
|
40 | ```
|
41 |
|
42 |
|
43 | ### JSX小程序
|
44 | ---
|
45 |
|
46 | 让我们开始写一个Hello world的小程序,只需要两个文件:app.jsx,index.jsx, 通常页面代码会被放在`./pages`目录下,
|
47 | ```
|
48 | src/
|
49 | ├── app.jsx
|
50 | └── pages
|
51 | └── index.jsx
|
52 | ```
|
53 |
|
54 | weact只把app.jsx作为目标文件,也就是说所有需要的页面需要在app.jsx中被import进来。在这个例子中,只有一个页面index可以import。我们还需要继承`weact.App`来声明小程序的app, 这里只export一个空的类,[ App.jsx ](#App.jsx)会详细说明怎么定义app,
|
55 | ```javascript
|
56 | // src/app.jsx
|
57 | import { App } from 'weact'
|
58 | import './pages/index.jsx' // app应用的页面,需要import
|
59 |
|
60 | export default class extends App {
|
61 | }
|
62 | ```
|
63 |
|
64 | 和app一样,所有页面要继承`weact.Page`,并被export才可以。与应用不同的是,页面有`render()`方法来定义显示部分,在render方法里返回JSX标签,在语法上这和React Component的render相同。weact会根据render方法里返回的标签,自动编译出WXML文件,[ 从JSX到WXML ](#从JSX到WXML)会说明如何用JSX写出符合WXML定义的标签。`weact.WXSS`利用ES6字符串模版的能力,可以在jsx中声明符合WXSS语法的样式,这样样式就会被weact编译成对应的WXSS文件。
|
65 |
|
66 | ```javascript
|
67 | // src/pages/index.jsx
|
68 | import { Page, WXSS } from 'weact'
|
69 |
|
70 | WXSS`
|
71 | .hi {
|
72 | color: blue;
|
73 | }
|
74 | `
|
75 | export default class extends Page {
|
76 | render() {
|
77 | return (
|
78 | <view class="hi">
|
79 | Hello World!
|
80 | </view>
|
81 | )
|
82 | }
|
83 | }
|
84 | ```
|
85 |
|
86 | 这样,一个基于JSX的小程序就完成了。
|
87 | > 在[ 实战JSX开发小程序 ](https://github.com/haojy/weact-startup) 中有更多的例子可以参考。
|
88 |
|
89 | ### 生成小程序
|
90 | ---
|
91 |
|
92 | 上面的代码都存放在`./src`目录下,然后执行
|
93 | ```bash
|
94 | npx weact-cli ./src # 等同于 weact-cli ./src/app.jsx ./dist
|
95 | ```
|
96 |
|
97 | 在当前目录下会生成`./dist`目录,里面全是根据jsx文件编译出的小程序代码,
|
98 | ```
|
99 | dist/
|
100 | ├── app.js
|
101 | ├── app.json
|
102 | └── pages
|
103 | └── index
|
104 | ├── index.js
|
105 | ├── index.wxml
|
106 | └── index.wxss
|
107 | ```
|
108 | 在*微信开发者工具*添加项目,项目目录设置成`./dist`, 然后就可以在模拟器中看到运行结果了。
|
109 |
|
110 | ### 从JSX到WXML
|
111 | ---
|
112 |
|
113 | weact可以在语法上把JSX编译成WXML,下面列表给出两种语言的在语法上的对应关系。
|
114 |
|
115 | 语法 | JSX | WXML
|
116 | ----|-----|-----
|
117 | 数据绑定 | `<view>{message}</view>` | `<view> {{ message }} </view>`
|
118 | 属性 | ``<view id={`${prefix}-item}`>hi</view>`` | `<view id="{{prefix}}-item">hi</view>`
|
119 | 关键字 false | `<view checked={false}>hi</view>` | `<view checked="{{false}}">hi</view>`
|
120 | 关键字 | `<view checked>hi</view>` | `<view checked="{{true}}">hi</view>`
|
121 | 三元运算 | `<view hidden={flag ? true: false}>hi</view>` | `<view hidden="{{flag ? true : false}}">hi</view>`
|
122 | 算数运算 | `<view>{a + b} + {c} + d</view>` | `<view>{{a + b}} + {{c}} + d</view>`
|
123 | 逻辑判断 | `<view if={length > 5}>hi</view>` | `<view wx:if="{{length > 5}}">hi</view>`
|
124 | 字符串运算 | `<view>{"hello " + name}</view>` | `<view>{{"hello " + name}}</view>`
|
125 | 数组 | `<view for={[zero, 1, 2, 3, 4]}>`<br/> `{item}`<br/>`</view>` | `<view wx:for="{{[zero, 1, 2, 3, 4]}}">`<br/> `{{item}}`<br/>` </view>`
|
126 | 对象 | `<view data={{ foo: 0, bar: 1 }}>hi</view>` | `<view data="{{ foo: 0, bar: 1 }}">hi</view>`
|
127 | 数据访问 | `<view>{object.key} {array[0]}</view>` | `<view>{{object.key}} {{array[0]}}</view>`
|
128 | for 循环 | `<view for={array} key="message">`<br/> `{index}:{item.message}`<br/>`</view>` | `<view wx:for="{{array}}" wx:key="message">`<br/> `{{index}}:{{item.message}}`<br/>`</view>`
|
129 | if 条件 | `<view if={condition}>hi</view>` | `<view wx:if="{{condition}}">hi</view>`
|
130 | if else | `<view if={x > 5}>1</view>`<br/>`<view elif={x > 2}>2</view>`<br/>`<view else>3</view>` | `<view wx:if="{{x > 5}}">1</view>`<br/>`<view wx:elif="{{x > 2}}">2</view>`<br/>`<view wx:else>3</view>`
|
131 | block 条件 | `<block if={true}>`<br/> `<view> 1 </view>`<br/>` </block>` | `<block wx:if="{{true}}">`<br/> `<view> 1 </view>`<br/>` </block>`
|
132 | block 循环 | `<block for={[1, 2, 3]}>`<br/> `<view>{index}:{item}</view>`<br/>`</block>` | `<block wx:for="{{[1, 2, 3]}}">`<br/> `<view>{{index}}:{{item}}</view>`<br/>`</block>`
|
133 | 事件处理 | `<button bindtap={handleTap}>Next</button>`| `<button bindtap="handleTap">Next</button>`
|
134 | onXXX == bindxxx | `<button onTap={this.handleTap}>Next</button>` | `<button bindtap="handleTap">Next</button>`
|
135 |
|
136 | ### App.jsx
|
137 | ---
|
138 |
|
139 | 小程序在json文件中进行全局配置,用JSX把这些配置写成App的类属性,对比参考[ 小程序配置 ](https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html)。同样,App的[ 生命周期函数,自定义公共变量,自定义公共函数等属性 ](https://mp.weixin.qq.com/debug/wxadoc/dev/framework/app-service/app.html)都可以写成类属性。weact把app.jsx编译成对应的app.json,app.js, app.wxss。
|
140 |
|
141 | ```javascript
|
142 | export default class extends App {
|
143 |
|
144 | debug = true
|
145 |
|
146 | window = {
|
147 | navigationBarTitleText: '你好,小程序',
|
148 | navigationBarTextStyle: 'black',
|
149 | navigationBarBackgroundColor: '#f4f5f6',
|
150 | backgroundColor: '#f4f5f6',
|
151 | }
|
152 |
|
153 | tabBar = {
|
154 | color: '#333333',
|
155 | backgroundColor: '#ffffff',
|
156 | list: [
|
157 | {
|
158 | pagePath: 'pages/index/index', // 编译后js路径
|
159 | text: '🏠',
|
160 | },
|
161 | {
|
162 | pagePath: 'pages/page1/page1',
|
163 | text: 'Page 1',
|
164 | },
|
165 | ],
|
166 | }
|
167 |
|
168 | myData = '自定义公共变量',
|
169 |
|
170 | hello() { return '自定义公共函数' }
|
171 |
|
172 | // 生命周期函数
|
173 | onLaunch() { console.log('app: hello world') }
|
174 | onShow() { console.log('app: yes, I am') }
|
175 | onHide() { console.log('app: just minutes') }
|
176 | onError() { console.log('app: woops') }
|
177 | }
|
178 | ```
|
179 |
|
180 | ### Page.jsx
|
181 | ---
|
182 |
|
183 | 类似App.jsx,页面的[ 生命周期函数和其他属性 ](https://mp.weixin.qq.com/debug/wxadoc/dev/framework/app-service/page.html)也写成Page的类属性。除此之外,
|
184 | - Page的`render()`函数定义页面显示,
|
185 | - 标签使用参考[小程序基础组件](https://mp.weixin.qq.com/debug/wxadoc/dev/component/)
|
186 | - 组件的事件处理函数在Page中直接定义类函数
|
187 |
|
188 | ```javascript
|
189 | export default class extends Page {
|
190 |
|
191 | data = {
|
192 | // 页面数据
|
193 | }
|
194 |
|
195 | myData = '自定义公共变量',
|
196 |
|
197 | handleTap() { console.log('自定义公共函数') }
|
198 |
|
199 | // 生命周期函数
|
200 | onLoad() { console.log('page index: loading...') }
|
201 | onShow() { console.log('page index: yes, I am') }
|
202 | onReady() { console.log('page index: I am ready now') }
|
203 | onHide() { console.log('page index: just minutes') }
|
204 | onUnload() { console.log('page index: bye...') }
|
205 | onReachBottom() { console.log('page index: we get to the most bottom') }
|
206 | onPullDownRefresh() { console.log('page index: pull down') }
|
207 | onPageScroll() { console.log('page index: scrolling...') }
|
208 | onShareAppMessage() { console.log('page index: share this') }
|
209 |
|
210 | render() {
|
211 | return (
|
212 | <view>
|
213 | Hello World!
|
214 | <button onTap={this.handleTap}>下一页</button>
|
215 | <navigator url="/pages/page1/page1">跳转到Page 1</navigator>
|
216 | <navigator url="/pages/page2/page2">跳转到Page 2</navigator>
|
217 | </view>
|
218 | )
|
219 | }
|
220 | }
|
221 |
|
222 | ```
|
223 |
|
224 |
|
225 | ### 模版==函数式Component
|
226 | ---
|
227 |
|
228 | 小程序的模版可以理解成,没有状态的函数式Component。weact会把返回JSX标签的函数编译成模版,使用这类组件时,只要确保import的名字和定义的一样就可以。
|
229 |
|
230 | ```javascript
|
231 | // src/components/flex.jsx
|
232 | export default function flex({
|
233 | direction,
|
234 | }) {
|
235 | return (
|
236 | <view>
|
237 | <view class="section">
|
238 | <view>flex-direction: ${direction}</view>
|
239 | <view style={`display:flex;flex-direction:${direction};`}>
|
240 | <view class="flex-item bc_green">1</view>
|
241 | <view class="flex-item bc_red">2</view>
|
242 | <view class="flex-item bc_blue">3</view>
|
243 | </view>
|
244 | </view>
|
245 | </view>
|
246 | )
|
247 | }
|
248 | ```
|
249 |
|
250 | ```javascript
|
251 |
|
252 | // src/pages/index.jsx
|
253 | import { Page } from 'weact'
|
254 | import flex from '../components/flex.jsx'
|
255 |
|
256 |
|
257 | export default class extends Page {
|
258 | render() {
|
259 | return (
|
260 | <view>
|
261 | <flex direction="row" />
|
262 | <flex direction="column" />
|
263 | </view>
|
264 | )
|
265 | }
|
266 | }
|
267 | ```
|
268 |
|
269 | ### 组件
|
270 | ---
|
271 |
|
272 | 用weact自定组件更类似写*react Component*,像Page一样显示声明继承Compnent类就可以。组件的属性可以用`propTypes`和`defaultProps`来定义,分别对应着`properties[...].type`和`properties[...].value`。属性类型由`weact.PropTypes`定义如下
|
273 |
|
274 | PropTypes | 小程序属性类型
|
275 | ----------|-------------
|
276 | *string* | *String*
|
277 | *number* | *Number*
|
278 | *bool* | *Boolean*
|
279 | *object* | *Object*
|
280 | *array* | *Array*
|
281 |
|
282 | 在下面的例子里*a*,*b*就是组件属性。如果你了解*react*,你会比较熟悉这种定义Component的方式。
|
283 | 另外,自定义的方法和事件响应函数可以直接定义为类属性,weact在编译时把这些函数放在`methods`属性里。
|
284 |
|
285 | ```javascript
|
286 | import { Component, PropTypes } from 'weact'
|
287 | export default class extends Component {
|
288 | static propTypes = {
|
289 | a: PropTypes.string
|
290 | b: PropTypes.bool
|
291 | }
|
292 | static defaultProps = {
|
293 | a: 'world',
|
294 | b: true,
|
295 | }
|
296 | state = {
|
297 | open: true,
|
298 | x: 'hi',
|
299 | item: {
|
300 | index: 0,
|
301 | time: '2016-09-15'
|
302 | }
|
303 | }
|
304 |
|
305 | render() {
|
306 | const { a, b } = this.props
|
307 | const { open } = this.state
|
308 | return (
|
309 | <view>
|
310 | <view x={b} y="str">hi {a} </view>
|
311 | <view for={[1, 2, 3]} > </view>
|
312 | <view for={array} for-index="i" for-item="node"> </view>
|
313 | </view>
|
314 | )
|
315 | }
|
316 | }
|
317 | ```
|
318 |
|
319 | #### 组件关系
|
320 |
|
321 | weact会根据父子组件的引用关系,自动编译出`relations`的定义。来看看下面的例子,父组件parent引用了子组件child。
|
322 |
|
323 | ```javascript
|
324 | // ./parent.jsx
|
325 | import { Component, PropTypes } from 'weact'
|
326 | import child from './child.jsx'
|
327 | export default class extends Component {
|
328 | render() {
|
329 | return (
|
330 | <view>
|
331 | 父级组件
|
332 | <child />
|
333 | </view>
|
334 | )
|
335 | }
|
336 | }
|
337 | ```
|
338 |
|
339 | ```javascript
|
340 | // ./child.jsx
|
341 | import { Component, PropTypes } from 'weact'
|
342 | export default class extends Component {
|
343 | render() {
|
344 | return (
|
345 | <view>
|
346 | 子级组件
|
347 | </view>
|
348 | )
|
349 |
|
350 | }
|
351 | }
|
352 | ```
|
353 |
|
354 | weact编译后在各自的js文件里自动生成关系定义,而不用手动定义。
|
355 | ```javascript
|
356 | // ./parent.js
|
357 | relations: {
|
358 | "../child/child": {
|
359 | type: "child"
|
360 | }
|
361 | },
|
362 | ```
|
363 | ```javascript
|
364 | // ./child.js
|
365 | relations: {
|
366 | "../parent/parent": {
|
367 | type: "parent"
|
368 | }
|
369 | },
|
370 | ```
|
371 | ### 引用模块
|
372 | ---
|
373 |
|
374 | 虽然小程序暂不支持直接引入NPM包,但支持类CommonJS的模块引用。weact在语法上实现ES模块间引用, 用*babel-plugin-transform-modules-commonjs*解析成CommonJS的包;NPM包也会被拷贝到*modules*目录下。*weact*模块并没有代码存在,暂时只为了符合语法。
|
375 |
|
376 | import方式 | JS/JSX | 小程序
|
377 | ----------|--------|-------
|
378 | 模块间 | `import reducer from './reducer'` | `var _reducer = require("./reducer.js");`
|
379 | NPM包 | `import redux from 'redux'` | `var _redux = require("modules/redux.js");`
|
380 | 引用Page | `import './pages/index.jsx'` | *app.json* `{"pages":["pages/index/index"]}`
|
381 | 引用Component | `import Component from '../components/Component.jsx'` | *\*.json*: `{"usingComponents":{"Component":"../../components/Component/Component"}}`
|
382 | 引用Template | `import MsgItem from './MsgItem.jsx'` | *wxml* `<import src="../MsgItem.wxml" />`
|
383 |
|
384 | > 引用的NPM包需用npm或yarn安装
|