raxjs / miniapp Goto Github PK

GOAL: 支持在单一运行时项目中灵活配置使用编译时组件
USAGE: 用户在 src/miniapp-compiled 文件夹中放置且被使用到的组件全部使用编译时引擎编译
TODO:

• babel 插件扫描，将 miniapp-compiled 文件夹内的组件识别为原生自定义组件
• 接入编译时组件工程，编译 miniapp-compiled 文件夹内使用到的组件
• 工程体验优化，自动进入产物文件夹进行 npm install
• 编译时组件引入方式可以按照正常书写习惯，无需按照 usingComponents 的方式书写完整路径
• babel 插件在每次文件变化编译时均重新扫描输出 props 和 events
• miniapp-render 文件处理逻辑优化，支持直接安装依赖以覆盖默认配置

目前使用 Rax 小程序运行时方案开发百度、快手小程序时， flex 布局在会失效，例如：

<View style={{display: 'flex'}}>
  <View>1</View>
  <View>2</View>
</View>

原因在于Rax 运行时小程序方案使用 template 递归渲染节点，而 template 在百度、快手小程序是真实 DOM 节点，则上述结构渲染出的真实结构伪代码如下：

<template>
  <view style={{display: 'flex'}}>
    <template>
      <view>1</view>
    </template>
    <template>
      <view>2</view>
    </template>
  </view>
</template>

导致 flex 布局失效。因此，需要更新百度、快手侧的 view 等常用 flex 布局的组件的 template 模板，原理大致如 taro 社区用户讨论：NervJS/taro#6015 (comment)

阿里小程序使用button方式关注生活号时，需要onFollowLifestyle获取回调，但是该字段失效，有没有好的解决方案呢。

关联issue

解决方案

在build.json中增加字段envOptions, 用于修改此处@babel/preset-env插件的参数
简单实现：

build.json

{
  "envOptions": {
    "targets": {
      "chrome": "90"
    }
  }
}

output.js

[[require('@babel/preset-env'), {
      exclude: ['@babel/plugin-transform-regenerator'],
      ...envOptions
}]]

原因说明

关键目的在于抽离Babel的helper函数。而这个功能目前微信开发者工具已经具备，可参考微信Bebel转译说明 ,
经过实验发现，无论传给微信开发者工具的代码是否经过es6转译es5，开发者工具都会自动注入完整的helper函数。因此在rax端解决helper函数多次注入问题并不是最优解，原因是这样至少都会有一次的重复注入。合理的做法应该是让开发者通过配置，选择性关闭部分es6转译es5功能，使rax端生成的代码不含helper函数，把转译任务交给开发者工具。

为什么强调选择性关闭？
微信小程序并没有完全兼容es6+语法，因此对部分较新的语法进行转译是有必要的。需要转译到什么程度，开发者可以通过配置envOptions.targets字段值去解决。

目前遇到的问题

新增build.json字段需要修改build-plugin-component这个插件, 不了解修改这个插件代码需要在哪里提pr。

设置 createAnimation 中的参数例如 duration: 100，实际情况不起作用。

具体代码：

实际 console.log 的输出

期望：
能正确赋值

欢迎大家把使用 Rax 开发上线的小程序项目，更新到此 issue 下，格式是：小程序名称 + 平台（微信 or 支付宝 or 手淘 or ...） + 介绍（可选） + 二维码 + 链接（可选）

目前，Rax 小程序项目推荐用户使用 VS Code 等编辑器打开项目，通过终端执行 npm run start/build 将代码编译到产物文件夹（微信端是 build/wechat-miniprogram），然后使用微信 IDE 打开该文件夹进行预览。如果需要直接使用微信 IDE 进行开发，需要按照以下步骤操作：

1. 新建 Rax 小程序项目，并通过微信 IDE 打开；
2. 在项目根目录下新建 project.config.json (可能微信 IDE 在打开项目后会自动创建)，在其中添加以下内容用于指定小程序目录：

{
  "miniprogramRoot": "build/wechat-miniprogram"
}

3. 打开终端进入项目根目录（系统自带或者微信 IDE 中新建终端），安装依赖并启动代码编译：

$ npm install
$ npm run start

4. 用户可编辑 src 目录下的源码进行开发，同时可实时在 IDE 中预览小程序。

怎么没有拼多多小程序呢，谁开发过拼多多上用的小程序？？？

page中引用lib下的实现

产物npm下是es目录

跳转代码已对 url 做 encode

import navigate from 'universal-navigate'

navigate.push( {
  url: '/pages/webview/index?url=' + encodeURIComponent( url )
} )

在另一个页面获取 searchParams

import { getSearchParams } from 'rax-app'

return () => {
  const searchParams = getSearchParams();
  // 这里的 searchParams 存在问题
}

假如传入的 url 是 "https://a.com?foo=1&bar=2"

在支付宝小程序中获取到的 searchParams 为

{
  "url": "https://a.com?foo=1",
  "bar": 2
}

正确的值应该为

{
  "url": "https://a.com?foo=1&bar=2",
}

在微信小程序中没有问题

背景：希望自己实现一个使用 vite或rollup 打包 rax-core 纯运行时的 hello world 的简版demo

1、期待有一个 使用vite或rollup 打包 rax-core 纯运行时的 hello world demo
2、如果 1 没有现成的，期待有个大致的实现思路，侧重了解运行时的实现方案

【问题描述】
创建 scrollView 后使用 ref 赋值，外部调用 scrollTo 方法没效果。
控制台输出 ref.current 有值。

【期望效果】
可以滑动到指定位置。

【代码】

import { createElement, useRef } from 'rax';
import View from 'rax-view';
import ScrollView from 'rax-scrollview';


export default function Home() {

  const svRef = useRef(null);

  return (
    <View styel={{ width: '100vw', height: '100vw', position: 'relative' }}>
      <ScrollView
        ref={svRef}
        style={{ width: '100vw', height: '100vh' }}
      >
        {
          new Array(100).fill(0).map((value, index) => {
            return (
              <View key={`line-${index}`} style={{ width: '100%', height: '80rpx' }}>
                line-{index}
              </View>
            );
          })
        }
        <View style={{ position: 'absolute', right: 0, bottom: '100rpx', width: '200rpx', height: '80rpx', color: 'white', backgroundColor: 'blue' }} onClick={() => { svRef.current.scrollTo({ x: 0, y: 0 }); }}>
          To Top
        </View>
      </ScrollView>
    </View>
  );
}

【复现 demo仓库】
https://github.com/MarshallYang/rax-miniapp-scrollto-bug

在 Rax 中，ref 属性是一个关键词，会被转换使用，不会映射到真实小程序节点上 ref 属性，导致在混用的时候，无法通过 ref 获取到原生小程序组件实例

目前 Rax 小程序使用了 @ice/store 作为状态管理方案，对于全局状态而言存在一些问题：
在小程序中，打开一个页面在处理上更接近 MPA 的新建页面，即需要渲染整个页面。@ice/store 依赖了 react-redux，并将 Provider 放在页面组件的父亲节点上。这样会导致 Provider 节点会被重新创建，如果用户在 src/app.ts 中声明了全局的初始状态，那么新打开的页面会被重新初始化一次，导致全局状态管理失效。
解决方案：
初步想法是将状态挂在到 App 或 Page 上，用小程序的全局和页面属性来保存状态。这套方案在对外接口上保持与 @ice/store 保持一致。