置顶 分享我用cnode社区api做微信小应用的入门过程
发布于 3 个月前 作者 coolfishstudio 25372 次浏览 最后一次编辑是 1 个月前 来自 分享

写在头部

本项目写于小程序发布之初,期间小程序官方有过几次更新,例如准备移除了loading组件、改变page的默认高度等,主要看的还是博卡君的文章,后来在朋友的建议下在9月27号写了本篇文章并分享到github上,是做为微信小应用的入门教程,并非某在线学习网站499收费课程的作业,特此声明。

微信应用号入门实践之cnode社区版

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

放上我的github地址 https://github.com/coolfishstudio/wechat-webapp-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)

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

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

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

第六弹!全球首个微信小程序(应用号)开发教程!通宵吐血赶稿! ------------------------------- 总结一下我遇到的问题 1.页面没有注册 那么 template 模版无法传递数据 拿不到动态数据 但是能使用wxss 2.进度条注意右侧百分号 100%的时候 进度条缩短 3.轮播图加上属性vertical=“vertical/horizontal” 可以修改布局方向,文档没说 4.有关icon,文档提供默认的只有9个,实际目前测出有15个 success, info, warn, waiting, safe_success, safe_warn,success_circle, success_no_circle, waiting_circle, circle, download,info_circle, cancel, search, clear ------------------------------- 鉴于有很多童鞋还不了解小应用和h5页面有什么区别 我决定安利一下我公司的一个文章 小云百科:什么是“微信小程序”

143 回复

这个可以给精华了

可以转载Node全栈公众号么?

居然拿不到沙发,顶一个

太详细了,不错不错!! 我要收录到 justjavac/awesome-wechat-weapp

赞 过几天搞搞

明天直播就用这个作为例子讲,哈哈

赞赞! 很详细啊! 我能说我正在做的时候 刷新数据看到你的帖子了吗 ,哈哈 QQ图片20160927161010.png

@i5ting 哈哈 到时候我也要看看

@Shaman05 嗯嗯 好巧啊 哈哈😄

谢谢分享,晚点没事我学着做下……

非常好 谢谢分享

可以照着做了。谢谢分享

非常好。。谢谢分享。

CSS 的适用性怎么样啊

厉害了我的哥

@zh-h 目前还没用到复杂的css 基础的css都是可以 正准备试试flex和css3运动

我的头像 怎么还上榜了呢

咦,光音的同学。

@alsotang 嘿嘿嘿 被你发现了

感谢分享!!!

来自酷炫的 CNodeMD

@coolfishstudio 被我也发现了吧!;-D

马克一下

来自酷炫的 CNodeMD

预告:本周三(9月28日,没错就是今天),就是以这个项目为例,狼叔带你一起玩转微信小程序,在线直播哦,请加StuQxiaozhushou微信,她会告诉你如何观看

怒赞,成功上首页!

做的真快啊…

赞赞 我现在拿这个例子来练习 上手上手

@alsotang @coolfishstudio 我的部分没有实现原因是不是因为小程序不支持扫一扫?无法获得token。。。

@i5ting 不知道 因为我也没有具体做扫一扫 不过 听群里的人说 貌似现在做不了扫一扫

@i5ting 估计等公测了 就能了吧

赞!动作真快~

@coolfishstudio 可以请唐少爷帮忙加一个接口即可

😄😄😄😄😄😄 From Noder

节假日在家搞起来 From Noder

接触这么快!

是不是小程序里面没法打开网页?那 oauth 怎么办

有人知道怎么写可复用的组件吗? 比如一个 tabs 组件 <template /> 无法拥有自己的状态, 无法做到自己控制自己的状态.

@yinzSE 受限开发下是无解的,就1m得空间,复用的意义不大,期待未来更开放吧

解析用markdown写的内容是硬伤=_=||

@zpnaruto 动态处理成数组 然后进行模版化处理

你好看了下代码,为什么var self = this; 而不是直接使用 this 呢

@hackjie 可能是因为在wx.request中,this并不是指向当前的Page或者App。

@hackjie 是的 如同@JZLeung 说的一样 在wx.request中 this 已经不是指向page 如图 F9CFEAA9-006A-4D22-AA37-46EC2BC736E0.png 62302B5D-947C-4EB8-88CB-BEE2650236CC.png

markdown 怎么办?

现在看到的文章全是 带标签的

@xhonker 有办法解决 简单的说 就是 拿到了内容数据之后 通过js解析处理成数组 然后 根据你解析出来的类型 通过wx:if 来判断当前数据字段是图片 还是文本 还是视频 数组:[{type: ‘image’, content: ‘图片地址’}, {type: ‘text’, content: ‘哈哈哈’}] 在wxml中循环这个数组 对每一个item 进行类型判断 进而显示不同的内容

@coolfishstudio 不能用数组处理嵌套内容吧

@chenxiaohu 可以啊 为啥不可以 我将 <img src='' /><p>哈哈哈</p> 解析成 [{type: ‘image’, content: ‘图片地址’}, {type: ‘text’, content: ‘哈哈哈’}]

  • list item 1
  • list item 1.1
  • list item 1.2
  • list item 2
  • list item 2.1 test

@coolfishstudio 你说的只有一层,嵌套就是层次结构啊,一个标签包含另一个,树形结构

@chenxiaohu 哦哦 抱歉之前没有理解你的意思 是的 我这个方案是针对一层的 树形的并不适用

激动激动激动激动

来自react-cnode手机版

可惜最近上班忙,没时间研究

来自react-cnode手机版

@coolfishstudio 不知道这个东西啥时候公测呢

@coolfishstudio 貌似上啦刷新不好使了

@i5ting page{ height:100%}

来自酷炫的 CNodeMD

@i5ting 是的 我也是这么处理的

嗯嗯

来自酷炫的 CNodeMD

上周末就想玩一玩了,这周末一定搞一搞。

请问某篇文章的内容带了标签该怎么处理?

@ytudt 有办法解决 简单的说 就是 拿到了内容数据之后 通过js解析处理成数组 然后 根据你解析出来的类型 通过wx:if 来判断当前数据字段是图片 还是文本 还是视频 数组:[{type: ‘image’, content: ‘图片地址’}, {type: ‘text’, content: ‘哈哈哈’}] 在wxml中循环这个数组 对每一个item 进行类型判断 进而显示不同的内容 目前这个只是适用于简单的dom结构

写了一个微信小程序富文本解析,我也在该项目中验证了一下 微信小程序富文本解析wxParse Alpha0.1-支持HTML及markdown解析 具体文章可以见 http://weappdev.com/t/wxparse-alpha0-1-html-markdown/184 欢迎指正push

添加了一个wxParse进行markdown解析,已提交pull,详见 https://github.com/icindy/wechat-webapp-cnode https://github.com/icindy/wxParse

看了楼主做的我花两天时间也做了一个

精华内容

来自酷炫的 CNodeMD

为什么我在极客学院的官网上看到一个做cnode的,感觉跟你这个差不多,还要499元!!!!

@461534898 额 首先肯定不是我。。。我没有弄过视频而且我我没看过这套视频,其次 不推荐现在购买视频学习 因为一方面微信很多东西一直在改,也删了一些组件 另一方面直接看官方文档 简单仿一下就可以了 最后 已经公测了 可以自己做一些玩了 另外 学的话 我主要看到还是博卡君

也做个,谢谢楼主了 From Noder

如何删除创建的微信小程序?QQ20161107-0@2x.png

@ghostcode 在ide中进入项目 选择最下面的删除项目就可以了。。。。

@coolfishstudio 我晕,没看到下面还有,屏幕小。。。

厉害了我的哥

赞一个,有个问题请教,这个微信小程序和我们平时说的基于js-sdk开发的webapp不一样吗,QAQ说不能用window对象,html和css叫wxtml,wxss

@IEfucker 不一样 首先这个是在微信封闭生态内的一员 不要想的和前端一样 一般来说他是不会分享到外面 出了用模版通知 - - 如果一样了 至于像现在这个听风便是雨么。。。不难 写写就会了

@coolfishstudio 但我还是有个疑问,之前咱们都是做h5的页面,也能满足需求,推出的这个小程序相比我们过去的做法有优势吗,在哪

@IEfucker 生态环境不一样 你还没有理解 微信封闭生态环境 这个意思 简单的说 你写的h5在小应用里是无法运行的

@coolfishstudio 感谢安利,但从你的回复可以看出你安利的成分大些,我没说要把我写的h5放在小程序里,我只是习惯用h5写

@coolfishstudio 技术上,“小程序” 其实是微信提高了自身对于HTML5的特性支持能力,开放了更多的系统调用,例如GPS、传感器等。使用上,“小程序” 重交互、高粘性、超轻便,将有更好的用户体验,更快的加载速度和更多的功能。

其实就是多一些api对吧,微信提供的,其实有些h5的api也能用,像GPS,另外如果仅仅是api的问题,通过js-sdk提供也是可以的,但微信没有这样做,另外您是微信团队的吗,我对小程序这东西的价值有点怀疑

@IEfucker 我当然不是微信团队了。。。不过可能我理解错了你的意思 我想说的意思是 小应用是用完即走 而微信提供了一个入口,就像是公众号 虽然不知道他最终要做成什么样子,但是至少现在透漏出了可以将小应用放到安卓手机桌面, 另外 我觉得你有一点比较错了,小应用最主要对比的应该是原生应用这种

@coolfishstudio 哦这样啊,那期待它有更多的前景

@jackton 谢谢,回头学习学习,我也觉得小程序和react-native很像

楼主 非常感谢你的教程,我今天按照你的教程来做,结果现在 scroll-view 设置 style="height:100%"后并不走 bindscrolltolower 事件,不知道您是否知道怎么回事,我把你的项目液导入了,结果还是一样.

@justjoker 因为他改版了 删掉了默认的样式 page {height:100%;} 加上就可以了

@coolfishstudio 厉害~ 看了你的文章收益颇丰啊

666 造福同行,好人!

谢谢楼主的分享,今天用了一个下午了解了楼主的wx.request 。想问下request请求这个知识是属于js的ajax部分么?仔细想想本人的js就差ajax部分没学习了

scroll-view height 要设置为100vh,用百分比触发不了乡下滚动的函数

回到顶部