{"id":13672015,"url":"https://github.com/scarecrowdu/wechat-cnode","last_synced_at":"2025-04-27T18:32:01.935Z","repository":{"id":207515342,"uuid":"69545377","full_name":"scarecrowdu/wechat-cnode","owner":"scarecrowdu","description":"微信小程序 cnode社区版","archived":false,"fork":false,"pushed_at":"2018-05-14T06:52:23.000Z","size":4356,"stargazers_count":115,"open_issues_count":6,"forks_count":43,"subscribers_count":5,"default_branch":"master","last_synced_at":"2024-11-11T09:44:22.854Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/scarecrowdu.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2016-09-29T08:06:39.000Z","updated_at":"2023-12-05T16:07:34.000Z","dependencies_parsed_at":"2023-11-16T07:52:26.939Z","dependency_job_id":null,"html_url":"https://github.com/scarecrowdu/wechat-cnode","commit_stats":null,"previous_names":["scarecrowdu/wechat-cnode"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scarecrowdu%2Fwechat-cnode","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scarecrowdu%2Fwechat-cnode/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scarecrowdu%2Fwechat-cnode/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scarecrowdu%2Fwechat-cnode/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/scarecrowdu","download_url":"https://codeload.github.com/scarecrowdu/wechat-cnode/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251187394,"owners_count":21549633,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-02T09:01:24.270Z","updated_at":"2025-04-27T18:32:01.381Z","avatar_url":"https://github.com/scarecrowdu.png","language":"JavaScript","readme":"# 微信小程序 cnode社区版本\n\n\u003e 官方文档：https://mp.weixin.qq.com/debug/wxadoc/dev/\n\n\u003e 参考资料：https://github.com/coolfishstudio/wechat-webapp-cnode\n\n\u003e入门小例子: https://github.com/vincentSea/wxsapp\n\n### 小程序预览\n\n![编辑器截图](./screenshots/demo2.gif)\n\n![编辑器截图](./screenshots/8.png)\n\n### 项目结构\n\u003cpre\u003e\n│  .gitattributes\n│  .gitignore\n│  app.js                # 小程序逻辑\n│  app.json              # 小程序公共设置（页面路径、窗口表现、设置网络超时时间、设置多tab）\n│  app.wxss              # 小程序公共样式表\n│  README.md             # 小程序项目说明\n│  \n├─image                  # 小程序图片资源\n|\n├─pages                  # 小程序文件\n│  ├─common     \n│  ├─detail\n│  ├─index        \n│  │    index.js      # 页面逻辑\n│  │    index.wxml    # 页面渲染层\n│  │    index.wxss    # 页面样式\n│  ├─login\n|  ├─logs\n│  └─topics\n│          \n└─utils                  # 小程序公用方法模块\n    api.js       \n    util.js    \n\u003c/pre\u003e\n\n\n### 开发环境\n下载地址 ：https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=1474887501214\n\n### 开发过程\n\n1. 配置默认启动页面\n\n  在app.json文件修改注册页面的顺序，把“pages/topics/topics” 放在第一位，就会自动把topics.wxml 显示默认启动\n\n  \u003cpre\u003e\n  {\n  \"pages\":[\n    \"pages/topics/topics\",      \n    \"pages/detail/detail\",\n    \"pages/login/login\",\n    \"pages/index/index\",\n    \"pages/logs/logs\"\n  ]\n  }\n  \u003c/pre\u003e\n\n2. 配置tabBar\n\n   tabBar 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序。\n\n  \u003cpre\u003e\n  \"tabBar\":{\n    \"color\":\"#444\",\n    \"selectedColor\":\"#80bd01\",\n    \"backgroundColor\":\"#fff\",\n    \"borderStyle\":\"white\",\n    \"list\":[{\n      \"pagePath\":\"pages/topics/topics\",\n      \"text\":\"首页\",\n      \"iconPath\":\"images/bar/CNode.png\",\n      \"selectedIconPath\":\"images/bar/CNodeHL.png\"\n    },{\n      \"pagePath\":\"pages/index/index\",\n      \"text\":\"我的\",\n      \"iconPath\":\"images/bar/ME.png\",\n      \"selectedIconPath\":\"images/bar/MEHL.png\"\n    }]\n  }\n  \u003c/pre\u003e\n\n3. window 设置\n\n    具体看文档https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html?t=1475052056717\n\n4. 简单封装wx.request(OBJECT)\n\n\n  \u003cpre\u003e\n    // get请求方法\n    function fetchGet(url, callback) {\n      // return callback(null, top250)\n      wx.request({\n        url: url,\n        header: { 'Content-Type': 'application/json' },\n        success (res) {\n          callback(null, res.data)\n        },\n        fail (e) {\n          console.error(e)\n          callback(e)\n        }\n      })\n    }\n\n    // post请求方法\n    function fetchPost(url, data, callback) {\n      wx.request({\n        method: 'POST',\n        url: url,\n        data: data,\n        success (res) {\n          callback(null, res.data)\n        },\n        fail (e) {\n          console.error(e)\n          callback(e)\n        }\n      })\n    }\n\n    module.exports = {\n      // METHOD\n      fetchGet: fetchGet,\n      fetchPost: fetchPost\n    }\n  \u003c/pre\u003e\n\n\n5. 滚动底部加载下一页\n\n  使用了小程序自带的scroll-view组件\n\n  ![编辑器截图](./screenshots/2.png)\n\n  ```bash\n    \u003c!--列表list组件 --\u003e\n    \u003ctemplate name=\"list\"\u003e\n      \u003cscroll-view class=\"scroll-posts-list\" style=\"height:100%\" scroll-y=\"true\" bindscrolltolower=\"lower\"\u003e\n        \u003cview class=\"postslist\"\u003e\n          \u003cblock wx:for=\"{{postsList}}\"\u003e\n            \u003cview class=\"posts-list\"\u003e\n              \u003cnavigator url=\"/pages/detail/detail?id={{item.id}}\"\u003e\n                \u003cview class=\"posts-list-info\" index=\"{{index}}\"\u003e\n                    \u003cimage class=\"userimg\" src=\"{{item.author.avatar_url}}\" /\u003e\n                    \u003cview class=\"item-box\"\u003e\n                      \u003cview class=\"userinfo\"\u003e\n                        \u003ctext class=\"username\"\u003e{{item.author.loginname}}\u003c/text\u003e\n                        \u003ctext class=\"time\"\u003e{{item.last_reply_at}}\u003c/text\u003e\n                      \u003c/view\u003e\n                      \u003cview class=\"posts-title\"\u003e\n                        \u003cview class=\"posts-tag hot\" wx:if=\"{{item.top === true}}\"\u003e置顶\u003c/view\u003e\n                        \u003cview class=\"posts-tag\" wx:if=\"{{item.good === true}}\"\u003e精华\u003c/view\u003e\n                        \u003ctext\u003e{{item.title}}\u003c/text\u003e\n                      \u003c/view\u003e\n                    \u003c/view\u003e\n                \u003c/view\u003e\n                \u003cview class=\"bar-info\"\u003e\n                  \u003cview class=\"bar-info-item\"\u003e\n                    \u003cimage class=\"bar-info-item-icon\" src=\"/images/icon/reply.png\"\u003e\u003c/image\u003e\n                    \u003cview class=\"bar-info-item-number\"\u003e{{item.reply_count}}\u003c/view\u003e\n                  \u003c/view\u003e\n                  \u003cview class=\"bar-info-item\"\u003e\n                    \u003cimage class=\"bar-info-item-icon\" src=\"/images/icon/visit.png\"\u003e\u003c/image\u003e\n                    \u003cview class=\"bar-info-item-number\"\u003e{{item.visit_count}}\u003c/view\u003e\n                  \u003c/view\u003e\n\n                  \u003cview class=\"bar-info-item2\"  wx:if=\"{{item.tab === 'good'}}\"\u003e\n                    \u003cimage class=\"bar-info-item-icon\" src=\"/images/icon/type.png\"\u003e\u003c/image\u003e\n                    \u003cview class=\"bar-info-item-number\"\u003e精华\u003c/view\u003e\n                  \u003c/view\u003e\n                  \u003cview class=\"bar-info-item2\"  wx:if=\"{{item.tab === 'share'}}\"\u003e\n                    \u003cimage class=\"bar-info-item-icon\" src=\"/images/icon/type.png\"\u003e\u003c/image\u003e\n                    \u003cview class=\"bar-info-item-number\"\u003e分享\u003c/view\u003e\n                  \u003c/view\u003e\n                  \u003cview class=\"bar-info-item2\"  wx:if=\"{{item.tab === 'ask'}}\"\u003e\n                    \u003cimage class=\"bar-info-item-icon\" src=\"/images/icon/type.png\"\u003e\u003c/image\u003e\n                    \u003cview class=\"bar-info-item-number\"\u003e问答\u003c/view\u003e\n                  \u003c/view\u003e\n                  \u003cview class=\"bar-info-item2\"  wx:if=\"{{item.tab === 'job'}}\"\u003e\n                    \u003cimage class=\"bar-info-item-icon\" src=\"/images/icon/type.png\"\u003e\u003c/image\u003e\n                    \u003cview class=\"bar-info-item-number\"\u003e招聘\u003c/view\u003e\n                  \u003c/view\u003e\n                \u003c/view\u003e\n            \u003c/navigator\u003e\n            \u003c/view\u003e\n          \u003c/block\u003e\n        \u003c/view\u003e\n      \u003c/scroll-view\u003e\n\n      \u003cloading class=\"loading\" hidden=\"{{hidden}}\"\u003e\n        \u003ctext class=\"loading-font\"\u003e加载中...\u003c/text\u003e\n      \u003c/loading\u003e\n    \u003c/template\u003e\n  ```\n\n  ```bash\n    \u003c!-- topics.wxml  --\u003e\n    \u003cimport src=\"../common/nav.wxml\"/\u003e\n    \u003cimport src=\"../common/list.wxml\"/\u003e\n\n    \u003cview class=\"page topics\"\u003e\n      \u003ctemplate is=\"nav\" data=\"{{ navList, activeIndex }}\"/\u003e\n      \u003ctemplate is=\"list\" data=\"{{ postsList, hidden }}\"/\u003e\n    \u003c/view\u003e\n  ```\n\n  滚动区的最大的父级层要设置height: 100%; 不然无法检测滚动事件\n  也不知道是不是我布局的原因，我这里是一定要这样设置的\n  ```bash\n  .topics{\n    height: 100%;\n    overflow: hidden;\n  }\n  ```\n\n  ```bash\n  // 滑动底部加载\n  lower: function() {\n    console.log('滑动底部加载', new Date());\n    var that = this;\n    that.setData({\n      page: that.data.page + 1\n    });\n    if (that.data.tab !== 'all') {\n      this.getData({tab: that.data.tab, page: that.data.page});\n    } else {\n      this.getData({page: that.data.page});\n    }\n  }\n  ```\n\n  用法\n  ```bash\n    \u003cscroll-view class=\"scroll-posts-list\" style=\"height:100%\" scroll-y=\"true\" bindscrolltolower=\"lower\"\u003e\n    \u003c/scroll-view\u003e\n  ```\n\n\n### 使用说明\n\n1. 将仓库克隆到本地：\n\n  ```bash\n  $ git clone https://github.com/vincentSea/wechat-cnode.git\n  ```\n\n2. 打开`微信Web开放者工具`（注意：必须是`0.9.092300`版本）\n\n3. 选择`添加项目`，填写或选择相应信息\n\n  - AppID：点击右下角`无AppID`\n  - 项目名称：随便填写，因为不涉及到部署，所以无所谓\n  - 项目目录：选择刚刚克隆的文件夹\n  - 点击`添加项目`\n\n\n### 特别感谢\n感谢 coolfish 的项目案例\n\ncoolfish的github: https://github.com/coolfishstudio\n","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fscarecrowdu%2Fwechat-cnode","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fscarecrowdu%2Fwechat-cnode","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fscarecrowdu%2Fwechat-cnode/lists"}