微信小程序-百思不得其解

1. <a href="http://www.see-source.com:80/weixinwidget/downloadZip.html?wid=74">实例源码</a>效果：

接口

• 首页 http://api.budejie.com/api/api_open.php?a=list&c=data&type=1

  • page : 页码 (加载下一页需要)

  • maxtime : 获取到的最后一条数据的maxtime字段 (加载下一页需要)

  • type=1 : 全部

  • type=41 : 视频

  • type=10 : 图片

  • type=29 : 段子

  • type=31 : 声音

  • 加载更多 : 添加两个字段

• 评论列表 http://api.budejie.com/api/api_open.php?a=dataList&c=comment&data_id=22062938&hot=1

  • data_id : 帖子ID

  • hot : 获取到最热评论需要这个字段

  • page : 页码 (加载下一页需要)

  • lastcid : 获取到的最后一条评论的ID(加载下一页需要)

• 推荐关注

  • category_id : 左侧栏目 ID

  • page : 当前页码 ,请求第一页数据的时候可不填

  • 左侧列表 http://api.budejie.com/api/api_open.php?a=category&c=subscribe

  • 右侧列表 http://api.budejie.com/api/api_open.php?a=list&c=subscribe&category_id=35

• 我的 http://api.budejie.com/api/api_open.php?a=square&c=topic

小程序文件结构

一个页面由四个文件组成，并且四个文件必须同名

• wxml    ： 页面结构，类似html。

• wxss    ： 页面样式表，类似css。

• json    ： 页面配置

• js    ：页面逻辑。

程序配置

在 app.json 文件中注册需要加载的页面、navigationBar和底部tab的各种属性、网络超时时间。

• 注册页面

1. "pages":[

2. "pages/index/index",

3. "pages/index/detail",

4. "pages/login/login",

5. "pages/membercenter/membercenter",

6. "pages/recommend/recommend",

7. "pages/attention/attention"

8. ],

• 放在第一的页面将会在程序加载完成时显示。

• 配置窗口

1. "window":{

2. "backgroundTextStyle":"light",

3. "navigationBarBackgroundColor": "black",

4. "navigationBarTitleText": "WeChat",

5. "navigationBarTextStyle":"white",

6. "backgroundColor": "#eaeaea"

7. },

• 这里配置的是所有窗口的显示样式，如果某个页面需要更改显示样式，直接为相应的页面添加一个json文件配置即可。

其他的json文件只能配置window属性。

• 配置tabBar

01. "tabBar": {

02. "color": "black",

03. "borderStyle": "white",

04. "selectedColor": "rgb(176,170,168)",

05. "backgroundColor": "white",

06. "list": [{

07. "pagePath": "pages/index/index",

08. "text": "精华",

09. "iconPath": "images/tabBar/tabBar_essence_click_icon.png",

10. "selectedIconPath": "images/tabBar/tabBar_essence_icon.png"

11. },

12. {

13. "pagePath": "pages/recommend/recommend",

14. "text": "推荐关注",

15. "iconPath": "images/tabBar/tabBar_new_click_icon.png",

16. "selectedIconPath": "images/tabBar/tabBar_new_icon.png"

17. }

18. }]

19. },

• 配置底部tabBar的文字颜色、图标、页面路径等，和iOS开发中设置tabBar的思路挺像的。

• 网络超时时间和调试开关

1. "networkTimeout": {

2. "request": 10000

3. },

4. "debug":true

• networkTimeout配置的是网络超时时间，这里的时间单位是毫秒，这里配置的也就是10秒超时。debug控制是否开启调试，如果开启了，可以看到log打印。

基本的配置搞定后，就可以开始填内容了。

顶部tab

1. <view class="top-tab">

2. <view class="top-tab-item {{currentTopItem==idx ? 'active' : ''}}" wx:for="{{topTabItems}}" wx:for-index="idx" data-idx="{{idx}}" bindtap="switchTab">

3. {{item}}

4. </view>

5. </view>

• 使用wx:for结构循环渲染出5个Item

• 为它们绑定一个点击方法switchTab

• 设置一个自定义属性data-idx用来记录每个Item的索引，以便在点击的时候能够知道是哪个Item被点击。

内容列表

01. <swiper class="swiper" current="{{currentTopItem}}" bindchange="bindChange" duration="300" style="height:{{swiperHeight}}px" >

02. <!--全部-->

03. <swiper-item>

04. <scroll-view class="scrollView" scroll-y="true" bindscrolltolower="loadMoreData" >

05. <block wx:for="{{allDataList}}" wx:for-item="item">

06. <navigator url="detail?id={{item.id}}">

07. <template is="mainTabCell" data="{{item}}" />

08. </navigator>

09. </block>

10. </scroll-view>

11. </swiper-item>

12. ...

13. ...

14. </swiper>

因为需要横向分页滚动，所以我选择使用swiper作为容器，然后再让每个swiper-item包裹一层可以上下滚动的scrollView，再使用wx:for循环渲染出列表。

navigator 是导航组件。
template，即模板，作用是定义代码片段，然后在不同的地方调用。

使用网络数据渲染页面

小程序中不能操作Dom，动态渲染页面的唯一方式就是在页面中绑定数据，然后在js文件中修改数据。比如在第一个swiper-item中绑定了一个数组allDataList,当在js文件中调用setData方法修改这个数组时，列表也会被修改。

要使用网络数据当然得先进行网络访问，微信已经提供了网络请求的API。

01. wx.request({

02. url: 'http://api.budejie.com/api/api_open.php?a=list&c=data&type=1',

03. data: {},

04. method: 'GET', 

05. header: "application/json", // 设置请求的 header

06. success: function(res){

07. console.log(res);

08. //通过修改绑定的数组来改变页面

09. that.setData({

10. allDataList: res.data.list

11. });

12. },

13. fail: function() {

14. // fail

15. },

16. complete: function() {

17. // complete

18. }

19. })

请求结果如下

请求结果.png

从结果中可以看出，数组中装着的是一个个的对象，我们可以直接通过字段取到他们的值。所以我们在wxml文件中绑定数据的时候就可以这样写：

01. <view class="top"> 

02. <!--头像-->

03. <image class="avator" src="{{item.profile_image}}" mode="aspectFit"></image>

04.  

05. <!--标题、时间-->

06. <view class="title-time">

07. <text class="title">{{item.name}}</text>

08. <text class="time">{{item.create_time}}</text>

09. </view>

10.  

11. <!--更多按钮-->

12. <image class="morebtnnormal" src="../../images/index/morebtnnormal.png" mode="center" ></image>

13. </view>

这样就直接绑定了头像 profile_image、名字 name、创建时间 create_time。其他部分也是用这种方式绑定的。

下拉刷新

实现下拉刷新有两种方式，第一种是绑定scrollView的bindscrolltoupper方法

1. <scroll-view scroll-y bindscrolltoupper="scrolltoupper">

1. scrolltoupper:function(){

2. //刷新数据

3. }

还有一种是在Page的onPullDownRefresh方法中发出请求刷新数据。

1. //监听用户下拉动作

2. onPullDownRefresh:function(){

3. //刷新数据

4. },

上拉加载更多

上拉加载更多也有两种方法，第一种是绑定scrollView的bindscrolltolower方法，但是列表数量少的时候，这个方法不靠谱，经常不会触发

1. <scroll-view scroll-y bindscrolltolower ="scrolltolower">

1. scrolltolower:function(){

2. //发出请求添加数据

3. }

第二种方法是在Page的onReachBottom方法中发出请求加载数据

1. onReachBottom:function(){

2. currentPage++;

3. //发出请求添加数据

4. }