# 微信小程序 cnode社区版本
> 官方文档:https://mp.weixin.qq.com/debug/wxadoc/dev/
> 参考资料:https://github.com/coolfishstudio/wechat-webapp-cnode
>入门小例子: https://github.com/vincentSea/wxsapp
### 小程序预览
![编辑器截图](./screenshots/demo2.gif)
![编辑器截图](./screenshots/8.png)
### 项目结构
<pre>
│ .gitattributes
│ .gitignore
│ app.js # 小程序逻辑
│ app.json # 小程序公共设置(页面路径、窗口表现、设置网络超时时间、设置多tab)
│ app.wxss # 小程序公共样式表
│ README.md # 小程序项目说明
│
├─image # 小程序图片资源
|
├─pages # 小程序文件
│ ├─common
│ ├─detail
│ ├─index
│ │ index.js # 页面逻辑
│ │ index.wxml # 页面渲染层
│ │ index.wxss # 页面样式
│ ├─login
| ├─logs
│ └─topics
│
└─utils # 小程序公用方法模块
api.js
util.js
</pre>
### 开发环境
下载地址 :https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=1474887501214
### 开发过程
1. 配置默认启动页面
在app.json文件修改注册页面的顺序,把“pages/topics/topics” 放在第一位,就会自动把topics.wxml 显示默认启动
<pre>
{
"pages":[
"pages/topics/topics",
"pages/detail/detail",
"pages/login/login",
"pages/index/index",
"pages/logs/logs"
]
}
</pre>
2. 配置tabBar
tabBar 是一个数组,只能配置最少2个、最多5个 tab,tab 按数组的顺序排序。
<pre>
"tabBar":{
"color":"#444",
"selectedColor":"#80bd01",
"backgroundColor":"#fff",
"borderStyle":"white",
"list":[{
"pagePath":"pages/topics/topics",
"text":"首页",
"iconPath":"images/bar/CNode.png",
"selectedIconPath":"images/bar/CNodeHL.png"
},{
"pagePath":"pages/index/index",
"text":"我的",
"iconPath":"images/bar/ME.png",
"selectedIconPath":"images/bar/MEHL.png"
}]
}
</pre>
3. window 设置
具体看文档https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html?t=1475052056717
4. 简单封装wx.request(OBJECT)
<pre>
// get请求方法
function fetchGet(url, callback) {
// return callback(null, top250)
wx.request({
url: url,
header: { 'Content-Type': 'application/json' },
success (res) {
callback(null, res.data)
},
fail (e) {
console.error(e)
callback(e)
}
})
}
// post请求方法
function fetchPost(url, data, callback) {
wx.request({
method: 'POST',
url: url,
data: data,
success (res) {
callback(null, res.data)
},
fail (e) {
console.error(e)
callback(e)
}
})
}
module.exports = {
// METHOD
fetchGet: fetchGet,
fetchPost: fetchPost
}
</pre>
5. 滚动底部加载下一页
使用了小程序自带的scroll-view组件
![编辑器截图](./screenshots/2.png)
```bash
<!--列表list组件 -->
<template name="list">
<scroll-view class="scroll-posts-list" style="height:100%" scroll-y="true" bindscrolltolower="lower">
<view class="postslist">
<block wx:for="{{postsList}}">
<view class="posts-list">
<navigator url="/pages/detail/detail?id={{item.id}}">
<view class="posts-list-info" index="{{index}}">
<image class="userimg" src="{{item.author.avatar_url}}" />
<view class="item-box">
<view class="userinfo">
<text class="username">{{item.author.loginname}}</text>
<text class="time">{{item.last_reply_at}}</text>
</view>
<view class="posts-title">
<view class="posts-tag hot" wx:if="{{item.top === true}}">置顶</view>
<view class="posts-tag" wx:if="{{item.good === true}}">精华</view>
<text>{{item.title}}</text>
</view>
</view>
</view>
<view class="bar-info">
<view class="bar-info-item">
<image class="bar-info-item-icon" src="/images/icon/reply.png"></image>
<view class="bar-info-item-number">{{item.reply_count}}</view>
</view>
<view class="bar-info-item">
<image class="bar-info-item-icon" src="/images/icon/visit.png"></image>
<view class="bar-info-item-number">{{item.visit_count}}</view>
</view>
<view class="bar-info-item2" wx:if="{{item.tab === 'good'}}">
<image class="bar-info-item-icon" src="/images/icon/type.png"></image>
<view class="bar-info-item-number">精华</view>
</view>
<view class="bar-info-item2" wx:if="{{item.tab === 'share'}}">
<image class="bar-info-item-icon" src="/images/icon/type.png"></image>
<view class="bar-info-item-number">分享</view>
</view>
<view class="bar-info-item2" wx:if="{{item.tab === 'ask'}}">
<image class="bar-info-item-icon" src="/images/icon/type.png"></image>
<view class="bar-info-item-number">问答</view>
</view>
<view class="bar-info-item2" wx:if="{{item.tab === 'job'}}">
<image class="bar-info-item-icon" src="/images/icon/type.png"></image>
<view class="bar-info-item-number">招聘</view>
</view>
</view>
</navigator>
</view>
</block>
</view>
</scroll-view>
<loading class="loading" hidden="{{hidden}}">
<text class="loading-font">加载中...</text>
</loading>
</template>
```
```bash
<!-- topics.wxml -->
<import src="../common/nav.wxml"/>
<import src="../common/list.wxml"/>
<view class="page topics">
<template is="nav" data="{{ navList, activeIndex }}"/>
<template is="list" data="{{ postsList, hidden }}"/>
</view>
```
滚动区的最大的父级层要设置height: 100%; 不然无法检测滚动事件
也不知道是不是我布局的原因,我这里是一定要这样设置的
```bash
.topics{
height: 100%;
overflow: hidden;
}
```
```bash
// 滑动底部加载
lower: function() {
console.log('滑动底部加载', new Date());
var that = this;
that.setData({
page: that.data.page + 1
});
if (that.data.tab !== 'all') {
this.getData({tab: that.data.tab, page: that.data.page});
} else {
this.getData({page: that.data.page});
}
}
```
用法
```bash
<scroll-view class="scroll-posts-list" style="height:100%" scroll-y="true" bindscrolltolower="lower">
</scroll-view>
```
### 使用说明
1. 将仓库克隆到本地:
```bash
$ git clone https://github.com/vincentSea/wechat-cnode.git
```
2. 打开`微信Web开放者工具`(注意:必须是`0.9.092300`版本)
3. 选择`添加项目`,填写或选择相应信息
- AppID:点击右下角`无AppID`
- 项目名称:随便填写,因为不涉及到部署,所以无所谓
- 项目目录:选择刚刚克隆的文件夹
- 点击`添加项目`
### 特别感谢
感谢 coolfish 的项目案例
coolfish的github: https://github.com/coolfishstudio
没有合适的资源?快使用搜索试试~ 我知道了~
微信小程序源码集合及常见功能实现方式代码.zip
共1840个文件
png:676个
js:329个
wxss:246个
5星 · 超过95%的资源 需积分: 2 4 下载量 104 浏览量
2023-03-18
10:30:50
上传
评论
收藏 83.65MB ZIP 举报
温馨提示
微信小程序源码集合及常见功能实现方式代码 B站首页界面设计:附详细教程 cnode社区版 FlexLayout布局 创客+实现大量功能,推荐研究 TCP,IP长连接 redux绑定 Railay:整体框架 movecss效果 百度小说 辩论倒计时 侧滑布局 车源宝 滴滴公交-查公交 分答小程序 仿网易云音乐 东航订机票 AppleMusic leantodu IT-EBOOK 等等众多微信小程序源码。
资源推荐
资源详情
资源评论
收起资源包目录
微信小程序源码集合及常见功能实现方式代码.zip (1840个子文件)
20161115163622331 852KB
.babelrc 113B
.DS_Store 6KB
.DS_Store 6KB
.editorconfig 99B
3123.gif 5.04MB
1.gif 5.04MB
weapp.gif 4.75MB
weapp.gif 4.75MB
demo2.gif 3.95MB
demo2.gif 3.95MB
GIF.gif 2.9MB
GIF.gif 2.9MB
1.gif 2.51MB
wechat-v2ex-2.gif 2.18MB
wechat-v2ex-2.gif 2.18MB
preview (1).gif 1.85MB
preview.gif 1.85MB
wechat-v2ex-1.gif 1.83MB
wechat-v2ex-1.gif 1.83MB
GIF_2.gif 1.61MB
GIF_2.gif 1.61MB
remote-redux-devtools.gif 1.28MB
remote-redux-devtools.gif 1.28MB
lolgame.gif 1.1MB
lolgame.gif 1.1MB
demo_v0.2.gif 891KB
demo_v0.2.gif 891KB
GIF_3.gif 887KB
GIF_3.gif 887KB
view.gif 684KB
view.gif 684KB
fenda1.gif 487KB
fenda1.gif 487KB
lolgame-fuzzy.gif 362KB
lolgame-fuzzy.gif 362KB
1.gif 159KB
2.gif 67KB
loading.gif 46KB
demo.gif 31KB
1.gif 31KB
loading.gif 16KB
loading.gif 16KB
loading.gif 11KB
checkerbg.gif 73B
.gitattributes 378B
.gitattributes 378B
.gitattributes 378B
.gitignore 649B
.gitignore 607B
.gitignore 592B
.gitignore 574B
.gitignore 58B
.gitignore 20B
.gitignore 19B
.gitignore 13B
.gitignore 10B
.gitignore 5B
handler.go 2KB
msg.go 706B
sendUserInfo.go 647B
module.go 573B
sendHello.go 572B
chanrpc.go 426B
json.go 392B
reader.go 379B
router.go 368B
skeleton.go 359B
conf.go 324B
main.go 307B
module.go 285B
module.go 285B
handler.go 156B
external.go 120B
external.go 118B
external.go 89B
index.html 8KB
gank.iml 458B
AppleMusic.iml 281B
moments_bg.jpg 520KB
test-ad.jpg 207KB
cm2_default_play_bg-ip6@2x.jpg 130KB
screenshot1.jpg 94KB
1.jpg 94KB
headimg.jpg 75KB
screenshot2.jpg 73KB
2.jpg 73KB
banner_02.jpg 61KB
adam.jpg 42KB
7.jpg 32KB
me.jpg 31KB
3.jpg 26KB
bg_02.jpg 23KB
6.jpg 22KB
2.jpg 22KB
1.jpg 22KB
4.jpg 18KB
profile_header.jpg 17KB
3.jpg 14KB
5.jpg 13KB
共 1840 条
- 1
- 2
- 3
- 4
- 5
- 6
- 19
资源评论
- 光与火花2023-07-26简洁明了的代码,让我可以快速实现小程序中的各种功能。
- 洪蛋蛋2023-07-26这个文件包含了各种常见功能的实现方式,非常实用。
- 战神哥2023-07-26值得收藏的一份文件,对于小程序开发者来说简直是宝藏。
- kdbshi2023-07-26微信小程序源码集合及实现代码,让我的开发工作事半功倍。
- 王向庄2023-07-26这个文件是我找了很久的,里面有很多实用的小程序源码,非常棒。
中年老码农
- 粉丝: 7
- 资源: 72
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功