最近在学习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点,如果有其他问题欢迎留言交流~~