微信小程序开发学习笔记002--微信小程序框架解密

1.今天内容比较多,

框架解密

• 目录结构

• 配置文件详解

• 逻辑层

• Api简介

-----------------------

2.打开微信开发工具,

  点击添加项目,选择无appid模式

  credemo02

  点击添加项目就创建好了.

3.首先打开sublime

  然后file-->open folder-->找到credemo02

4.好,然后咱们看看框架的分析:

  框架解密图片:

  框架分为:视图层和逻辑层

  逻辑层可以通过api调用native app提供的

  一些微信底层的功能,

  视图层:wxml:微信自己定义的语言

         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

里面用JavaScript描述的.

在逻辑层中,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

他指的就是当前的{}这个对象.

好,今天就到这里.