taro 重新加载小程序_Taro开发微信小程序的初体验

了解Taro

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

Taro初体验

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

代码组织与语法:微信小程序需要在js/wxss/wxml/json文件中来回切换

命名规范:微信文档中的各种命名规范(驼峰、小写中划线、小写连写),惨不忍睹

开发方式:不能加载npm包,不能使用Sass/less等预处理器以及手动的文件处理

使用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感受

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

一端开发,多端生成

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

Non-Reacter的学习成本

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

文档开发还有欠缺

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

// Taro

// 微信小程序

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

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

建议与总结

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/349153.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

应用服务器web服务器_最受欢迎的应用服务器

应用服务器web服务器这是本系列的第二篇文章,我们将发布有关Java安装的统计数据。 使用的数据集来自免费的Plumbr安装,在过去六个月中,我们总共收集了1,024个不同的环境。 该系列的第一篇文章分析了基础-运行JVM的操作系统,是32位…

python 类中定义列表_Python-从类定义中的列表理解访问类变量

小编典典类范围和列表,集合或字典的理解以及生成器表达式不混合。为什么;或者,官方用词在Python 3中,为列表理解赋予了它们自己的适当范围(本地名称空间),以防止其局部变量渗入周围的范围内(即使在理解范围之后&#x…

mvc html 生成图片,asp.net mvc5 cs代码中获取视图生成后的HTML

public static class ViewExtensions { /// /// 在控制器内获取指定视图生成后的HTML /// /// 当前控制器的上下文 /// 视图名称 /// 视图所需要的参数 /// 视图生成的HTML public static string GetViewHtml(this ControllerContext context, string viewName, Object param) …

如何在Java 8中将Lambda表达式转换为方法引用?

如果您使用Java 8进行编码,那么您会知道使用方法引用代替lambda表达式会使您的代码更具可读性,因此建议尽可能使用方法引用替换lambda表达式,但是,最大的问题是,您如何查找是否可以用方法引用替换lambda? 是…

最大化窗口设置_打开表格总是默认窗口最小化?适用Word、PPT等其他应用

今天有小哥哥说每天早上上班打开第一个表格时,这样显示;打开第二个表时是这样显示;每次打开第二个表后点最大化再打开其他的表才正常显示为最大化的状态。其实,这只是表格的默认打开方式改变了,我们改正过来就好了。在…

html5块元素代码,html5 区块与内联div 与span html块级元素(示例代码)

HTML 和 可以通过 和 将 HTML 元素组合起来。HTML 块元素大多数 HTML 元素被定义为块级元素或内联元素。编者注:"块级元素"译为 block level element,"内联元素"译为 inline element。块级元素在浏览器显示时,通常会以新…

js 加总数组中某一列_JS数组求和的常用方法实例小结

本文实例总结了JS数组求和的常用方法。分享给大家供大家参考&#xff0c;具体如下&#xff1a;js数组求和的方法var array [1, 2, 3, 4, 5];var sum 0;1.for循环for (let i 0; i < array.length; i) {sum array[i];}console.log(sum)运行结果sum为 15&#xff0c;如下图…

html页面js遍历listview,javascript实现的listview效果

javascript实现的listview效果更新时间&#xff1a;2007年04月28日 00:00:00 作者&#xff1a;#oContainer {width: 600px;height: 500px;border: 1px solid menu;margin: 0px;padding: 0px;overflow: hidden;}a {color: black;text-decoration: none;}a:hover {color: red;t…

华南x79主板u盘装系统教程_华南x99主板装win7系统及BIOS设置教程

[文章导读]最近有小伙伴问我华南x99主板能装win7吗&#xff1f;华南x99主板可以安装win7&#xff0c;但安装win7过程中有很多问题&#xff0c;要采用win7新机型安装&#xff0c;且要在BIOS中关闭“安全启动”和开启"兼容模式"选择&#xff0c;如果是NVME接口的固态硬…

html按钮返回上一步操作,用js实现返回上一步操作

按钮式&#xff1a;onClick"location.hrefhttp://www.ddhbb.com/">链接式&#xff1a;href"javascript:history.go(-1)">返回上一步href"">返回上一步直接跳转式&#xff1a;开新窗口&#xff1a;onClick"window.open(http://www.…

Apache Ignite本机持久性,简要概述

通过将数据的工作集放入系统内存中&#xff0c;内存中方法可以达到极高的速度。 当所有数据都保存在内存中后&#xff0c;处理使用传统旋转磁盘引起的问题的需求就消失了。 例如&#xff0c;这意味着无需维护数据的其他缓存副本并管理它们之间的同步。 但是这种方法还有一个缺点…

cheetah的中文_cheetah是什么意思_cheetah的翻译_音标_读音_用法_例句_爱词霸在线词典...

全部非洲猎豹One economist talks hopefully of the " cheetah generation " taking over from the " hippos ".有一位经济学者满怀希望地讲道,肯尼亚的年轻人是征服了 “ 河马一族 ” 的 “ 猎豹一代 ”.期刊摘选The fastest animal on land is the cheet…

计算机减法英语,英语加减乘除的表达

1. 加: “一加二等于三”可以这样表达One plus two is three.One plus two makes three.One plus two equals three.One and two are three.One and two make three.One and two equal three.2. 减: “八减四等于四” 可以这样表达Eight minus four is four.Eight minus four m…

Java命令行界面(第23部分):Rop

Rop库在其主页上被描述为“用Java编写的轻量级命令行选项解析器”。 Rop的“简介”还指出&#xff1a;“ Rop的设计目的是最小化同时方便&#xff0c;并涵盖了大多数常见的命令行解析用例。” 这篇文章是本系列中第23篇有关解析Java命令行参数的文章 &#xff0c;重点是Rop。 …

80端口请求太多超时 php_apmserver 80端口老是被占用问题解决

apmserver 80端口老是被占用问题解决1、在windows下如何查看80端口占用情况?是被哪个进程占用?如何终止等.这里主要是用到windows下的DOS工具,点击”开始”–“运行”,输入”cmd”后点击确定按钮,进入DOS窗口,接下来分别运行以下命令:>netstat -aon | findstr “80”Proto…

计算机网络计技术段标 实训,计算机网络技术实训报告精选.pdf

计算机网络技术实训报告精选《计算机网络技术》实训报告专 业 计算机应用技术专 业 计算机应用技术专专 业业 计计算算机机应应用用技技术术系 别 电子信息工程系系 别 电子信息工程系系系 别别 电电子子信信息息工工程程系系课 程 计算机网络技术课 程 计算机网络技术课课 程程…

mysql 定义年龄属性_sql中定义年龄用什么数据类型,长度为多少?

展开全部sql中定义年龄可以用的用数据类型及长度&#xff1a;1、char(3) &#xff1a;长度为3的字符串。小于10位且62616964757a686964616fe59b9ee7ad9431333431373865长度基本固定的字符串用char。2、varchar(3)&#xff1a;长度为3的字符串。长度大于10的用varchar&#xff0…

Java 9,Jigsaw,JPMS和模块:个人探索

Java 9由于Jigsaw项目而延迟了很多次&#xff0c;您可能会听到很多关于模块&#xff0c;模块化和其他内容的信息&#xff0c;那么&#xff0c;它的全部含义是什么&#xff1f; 模块化到底是什么&#xff0c;模块化平台是什么意思&#xff1f; Java平台模块系统&#xff08;JPMS…

仪征市第二中学计算机老师,静心倾听花自开 ——仪征市第二中学徐丞老师

原标题&#xff1a;静心倾听花自开 ——仪征市第二中学徐丞老师徐丞老师是我校一名优秀的青年教师。自2004年从教以来&#xff0c;他满怀对教育事业的真诚&#xff0c;立足本职&#xff0c;默默耕耘&#xff0c;在平凡中成就着不平凡。在教育教学过程中&#xff0c;徐丞老师始终…

eplise怎么连接数据库_Eclipse连接MySQL数据库(傻瓜篇)

我的环境&#xff1a;MySQL&#xff1a;mysql-essential-5.1.51-win32Eclipse&#xff1a;任意版本&#xff0c;免费的&#xff0c;可以百度的到。下面来创建一个数据&#xff1a;mysql>CREATE DATABASE test; //创建一个数据库mysql>use test; //指定test为当前要操作的…