zoukankan      html  css  js  c++  java
  • 初识 Remax -- "使用真正的 React 构建小程序(1)

    作者:zhangxiaobin

    创作时间:2020年 3月12日

    个人微信公众号:【微新悦】

    背景:今天公司要求用React开发小程序。what?我第一反应,react能开发小程序了?作为一个使用了vue长达3年的程序猿的我来说,心里一万只蚂蚱经过。哦?不慌,吃口药,我可以的。怀着半信半疑的心态去百度上搜搜了一下。哇去,还真有。度娘讨论的比较多的是 taro 和 remax。

    remax,使用真正的 React 构建小程序 -- 这句话引起我深入探索的兴趣。
    为了不浪费读者们的宝贵时间,在下先贴上自己摸索了半天的心得(在下会在本系列文章中,逐步带大家用remax构建一个完善的技术架构,请不要离开,紧跟我的步伐)

                                                                
    初识体验:

    与原生小程序不同之处,使用了react的语法糖,通过在js-return渲染页面,样式文件通过import引入。
    目前还不满意的地方,自定义封装组件,组件之间的引入与参数传递,后面会继续探索。

    remax官网:  https://remaxjs.org/

    (1)、remax介绍  -- 来自蚂蚁金服的前端工程师 @边柳
    问题1:为什么要用react开发小程序
    回答:微信小程序在商业中取得非常大的成功,react本身有庞大的技术生态,可以使用react所有特性,可以愉快的使用TypeScript。

    (2)、渲染原理

          小程序中是没有 DOM 的,我们写的代码运行在一个与 DOM 隔离的独立线程中。Remax 在这里引入一层叫 VNode 的抽象层,我们会先把 React 的虚拟 DOM 映射到 VNode 上,然后把 VNode 转换成小程序页面的 data,然后在小程序模板里把这个 data显示成界面

    项目开撸:

    命令窗口下执行:

    $ npx degit remaxjs/template-wechat-typescript my-app
    $ cd my-app 

    运行项目:

    $ npm run dev

    核心讲解点:

    (1)、app.config.js 为小程序全局配置文件,对应 app.json

                在pages 集合里,配置页面路由

    (2)、pages/index/index.js 页面文件,对应小程序 Page 方法

    import * as React from 'react';
    import { View, Text } from 'remax/wechat';
    import './index.module.css';
    export default () => {
    return (
    <View>
    <Text>pages/index/index</Text>
    </View>
    );
    };

    (3)、css预处理器安装

    npm install less --save # less 用户
    npm install node-sass --save # sass 用户

    (4)、页面之间的跳转方式之一

    wx.navigateTo({
    
    url: '/pages/demo/demo?coed=1'
    
        })

    (5)、http请求封装(基于wx.request)进行promise封装

    let wxRequest = (url: string, config: any, resolve, reject) => {
    
        let {
    
            data = {},
    
            contentType = 'application/json',
    
            method = 'GET',
    
            ...other
    
        } = { ...config }
    
        wx.request({
    
            url: url,
    
            data: { ...data },
    
            method: method,
    
            header: {
    
                'content-type': contentType,
    
                'Cookie': '' // 全局变量中获取 cookie
    
            },
    
            success: (data) => {
    
                console.log(data.statusCode)
    
                let wx_succes = () => {
    
                    resolve(data)
    
                }
    
                let wx_fail = () => {
    
                    const ERR_CODE_LIST = { //常见错误码列表
    
                        [400]: "请求错误",
    
                        [401]: "登录失效或在其他地方已登录",
    
                        [403]: "拒绝访问",
    
                        [404]: "请求地址出错",
    
                        [408]: "请求超时",
    
                        [500]: "服务器内部错误",
    
                        [501]: "服务未实现",
    
                        [502]: "网关错误",
    
                        [503]: "服务不可用",
    
                        [504]: "网关超时",
    
                        [505]: "HTTP版本不受支持"
    
                    }
    
                    let stateArray = [400, "string", false];
    
                    const errMsg = ERR_CODE_LIST[data.statusCode]
    
                    wx.showToast({
    
                        mask: true,
    
                        title: errMsg,
    
                        icon: 'none',    //如果要纯文本,不要icon,将值设为'none'
    
                        duration: 2000
    
                    })
    
                    resolve(false)
    
                }
    
                data.statusCode == 200 ? wx_succes() : wx_fail()
    
     
    
            },
    
            fail: (err) => {
    
                wx.showToast({
    
                    mask: true,
    
                    title: '请求错误!' + err.errMsg,
    
                    icon: 'none',    //如果要纯文本,不要icon,将值设为'none'
    
                    duration: 2000
    
                })
    
                reject(err)
    
            }
    
        })
    
    }
    
    export default wxRequest;

    组件内的使用如下:pages/index/index

    import * as React from 'react';
    
    import { View, Text, Image } from 'remax/wechat';
    
    import styles from './index.module.css';
    
    import wxRequest from '@/serve/request.ts';
    
    import { useShow, useQuery, unstable_useNativeEffect, } from 'remax';
    
    export default () => {
    
      const [aa, setAA] = React.useState(aa, 0);
    
      const [width, setWidth] = React.useState(width, 0);
    
      const [height, setHeight] = React.useState(height, 0);
    
      let handleClick = () => {
    
        console.log('点击了')
    
        wx.navigateTo({
    
          url: '/pages/demo/demo?coed=1'
    
        })
    
      }
    
      useShow(() => {
    
        let url = 'jjjj'
    
        var promise = new Promise((resolve, reject) => {
    
           wxRequest(url, {}, resolve, reject)
    
        })
    
        // return promise
    
        return promise.then(res => {
    
          console.log(res)
    
          setAA(900)
    
        }).catch(err => {
    
          console.log(err)
    
        })
    
        setTimeout(() => {
    
          setWidth(100)
    
        }, 3000)
    
        setTimeout(() => {
    
          setHeight(100)
    
        }, 3000)
    
      });
    
      unstable_useNativeEffect(() => {
    
        console.log('width', width, 'height', height);
    
        // 只有在 width 变化时,才执行这个逻辑。
    
        // 建议一定要写 hooks 依赖,否则所有 setData 回调后,都会在这里执行
    
      }, [width]);
    
     
    
      return (
    
        <View className={styles.app}>
    
          uiii
    
          <View className={styles.header} >
    
            <view >
    
              <Image
    
                src="https://gw.alipayobjects.com/mdn/rms_b5fcc5/afts/img/A*OGyZSI087zkAAAAAAAAAAABkARQnAQ"
    
                onClick={handleClick}
    
              />
    
            </view>
    
            <View onClick={handleClick} className={styles.text}>
    
              编辑{aa} <Text className={styles.path}>src/pages/index/index.tsx</Text> 开始
    
            </View>
    
          </View>
    
        </View>
    
      );
    
    };

    这样我们的项目基本上可以愉快的进行开发了,感谢你的阅读,欢迎关注与点赞-----  一个有想法的攻城狮日常发文,欢迎评论互动。

    个人微信公众号:【微信悦】

    微信公众号原文链接:https://mp.weixin.qq.com/s/lMDaxaJ-dPoiqlAnks_dsw

  • 相关阅读:
    JS基础18-网站效果
    JS基础17-网站效果
    JS基础16-轮播图的实现(二维数组实现多变量同时滚动)
    JS基础15-事件监听
    JS基础14-对DOM的增改和删除工作
    JS基础13-DOM访问表格子元素的常用属性和方法
    python之路--装饰器函数
    python之路 函数进阶
    python之路 初始函数
    python之字符编码
  • 原文地址:https://www.cnblogs.com/wxy-zhangxiaobin/p/12746540.html
Copyright © 2011-2022 走看看