愿卿一路好风景

此心安处是吾乡

0%

taro笔记

发表于 更新于

一天有一天的事情，想想自己也是很久没写博客了，越来越懒了，周五就很想躺着追剧，想想还是克制了，得把我这篇写写。

最近这个taro整得我有点难过，已经各执一段时间的东西又被捡起来了，要搞啥适老化，调样式调得有点烦，昨天晚上用自己的电脑安装了下taro，想运行下项目，结果出现了一堆问题，果然人生就是不断地制造问题然后不断地解决问题的，解决了挺有成就感的，解决不了就摆烂，到了某个时间段答案总会浮出水面。

安装Taro

1
2
3
4
5
6
7
8
# 使用 npm 安装 CLI
$ npm install -g @tarojs/cli

# OR 使用 yarn 安装 CLI
$ yarn global add @tarojs/cli

# OR 安装了 cnpm，使用 cnpm 安装 CLI
$ cnpm install -g @tarojs/cli

我在安装的时候提示已经安装成功了，但是用yarn dev:weapp编译运行的时候出现了错误，后来搜索了一些解决方案，反正就是不断地尝试，因为你并不知道答案对不对，有时候它没用，有时候它就莫名奇妙地对了，结果都是摸索出来的。 网上有人说yarn 的 全局安装位置 和 全局bin位置不同导致错误，我查看了自己的yarn全局安装位置和全局bin位置，果然不同，具体看这篇npm/yarn修改全局安装路径和缓存路径

修改之后将yarn全局bin路径添加到电脑的环境变量。

在执行安装taro指令的时候尽量不要在项目目录里面执行,不然很容易全局安装不了，我也不知道是不是有这个原因，当时我是设置好环境变量，然后再C盘根路径下打开终端执行安装命令，它就安装成功了。

好了，安装好Taro,编译项目，提示Taro已经运行起来了，版本号是。。。，记不清了，然后又开始报错，说找不到啥啥的，昨天晚上没截图，不好意思。。。倒腾了一会，最后想到了可能是taro版本的问题，因为观察到项目里用的taro版本和我安装的不一样，我安装的版本要高些，然后重新安装项目对应版本的，重新编译运行，项目跑起来啦！！

打开微信开发者工具，哦豁，提示app.json文件找不到！！！，救命，为什么的在公司打开这个项目的时候没遇到这么多问题，此时已是晚上11点多，我在想我还有时间改点东西吗，我真的是会，好吧，开始解决。其实之前没接触过taro ,该咋样咋样把。最后的答案，在project.private.config.json里面加入以下代码

1
"miniprogramRppt":"./路径" 双引号的内容是你项目文件app.json所在的路径，路径里面不要加入app.json，指明到它的上一级路径即可

ok ,终于出来了，然后今天改完了样式，准备全局注入，结果无法像pc端那样全局加入类，我真的是。。。。郁闷了一个下午，网上的回答也是少得可怜，基本没啥答案，幸运的是今天h5正常在浏览器打开了，最重要得事情就是想想怎么像在浏览器那样获取DOM添加类名，这个周末注定是要和taro过了，我的css视频还没刷完呢。。。。不过研究下taro也不错，希望不会让人觉得太烦躁。

最后，附上无意中听到的一首周杰伦的《手写的从前》里的一段rap歌词，真的爱了，希望能唤醒我已多年未陶冶的情操。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
微风需要竹林 溪流需要蜻蜓
乡愁般的离开 需要片片浮萍
记得那年的雨季 回忆里特安静
哭过后的决定 是否还能进行
我傻傻等待 傻傻等春暖花开
等终等于等明等白 等爱情回来
青春属于表白 阳光属于窗台
而我想我属于一个拥有你的未来
纸上的彩虹 用素描画的钟
我还在修改 回忆之中你的笑容
该怎么去形容 为思念酝酿的痛
夜空霓虹 都是我不要的繁荣
或许去趟沙滩 或许去看夕阳
或许任何一个可以想心事的地方
情绪在咖啡馆 被调成一篇文章
彻底爱上你如诗一般透明的泪光

Taro的页面通信机制

h5和小程序的页面通信区别

Taro在写h5和小程序时还是存在一定的差异的，最近踩了好多坑

首先Taro提拱了判断小程序和h5环境的api

1
2
3
4
5
6
7
8
9
10
Taro.getEnv() 返回值可有以下几种

    "WEAPP"
    "WEB"
    "RN"
    "SWAN"
    "ALIPAY"
    "TT"
    "JD"

小程序页面通信

小程序如果从当前页面跳入下一个页面，进行一系列操作后返回当前页面并刷新当前页面，可以不采用页面通信的方法，因为小程序每次回到页面的时候都会重新刷新页面数据的

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//发起事件的页面
const pages = Taro.getCurrentPages();
const current = pages[pages.length - 1];
const eventChannel = current.getOpenerEventChannel();
eventChannel.emit("modifyEvent");

//监听事件的页面在跳转到发起事件页面之后将事件注册一下
Taro.navigateTo({
           url: '发起事件的页面',
           events: {
               modifyEvent: () => {
                   //执行一些操作
               },
           },
       });
 Taro.navigateBack();

h5页面通信

h5跳转到下一个页面进行一系列的操作后跳回之前的页面并刷新跳回来的页面，它是不会自动刷新的，所以只能用这种页面通信的方法。

1
2
3
4
5
发起事件的页面
 Taro.eventCenter.trigger('modifyEvent') //modifyEvent为事件名称
 监听事件的页面接听之后执行相关的操作
 Taro.eventCenter.on('modifyEvent', (arg) => { 一些操作 })
 Taro.navigateBack();