|
|
2#
楼主 |
发表于 2017-3-24 16:33:58
|
只看该作者
修改配置
微信小程序是通过修改app.json文件改变全局配置的，打开app.json，修改成
{
"pages":[
"pages/index/index",
"pages/detail/detail"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#3e3e3e",
"navigationBarTitleText": "新闻头条",
"navigationBarTextStyle":"white"
},
"debug": true
}
我们这里修改了导航栏的背景颜色(navigationBarBackgroundColor)、标题颜色(navigationBarTextStyle)以及标题内容(navigationBarTitleText)，为了方便查看调试信息，我还开启了debug模式
全局配置以及搞定啦，接下来正式开始编码
首页布局
前面已经说了我们要做的是「今日头条」这样的一个小程序，所以同一个日期会有很多条目，最常见的布局就是做成列表
列表里会有很多的条目，数量是不确定的，所以我们不能在页面里写死了布局，这时候就要用到模板(template)了，我们可以在模板中定义代码片段，然后在不同的地方调用
我们来定义一个模板，打开pages/templates/item.wxml，添加代码
<template name="tItem">
<navigator url="../detail/detail?id={{item.e_id}}">
<view class="ui-list-item ui-pure-item ui-border-b">
<view class="ui-item-span"><text>{{item.date}}</text></view>
<view class="ui-item-content ui-nowrap"><text>{{item.title}}</text></view>
</view>
</navigator>
</template>
注: 模板的使用细节请参考官方文档模板一节
接下来打开pages/index/index.wxml删掉里面的内容，我们要在这里编写列表页，这里会使用到我们上面定义的模板
<import src="../templates/item.wxml"/>
<scroll-view scroll-y="true" class="flex-row ui-list ui-border-t">
<template is="tItem" data="{{item}}" wx:for="{{events}}"/>
<view class="ui-tips">
<view wx:if="{{hidden}}"><text>没有更多内容了</text></view>
<view wx:else><text>内容加载中...</text></view>
</view>
</scroll-view>
<loading hidden="{{hidden}}">Loading...</loading>
可以注意到第一行使用了import将模板引入到页面中，然后再使用is属性，声明需要使用的模板，用data属性传入数据供模板使用
注: 模板拥有自己的作用域，只能使用data传入的数据
为了测试和查看布局效果，我们打开pages/index/index.js删除里面的代码，然后添加以下代码手动创建数据传入给页面渲染
Page({
data: {
hidden: true,
events: [
{
date: "2016-10-14",
title: "toutiao, 新闻头条"
},
{
date: "2016-10-14",
title: " toutiao, 新闻头条"
},
{
date: "2016-10-14",
title: " toutiao, 新闻头条"
},
{
date: "2016-10-14",
title: " toutiao, 新闻头条"
},
{
date: "2016-10-14",
title: " toutiao, 新闻头条"
},
{
date: "2016-10-14",
title: " toutiao, 新闻头条"
}
]
}
})
保存后点击开发工具左侧的编译，即可查看到效果
首页布局效果
注: 布局会用到图标字体，导入到res/下，样式则写在app.wxss全局样式表中，图标字体文件和样式请从源码中获取，这篇教程不作样式的说明
详细页面
首页的布局已经完成了，暂时放下首页列表，接下来开始编写详细内容的页面
打开pages/detail/detail.wxml，添加内容如下
<view class="container">
<view class="ui-title ui-border-b"><text>{{detail.title}}</text></view>
<view class="ui-content"><text>{{detail.content}}</text></view>
<block wx:for="{{detail.picUrl}}">
<view>
<view><image mode="aspectFit" src="{{item.url}}"/></view>
<view class="ui-pic-title"><text>{{item.pic_title}}</text></view>
</view>
</block>
</view>
<loading hidden="{{hidden}}">Loading...</loading>
搞定，这个页面就这么简单就OK了，现在我们打开pages/detail/detail.js手动添加数据到这个页面中查看效果
Page({
data:{
hidden: true,
detail: {
title: "新闻头条",
content: "新闻头条新闻头条新闻头条新闻头条新闻头条新闻头条新闻头条新闻头条新闻头条",
picUrl: [
{
url: "http://sjbz.fd.zol-img.com.cn/t_s320x510c/g5/M00/00/04/ChMkJlfJWJCIYePaAAPdCld59MEAAU-KAP0U3gAA90i450.jpg",
pic_title: "这是图片标题"
}
]
}
}
})
详细页面效果
填充数据
现在页面布局都已经完成了，是时候调用API编写逻辑层的代码来填充数据到页面上了，在开始之前我们先清理一下无用的代码
打开app.js删掉无用的函数和属性
App({
})
以上这步是额外步骤，并不影响我们接下来要做的事情
打开utils/util.js并清空里面的代码，添加如下内容
// 查询事件列表的Base URL
const API_URL_L = " http://www.freedt.cn/api/toutiao/index "
// 申请API获得的KEY
const API_KEY = "YOUR API KEY"
// 获取事件列表
function fetchEvents(news) {
var promise = new Promise(function(resolve, reject){
wx.request({
url: API_URL_L,
data: {
key: API_KEY,
date: news
},
header: {
'Content-Type': 'application/json'
},
success: resolve,
fail: reject
})
})
return promise
}
function getEvents() {
var tmpDate = new Date()
var news = tmpDate.getMonth() + 1
today = news + '/' + tmpDate.getDate()
return fetchEvents(news)
.then(function(res) {
// console.log(res.data.result)
return res.data.result
})
.catch(function(err) {
console.log(err)
return []
})
}
// 获取详细信息
function fetchDetail(e_id) {
var promise = new Promise(function(resolve, reject){
wx.request({
url: API_URL_D,
data: {
key: API_KEY,
e_id: e_id
},
header: {
'Content-Type': 'application/json'
},
success: resolve,
fail: reject
})
})
return promise
}
function getDetail(e_id) {
return fetchDetail(e_id)
.then(function(res) {
// console.log(res.data.result)
return res.data.result
})
.catch(function(err) {
console.log(err)
return []
})
}
module.exports = {
getEvents: getEvents,
getDetail: getDetail
}
注: 请将API_KEY的值替换为你申请到的KEY
我们要利用API获取的数据有两种，一是「事件列表」，另一种是事件对应的「详细信息」，上面使用到了ES6原生提供的Promise对象，
最后还用到了module.exports对外暴露两个函数，使外部可以调用
我们继续打开pages/index/index.js文件，修改成这样
const util = require('../../utils/util.js')
Page({
data: {
hidden: false,
events: []
},
onLoad:function(options){
// 页面初始化 options为页面跳转所带来的参数
var self = this
util.getEvents().then(function(data) {
self.setData({
hidden: true,
events: data
})
})
}
})
然后打开pages/detail/detail.js，修改如下
const util = require('../../utils/util.js')
Page({
data:{
hidden: false,
detail: {}
},
onLoad:function(param){
// 页面初始化 param为页面跳转所带来的参数
var self = this
util.getDetail(param.id).then(function(result){
self.setData({
detail: result[0]
})
})
},
onReady:function(){
// 页面渲染完成
wx.setNavigationBarTitle({
title: this.data.detail.title
})
this.setData({
hidden: true
})
}
})
这里我们调用了wx.setNavigationBarTitle方法动态设置导航栏的标题内容，需要注意的是必须在页面渲染完成之后，即onReady之后才能调用该方法修改导航栏标题
这次教程就到这里结束啦～涉及到的部分知识点并没有详细介绍和说明，如果有不明白的地方请大家根据我给出的链接去查看详细的介绍，此文权当快速上手的一个引子，更加深入的内容以及小程序的其他API的使用，还需要各位亲自去实践。
参考链接
· 微信小程序简易教程
· 微信小程序框架
· 微信小程序API
· Promise对象
|
|
/1 
关于我们
发表于 2017-3-24 16:33:38
QQ好友和群
QQ空间
腾讯微博
腾讯朋友
微信
收藏
置顶服务
换色服务
