微信应用号入门实践之 cnode 社区版
首先感谢 cnode 社区提供的 api ,本次实现了简单的 cnode 社区应用号制作。 实现了数据的读取、展示, 实现了简单的布局, 实现了下一页功能。
下面就说说我做这个的过程,不足之处,请多多指教,只愿为进步。
首先,在官网下载工具,下载地址 我的是选择 mac 版本 0.9.092300 。
然后跟着官方的简版教程 创建一个项目。
默认的项目里已经没有关于 tabBar 的配置信息,所以为了学习,我把这个配置进行了修改。
首先关于配置的说明同样来自于官方
注意:官方的代码有些字段是不一样的,小心被坑。
{
"pages":[
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"black"
},
"tabBar":{
"list": [{
"pagePath": "pages/index/index",
"text": "首页"
}, {
"pagePath": "pages/logs/logs",
"text": "日志"
}]
}
}
增加了 tabBar, 查看调试 看界面是如此的简陋,为此针对 tabBar 参考官方说明进行了简单的美化。
"tabBar":{
"color":"#272636",
"selectedColor":"#80bd01",
"backgroundColor":"#fff",
"borderStyle":"white",
"list":[{
"pagePath":"pages/index/index",
"text":"首页",
"iconPath":"images/tabBar/my.png",
"selectedIconPath":"images/tabBar/my_hl.png"
},{
"pagePath":"pages/index/index",
"text":"我的",
"iconPath":"images/tabBar/list.png",
"selectedIconPath":"images/tabBar/list_hl.png"
}]
}
效果如图 最后根据文档,对默认页面的窗口表现进行了修改
"window":{
"backgroundTextStyle":"black",
"backgroundColor":"#fff",
"navigationBarBackgroundColor":"#000",
"navigationBarTitleText":"CNODE 应用号版",
"navigationBarTextStyle":"white",
"enablePullDownRefresh":"true"
},
效果如图 整体配置文件为
{
"pages":[
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"black",
"backgroundColor":"#fff",
"navigationBarBackgroundColor":"#000",
"navigationBarTitleText":"CNODE 应用号版",
"navigationBarTextStyle":"white",
"enablePullDownRefresh":"true"
},
"tabBar":{
"color":"#272636",
"selectedColor":"#80bd01",
"backgroundColor":"#fff",
"borderStyle":"white",
"list":[{
"pagePath":"pages/index/index",
"text":"首页",
"iconPath":"images/tabBar/my.png",
"selectedIconPath":"images/tabBar/my_hl.png"
},{
"pagePath":"pages/index/index",
"text":"我的",
"iconPath":"images/tabBar/list.png",
"selectedIconPath":"images/tabBar/list_hl.png"
}]
}
}
根据官方要求,我在 pages 文件夹内创建了 topics 文件夹,并创建了对应了 topics.js 、 topics.wxml 、 topics.wxss 三个文件。
首先在配置文件里注册这个 topics,
"pages":[
"pages/topics/topics",
"pages/index/index",
"pages/logs/logs"
],
并且制定 tabBar 点击跳到对应的 topics 页面
"tabBar":{
"color":"#272636",
"selectedColor":"#80bd01",
"backgroundColor":"#fff",
"borderStyle":"white",
"list":[{
"pagePath":"pages/topics/topics",
"text":"首页",
"iconPath":"images/tabBar/my.png",
"selectedIconPath":"images/tabBar/my_hl.png"
},{
"pagePath":"pages/index/index",
"text":"我的",
"iconPath":"images/tabBar/list.png",
"selectedIconPath":"images/tabBar/list_hl.png"
}]
}
"pages/topics/topics"
放到了"pages/index/index"
的前面然后编写 topics.js
Page({
data: {
title: '首页列表'
},
onLoad: function () {
console.log('onLoad by topics');
}
});
以及 topics.wxml 文件
<view class="topics-main">
测试首页列表界面
</view>
和 topics.wxss 文件
.topics-main {
background: #f60;
height: 100%;
}
最后效果如图
根据文档请求数据,在 util 文件夹内创建一个 api.js 文件,专门进行数据请求处理。
'use strict';
var HOST_URI = 'https://cnodejs.org/api/v1';
var GET_TOPICS = '/topics';
var GET_TOPIC_BY_ID = '/topic/';
function obj2uri (obj) {
return Object.keys(obj).map(function (k) {
return encodeURIComponent(k) + '=' + encodeURIComponent(obj[k]);
}).join('&');
}
module.exports = {
// 获取列表数据
getTopics: function (obj) {
return HOST_URI + GET_TOPICS + '?' + obj2uri(obj);
},
// 获取内容页数据
getTopicByID: function (id, obj) {
return HOST_URI + GET_TOPIC_BY_ID + id + '?' + obj2uri(obj);
}
};
修改 topics.js
var Api = require('../../utils/api.js');
Page({
data: {
title: '首页列表'
},
onLoad: function () {
console.log('onLoad by topics');
this.fetchData();// 获取数据
},
fetchData: function (data) {
// 处理参数
if (!data) data = {};
if (!data.page) data.page = 1;
wx.request({
url: Api.getTopics(data),
success: function (res) {
console.log(res);
}
});
}
});
效果如图 成功拿到了数据。
拿到了数据,也能修改界面,那么就直接完善这个首页吧
代码就不放了,直接上图 我认为这里值得说的大概只有 loading 、循环、传参、下一页和页面跳转了。
<loading hidden="{{hidden}}">
加载中...
</loading>
在 topics.wxml 中写官方提供的 loading 组件,根据在 topics.js 中对 hidden 值的修改,来触发 loading 。
文档提供了列表渲染
通过wx:for
实现列表的渲染。
<block wx:for="{{postsList}}">
<view class="posts-item" index="{{index}}" id="{{item.id}}" catchtap="redictDetail">
<view class="author">
<image class="author-avatar" src="{{item.author.avatar_url}}"></image>
<view class="author-name">{{item.author.loginname}}</view>
<view class="posts-tag hot" wx:if="{{item.top === true}}">置顶</view>
<view class="posts-tag" wx:if="{{item.good === true}}">精华</view>
<view class="posts-last-reply">{{item.last_reply_at}}</view>
</view>
<view class="posts-title">{{item.title}}</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>
</view>
</block>
附上一个没有样式的列表展现
根据 cnode 的 api 可以知道通过 tab 不同的值,获得到不同标签下的内容列表。
所以 在页面的最上面 tab 栏中
<view class="top-bar">
<view class="top-bar-item" id="all" catchtap="onTapTag">全部</view>
<view class="top-bar-item" id="good" catchtap="onTapTag">精华</view>
<view class="top-bar-item" id="share" catchtap="onTapTag">分享</view>
<view class="top-bar-item" id="ask" catchtap="onTapTag">问答</view>
<view class="top-bar-item" id="job" catchtap="onTapTag">招聘</view>
</view>
将 id 进行定义,通过获取 id 拿到对应的 tab 类型。
其中catchtap
是事件绑定。
bind 事件绑定不会阻止冒泡事件向上冒泡, catch 事件绑定可以阻止冒泡事件向上冒泡。
在 topics.js 获取
onTapTag: function (e) {
var self = this;
var tab = e.currentTarget.id;
// 这里就能获取到不同的 tab 值了
self.setData({
tab: tab
});
if (tab !== 'all') {
this.fetchData({tab: tab});
} else {
this.fetchData();
}
},
根据文档,组件的视图容器中有scroll-view这个可滚动视图区域。
<scroll-view class="posts-list" style="height:100%" scroll-y="true" bindscrolltolower="lower">
<block wx:for="{{postsList}}">
...
</block>
</scroll-view>
topics.js 文件
lower: function (e) {
var self = this;
// 修改当前页码
self.setData({
page: self.data.page + 1
});
// 判断当前页的 tab 值 进行请求数据
if (self.data.tab !== 'all') {
this.fetchData({tab: self.data.tab, page: self.data.page});
} else {
this.fetchData({page: self.data.page});
}
}
在posts-item
中已经进行了事件绑定。利用wx.navigateTo
实现页面的跳转。
redictDetail: function (e) {
console.log('我要看详情');
var id = e.currentTarget.id,
url = '../detail/detail?id=' + id;
// 这里的 detail 是需要创建对应的文件,以及页面注册的
wx.navigateTo({
url: url
})
},
同样的原理,创建 detail 文件,并注册,获取数据,并美化页面。
放上我的 github 地址 https://github.com/coolfishstudio/wechat-webapp-cnode
最后感谢: cnode 社区和博卡君
附上 博卡君的教程
博卡君的应用号(小程序)开发教程首发第二弹!( 0923 )
1
fhefh 2016-09-27 18:00:08 +08:00
nice mark~~~
|
2
cheetah 2016-09-27 19:06:00 +08:00
感谢分享
|
3
cenxun 2016-09-27 19:20:26 +08:00
赞一个
|
4
zonghua 2016-09-27 19:35:20 +08:00
博卡君吐血吐了四天
博主可不可以描述一下流畅度 |
6
fhefh 2016-09-27 23:00:44 +08:00
demo 写了好多 就是不知道真机体验如何 囧
|
7
wangxiaoer 2016-09-28 08:48:58 +08:00
这种社区形式的小应用有什么意义呢?跟浏览器直接访问有啥优势,广告过滤?
|
9
coolfish OP @wangxiaoer 我觉得这种应用 最大的优势在于他们说的 无需安装 广告不可能 因为没有外链 但是微信有微信广告平台
|
10
wangxiaoer 2016-09-28 13:40:08 +08:00
无需安装这个有点拿去跟 APP 比也就算了,跟网站也想比这个?
|
11
LiuXuFei 2016-09-28 14:42:07 +08:00
没有内测的,“ URL 域名不合法,请在 mp 后台配置后重试”,有这个错误如何解决的?
|
12
LiuXuFei 2016-09-28 14:54:45 +08:00
解决
|
13
coolfish OP @wangxiaoer 和网站比的话 一个是离线功能 一个是入口
|
14
ChunlinLi 2016-09-29 01:14:17 +08:00
有点困了, 结果看这个被中途冒出的绿青蛙吓了一条。。。。
|
15
mingyun 2016-10-07 11:00:57 +08:00
mark
|