微信小程序-百思不得其解_福气程序-CSDN博客

喜欢
实例源码

效果：

接口

首页 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. 
    } 
   
     <code class="number" style="padding: 0px 0.3em 0px 0px; margin: 0px; border: 0px; outline: 0px; text-align: right; float: left;%