Taro 知乎微信小程序demo搭建

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

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

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

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

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

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

2.微信开发工具预览

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

 

bug1：

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

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

但是~！bug2还是来了。

TypeError：（0，_index.genCompid) is not a function

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

所以，解决办法就是让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加个后缀。

2. npm install -g @tarojs/cli@1.2.26

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

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

 

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

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

 

bug3

发现界面无加载。

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.<anonymous> (http://127.0.0.1:38261/appservice/__dev__/WAService.js:1:1261479)
    at i.<anonymous> (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

 

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