[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_11":-5,"_57":58,"_59":60,"_61":62},"routes/user.$name.collections",{"_9":10,"_11":12,"_13":14,"_15":16,"_17":18,"_19":16},"topics",[35],"user",{"_20":21,"_13":14,"_22":23,"_24":14,"_25":26,"_27":28,"_29":30,"_31":32,"_33":34},"loginname","rayjun","page",1,"limit",20,"total","id","12767","avatar_url","https://avatars.githubusercontent.com/u/7517993?v=3","githubUsername","create_at","2014-05-24T05:38:34.992Z","score",25,"topic_count",2,"reply_count",3,"is_star",false,{"_20":36,"_37":38,"_39":40,"_41":42,"_43":44,"_45":46,"_47":34,"_48":34,"_31":49,"_50":51,"_25":52,"_53":54},"20559","author_id","20359","tab","share","content","# 微信小程序 cnode社区版本\r\n\r\n> 官方文档：https://mp.weixin.qq.com/debug/wxadoc/dev/\r\n\r\n>入门小例子: https://github.com/vincentSea/wxsapp\r\n\r\n> 项目地址：https://github.com/vincentSea/wechat-cnode\r\n\r\n> 参考资料：https://github.com/coolfishstudio/wechat-webapp-cnode\r\n\r\n### 小程序预览\r\n\r\n![8.png](//static.cnodejs.org/FvgakQd1kdDbKXFsyS1UDtfgIj6o)\r\n\r\n\r\n### 项目结构\r\n

\r\n│  .gitattributes\r\n│  .gitignore\r\n│  app.js                # 小程序逻辑\r\n│  app.json              # 小程序公共设置（页面路径、窗口表现、设置网络超时时间、设置多tab）\r\n│  app.wxss              # 小程序公共样式表\r\n│  README.md             # 小程序项目说明\r\n│  \r\n├─image                  # 小程序图片资源\r\n|\r\n├─pages                  # 小程序文件\r\n│  ├─common     \r\n│  ├─detail\r\n│  ├─index        \r\n│  │    index.js    # 页面逻辑\r\n│  │    index.wxml  # 页面渲染层\r\n│  │    index.wxss  # 页面样式\r\n│  ├─login\r\n|  ├─logs\r\n│  └─topics\r\n│          \r\n└─utils                  # 小程序公用方法模块\r\n    api.js       \r\n    util.js    \r\n

\r\n\r\n\r\n### 开发环境\r\n下载地址：https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=1474887501214\r\n\r\n### 开发过程\r\n\r\n1. 配置默认启动页面\r\n\r\n 在app.json文件修改注册页面的顺序，把“pages/topics/topics” 放在第一位，就会自动把topics.wxml 显示默认启动\r\n\r\n

\r\n  {\r\n  \"pages\":[\r\n    \"pages/topics/topics\",      \r\n    \"pages/detail/detail\",\r\n    \"pages/login/login\",\r\n    \"pages/index/index\",\r\n    \"pages/logs/logs\"\r\n  ]\r\n  }\r\n

\r\n\r\n2. 配置tabBar\r\n\r\n tabBar 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序。\r\n\r\n

\r\n  \"tabBar\":{\r\n    \"color\":\"#444\",\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/bar/CNode.png\",\r\n      \"selectedIconPath\":\"images/bar/CNodeHL.png\"\r\n    },{\r\n      \"pagePath\":\"pages/index/index\",\r\n      \"text\":\"我的\",\r\n      \"iconPath\":\"images/bar/ME.png\",\r\n      \"selectedIconPath\":\"images/bar/MEHL.png\"\r\n    }]\r\n  }\r\n

\r\n\r\n3. window 设置\r\n\r\n 具体看文档https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html?t=1475052056717\r\n\r\n4. 简单封装wx.request(OBJECT)\r\n\r\n\r\n

\r\n    // get请求方法\r\n    function fetchGet(url, callback) {\r\n      // return callback(null, top250)\r\n      wx.request({\r\n        url: url,\r\n        header: { 'Content-Type': 'application/json' },\r\n        success (res) {\r\n          callback(null, res.data)\r\n        },\r\n        fail (e) {\r\n          console.error(e)\r\n          callback(e)\r\n        }\r\n      })\r\n    }\r\n\r\n    // post请求方法\r\n    function fetchPost(url, data, callback) {\r\n      wx.request({\r\n        method: 'POST',\r\n        url: url,\r\n        data: data,\r\n        success (res) {\r\n          callback(null, res.data)\r\n        },\r\n        fail (e) {\r\n          console.error(e)\r\n          callback(e)\r\n        }\r\n      })\r\n    }\r\n\r\n    module.exports = {\r\n      // METHOD\r\n      fetchGet: fetchGet,\r\n      fetchPost: fetchPost\r\n    }\r\n

\r\n\r\n\r\n5. 滚动底部加载下一页\r\n\r\n 使用了小程序自带的scroll-view组件\r\n\r\n![2.png](//static.cnodejs.org/FvLpvzso2nEk41PThVQEJ0rjeis7)\r\n\r\n ```bash\r\n \r\n \r\n ```\r\n\r\n ```bash\r\n \r\n \r\n \r\n\r\n \r\n