# 微信小程序 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
没有合适的资源?快使用搜索试试~ 我知道了~
微信小程序50个案例
共2080个文件
png:694个
js:352个
wxss:299个
需积分: 50 184 下载量 172 浏览量
2018-04-03
20:38:01
上传
评论 15
收藏 79.34MB RAR 举报
温馨提示
微信小程序示例。对于入门小程序开发者。是一个不错的资料
资源推荐
资源详情
资源评论
收起资源包目录
微信小程序50个案例 (2080个子文件)
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.gif 1.85MB
preview (1).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
1.gif 31KB
demo.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
1.jpg 94KB
screenshot1.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
共 2080 条
- 1
- 2
- 3
- 4
- 5
- 6
- 21
资源评论
東亮小课
- 粉丝: 10
- 资源: 46
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功