使用alita 将React Native项目转化为小程序

1.通过npm全局安装alita

2.官方文档说明可以直接通过react native init一份项目直接转化，不过试了试，有问题，小程序一直报未找到入口文件 app.js，所以尽量使用alita官方提供的examples文件，所以可以clone一份HelloWorldRN，将文件名改为你的项目名就可以了：比如Demo

3.使用命令转化为小程序

4.安装相关依赖

5.将Demowp导入到微信开发者工具运行即可！Alita生成的小程序使用了小程序的npm功能， 所以需要在微信开发者工具下构建npm， 工具 -->构建npm

6.运行效果

github: https://github.com/areslabs/alita

公司产品试水小程序，做了几个独立功能模块的demo试下可行性，主要是这个框架和react语法基本相同，避免大家学习成本过高，以下记录几个容易粗心的点和坑，maybe很弱智。

由于日常用的axios请求参数的头是headers，复制粘贴大法引发了一个弱智bug，该bug会引发 content-type 设置失效，变成默认的 application/json 。

微信模板语言中，监听自定义组件事件的方法与监听基础组件事件的方法完全一致：

因此Taro中监听自定义组件事件的方法要写成

渲染成微信小程序模板语言时变成

以自定义导航为例：（）

使用方法：

例：res.model在iPhone X模拟器输出"iPhone X"，在真机输出 "iPhone X (GSM+CDMA)<iPhone10,3>" ，所以此处用indexOf而不能用 "==="

Taro.request()支持get和post请求，通过异步的方式进行回调。主要有3个回调方法

所以，对statusCode !== 200 的情况，都应在success回调方法中处理，可以写个拦截器，在微信原生方法wx.request()中存在相同情况。

npm提示某某包undefined，一个一个重新安超浪费时间，目前我的解决办法是退出编译后删掉渲染成微信小程序模板语言的dist文件夹和node_modules文件夹，然后重新运行 npm i 和 npm run dev:weapp

还遇到挺多问题。。想不起来了。。待更新吧。。。

下水了，后续问题记录口以看这里 https://www.jianshu.com/p/5a6fd7fdaf4f

总结了一些在react项目中遇到的问题

1.和微信小程序一样的push事件不能直接用

错误：

正确：

2.react是单向数据流，所以这个用法是ok的

场景：点击增加商品数量

3.input表单赋值

场景：购物车数量随在input框内添数字改变

错误：

4.多input表单处理

当然你也可以不用state定义变量，写在redux中直接取也可以的

5.es6箭头函数

为什么箭头函数就可以直接在this函数中接着写this不报错呢？

箭头函数的this定义：箭头函数的this是在定义函数时绑定的，不是在执行过程中绑定的。简单的说，函数在定义时，this就继承了定义函数的对象。

https://www.jianshu.com/p/c1ee12a328d2

7.点击，带参点击

这个方法在页面加载之初就循环了二十多遍。。因为没绑定bind

应该这样写啊：

8.动态className

9.table的用法：

以下这种是会报错的，必须由tbody包含

10.公共方法引用

common.js：

普通公共方法就直接应用就可以了，异步action方法需要在mapDispatchToProps函数中注入需要使用的公共方法

引用到页面：

11.报错Proxy error

本来用的好好的，今早起来发现数据无法获取

找到占用5000端口的pid

14112就是node.exe，找到592就是金山词霸。。。额，金山词霸右键点击结束进程

但还是不行，我改了一下proxy

就好了

12.返回页面

这个除了Link标签以外当然也需要点击返回或跳转了

这几个方法不会刷新目标页，但是都会触发目标页面的componentWillMount()

13.定时器

一进来定时器就启动，返回首页时停止。这个this.interval属于该class的全局方法，不止可以在 componentDidMount（）中定义，也可以在方法中定义，因为我们也会有点击按钮启动定时器的业务场景

---