1. 名称:
    wechat-cnode
  2. 作者:
    站长老左
  3. 来源:
  4. 浏览:
    13278
  5. 下载:
    10435
  6. 最新更新:
    2016-11-14
  7. 收藏1

微信小程序 cnode社区版本

官方文档:https://mp.weixin.qq.com/debug/wxadoc/dev/

参考资料:https://github.com/coolfishstudio/wechat-webapp-cnode

入门小例子: https://github.com/vincentSea/wxsapp

小程序预览

编辑器截图

编辑器截图

项目结构

│  .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

开发环境

下载地址 :https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=1474887501214

开发过程

  1. 配置默认启动页面

    在app.json文件修改注册页面的顺序,把“pages/topics/topics” 放在第一位,就会自动把topics.wxml 显示默认启动

    {
    "pages":[
      "pages/topics/topics",      
      "pages/detail/detail",
      "pages/login/login",
      "pages/index/index",
      "pages/logs/logs"
    ]
    }
  2. 配置tabBar

    tabBar 是一个数组,只能配置最少2个、最多5个 tab,tab 按数组的顺序排序。

    "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"
      }]
    }
  3. window 设置

    具体看文档https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html?t=1475052056717

  4. 简单封装wx.request(OBJECT)

      // 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
      }
  5. 滚动底部加载下一页

    使用了小程序自带的scroll-view组件

    编辑器截图

      <!--列表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>
      <!-- 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%; 不然无法检测滚动事件 也不知道是不是我布局的原因,我这里是一定要这样设置的

    .topics{
      height: 100%;
      overflow: hidden;}
    // 滑动底部加载
    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});
      }
    }

    用法

      <scroll-view class="scroll-posts-list" style="height:100%" scroll-y="true" bindscrolltolower="lower">
      </scroll-view>


共0 条评论
  1. 加载评论

评论内容:

发表评论
  1. 全部组件分类
  2. 瀑布流
  3. 示例
  4. 提示组件(ToolTip)
  5. 下拉刷新、上拉加载
  6. Toast
  7. 选项卡(tab)
  8. 图表
  9. 卡片切换
  10. 菜单
  11. 筛选
  12. 星级评分
  13. 选择器
  14. 滑动删除
  15. 手势密码
  16. Switch
  17. 搜索
  18. 游戏
  19. 弹幕
  20. 懒加载
  21. 布局
  22. 应用模仿
  23. Emoji
  24. 转盘抽奖
  25. 插件
  26. UI库
  27. 动画
  28. 下拉列表
  29. SnackBar
  30. HTML解析
  31. 日历
  32. 点餐小程序
  33. 购物效果
  34. 框架
  35. 渲染引擎
  36. 商城
  37. 吸顶停留
  38. 会议
  39. 分享
  40. 其他
最新评论