1.今天内容比较多,
框架解密
• 目录结构
• 配置文件详解
• 逻辑层
• Api简介
-----------------------
2.打开微信开发工具,
点击添加项目,选择无appid模式
credemo02
点击添加项目就创建好了.
3.首先打开sublime
然后file-->open folder-->找到credemo02
4.好,然后咱们看看框架的分析:
框架解密图片:
框架分为:视图层和逻辑层
逻辑层可以通过api调用native app提供的
一些微信底层的功能,
视图层:w
xml:微信自己定义的语言
wxss:微信定义的样式表
组件:app.js中咱们看看:
pages-->index-->index.wxml:
<!--index.wxml-->
<view class="container">
<view bindtap="bindViewTap" class="userinfo">
<image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
<text class="userinfo-nickname">{{userInfo.nickName}}</text>
</view>
<view class="usermotto">
<text class="user-motto">{{motto}}</text>
</view>
</view>
咱们看看里面的标签,有很多不是h5中的标签,他是
微信定义的标签
----------------------------
pages-->index-->index.wxss:
这跟
CSS很像,但跟css又不一样:
/**index.wxss**/
.userinfo {
display: flex;
flex-direction: column;
align-items: center;
}
.userinfo-avatar {
width: 128rpx;//1.比如rpx单位,h5中没有
height: 128rpx;
margin: 20rpx;
border-radius: 50%;
}
.userinfo-nickname {
color: #aaa;
}
.usermotto {
margin-top: 200px;
}
--------------------------
好,视图层是wxml和wxss,这两个文件来做的,做界面的
对吧.
在小程序中的视图层,他提供了很多的组件,用来做
微信的小程序的ui
---------------------------
逻辑层是:
pages-->index-->index.js
里面用
javaScr
ipt描述的.
在逻辑层中,manger他提供了管理的一些东西,比如他里面
有生命周期的概念.
//index.js
//获取应用实例
var app = getApp()
Page({
data: {
motto: 'Hello World',
userInfo: {}
},
//事件处理函数
bindViewTap: function() {
wx.navigateTo({
url: '../logs/logs'
})
},
onLoad: function () {//1.比如这里的onload
//对吧,就是生命周期中的一部分
//
console.log('onLoad')
var that = this
//调用应用实例的方法获取全局数据
app.getUserInfo(function(userInfo){
//更新数据
that.setData({
userInfo:userInfo
})
})
}
})
咱们看
微信小程序框架分析.png
咱们看看框架的结构,中间有一部分是说逻辑层和
和视图层之间靠数据绑定联系在一块,咱们看看
什么是数据绑定.
-----------------------
数据绑定:
//index.js
//获取应用实例
var app = getApp()
Page({
data: {
//1.这里数据部分,咱们看看这里如果
//motto: 'Hello World',-->motto: 'Hello',
//微信开发者工具中也变了对吧,
//也就是数据绑定.
//
motto: 'Hello World',
userInfo: {}
},
//事件处理函数
bindViewTap: function() {
wx.navigateTo({
url: '../logs/logs'
})
},
onLoad: function () {
console.log('onLoad')
var that = this
//调用应用实例的方法获取全局数据
app.getUserInfo(function(userInfo){
//更新数据
that.setData({
userInfo:userInfo
})
})
}
})
------------------------------
微信小程序框架分析.png
下面还有一个事件对吧,咱们看看
由于视图层有按钮之类的对吧,只要我点击按钮
就会触发事件,然后事件对应逻辑层中的一个函数,
然后函数调用data层的,数据显示对吧.
然后左边的api,是逻辑层,负责调用微信底层的
能力,比如h5开发时,调用后端接口是怎么调用的?
Ajax对吧.
ajax h5中有跨域的问题对吧?
jsonp不存在跨域问题对吧.
解决跨域问题,咱们可以使用jsonp解决对吧.
但是在微信小程序中他不存在跨域问题.
api可以获取当前网络的情况是什么等等..
-------------------------------
好,咱们看看小程序的目录结构:
credemo02
pages:
utils:
util.js
app.js
app.json
app.wxss
images
咱们还可以创建一个images文件夹,放图片
---------------
好,咱们看看
util.js
这里定义了一些工具集:
function formatTime(date) {
var year = date.getFullYear()
var month = date.getMonth() + 1
var day = date.getDate()
var hour = date.getHours()
var minute = date.getMinutes()
var second = date.getSeconds()
return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':')
}
function formatNumber(n) {
n = n.toString()
return n[1] ? n : '0' + n
}
//1.上面定义的方法,如果想提供给外界使用
//那么需要在
//exports中定义一下.像下面这样
module.exports = {
formatTime: formatTime
}
-------------------------------------
pages:在小程序中的所有页面会在这里面
index:页面是首页的意思.
logs:是日志的意思.
好,在index中描述页面的话,有:
index.js:页面的行为
index.wxml:页面构造:相当于html
index.wxss:页面样式
好,我还可以写一个index.json对吧
这个是对当前页面的配置:
比如,咱们可以把app.json中的
{
"pages":[
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"black"
}
}
标题在index.json中覆盖一下看看.
比如在index.json中:
好,在添加
{
"navigationBarTitleText": "首页",
"navigationBarTextStyle":"red"
}
好,咱们看看效果,就变成了首页对吧.
字变成了红色对吧.
---------------------------------
app.json:
是小程序的配置文件.一会咱们再说
每个页面有四个文件:
比如:
index.js逻辑
index.json当前页面的配置
index.wxml当前页面结构
index.wxss当前页面的css样式.
app文件夹中,描述小程序主体的.
-------------------------------
注意index文件夹中的,index.json的优先级是
大于app.json中的,他会先去app.json再去
index.json中查找,app.json是全局的,index.json
是针对某个页面的.
好,咱们看看小程序的配置文件的详解:
这个配置文件在:小程序配置文件详解.pdf
中,参考.
咱们看看.app的配置文件:
app.json:
{
//1.pages:设置页面路径
//比如当前有个index页面,有个logs页面对吧.
//这是一个数组,按照数组的先后顺序,咱们存放
//比如先显示index,那就是把index放在前面
//以后,咱们写的所有页面都必须写到配置中去.
//否则,没有配置的页面将不会被加载.
//
//这里面第一个页面是首页.
//
"pages":[
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"black"
}
}
-----------------------
这里,比如:
"pages":[
"pages/index/index",
"pages/logs/logs"
],
我到过来写:
{
"pages":[
"pages/logs/logs",
"pages/index/index"
],
这样显示的页面就会先显示logs的.
-------------------------------------
好,比如这里我新建一个页面,咱们看看:
在pages文件夹下,新建一个test目录
然后,新建
test.js
test.wxml
test.wxss
文件
咱们写一个test页面,
好,首先咱们看看:
由于,咱们安装了,小程序的sublime插件
咱们可以看到.
当输入wxpage时候,自动回车插入了下面的代码,比如
我给页面起个名字.
Page({
data:{
name:"创梦credream"
},
onLoad:function(options){
},
onReady:function(){
},
onShow:function(){
},
onHide:function(){
},
onUnload:function(){
},
onPullDownRefresh:function(){
},
onReachBottom:function(){
}
})
-------------------
好,然后我在
test.wxml中写上
<view class="mod-test">
{{name}}
<view>
<view>:小程序自己定义的标签
class="mod-test":添加选择器,跟css一样
---------------------------
test.wxss:
.mod-test{
text-align:center;
}
-----------------------
app.json
{
"pages":[
"pages/test/test",
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",//1.
字体的背景颜色
"navigationBarBackgroundColor": "#fff",
//2.导航条的背景颜色改成dfdfdf试试
"navigationBarTitleText": "WeChat",
//3.navigationBarTextStyle导航标题颜色
//
"navigationBarTextStyle":"black"
}
}
------------------------
当然,上面是全局的app.json
咱们可以修改:
test.json来修改test页面的
咱们可以新建一个test.json
写上,咱们看看标题变了对吧.
{
"navigationBarTitleText": "credreamTest"
}
--------------------------
注意,小程序的标题等等:
咱们看看在app.json中,被声明在了:
{
"pages":[
"pages/test/test",
"pages/index/index",
"pages/logs/logs"
],
"window":{
//1.被声明在了window这个里面对吧
//
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"blue"
}
}
但是咱们的测试页面,咱们可以看看:
test.json
{
"navigationBarTitleText": "credreamTest"
}
直接在里面这样写就可以了.这个要注意
------------------------------
好,咱们看看:
小程序配置文件详解.pdf
里面还有其他配置对吧,比如:
backgroundColor 背景色
咱们修改一下看看:
app.json:
{
"pages":[
"pages/test/test",
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"blue",
//1.添加这里
"backgroundColor":"blue"
}
}
可以看到微信开发工具中,没有变对吧.
--------------------------------------
再改改:
test.wxss
.mod-test{
text-align:center;
//1.添加这句
height:100rpx;
}
再看看,还是没有生效对吧.
那好,咱们先试试其他的,这个背景颜色不是直接显示出来
的哈,他是其他意思,比如:
enablePullDownRefresh 开启下拉刷新
咱们看看:
------------------
app.json
{
"pages":[
"pages/test/test",
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"blue",
"backgroundColor":"blue",
//1.添加:
"enablePullDownRefresh":"true"
}
}
添加以后,就可以下拉刷新了.
然后,咱们回到微信开发工具,下拉一下页面,一刷
可以看到上面就是蓝色了对吧.
----------------------------------
好,backgroundTextStyle:
下拉背景字体,loading图样式
这些可以自己试试
好,上面是所有的window中的配置.
---------------------------
好,咱们tabBar咱们看看再看看:
什么是tabBar?
是底部导航条哈.
-----------------------
怎么写呢?
咱们看看:
app.json中:
{
"pages":[
"pages/test/test",
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"blue",
"backgroundColor":"blue",
"enablePullDownRefresh":"true"
}
}
,
//1.这里添加
//这里可以参考:
//小程序配置文件详解.pdf
"tabBar":{
}
---------------------
咱们看看,底部的导航,咱们怎么弄?
{
"pages":[
"pages/test/test",
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"blue",
"backgroundColor":"blue",
"enablePullDownRefresh":"true"
},
//1.添加导航对吧.
//添加以后,咱们看看
"tabBar":{
//2.小程序配置文件详解.pdf中有
//list是,定位到不同的页面中
//比如test/index页面
//
"list":[
{
"text":"测试",
"pagePath":"pages/test/test"
},{
"text":"首页",
"pagePath":"pages/index/index"
}
]
}
}
----------------------------------
好,添加完以后,咱们刷新看看
可以了对吧,下面有两个导航内容了.
----------------------------------
好,咱们还可以添加一下颜色:
当前的tabBar的颜色对吧.
咱们看看:
{
"pages":[
"pages/test/test",
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"blue",
"backgroundColor":"blue",
"enablePullDownRefresh":"true"
},
"tabBar":{
//1.设置tabBar的背景颜色
//
"backgroundColor":"#dfdfdf",
"list":[
{
"text":"测试",
"pagePath":"pages/test/test"
},{
"text":"首页",
"pagePath":"pages/index/index"
}
]
}
}
再看看效果,tabBar变灰色了对吧.
-----------------------------
还有,tabBar的,比如:
selectedColor对吧
咱们看看,选择颜色对吧.
app.json中
{
"pages":[
"pages/test/test",
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"blue",
"backgroundColor":"blue",
"enablePullDownRefresh":"true"
},
"tabBar":{
"backgroundColor":"#dfdfdf",
//1.这里设置颜色对吧.
//
"selectedColor":"blue",
"list":[
{
"text":"测试",
"pagePath":"pages/test/test"
},{
"text":"首页",
"pagePath":"pages/index/index"
}
]
}
}
-------------------------------
好,下面咱们看看:
networkTimeout设置忘了超时时间
debug 是否开启debug
参照:小程序配置文件详解.pdf
咱们来看看:
app.json
{
"pages":[
"pages/test/test",
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"blue",
"backgroundColor":"blue",
"enablePullDownRefresh":"true"
},
"tabBar":{
"backgroundColor":"#dfdfdf",
"selectedColor":"blue",
"list":[
{
"text":"测试",
"pagePath":"pages/test/test"
},{
"text":"首页",
"pagePath":"pages/index/index"
}
]
},
//1.这里我添加调试信息
//添加以后,咱们看看
//
"debug":"true"
}
咱们看看:
微信开发工具中点击调试,然后console中
出现了很多调试信息对吧.
-------------------------------
好,以上这是app.json的配置信息.
-----------------------------
好咱们再看看小程序的生命周期:
onLaunch:小程序初始化
onShow:小程序显示
onHide:小程序隐藏
onError:小程序出错
any:其他函数
---------------------
咱们看看.
app.js
//app.js
App({
//1.onLaunch:小程序初始化
onLaunch: function () {
//调用API从本地缓存中获取数据
var logs = wx.getStorageSync('logs') || []
logs.unshift(Date.now())
wx.setStorageSync('logs', logs)
},
//3.这也是any函数对吧.
//
getUserInfo:function(cb){
var that = this
if(this.globalData.userInfo){
typeof cb == "function" && cb(this.globalData.userInfo)
}else{
//调用登录接口
wx.login({
success: function () {
wx.getUserInfo({
success: function (res) {
that.globalData.userInfo = res.userInfo
typeof cb == "function" && cb(that.globalData.userInfo)
}
})
}
})
}
},
//2.这个是any其他函数对吧.
//
globalData:{
userInfo:null
}
})
好,这个是小程序的生命周期..
--------------------
好,咱们再看看,页面的生命周期
页面比如:
index.js
index.json
index.wxml
index.wxss
好,页面的生命周期是靠test.js描述的
Page({
//1.这个表示页面数据,把数据放在这里
//然后在test.wxml中就可以调用了.
//
data:{
name:"credream"
},
//2.onLoad监听页面加载
onLoad:function(options){
},
//3.页面加载成功
onReady:function(){
},
//4.页面显示
onShow:function(){
},
//5.页面隐藏
onHide:function(){
},
//6.页面卸载
onUnload:function(){
},
//7.页面下拉刷新
onPullDownRefresh:function(){
},
//8.点击分享按钮
onReachBottom:function(){
}
})
--------------------------------
好,比如,这里我用日志来打印一下看看
test.js
在h5中,onReady指的是节点加载ok了对吧.
而onLoad呢?指的是页面上所有的资源都加载
完成了对吧.
好没咱们看看:
他的加载的顺序对吧.
Page({
data:{
name:"credream"
},
onLoad:function(options){
//1.这里输出日志,会在调试
//控制台显示
console.log('onLoad')
},
onReady:function(){
//2.这里输出日志,会在调试
//控制台显示
console.log('onReady')
},
onShow:function(){
},
onHide:function(){
},
onUnload:function(){
},
onPullDownRefresh:function(){
},
onReachBottom:function(){
}
})
好,咱们去微信开发工具中看看
点击调试,可以看到:
onLoad先执行
onReady后执行对吧.
这个跟h5中是反过来的对吧.要跟以前的知识
做个对比.
---------------------------------
好,咱们再看看:
咱们的页面,比如在test.js中能不能拿到
在app.js中定义的数据呢?
咱们看看:
首先我在
app.js中定义数据:
//app.js
App({
onLaunch: function () {
//调用API从本地缓存中获取数据
var logs = wx.getStorageSync('logs') || []
logs.unshift(Date.now())
wx.setStorageSync('logs', logs)
},
getUserInfo:function(cb){
var that = this
if(this.globalData.userInfo){
typeof cb == "function" && cb(this.globalData.userInfo)
}else{
//调用登录接口
wx.login({
success: function () {
wx.getUserInfo({
success: function (res) {
that.globalData.userInfo = res.userInfo
typeof cb == "function" && cb(that.globalData.userInfo)
}
})
}
})
}
},
globalData:{
userInfo:null,
//1.这里定义一个数据
time:'2016/12/24'
}
})
然后咱们看看怎么在test.js中获取这里定义的数据啊:
可这样:
test.js
//1.首先通过这个getApp()
//获取app实例
//
var app = getApp();
Page({
data:{
name:"credream",
//2.这里定义一个time
//注意这里的定义是定义
//一个数据,这个数据将来
//可以在其他地方,比如页面
//上拿出来使用.
time:''
},
onLoad:function(options){
console.log('onLoad');
//3.通过app.globalData.time
//获取定义的时间数据.
//
console.log(app.globalData.time);
},
onReady:function(){
console.log('onReady')
},
onShow:function(){
},
onHide:function(){
},
onUnload:function(){
},
onPullDownRefresh:function(){
},
onReachBottom:function(){
}
})
----------------------------------
好,咱们去编译的界面看看,微信开发工具里面
可以看到调试里面,已经输出,咱们定义的
数据了对吧.
--------------------
好,这个数据,如何让他显示在页面上呢?
咱们看看:
咱们可以这样:
test.wxml
<view class="mod-test">
{{name}}
{{time}}
</view>
在页面的文件中加上时间的引用
但是,回到页面看看没有显示
---------------------------
是因为:
test.js中需要:
var app = getApp();
Page({
data:{
name:"credream",
//1.这里需要给定值
//
time:'2017/01/14'
},
onLoad:function(options){
console.log('onLoad');
console.log(app.globalData.time);
},
onReady:function(){
console.log('onReady')
},
onShow:function(){
},
onHide:function(){
},
onUnload:function(){
},
onPullDownRefresh:function(){
},
onReachBottom:function(){
}
})
------------------------------
回去看看,就能显示出来了对吧.
好,现在咱们显示的时间,是直接在test.js
中定义的对吧,如果咱们显示在app.js中定义的时间,
咱们看看怎么做?
test.js
var app = getApp();
Page({
data:{
name:"credream",
time:'2017/01/14'
},
onLoad:function(options){
console.log('onLoad');
//1.这里可以这样
//这样写,就可以取出app.js的globalData中
//定义的数据了.
//
this.setData({
time:app.globalData.time
})
console.log(app.globalData.time);
},
onReady:function(){
console.log('onReady')
},
onShow:function(){
},
onHide:function(){
},
onUnload:function(){
},
onPullDownRefresh:function(){
},
onReachBottom:function(){
}
})
-------------------------------------
好,当然在test.js中,咱们也可以拿到
app.js中的方法,比如:
我添加一个方法:
//app.js中
App({
onLaunch: function () {
//调用API从本地缓存中获取数据
var logs = wx.getStorageSync('logs') || []
logs.unshift(Date.now())
wx.setStorageSync('logs', logs)
},
//1.这里添加一个方法
//
getUserName:function(){
return "dream";
},
getUserInfo:function(cb){
var that = this
if(this.globalData.userInfo){
typeof cb == "function" && cb(this.globalData.userInfo)
}else{
//调用登录接口
wx.login({
success: function () {
wx.getUserInfo({
success: function (res) {
that.globalData.userInfo = res.userInfo
typeof cb == "function" && cb(that.globalData.userInfo)
}
})
}
})
}
},
globalData:{
userInfo:null,
time:'2016/12/24'
}
})
------------------------
然后,在test.js中声明一个变量
来接收数据
咱们看看:
var app = getApp();
Page({
data:{
name:"credream",
time:'2017/01/14',
//1.声明接收数据的变量
//
username:''
},
onLoad:function(options){
console.log('onLoad');
this.setData({
time:app.globalData.time
})
//2.这里获取app.js中定义的数据
//咱们看看
//
this.setData({
username:app.getUserName()
})
console.log(app.globalData.time);
},
onReady:function(){
console.log('onReady')
},
onShow:function(){
},
onHide:function(){
},
onUnload:function(){
},
onPullDownRefresh:function(){
},
onReachBottom:function(){
}
})
-------------------------------
下次,咱们显示一个图片
好,在test.js中,咱们可以显示很多东西对吧.
可以做很多东西的.
------------------
好,接下来咱们看看:
api的简介:
打开帮助文档:
https://mp.weixin.
QQ.com/debug/wxadoc/dev/api/?t=2017112
可以看到,里面提供了很多的api对吧
好,咱们演示下怎么用:
咱们在onLoad中,调用一下
知乎日报的api咱们看看:
好,首先我找到知乎日报的api,显示一下给大家看看
http://news-at.zhihu.com/api/4/news/latest
访问一下,可以显示出来对应的新闻对吧.
好,咱们怎么调用呢?
咱们看看
在test.js中咱们看看:
var app = getApp();
Page({
data:{
name:"credream",
time:'2017/01/14',
username:''
},
onLoad:function(options){
console.log('onLoad');
this.setData({
time:app.globalData.time
})
this.setData({
username:app.getUserName()
})
//1.这里咱们输入wxrequ...咱们的sublime的
//插件就会自动导入下面的代码
//好每个参数是干嘛用的,在
//官网文档有解释
//
wx.request({
//1.这里给上url,webservice地址
//对吧.
//
url: 'http://news-at.zhihu.com/api/4/news/latest',
data: {
//1.这是发送给api地址的
//参数
},
header: {
'Content-Type': '
application/json'
},
success: function(res) {
//2.成功接收的数据
//咱们去调试窗口看看
//已经返回了数据对吧.
//可以看到有很多数据,咱们可以
//用一个列表显示一下对吧.
//
console.log(res.data)
},
fail: function(res) {
},
complete: function(res) {
}
})
console.log(app.globalData.time);
},
onReady:function(){
console.log('onReady')
},
onShow:function(){
},
onHide:function(){
},
onUnload:function(){
},
onPullDownRefresh:function(){
},
onReachBottom:function(){
}
})
---------------------------
比如:
https://mp.weixin.qq.com/debug/wxadoc/dev/api/network-request.html
wx.request发起的是 HTTPS 请求。
OBJECT参数说明：
参数名 类型
必填 说明
url String
是 开发者服务器接口地址
data Object、String否
请求的参数
header Object
否 设置请求的 header , header 中不能设置 Referer
method String
否 默认为 GET，有效值：OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
dataType String否
默认为 json。如果设置了 dataType 为 json，则会尝试对响应的数据做一次 JSON.parse
success Function否
收到开发者服务成功返回的回调函数，res = {data: '开发者服务器返回的内容'}
fail Function
否 接口调用失败的回调函数
complete Function否
接口调用结束的回调函数（调用成功、失败都会执行）
--------------------------------
有这些介绍对吧,好这些大家可以看看.
好,大家如果对h5了解,这个循环显示,就
很简单了,好咱们先看看这个怎么用
后边咱们详细的讲解:
比如,我现在test.js中,设置一个接收
这个list数据的变量:
var app = getApp();
Page({
data:{
name:"credream",
time:'2017/01/14',
username:'',
//1.首先声明一个list数组
//
list:[]
},
onLoad:function(options){
console.log('onLoad');
this.setData({
time:app.globalData.time
})
this.setData({
username:app.getUserName()
})
wx.request({
url: 'http://news-at.zhihu.com/api/4/news/latest',
data: {
},
header: {
'Content-Type': 'application/json'
},
success: function(res) {
console.log(res)
},
fail: function(res) {
},
complete: function(res) {
}
})
console.log(app.globalData.time);
},
onReady:function(){
console.log('onReady')
},
onShow:function(){
},
onHide:function(){
},
onUnload:function(){
},
onPullDownRefresh:function(){
},
onReachBottom:function(){
}
})
---------------------------------------
然后,咱们看看
声明list变量,以后,咱们看看如何显示
在test.wxml
<view class="mod-test">
{{name}}
{{time}}
<view>
{{username}}
</view>
//1.这里通过下面的这个格式来显示数据
//item.title因为,咱们看看调用api以后
//返回的数据,里面每一项都有title对吧
//所以,这里通过item.title来显示数据了.
//
<view wx:for="{{list}}">
{{item.title}}
</view>
</view>
好,现在咱们看看test.js中看看,没有看到
有显示的内容对吧,因为现在咱们在
test.js中list是空的对吧,
好,咱们来填充数据
test.js对吧,咱们看看:
var app = getApp();
Page({
data:{
name:"credream",
time:'2017/01/14',
username:'',
list:[]
},
onLoad:function(options){
console.log('onLoad');
this.setData({
time:app.globalData.time
})
this.setData({
username:app.getUserName()
})
//1.这里咱们定义一下这个this对吧
//为什么啊?
//
var that=this;
wx.request({
//2.因为这里如果,咱们使用this的话
//他指的是request这个对象,
//但是实际上咱们用的时候,要用这外面的this
//对吧,所以这里咱们把外面的this,接过来
//用一个that代指.
//
url: 'http://news-at.zhihu.com/api/4/news/latest',
data: {
},
header: {
'Content-Type': 'application/json'
},
success: function(res) {
console.log(res);
//3.这里给list填充数据
//
that.setData({list:res.data.stories})
},
fail: function(res) {
},
complete: function(res) {
}
})
console.log(app.globalData.time);
},
onReady:function(){
console.log('onReady')
},
onShow:function(){
},
onHide:function(){
},
onUnload:function(){
},
onPullDownRefresh:function(){
},
onReachBottom:function(){
}
})
------------------------------------
好,咱们看现在有数据了对吧,
微信开发工具中显示了,但是比较乱,咱们看看
可以改改样式
比如:
test.wxml中给他添加一个clas
<view class="mod-test">
{{name}}
{{time}}
<view>
{{username}}
</view>
//1.添加一个item对吧
//
<view wx:for="{{list}}" class="item">
//2.这个item是list中的每一项
//
{{item.title}}
</view>
</view>
-----------------------
然后在样式表中
test.wxss中
咱们看看:
.mod-test{
text-align:center;
height:100rpx;
}
//1.给item添加样式对吧
//
.mod-test .item{
text-align:left;
padding:5px;//2.内边距
border:1px solid #dfdfdf;
}
注意在test.js中
{}指的是一个对象,而在{}中使用this
他指的就是当前的{}这个对象.
好,今天就到这里.
