# 微信小程序 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
没有合适的资源?快使用搜索试试~ 我知道了~
20个精典微信小程序源码
共837个文件
png:304个
js:152个
wxss:105个
4星 · 超过85%的资源 需积分: 48 1.2k 下载量 129 浏览量
2017-11-28
18:16:34
上传
评论 60
收藏 47.57MB RAR 举报
温馨提示
20个精典微信小程序源码包涵小程序截图画面,所有程序可直接在微信小程序开发IDE中导入运行
资源推荐
资源详情
资源评论
收起资源包目录
20个精典微信小程序源码 (837个子文件)
.babelrc 113B
.DS_Store 6KB
.DS_Store 6KB
.editorconfig 99B
1.gif 5.04MB
3123.gif 5.04MB
weapp.gif 4.75MB
weapp.gif 4.75MB
demo2.gif 3.95MB
demo2.gif 3.95MB
1.gif 2.51MB
wechat-v2ex-2.gif 2.18MB
wechat-v2ex-2.gif 2.18MB
wechat-v2ex-1.gif 1.83MB
wechat-v2ex-1.gif 1.83MB
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
lolgame-fuzzy.gif 362KB
lolgame-fuzzy.gif 362KB
2.gif 67KB
loading.gif 11KB
checkerbg.gif 73B
.gitattributes 378B
.gitattributes 378B
.gitignore 649B
.gitignore 607B
.gitignore 592B
.gitignore 58B
.gitignore 20B
.gitignore 10B
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
1.jpg 94KB
screenshot1.jpg 94KB
headimg.jpg 75KB
2.jpg 73KB
screenshot2.jpg 73KB
profile_header.jpg 17KB
leancloud-storage.js 474KB
remote-redux-devtools.js 305KB
encoding.js 92KB
redux.js 29KB
reconnecting-websocket.js 14KB
wechat-weapp-redux.js 9KB
wechat-weapp-redux.js 9KB
userinfo.js 9KB
detail.js 7KB
my-music.js 6KB
shots.js 5KB
index.js 5KB
specific.js 5KB
index.js 4KB
fuzzy.js 4KB
battledetail.js 4KB
designers.js 4KB
index.js 3KB
wechat-weapp-redux.min.js 3KB
test.js 3KB
todos.js 3KB
app.js 3KB
index.js 3KB
index.js 3KB
index.js 3KB
main.js 3KB
hero.js 3KB
rank.js 3KB
detail.js 3KB
background-audio.js 2KB
config.js 2KB
search.js 2KB
dateFormat.js 2KB
topics.js 2KB
data.js 2KB
util.js 2KB
search.js 2KB
index.js 2KB
bb.js 2KB
共 837 条
- 1
- 2
- 3
- 4
- 5
- 6
- 9
beetler2004
- 粉丝: 5
- 资源: 4
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
- 1
- 2
- 3
- 4
- 5
前往页