taro
文章平均质量分 57
瞬间的醒悟
无奇不有
展开
-
taro.js和nutui实现商品选择页面
需要注意的是,这里使用了不少的 Taro-ui 组件,比如 `AtInputNumber`、`AtDivider` 以及 `AtButton` 等等。确认选择: {spec.join('-')}spec: ['红色', 'L'],spec: ['红色', 'M'],spec: ['蓝色', 'L'],spec: ['蓝色', 'M'],// 存储当前选择的规格,初始为空。商品名称原创 2023-08-25 08:55:05 · 866 阅读 · 0 评论 -
taro之--获取手机号并登录
/用户登录凭证(有效期五分钟)。开发者需要在开发者服务器后台调用 api,使用 code 换取 openid 和 session_key 等信息。console.log("登录失败!//登录成功将token 和用户信息缓存到本地。// code置换openid登录。//获取手机号的授权code.原创 2023-05-22 14:45:19 · 1134 阅读 · 0 评论 -
taro,vue实现登录拦截未登录
taro实现路由拦截未登录原创 2023-05-10 14:18:48 · 883 阅读 · 0 评论 -
vue之--使用TypeScript
在基于 Vite 的配置中,开发服务器和打包器将只会对 TypeScript 文件执行语法转译,而不会执行任何类型检查,这保证了 Vite 开发服务器在使用 TypeScript 时也能始终保持飞快的速度。除了 TypeScript 文件,它还支持 Vue 的单文件组件。是官方的 VSCode 扩展,提供了 Vue 单文件组件中的 TypeScript 支持,还伴随着一些其他非常棒的特性。我们已经在 IDE 中通过单独的进程运行着类型检查了,却还要在构建流程中执行类型检查导致降低开发体验,这似乎不太划算。原创 2023-04-05 22:38:03 · 2337 阅读 · 0 评论 -
taro之--组件库说明
Taro 以为标准,结合jsx语法规范,定制了一套自己的组件库规范。基于以上原则,在小程序端,我们可以使用所有的小程序原生组件,而在其他端,我们提供了对应的组件库实现在使用时,React 中我们需要先从 Taro 标准组件库引用组件,再进行使用,例如使用<View /><Text />组件,而 Vue 我们则无需引入。原创 2023-04-05 22:36:48 · 551 阅读 · 0 评论 -
taro之--使用nutui
通过本文你可以掌握 NutUI 的安装和使用方法,操作简单易上手,开发简洁快速。原创 2023-04-05 22:07:11 · 1590 阅读 · 0 评论 -
taro之编译配置详情1
string'src'源码存放目录。原创 2023-04-04 13:30:10 · 230 阅读 · 0 评论 -
taro之--配置目录别名
为了让编辑器(VS Code)不报错,并继续使用自动路径补全的功能,需要在项目根目录下的。用于配置目录别名,从而方便书写代码引用路径。为了避免书写多级相对路径,我们可以如下配置。目录配置成别名,将根目录下的。开头,因为有小概率会与某些。通过上述配置,可以将。原创 2023-04-04 13:31:35 · 710 阅读 · 0 评论 -
taro之--多端同步调试
如果你想要多端同步调试的话先编译后的文件就会被后编译好的文件覆盖。默认情况下,Taro 会把各端打包后的文件都放在。在这样的配置下,微信小程序编译后的目录就会是。但我们可以通过修改编译配置的。,H5 编译后目录就会是。原创 2023-04-03 09:37:11 · 148 阅读 · 0 评论 -
taro之--多端开发
例如我们正在实现 V2EX 论坛应用,当前的 API 没有办法在浏览器中跨域调用,因此我们需要在 H5 端使用另一份 API。在某些情况下,不同平台的表现或业务逻辑有质的不同。在这样的情况下我们是没有办法做到「一套代码走天下」的。原创 2023-04-03 09:39:05 · 185 阅读 · 0 评论 -
taro之--自定义编译
在特定的情况下,Taro 自带的编译系统没有办法满足我们的编译需求,这时 Taro 提供了两种拓展编译的方案:使用 Webpack 进行拓展在打包体积分析中我们在添加了一个 Webpack 插件,达到了打包体积/依赖分析的效果。事实上通过这个配置我们可以几乎使用任何 Webpack 生态的插件和loader,例如我们想使用来进行开发:...mini: {// webpack-chain 详细语法请参考文档:https://github.com/neutrinojs/webpack-chain。原创 2023-04-03 09:02:31 · 540 阅读 · 0 评论 -
taro之--打包体积
但值得注意,Taro 默认的打包配置是为了让多数项目和需求都可以运行,而不是针对任何项目的最优选择。因此你可以在 Taro 配置的基础之上再针对自己的项目进行优化。在一些情况,我们希望我们的页面只有当用到时才按需进行加载。这种情况在 Taro 应用被称为分包,分包的使用也非常简单,只需要通过配置入口文件。来分析我们依赖打包体积,这个插件会在浏览器打开一个可视化的图表页面告诉我们引用各个包的体积。,如果你不需要那么高的兼容性,或者不需要某些 ES2015+ 语法支持,可以自行配置。配置的,具体来说是使用。原创 2023-04-02 20:48:33 · 890 阅读 · 0 评论 -
taro之--性能优化
这是由于 Taro 的渲染机制导致的:在页面初始化时,原生小程序可以从本地直接取数据渲染,但 Taro 会把初始数据通过 React/Vue 渲染成一颗 DOM 树,然后将这颗 DOM 树序列化之后交给小程序渲染。)中,我们直接渲染从远程得来的数据。这样做没有什么问题,但如果我们的数据非常庞大,或者列表渲染的 DOM 结构异常复杂,这就可能会产生性能问题。为了解决这个问题,Taro 引入了一种名为预渲染(Prerender)的技术,和服务端渲染一样,在 Taro CLI 直接将要渲染的页面转换为。原创 2023-04-02 20:45:49 · 618 阅读 · 0 评论 -
taro之--css工具
【代码】taro之--css工具。原创 2023-04-02 20:40:41 · 223 阅读 · 0 评论 -
taro之--项目进阶与优化
可能就会导致我们的数据流变得难以追踪。好在这个问题不管是在 React 还是 Vue 社区中都有很好的解决方案。取出当前帖子的数据——这种简单的发布/订阅模式在处理简单逻辑时非常有效且清晰。一旦我们的业务逻辑变得复杂,一个简单的发布订阅机制绑定到一个全局的。发起了一个事件,把当前帖子的数据注入到一个全局的。在入口文件中注入 Vuex 的。然后在帖子组件中我们就可以通过。)时,通过 Taro 内置的。中,然后在帖子详情页面再从。在帖子详情组件中通过。在我们实现帖子组件(原创 2023-03-31 22:40:34 · 449 阅读 · 0 评论 -
taro之--页面组件
中,每一个 Taro 项目至少有一个页面组件。这不正是我们熟悉的 React 和 Vue 组件吗!页面组件是每一项路由将会渲染的页面,Taro 的页面默认放在。,细心的朋友可以发现,这个路径恰巧对应的就是我们。和入口组件一样,每一个页面组件(例如。)也会有一个页面配置(例如。原创 2023-03-31 22:40:43 · 629 阅读 · 0 评论 -
taro之--设计稿以及尺寸单位
在 Taro 中尺寸单位建议使用px百分比 %,Taro 默认会对所有单位进行转换。在 Taro 中书写尺寸按照 1:1 的关系来进行书写,即从设计稿上量的长度100px,那么尺寸书写就是100px,当转成微信小程序的时候,尺寸将默认转换为100rpx,当转成 H5 时将默认转换为以rem为单位的值。如果你希望部分px单位不被转换成rpx或者rem,最简单的做法就是在 px 单位中增加一个大写字母,例如Px或者PX这样,则会被转换插件忽略。结合过往的开发经验,Taro 默认以750px。原创 2023-03-28 15:49:57 · 1235 阅读 · 0 评论 -
taro之--编译配置
编译配置存放于项目根目录下的configindex.jsdev.jsprod.js。原创 2023-03-28 15:43:16 · 384 阅读 · 0 评论 -
taro项目--使用axios
基于axios支持自定义适配器,只需要针对不同环境下的http请求api进行适配进行替换,axios可以使用在任意平台。由于axios在其他项目中大量使用,本项目实现Taro框架下的适配器,可以在Taroa项目中完美使用原汁原味的axios,统一团队前端技术栈,统一http请求类库。采用此方式对项目零侵入,开发者专注于axios的api即可。git clone。原创 2023-03-28 15:41:46 · 1603 阅读 · 0 评论 -
taro之--静态资源引用
在小程序的样式中,默认不能直接引用本地资源,只能通过网络地址、Base64 的方式来进行资源引用,为了方便开发,Taro 提供了直接在样式文件中引用本地资源的方式,其原理是通过 PostCSS 的。可以直接通过 ES6 的 import 语法来引用此类文件,拿到 JSON 文件输出的 JSON 数据。可以直接通过 ES6 的 import 语法来引用此类文件,拿到文件引用后直接在 JSX 中进行使用。可以直接通过 ES6 的 import 语法来引用样式文件。例如引用 CSS 文件。引用 SCSS 文件。原创 2023-03-26 22:39:35 · 486 阅读 · 0 评论 -
taro之--微信自定义tabbar
Taro 支持使用 React、Vue、或者小程序原生语法来编写小程序自定义 TabBar 组件。原创 2023-03-26 22:39:49 · 3509 阅读 · 0 评论 -
taro之--多端调试
对于微信小程序,还需要将project.config.json文件的miniprogramRoot 的值改为 dist/weapp/,这样就可以正常在开发者工具中看到小程序了。原创 2023-03-26 22:33:28 · 356 阅读 · 0 评论 -
taro--之使用nutui组件库
NutUI 4.0 移除了 babel-plugin-import 插件的使用,按需引入样式不再依赖于 babel,开发者可以选择其他效率更高的编译工具。同时,NutUI 适配了支持自动引入和注册组件的 unplugin-vue-components 插件,这将使 Taro 的开发体验有所提升。配置完成后,可以直接在模板中使用 NutUI 组件,unplugin-vue-components 插件会自动注册对应的组件,并按需引入组件样式。4、在 webpack 下使用按需引入时组件没有类型提示。原创 2023-03-24 22:41:31 · 737 阅读 · 0 评论 -
taro之--路由与tabbar
其中前三个页面我们可以把它们规划在 tabBar 里,tabBar 是 Taro 内置的导航栏,可以在 app.config.js 配置,配置完成之后处于的 tabBar 位置的页面会显示一个导航栏。到目前为止,我们已经实现了这个应用的所有逻辑,除去「节点列表」页面(在进阶指南我们会讨论这个页面组件)之外,剩下的页面都可以通过我们已经讲解过的组件或页面快速抽象完成。在 src/components/thread 组件中,我们通过。首页,展示最新帖子(已完成)节点帖子 (可通过组件复用)帖子详情 (已完成)原创 2023-03-24 21:46:39 · 467 阅读 · 0 评论 -
taro之--taro依赖的环境安装
当你的机器已经存在了 Node.js 环境,可以通过在终端输入命令 npm i -g @tarojs/cli 安装 Taro CLI。Taro CLI 依赖于 Node.js 环境,所以在你的机器上必须安装 Node.js 环境。安装 Node.js 环境有很多种方法,如果你完全不了解 Node.js 可以访问。不管使用 VSCode 还是 WebStrom,安装了上述插件之后使用 Taro 都实现自动补全和代码实时检查(linting)的功能。(或其它支持 Web 开发的 Jetbrains IDE)。原创 2023-03-24 21:44:50 · 805 阅读 · 0 评论 -
taro之--跨平台开发
来解决跨端差异的功能。针对一项功能,如果多个端之间都有差异,那么开发者可以通过将文件修改成 原文件名 + 端类型 的命名形式(端类型对应着 process.env.TARO_ENV 的取值),不同端的文件代码对外保持统一接口,而引用的时候仍然是 import 原文件名的文件。Taro 的设计初衷就是为了统一跨平台的开发方式,并且已经尽力通过运行时框架、组件、API 去抹平多端差异,但是由于不同的平台之间还是存在一些无法消除的差异,所以为了更好的实现跨平台开发,Taro 中提供了如下的解决方案。原创 2023-03-23 23:29:27 · 774 阅读 · 0 评论 -
taro之路由功能
Taro 为了支持前端路由库的使用,在运行时中引入了 histroylocation 对象的实现,且尽可能与 Web 端规范对齐,你可以在 window 对象上访问到 history 和 location 对象。每当切换页面时,会将当前页面的页面路由状态缓存。当返回上一级页面时,会重新将当前页面的页面路由状态挂载到 window 对象中。需要说明的是,location 对象仅描述当前页面的链接状态,页面的跳转仍需要调用 Taro.navigateTo() 方法。Taro 需要升级至。原创 2023-03-23 23:27:50 · 1262 阅读 · 0 评论 -
taro 之--taro的安装与创建项目
在创建完项目之后,Taro 会默认开始安装项目所需要的依赖,安装使用的工具按照 yarn > cnpm > npm 顺序进行检测。dev 模式生成的文件较大,设置环境变量 NODE_ENV 为 production 可以开启压缩,方便预览,但编译速度会下降。Taro 项目基于 node,请确保已具备较新的 node 环境(>=12.0.0),推荐使用 node 版本管理工具。使用 Taro 的 build 命令可以把 Taro 代码编译成不同端的代码,然后在对应的开发工具中查看效果。原创 2023-03-22 20:23:00 · 1056 阅读 · 0 评论 -
taro 创建项目后不能正常运行的解决办法
如果是部分已有项目需要升级到 Taro 3,可以在这些项目本地安装相应版本的 Taro CLI,这样通过 yarn 或者 npm 执行命令的话就会直接使用本地安装的 Taro CLI,安装方式 yarn add @tarojs/cli。如果你所使用的 Taro CLI 版本为 3.0.9,而项目里使用的依赖版本为 3.0.10,则有可能会出现问题,这时请将你的 Taro CLI 版本更新至项目依赖版本号相同的版本,如果还是出现问题,请向我们提出。如果是需要新创建 Taro 3 项目,可以使用。原创 2023-03-22 14:02:01 · 808 阅读 · 0 评论