分享我用cnode社区api做微信小应用的入门过程
首先感谢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)
第三弹!全球首个微信应用号开发教程!通宵吐血赶稿,每日更新!
第四弹!全球首个微信应用号开发教程!通宵吐血赶稿,每日更新!
转载于:https://my.oschina.net/u/723645/blog/752329
分享我用cnode社区api做微信小应用的入门过程相关推荐
- 利用WordPress REST API 开发微信小程序从入门到放弃
自从我发布并开源WordPress版微信小程序以来,很多WordPress网站的站长问有关程序开发的问题,其实在文章:<用微信小程序连接WordPress网站>讲述过一些基本的要点,不过仍 ...
- 从零开始学做微信小程序,看这些就够了!
随着正式开放公测,微信小程序再次万众瞩目,越来越多的企业和个人涌入到小程序开发的大军中.小程序究竟是什么?适合做小程序的产品有哪些?做小程序需要提前准备什么?如何零基础学做小程序?此文,将列出OSC上 ...
- 做一个社区配送的小程序 利用小程序搭建自己的社区配送营销商城,小程序社区O2O,社区网络超市微信小程序开发
小程序线上入口开放越来越多,进入小程序的行业也逐渐增多,尤其是这几个月,线下实体行业纷纷转向小程序,其中尤其以零售店,便利店为主,所以今天和大家一起来聊聊社区网络超市微信小程,便利店小程序. 一般的社 ...
- [免费分享]微信小程序从入门到精通视频教程 [8.2G]
获取方式 公众号回复 wechat0423 获取下载地址, 好书推荐.视频分享,与您一起进步 目录:/微信小程序从入门到精通视频教程 [8.2G] ┣━━课件资料demo [7.7M]┃ ┣━━表单组 ...
- 【微信小程序宝典】从零开始做微信小程序开发
开发前必读简要 基于大量无效开发,无法上线的案例,所以开发前部分知识十分重要:| 链接 微信小程序个人注册简单步骤 打开mp.weixin.qq.com,点击右上角立即注册,进入小程序注册| 链接 微 ...
- 你的产品适不适合做微信小程序?你需要这篇产品逻辑分析
自2017年1月9日张小龙宣布万众瞩目的"微信小程序"正式上线了.以名字看,感觉像是突出了"将你的程序接入微信"的意思. 我们此前分析过微信的功能迭代节奏:一般 ...
- 社区团购微信小程序的设计与实现
目录 1 系统简介 2 系统相关技术 2.1微信开发者工具 2.2前端开发技术 2.3后端开发技术 2.4数据库技术 3 需求分析 3.1 功能模块 3.1.1 系统功能模块模型 3.2 系统核心业务 ...
- 创业者是否值得投入做微信小程序(应用号)
距离张小龙的那场首次公开演讲已经有九个月了,而在那场演讲中备受关注的「应用号」在千呼万唤中终于以「小程序」的名字正式对外小范围公测,不少创业者表示机会来了跃跃欲试.诚然,微信每次放出的大招,不管是公众 ...
- 新手入门宝典:从零开始做微信小程序开发
微信小程序联盟出品.jpg 开发前必读简要 基于大量无效开发,无法上线的案例,所以开发前部分知识十分重要:| 链接 微信小程序个人注册简单步骤 打开mp.weixin.qq.com,点击右上角立即注册 ...
- 免费制作微信小程序开发关于旅游_教大家怎么一步步免费自己做微信小程序
小程序很火,很好的流量入口,但是没有编程基础的很难写出小程序,找网络公司做又太贵,今天就教大家怎么自己去制作一个属于自己的小程序! 想制作小程序需要准备的清单如下: 1.微信公众平台(mp.weixi ...
最新文章
- Android 曲线动画animation,类似加入购物车动画
- android 读取文件相关
- 提高国内访问 GitHub 的速度的方案
- 高薪必备|Redis 基础、高级特性与性能调优
- 【Flink】Flink 1.12.2 TaskSlotTable
- 精通 Oracle+Python,第 4 部分:事务和大型对象
- 为什么使用php工厂模式,PHP 工厂模式使用方法
- php中fread用法,php fread函数与fread函数用法
- NV21转YUV420P的代码,测试通过
- jQuery WeUI学习笔记二
- CTE 递归查询全解
- Android Bluetooth源码结构
- 恋恋山城 Jean de Florette (1986) 男人的野心 / 弗洛莱特的若望 / 让·德·弗罗莱特 / 水源 下一部 甘泉,玛侬...
- 程序员面试智力题总结
- 如何提高用户粘性,增强活跃度?
- 用于分类的神经网络算法,图像识别神经网络算法
- 初等行变换不改变列向量组的线性关系
- 希尔伯特谱、边际谱、包络谱、瞬时频率/幅值/相位——Hilbert分析衍生方法及MATLAB实现
- exp和expdp的filesize参数的使用--导出多个文件
- 图数据库——大数据时代的高铁