Mather

We create our own demons.

从 React 到小程序

默认分类 0 评

当我沉醉在编程的乐趣中时,外面的世界真是日新月异。作为开发者,很难想到用现代框架也能开发小程序.

前阵通过在 Youtube The Net Ninja 频道学习 React 相关的入门课程, 没想到那么快就接到任务,开发一款基于微信的音乐小程序。

Vue 到 React

这几年一直在使用 Vue 框架编写前端应用,React 也是非常火爆的一款前端框架,但入门门槛和自由度都比前者要高那么一点点。

组件数据对象

React class 组件中的 state 用法跟 Vue 实例的数据对象非常像,但操作 state 对象必须使用 setState API

import React, { Component } from 'react'

export default class Index extends Component {

    constructor(props){
        super(props)
        this.state = {
            sources: {
                title: 'Vue'
            }
        }
    }
    
    // this.state.sources.title = "React"
    // not working
    ClickHandle() {
        this.setState({
            sources: {
                title: "React"
            }
        })
    }
}
模板引擎

与 Vue 基于 HTML 的模板语法不同,React 只提供 JSX,一种创建元素的语法糖。

import React, { Component } from 'react'
import { View, Text } from '@tarojs/components'

export default class Index extends Component { 
    constructor(props){
        super(props)
        this.state = {
            sources: {
                title: 'Vue'
            }
        }
    }
    
    render () {
        const { sources } = this.state
        return (
            <View className="wrapper">
                <View className="header">
                    <View className="header__title">
                        <Text>{ sources.title }</Text>
                    </View>
                </View>
            </View>)
    }
}

全新的 React Hooks

19年初 React 发布了16.8 版本,包含了名叫 Hook 的特性, Hook 的出现意在解决组件复用性低的问题。

在这之前,抽象代码一般会使用 render props 和 高阶组件,但不可避免地使得代码难以理解并形成了“嵌套地狱”。好消息是引用 Hook 不会给现有的组件带来太大的变动。

useState

因为组件数据 state 对象跟 Class 组件耦合在一块,使用 state 时就必须使用 Class 组件。

React Hooks 首先改进了 state 的用法,不再继承于 React 组件,并且一切行为都是函数式的。


import { useState } from 'react'

function Index() {
    const [sources, SetSources] = useState({
        title: 'Vue'
    })
    
    return (
        <View className="wrapper">
            <View className="header">
                <View className="header__title">
                    <Text 
                        onClick={() => { SetSources({title: 'React'}) }}>
                        {sources.title}
                    </Text>
                </View>
            </View>
        </View>)   
}

export default Index

配合 useState useEffect useContext 等 Hook,对一些较简单的组件进行改造,有利于日后的开发和维护。

微信小程序

第一次接触微信小程序已经是17年的时候了,转眼间微信开发者工具已经支持小程序的开发,微信一直致力于帮助开发者在微信中开发具有原生 APP 体验的服务。

微信小程序可以播放音频,且为开发者提供了播放音频的 API ,这样一来我们使用小程序提供的 API 即可实现音乐播放、暂停功能。剩下的就是实现界面的事情了。

if(Taro.getEnv() === 'WEAPP') {
    const backgroundAudioManager = Taro.getBackgroundAudioManager()
    
    backgroundAudioManager.onStop(() => {
        this.pauseMusic()
    })
      
    try {
        const {title, url, thumb}          = song
        backgroundAudioManager.title       = title
        backgroundAudioManager.src         = url
        backgroundAudioManager.coverImgUrl = thumb
    } catch (err) {
        console.log('err', err)
    }
}

Taro 生态

起初出现是为了统一使用 React 框架进行多端开发,构建出来的代码可以运行在 Web、React-Native、微信小程序等各种地方。

Taro 提供了一整套基于小程序封装的 API 和组件库,配合Taro UI ,开发者可以直接使用 Taro 编写代码而无需翻阅各种文档。

"scripts": {
    "dev:weapp": "npm run build:weapp -- --watch",
    "dev:swan": "npm run build:swan -- --watch",
    "dev:alipay": "npm run build:alipay -- --watch",
    "dev:tt": "npm run build:tt -- --watch",
    "dev:h5": "npm run build:h5 -- --watch",
    "dev:rn": "npm run build:rn -- --watch",
    "dev:qq": "npm run build:qq -- --watch",
    "dev:jd": "npm run build:jd -- --watch",
    "dev:quickapp": "npm run build:quickapp -- --watch"
},

参考文档

CSS 外边距合并 Collapsing Margins

发表评论
撰写评论