[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_11":-5},"routes/user.$name.collections",{"_9":10,"_11":12,"_13":14,"_15":16,"_17":18,"_19":16},"topics",[34],"user",{"_20":21,"_13":14,"_22":23,"_24":14,"_25":26,"_27":28,"_29":30,"_31":16,"_32":33},"loginname","ROOKIE-lori","page",1,"limit",20,"total","id","27255","avatar_url","https://avatars1.githubusercontent.com/u/6301122?v=3","githubUsername","create_at","2017-03-03 02:05:55.6","score",5,"topic_count",0,"reply_count","is_star",false,{"_20":35,"_36":37,"_38":39,"_40":41,"_42":43,"_44":45,"_46":33,"_47":33,"_31":48,"_49":50,"_25":51,"_52":53},"20513","author_id","14202","tab","share","content",">写在头部\r\n\r\n本项目写于小程序发布之初，期间小程序官方有过几次更新，例如准备移除了loading组件、改变page的默认高度等，主要看的还是博卡君的文章，后来在朋友的建议下在9月27号写了本篇文章并分享到github上，是做为微信小应用的入门教程，**并非某在线学习网站499收费课程的作业**，特此声明。\r\n\r\n> 微信应用号入门实践之cnode社区版\r\n\r\n首先感谢cnode社区提供的api，本次实现了简单的cnode社区应用号制作。\r\n实现了数据的读取、展示，\r\n实现了简单的布局，\r\n实现了下一页功能。\r\n\r\n放上我的github地址\r\nhttps://github.com/coolfishstudio/wechat-webapp-cnode\r\n\r\n![首页列表](//static.cnodejs.org/Fo4zG2Vfe50352POPZYXv8Ls0Jcc)\r\n![内容详情](//static.cnodejs.org/Fl7TiaW13s541lHZ7Crq7NxKshqG)\r\n\r\n下面就说说我做这个的过程，不足之处，请多多指教，只愿为进步。\r\n\r\n## 1.创建项目\r\n\r\n首先，在官网下载工具，[下载地址](https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=1474887501214) 我的是选择mac版本0.9.092300。\r\n\r\n然后跟着官方的[简版教程](https://mp.weixin.qq.com/debug/wxadoc/dev/?t=1474887501301) 创建一个项目。\r\n\r\n#### 注：现在官方的工具支持无appid创建项目。\r\n\r\n##### 1.打开开发者工具，选择“添加项目”\r\n![](//static.cnodejs.org/FsqxRNIzNDyzItbl-vhAFPr0J5t2)\r\n##### 2.选择无appid，填写地址，创建项目\r\n![](//static.cnodejs.org/Fp098WRAyxgJ415Dt_f0YGhjIMHr)\r\n##### 3.创建成功，看到默认的Demo项目页面\r\n![](//static.cnodejs.org/FuvUmKfcUu8MeLc4eeuwNBfkbfMC)\r\n\r\n## 2.配置\r\n默认的项目里已经没有关于tabBar的配置信息，所以为了学习，我把这个配置进行了修改。\r\n\r\n首先关于配置的说明同样来自于[官方](https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html?t=1474887501556) \r\n\r\n注意：官方的代码有些字段是不一样的，小心被坑。\r\n\r\n```\r\n{\r\n \"pages\":[\r\n \"pages/index/index\",\r\n \"pages/logs/logs\"\r\n ],\r\n \"window\":{\r\n \"backgroundTextStyle\":\"light\",\r\n \"navigationBarBackgroundColor\": \"#fff\",\r\n \"navigationBarTitleText\": \"WeChat\",\r\n \"navigationBarTextStyle\":\"black\"\r\n },\r\n \"tabBar\":{\r\n \"list\": [{\r\n \"pagePath\": \"pages/index/index\",\r\n \"text\": \"首页\"\r\n }, {\r\n \"pagePath\": \"pages/logs/logs\",\r\n \"text\": \"日志\"\r\n }]\r\n }\r\n}\r\n\r\n```\r\n增加了tabBar, 查看调试\r\n![](//static.cnodejs.org/Fl-OboTDeCULcPbs5BiM81nj_Xrc)\r\n看界面是如此的简陋，为此针对tabBar参考官方说明进行了简单的美化。\r\n\r\n```\r\n \"tabBar\":{\r\n \"color\":\"#272636\",\r\n \"selectedColor\":\"#80bd01\",\r\n \"backgroundColor\":\"#fff\",\r\n \"borderStyle\":\"white\",\r\n \"list\":[{\r\n \"pagePath\":\"pages/index/index\",\r\n \"text\":\"首页\",\r\n \"iconPath\":\"images/tabBar/my.png\",\r\n \"selectedIconPath\":\"images/tabBar/my_hl.png\"\r\n },{\r\n \"pagePath\":\"pages/index/index\",\r\n \"text\":\"我的\",\r\n \"iconPath\":\"images/tabBar/list.png\",\r\n \"selectedIconPath\":\"images/tabBar/list_hl.png\"\r\n }]\r\n }\r\n```\r\n效果如图\r\n![](//static.cnodejs.org/FjzwAq6RH5TstCXIYb5ZIt6z3cuj)\r\n最后根据文档，对默认页面的窗口表现进行了修改\r\n\r\n```\r\n \"window\":{\r\n \"backgroundTextStyle\":\"black\",\r\n \"backgroundColor\":\"#fff\",\r\n \"navigationBarBackgroundColor\":\"#000\",\r\n \"navigationBarTitleText\":\"CNODE 应用号版\",\r\n \"navigationBarTextStyle\":\"white\",\r\n \"enablePullDownRefresh\":\"true\"\r\n },\r\n```\r\n效果如图\r\n![](//static.cnodejs.org/Fl4S7o2m50JXXt1xebSgq1pNR_iX)\r\n整体配置文件为\r\n\r\n```\r\n{\r\n \"pages\":[\r\n \"pages/index/index\",\r\n \"pages/logs/logs\"\r\n ],\r\n \"window\":{\r\n \"backgroundTextStyle\":\"black\",\r\n \"backgroundColor\":\"#fff\",\r\n \"navigationBarBackgroundColor\":\"#000\",\r\n \"navigationBarTitleText\":\"CNODE 应用号版\",\r\n \"navigationBarTextStyle\":\"white\",\r\n \"enablePullDownRefresh\":\"true\"\r\n },\r\n \"tabBar\":{\r\n \"color\":\"#272636\",\r\n \"selectedColor\":\"#80bd01\",\r\n \"backgroundColor\":\"#fff\",\r\n \"borderStyle\":\"white\",\r\n \"list\":[{\r\n \"pagePath\":\"pages/index/index\",\r\n \"text\":\"首页\",\r\n \"iconPath\":\"images/tabBar/my.png\",\r\n \"selectedIconPath\":\"images/tabBar/my_hl.png\"\r\n },{\r\n \"pagePath\":\"pages/index/index\",\r\n \"text\":\"我的\",\r\n \"iconPath\":\"images/tabBar/list.png\",\r\n \"selectedIconPath\":\"images/tabBar/list_hl.png\"\r\n }]\r\n }\r\n}\r\n```\r\n## 3.制作首页列表\r\n根据官方要求，我在pages文件夹内创建了topics文件夹，并创建了对应了 topics.js、topics.wxml、topics.wxss 三个文件。\r\n\r\n### 1.注册页面\r\n首先在配置文件里注册这个topics,\r\n\r\n```\r\n \"pages\":[\r\n \"pages/topics/topics\",\r\n \"pages/index/index\",\r\n \"pages/logs/logs\"\r\n ],\r\n```\r\n并且制定tabBar点击跳到对应的topics页面\r\n\r\n```\r\n \"tabBar\":{\r\n \"color\":\"#272636\",\r\n \"selectedColor\":\"#80bd01\",\r\n \"backgroundColor\":\"#fff\",\r\n \"borderStyle\":\"white\",\r\n \"list\":[{\r\n \"pagePath\":\"pages/topics/topics\",\r\n \"text\":\"首页\",\r\n \"iconPath\":\"images/tabBar/my.png\",\r\n \"selectedIconPath\":\"images/tabBar/my_hl.png\"\r\n },{\r\n \"pagePath\":\"pages/index/index\",\r\n \"text\":\"我的\",\r\n \"iconPath\":\"images/tabBar/list.png\",\r\n \"selectedIconPath\":\"images/tabBar/list_hl.png\"\r\n }]\r\n }\r\n```\r\n##### 注意：我发现注册页面的顺序会影响到默认显示tabBar的顺序，所以我把`\"pages/topics/topics\"`放到了`\"pages/index/index\"`的前面\r\n\r\n然后编写topics.js\r\n\r\n```\r\nPage({\r\n data: {\r\n title: '首页列表'\r\n },\r\n onLoad: function () {\r\n console.log('onLoad by topics');\r\n }\r\n});\r\n```\r\n\r\n以及topics.wxml文件\r\n\r\n```\r\n\r\n 测试首页列表界面\r\n\r\n```\r\n和topics.wxss文件\r\n\r\n```\r\n.topics-main {\r\n background: #f60;\r\n height: 100%;\r\n}\r\n```\r\n最后效果如图\r\n![](//static.cnodejs.org/FiunQ0XhES_sidHnkBN9YxABF2iI)\r\n\r\n### 2.创建请求\r\n根据文档[请求数据](https://mp.weixin.qq.com/debug/wxadoc/dev/api/network-request.html?t=1474887499445)，在util文件夹内创建一个api.js文件，专门进行数据请求处理。\r\n\r\n```\r\n'use strict';\r\nvar HOST_URI = 'https://cnodejs.org/api/v1';\r\n\r\nvar GET_TOPICS = '/topics';\r\nvar GET_TOPIC_BY_ID = '/topic/';\r\n\r\nfunction obj2uri (obj) {\r\n return Object.keys(obj).map(function (k) {\r\n return encodeURIComponent(k) + '=' + encodeURIComponent(obj[k]);\r\n }).join('&');\r\n}\r\n\r\nmodule.exports = {\r\n // 获取列表数据\r\n getTopics: function (obj) {\r\n return HOST_URI + GET_TOPICS + '?' + obj2uri(obj);\r\n },\r\n // 获取内容页数据\r\n getTopicByID: function (id, obj) {\r\n return HOST_URI + GET_TOPIC_BY_ID + id + '?' + obj2uri(obj);\r\n }\r\n};\r\n```\r\n修改topics.js\r\n\r\n```\r\nvar Api = require('../../utils/api.js');\r\n\r\nPage({\r\n data: {\r\n title: '首页列表'\r\n },\r\n onLoad: function () {\r\n console.log('onLoad by topics');\r\n this.fetchData();// 获取数据\r\n },\r\n fetchData: function (data) {\r\n // 处理参数\r\n if (!data) data = {};\r\n if (!data.page) data.page = 1;\r\n wx.request({\r\n url: Api.getTopics(data),\r\n success: function (res) {\r\n console.log(res);\r\n }\r\n });\r\n }\r\n});\r\n```\r\n效果如图\r\n![](//static.cnodejs.org/FoonyAMQBgqDpiTKZshoB3ZmnUEU)\r\n成功拿到了数据。\r\n\r\n### 3.完善首页列表\r\n拿到了数据，也能修改界面，那么就直接完善这个首页吧\r\n\r\n代码就不放了，直接上图\r\n![](//static.cnodejs.org/Fo4zG2Vfe50352POPZYXv8Ls0Jcc)\r\n我认为这里值得说的大概只有loading、循环、传参、下一页和页面跳转了。\r\n#### 1.loading\r\n```\r\n \r\n```\r\n在topics.wxml中写官方提供的loading组件，根据在topics.js中对hidden值的修改，来触发loading。\r\n#### 2.循环数据，展示列表\r\n文档提供了[列表渲染](https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/list.html?t=1474887501556)\r\n\r\n通过`wx:for`实现列表的渲染。\r\n\r\n##### 注意: 默认数组的当前项的下标变量名默认为index，数组当前项的变量名默认为item。\r\n```\r\n\r\n \r\n \r\n

\r\n {{item.author.loginname}}\r\n 置顶\r\n 精华\r\n {{item.last_reply_at}}\r\n \r\n {{item.title}}\r\n \r\n \r\n

\r\n {{item.reply_count}}\r\n \r\n \r\n

\r\n {{item.visit_count}}\r\n \r\n \r\n \r\n\r\n```\r\n\r\n附上一个没有样式的列表展现\r\n![](//static.cnodejs.org/FkoTZY1Q9kqOWa1-e70FHifzHVo7)\r\n\r\n#### 3.传参，实现tab切换\r\n根据cnode的api可以知道通过tab不同的值，获得到不同标签下的内容列表。\r\n\r\n所以在页面的最上面 tab 栏中\r\n\r\n```\r\n \r\n 全部\r\n 精华\r\n \r\n 问答\r\n 招聘\r\n \r\n```\r\n\r\n将id进行定义，通过获取id拿到对应的tab类型。\r\n\r\n其中`catchtap`是事件绑定。\r\n\r\nbind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡。\r\n\r\n在topics.js获取\r\n\r\n```\r\n onTapTag: function (e) {\r\n var self = this;\r\n var tab = e.currentTarget.id;\r\n // 这里就能获取到不同的tab值了\r\n self.setData({\r\n tab: tab\r\n });\r\n if (tab !== 'all') {\r\n this.fetchData({tab: tab});\r\n } else {\r\n this.fetchData();\r\n }\r\n },\r\n```\r\n#### 4.下一页的实现\r\n根据文档，组件的视图容器中有[scroll-view](https://mp.weixin.qq.com/debug/wxadoc/dev/component/scroll-view.html?t=1474887496374)这个可滚动视图区域。\r\n##### 注意：使用竖向滚动时，需要给一个固定高度。\r\n```\r\n\r\n \r\n ...\r\n \r\n\r\n```\r\ntopics.js文件\r\n\r\n```\r\n lower: function (e) {\r\n var self = this;\r\n // 修改当前页码\r\n self.setData({\r\n page: self.data.page + 1\r\n });\r\n // 判断当前页的tab值进行请求数据\r\n if (self.data.tab !== 'all') {\r\n this.fetchData({tab: self.data.tab, page: self.data.page});\r\n } else {\r\n this.fetchData({page: self.data.page});\r\n }\r\n }\r\n```\r\n#### 5.跳页的实现\r\n在`posts-item`中已经进行了事件绑定。利用`wx.navigateTo`实现页面的跳转。\r\n##### 注意：一个应用同时只能打开5个页面，当已经打开了5个页面之后，wx.navigateTo不能正常打开新页面。\r\n```\r\nredictDetail: function (e) {\r\n console.log('我要看详情');\r\n var id = e.currentTarget.id,\r\n url = '../detail/detail?id=' + id;\r\n // 这里的detail是需要创建对应的文件，以及页面注册的\r\n wx.navigateTo({\r\n url: url\r\n })\r\n},\r\n```\r\n### 4.实现详情页\r\n同样的原理，创建detail文件，并注册，获取数据，并美化页面。\r\n![](//static.cnodejs.org/FmJ5n5-t3gLCfFQTpbzIBS1_ag2L)\r\n\r\n### 5.总结\r\n* 微信小应用页面的脚本逻辑在是在JsCore中运行，JsCore是一个没有窗口对象的环境，所以不能再脚本中使用window，也无法在脚本中操作组件\r\n* 同样不能用jquery\r\n* 也不能操作dom\r\n* 部分标签不支持，比如 h1-h6 会编译报错。\r\n* 暂时没找到解决富文本详情页显示的办法。\r\n* 整体下来，感觉开发简单，限制很多。\r\n* 写过react的看这个确实比较简单。\r\n\r\n放上我的github地址\r\n[https://github.com/coolfishstudio/wechat-webapp-cnode](https://github.com/coolfishstudio/wechat-webapp-cnode)\r\n\r\n最后感谢：cnode社区和博卡君\r\n\r\n附上博卡君的教程\r\n\r\n[全球首个微信应用号开发教程！通宵吐血赶稿，每日更新！](https://my.oschina.net/wwnick/blog/750055)\r\n\r\n[博卡君的应用号（小程序）开发教程首发第二弹！（0923）](https://my.oschina.net/wwnick/blog/750495)\r\n\r\n[第三弹！全球首个微信应用号开发教程！通宵吐血赶稿，每日更新！](https://my.oschina.net/wwnick/blog/750974)\r\n\r\n[第四弹！全球首个微信应用号开发教程！通宵吐血赶稿，每日更新！](https://my.oschina.net/wwnick/blog/751826)\r\n\r\n[第五弹！全球首个微信应用号开发教程！通宵吐血赶稿，每日更新！](https://my.oschina.net/wwnick/blog/752421)\r\n\r\n[第六弹！全球首个微信小程序（应用号）开发教程！通宵吐血赶稿！](https://my.oschina.net/wwnick/blog/753597)\r\n－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－\r\n总结一下我遇到的问题\r\n1.页面没有注册那么 template 模版无法传递数据拿不到动态数据但是能使用wxss\r\n2.进度条注意右侧百分号 100%的时候进度条缩短\r\n3.轮播图加上属性vertical=\"vertical/horizontal\" 可以修改布局方向，文档没说\r\n4.有关icon，文档提供默认的只有9个，实际目前测出有15个 success, info, warn, waiting, safe_success, safe_warn,success_circle, success_no_circle, waiting_circle, circle, download,info_circle, cancel, search, clear\r\n－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－\r\n鉴于有很多童鞋还不了解小应用和h5页面有什么区别\r\n我决定安利一下我公司的一个文章\r\n[小云百科:什么是“微信小程序”](http://url.cn/41kcsQr)","title","分享我用cnode社区api做微信小应用的入门过程","last_reply_at","2021-03-16 08:46:55.175","good","top",184,"visit_count",77703,"2016-09-27 07:53:31.872","author",{"_13":54,"_22":55},"coolfishstudio","https://avatars.githubusercontent.com/u/8791709?v=4"]