Taro 知乎微信小程序demo搭建

最近在学习taro框架,准备先找到小项目找找感觉看看规范之类。

找了taro里的知乎小项目,但是因为版本问题再加上不太熟练微信开发工具的使用,不知道从哪儿下手,相关问题也没怎么在网上找到,最后调了一两天,终于成功展示了。

下面简单说一下步骤,给同样迷惑的伙伴指个路。

1.demo地址:https://github.com/NervJS/taro-zhihu-sample

上面有怎么用git下载,安装依赖等操作。安装过程没什么大问题,出现了的话再网上搜也有相关解决方案,就不一一阐述了。

预览模式我直接输入的taro build 的命令。

2.微信开发工具预览

打开微信开发工具,导入下载好的文件。注意导入dist文件,它含有在上一步taro build...命令中生成的app.json等文件。

Taro 知乎微信小程序demo搭建_第1张图片
 

bug1:

如果导入进去之后,,页面一直在显示加载,可能你没有勾选不校验合法域名。

找到微信开发工具顶栏,进行设置-项目设置,你的微信开发工具应该是下面这个样子~

Taro 知乎微信小程序demo搭建_第2张图片

但是~!bug2还是来了。

TypeError:(0,_index.genCompid) is not a function

Taro 知乎微信小程序demo搭建_第3张图片

我百度到两条相关信息,说是taro版本和你package.json版本不对应。你也可以在命令行内 taro -v 查看一下你taro的版本,再点开这个项目,找到package.json文件,查看版本。贴个图,这是1.0的版本,而我taro是1.3版本。

Taro 知乎微信小程序demo搭建_第4张图片

所以,解决办法就是让package.json,也就是依赖于taro版本保持一致。

1.更新package.json

网上有相关方法,但是更新过程好像要从外网进行???提示说:Hmmmmm... this is taking a long time. Your console is telling me to wait for 找了好多相关问题,没办法解决。于是我放弃这个操作了

2.更换taro版本。

https://blog.csdn.net/hezhongla0811/article/details/90522210

我是参考这个的。

1.找到你安装nodejs设置的node_global文件夹下的node_modules ,先给你的taro加个后缀。

Taro 知乎微信小程序demo搭建_第5张图片

2. npm install -g @tarojs/[email protected]

1.2.26版本号的话对应你点开的package.json看到的版本号,我直接改的1.0.0

安装好之后,你在使用taro命令的话就是使用的1.0.0版本。

 

这个时候你再taro build --type weapp --watch

你在从微信开发工具打开,就发现它终于显示了!!!!!!!!

 

bug3

发现界面无加载。

Taro 知乎微信小程序demo搭建_第6张图片

bug详细信息:

Component is not found in path "components/feed/feed.js" (using by "pages/discovery/discovery");onAppRoute
Error: Component is not found in path "components/feed/feed.js" (using by "pages/discovery/discovery")
    at K (http://127.0.0.1:38261/appservice/__dev__/WAService.js:1:1192379)
    at K (http://127.0.0.1:38261/appservice/__dev__/WAService.js:1:1192583)
    at http://127.0.0.1:38261/appservice/__dev__/WAService.js:1:1210281
    at Object.Fe (http://127.0.0.1:38261/appservice/__dev__/WAService.js:1:1210860)
    at Function.value (http://127.0.0.1:38261/appservice/__dev__/WAService.js:1:1239122)
    at Tt (http://127.0.0.1:38261/appservice/__dev__/WAService.js:1:1254181)
    at http://127.0.0.1:38261/appservice/__dev__/WAService.js:1:1257766
    at It (http://127.0.0.1:38261/appservice/__dev__/WAService.js:1:1257831)
    at Function. (http://127.0.0.1:38261/appservice/__dev__/WAService.js:1:1261479)
    at i. (http://127.0.0.1:38261/appservice/__dev__/WAService.js:1:1231795)
console.error @ VM6580:1
t.(anonymous function) @ WAService.js:1
errorReport @ WAService.js:1
(anonymous) @ WAService.js:1
E @ WAService.js:1
(anonymous) @ WAService.js:1
i.emit @ WAService.js:1
emit @ WAService.js:1
(anonymous) @ WAService.js:1
(anonymous) @ WAService.js:1
e @ appservice?t=1562663121764:1224
n.registerCallback.t @ appservice?t=1562663121764:1224
u.forEach.t @ appservice?t=1562663121764:1224
(anonymous) @ appservice?t=1562663121764:1224
a.onmessage @ appservice?t=1562663121764:1224

解决办法:

将discovery.js文件的import Feed from '../../components/feed/feed.js' 的feed.js改为feed

Taro 知乎微信小程序demo搭建_第7张图片

 

ok~现在整个项目都正常了,我可以细细琢磨琢磨了。我只写了我觉得比较重要的几个bug点,如果有其他问题欢迎留言交流~~

你可能感兴趣的:(前端)