Taro开发微信小程序

https://www.cnblogs.com/rynxiao/p/9230237.html

了解Taro
听说Taro是从几个星期前开始的,在一次饭桌上,一个小伙伴说:“Hey, 你听说了Taro么,听说只需要写一套程序就可以生成H5,小程序以及RN的代码模板,并且类似于React的语法。”“哦?还有这么好的事,赶紧研究一下。”

Taro初体验
去官网,Github了解了一下,Taro是由京东·凹凸实验室团队开发的,在掘金上看到他们的发稿,大致归(tu)纳(cao)如下:

代码组织与语法:微信小程序需要在js/wxss/wxml/json文件中来回切换
命名规范:微信文档中的各种命名规范(驼峰、小写中划线、小写连写),惨不忍睹
开发方式:不能加载npm包,不能使用Sass/less等预处理器以及手动的文件处理
原文在这里:为何我们要用 React 来写小程序 - Taro 诞生记

使用Taro
跑去官网,按照步骤,copy了demo运行了一下,大致如下:

npm install -g @tarojs/cli
taro init myApp

H5端运行

$ npm run dev:h5
$ taro build --type h5 --watch

微信小程序端运行

$ npm run dev:weapp
$ taro build --type weapp --watch
起步在这里:Get Started,大致这样就可以跑起来了,分别在浏览器和微信开发工具中运行了一下,都可以看到界面输出,感觉还是不错。

Taro语法
Taro的开发语法遵循React,基本上写过React的都是很好上手。大致是这个样子的:

import Taro, { Component } from '@tarojs/taro'
import Index from './pages/index'

import './app.scss'

class App extends Component {
// 项目配置
config = {
pages: [
'pages/index/index'
],
window: {
backgroundTextStyle: 'light',
navigationBarBackgroundColor: '#fff',
navigationBarTitleText: 'WeChat',
navigationBarTextStyle: 'black'
}
}

componentWillMount () {}

componentDidMount () {}

componentDidShow () {}

componentDidHide () {}

render () {
return (

)
}
}
taro-page

Taro感受
以下是我自己个人的感受,因为还没有在项目中应用,可能有些地方说得不太妥当,还望指出。

一端开发,多端生成
正如Taro自己所说的,只需要写一个版本的代码,就可以编译生成H5、微信小程序以及RN的代码,在效率上确实会有所提升。

Non-Reacter的学习成本
如果作为一个'Reacter',那么用Taro来开发项目的话肯定是没什么上手难度的,但是如果是没有写过react项目的,那么可能最开始还是有学习成本。

文档开发还有欠缺
对比了微信小程序官网和Taro的Gitbook文档,大致上很多东西都是一一对应的,基本的许多场景都可以满足,但是也有欠缺。比如:组件中的RichText在Taro中就介绍不足,在Taro中(可能^_^)和微信小程序中分别是这样调用的:

// Taro

// 微信小程序

文档中缺乏了nodes以及onTap方法的说明,这可能需要开发者自己调试。但实际上我按照微信小程序的方法加上onTap之后,控制台是报方法未定义的错误,而实际上我是有写的。【这点要是在实际开发中可能欲哭无泪,要么就是引入其他的库或者自己手写,无疑会增加开发成本以及风险】。

error

有人或许想说,我直接在生成的微信小程序代码文件夹(dist)中加上不就可以了,但是你可能不是太好改,因为代码是这样的:

source

建议与总结
如果你的项目足够下,并且没有运用到特别复杂的组件,并且有开发多端代码的需要,你可以尝试使用Taro,因为即使你需要的组件没有,也可以在有限的时间内方便地写出来,而且京东商城小程序貌似也是用Taro写的,以后应该会有更多的支持。除此之外,暂时可以先观望观望 O(∩_∩)O哈哈~

Taro开发微信小程序的更多相关文章

  1. Taro开发微信小程序的初体验

    了解Taro 听说Taro是从几个星期前开始的,在一次饭桌上,一个小伙伴说:"Hey, 你听说了Taro么,听说只需要写一套程序就可以生成H5,小程序以及RN的代码模板,并且类似于React ...

  2. Taro开发微信小程序遇到的问题和解决方法

    1.scroll-view 置顶, 给设置scroll-top为0无效问题? 解决方案: 不触发置顶问题,需要给scroll-top一个设置接近0的随机数,Math.random() 2.scroll ...

  3. Taro开发微信小程序之初始化地图到当前位置

    在componentDidMount中,初始化mapCtx. let _this = this this.mapCtx = Taro.createMapContext('container') //c ...

  4. Taro开发微信小程序之利用腾讯地图sdk标记

    首先要下载腾讯地图提供的sdk,放在项目的对应目录下,引用. import QQMapWX from '../../sdks/qqmap-wx-jssdk' 设置好后,就可以开始使用了. let qq ...

  5. 迅速上手:使用taro构建微信小程序基础教程

    前言 由于微信小程序在开发上不能安装npm依赖,和开发流程上也饱受诟病:Taro 是由京东·凹凸实验室(aotu.io)倾力打造的 多端开发解决方案,它的api基于react,在本篇文章中主要介绍了使 ...

  6. 【Taro全实践】Taro在微信小程序中的生命周期

    一.Taro的本身生命周期 生命周期componentWillMount在微信小程序中这一生命周期方法对应页面的onLoad或入口文件app中的onLaunch componentDidMount在微 ...

  7. 如何用TypeScript开发微信小程序

    微信小程序来了!这个号称干掉传统app的玩意儿虽然目前处于内测阶段,不过目前在应用号的官方文档里已经放出了没有内测号也能使用的模拟器了. 工具和文档可以参考官方文档:https://mp.weixin ...

  8. 关于开发微信小程序后端linux使用xampp配置https

    关于开发微信小程序后端linux使用xampp配置https 背景 由于最近开发微信小程序,前后端交互需要使用https协议,故需要配置https服务 服务器环境 服务器系统 ubuntu 环境 xa ...

  9. 开发微信小程序中SSL协议的申请、证书绑定、TLS 版本处理等

    在上篇随笔<基于微信小程序的系统开发准备工作>介绍了开发微信小程序的一些前期的架构设计.技术路线 .工具准备等方面内容,本篇随笔继续这个步骤,逐步介绍我们实际开发过程中对SSL协议的申请及 ...

随机推荐

  1. COCI 2018/2019 CONTEST #2 Solution

    Problem1 Preokret 第一题一定不是什么难题. 第一个问题在读入的时候判断当前时间是不是在1440及以前就行 第二个问题考虑离线处理,由于每个时刻只能最多发生1个事件那么就弄个桶记录每一 ...

  2. NOIP 2018 记

    “这个时刻总是会来临的,日夜磨砺的剑锋,能否在今天展现出你的利刃呢?” 十一月十一日的紫荆港,早上的空气有些冷瑟.面对未知的$Day1$,我的心里尚且没有多少底数. $T1$是一道原题,也不难,并没有 ...

  3. debian9使用systemd部署etcd集群

    在centos上,是可以直接使用yum安装etcd的: # yum list | grep etcd etcd.x86_64 3.2.9-3.el7 @extras 但是,在debian上却没有安装包 ...

  4. Python 基础数据类型之tuplu

    Python的元组与列表类似,不同之处在于元组的元素不能修改. 元组使用小括号,列表使用方括号. 1.元组的定义 tuple1 = ("hello", "world&qu ...

  5. Dubbo学习笔记4:服务消费端泛化调用与异步调用

    本文借用dubbo.learn的Dubbo API方式来解释原理. 服务消费端泛化调用 前面我们讲解到,基于Spring和基于Dubbo API方式搭建简单的分布式系统时,服务消费端引入了一个SDK二 ...

  6. ASP.NET真假分页—真分页

    当数据量过大,有几万甚至十几万条数据时,每次都从数据库中取出所有数据就会降低查询效率,系统运行慢,还有可能卡死,这时假分页就会显得很不人性化,因此有了真分页的必要性. 正如上篇博文总结归纳,“真”相对 ...

  7. 20155314 2016-2017-2 《Java程序设计》第6周学习总结

    20155314 2016-2017-2 <Java程序设计>第6周学习总结 教材学习内容总结 理解流与IO 理解InputStream/OutPutStream的继承架构 理解Reade ...

  8. DataTable转Json(兼容easyUI特殊json分页)

    用法:上述方法是DataTable的扩展方法:静态类静态方法,变量前用this (一)ps:普通datatable转标准json DataTable dt = 获取db中的datatable数据. s ...

  9. oracle的中文排序问题

    mysql中文排序有convert(name using gbk)这样的函数,于是研究了一下oracle中文排序: 使用拼音排序 SQL> select * from chineseordert ...

  10. linux怎么执行jar文件 怎么打可执行的jar包

    Linux下执行jar文件方法:命令行下进入文件目录,执行java -jar file.jar即可,也可在桌面创建一个启动器,在命令栏填写相关的命令:java -jar /file路径/file.ja ...