文档章节

分享我用cnode社区api做微信小应用的入门过程

cysqll
 cysqll
发布于 2016/09/27 17:17
字数 1862
阅读 47
收藏 0

首先感谢cnode社区提供的api,本次实现了简单的cnode社区应用号制作。 实现了数据的读取、展示, 实现了简单的布局, 实现了下一页功能。 首页列表 内容详情

下面就说说我做这个的过程,不足之处,请多多指教,只愿为进步。

1.创建项目

首先,在官网下载工具,下载地址 我的是选择mac版本0.9.092300。

然后跟着官方的简版教程 创建一个项目。

注:现在官方的工具支持无appid创建项目。

1.打开开发者工具,选择“添加项目”

2.选择无appid,填写地址,创建项目

3.创建成功,看到默认的Demo项目页面

2.配置

默认的项目里已经没有关于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"
    }]
  }
}

3.制作首页列表

根据官方要求,我在pages文件夹内创建了topics文件夹,并创建了对应了 topics.js、topics.wxml、topics.wxss 三个文件。

1.注册页面

首先在配置文件里注册这个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"
    }]
  }
注意:我发现注册页面的顺序会影响到默认显示tabBar的顺序,所以我把"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%;
}

最后效果如图

2.创建请求

根据文档请求数据,在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);
      }
    });
  }
});

效果如图 成功拿到了数据。

3.完善首页列表

拿到了数据,也能修改界面,那么就直接完善这个首页吧

代码就不放了,直接上图 我认为这里值得说的大概只有loading、循环、传参、下一页和页面跳转了。

1.loading

  <loading hidden="{{hidden}}">
    加载中...
  </loading>

在topics.wxml中写官方提供的loading组件,根据在topics.js中对hidden值的修改,来触发loading。

2.循环数据,展示列表

文档提供了列表渲染

通过wx:for实现列表的渲染。

注意: 默认数组的当前项的下标变量名默认为index,数组当前项的变量名默认为item。
<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>

附上一个没有样式的列表展现

3.传参,实现tab切换

根据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();
    }
  },

4.下一页的实现

根据文档,组件的视图容器中有scroll-view这个可滚动视图区域。

注意:使用竖向滚动时,需要给<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});
    }
  }

5.跳页的实现

posts-item中已经进行了事件绑定。利用wx.navigateTo实现页面的跳转。

注意:一个应用同时只能打开5个页面,当已经打开了5个页面之后,wx.navigateTo不能正常打开新页面。
redictDetail: function (e) {
  console.log('我要看详情');
  var id = e.currentTarget.id,
      url = '../detail/detail?id=' + id;
      // 这里的detail是需要创建对应的文件,以及页面注册的
  wx.navigateTo({
    url: url
  })
},

4.实现详情页

同样的原理,创建detail文件,并注册,获取数据,并美化页面。

5.总结

  • 微信小应用页面的脚本逻辑在是在JsCore中运行,JsCore是一个没有窗口对象的环境,所以不能再脚本中使用window,也无法在脚本中操作组件
  • 同样不能用jquery
  • 也不能操作dom
  • 部分标签不支持,比如 h1-h6 会编译报错。
  • 暂时没找到解决富文本详情页显示的办法。
  • 整体下来,感觉开发简单,限制很多。
  • 写过react的看这个确实比较简单。

放上我的github地址 https://github.com/coolfishstudio/wechat-webapp-cnode

最后感谢:cnode社区和博卡君

附上 博卡君的教程

全球首个微信应用号开发教程!通宵吐血赶稿,每日更新!

博卡君的应用号(小程序)开发教程首发第二弹!(0923)

第三弹!全球首个微信应用号开发教程!通宵吐血赶稿,每日更新!

第四弹!全球首个微信应用号开发教程!通宵吐血赶稿,每日更新!

© 著作权归作者所有

cysqll
粉丝 4
博文 2
码字总数 2333
作品 0
昌平
私信 提问
微信小程序学习资源

微信小程序开发资源汇总 QQ交流群 目录 官方文档 新闻报道 社区 工具 插件 分析 讨论 教程 视频教程 文章 代码 轮子 置顶 WePY:组件化的小程序开发框架 :100: WePY 开发资源汇总 :100: ZanU...

技术金三胖
2018/01/01
0
0
前端资源系列(3)-微信小程序开发资源汇总

微信(小程序or应用号)开发资源汇总-文档-工具-教程-代码-插件-组件 文档 从搭建一个微信小程序开始 小程序开发文档 小程序设计指南 工具 小程序开发者工具 - 官方 Egret Wing 3.2.x 支持微信...

xzavier
2018/08/27
0
0
8102年我和开源社区产生的姻缘

前言 自我介绍:某不知名高校毕业生。にじげん(二次元),bilibili深度用户(买不起会员的那种),前端开发。回顾2018年6月到目前为止的这四个月里面的经历,写下这篇流水文。 正文 首先,文...

RNG牛逼
2018/10/22
0
0
hayeah/wxapp-cnode

直播地址 live.bilibili.com/1330246 9/30 周五 8 点开播 带你实现小程序 CNode 社区 讲师介绍 主驾驶老司机:桑世龙 简介:江湖传说的狼叔,是空弦科技 CTO。开源项目 Moajs 作者,Node.js...

hayeah
2016/09/30
0
0
从零开始学做微信小程序,看这些就够了!

随着正式开放公测,微信小程序再次万众瞩目,越来越多的企业和个人涌入到小程序开发的大军中。小程序究竟是什么?适合做小程序的产品有哪些?做小程序需要提前准备什么?如何零基础学做小程序...

王练
2016/11/09
30.7K
22

没有更多内容

加载失败,请刷新页面

加载更多

JS基础-该如何理解原型、原型链?

JS的原型、原型链一直是比较难理解的内容,不少初学者甚至有一定经验的老鸟都不一定能完全说清楚,更多的"很可能"是一知半解,而这部分内容又是JS的核心内容,想要技术进阶的话肯定不能对这个...

OBKoro1
今天
6
0
高防CDN的出现是为了解决网站的哪些问题?

高防CDN是为了更好的服务网络而出现的,是通过高防DNS来实现的。高防CDN是通过智能化的系统判断来路,再反馈给用户,可以减轻用户使用过程的复杂程度。通过智能DNS解析,能让网站访问者连接到...

云漫网络Ruan
今天
14
0
OSChina 周一乱弹 —— 熟悉的味道,难道这就是恋爱的感觉

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @xiaoshiyue :好久没分享歌了分享张碧晨的单曲《今后我与自己流浪》 《今后我与自己流浪》- 张碧晨 手机党少年们想听歌,请使劲儿戳(这里)...

小小编辑
今天
2.7K
24
SpringBoot中 集成 redisTemplate 对 Redis 的操作(二)

SpringBoot中 集成 redisTemplate 对 Redis 的操作(二) List 类型的操作 1、 向列表左侧添加数据 Long leftPush = redisTemplate.opsForList().leftPush("name", name); 2、 向列表右......

TcWong
今天
46
0
排序––快速排序(二)

根据排序––快速排序(一)的描述,现准备写一个快速排序的主体框架: 1、首先需要设置一个枢轴元素即setPivot(int i); 2、然后需要与枢轴元素进行比较即int comparePivot(int j); 3、最后...

FAT_mt
昨天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部