微信小程序控制台输出开发实例

　　小程序的输出有很多种形式，之前介绍了小程序输出日志的相关资料，接下来小编要讲解的是微信小程序控制台输出的开发实例，一起来看看吧。

　　在此之前，我们必须先在微信小程序的平台上，设置下域名：

　　注意：微信小程序，不支持普通的HTTP协议，必须通过HTTPS协议。

　　于是，我在本地搭建了一个api服务，采用HTTPS协议，通过修改HOST文件，来映射本机访问。

　　微信小程序是通过全局函数wx.request函数来完成，语法入下：

　　wx.request({

　　url: 'URL',

　　data: {},

　　method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT

　　// header: {}, // 设置请求的 header

　　success: function(res){

　　// success

　　},

　　fail: function() {

　　// fail

　　},

　　complete: function() {

　　// complete

　　}

　　})

　　情景是这样的，通过点击首页的图标，来跳转至另一个页面，跳转的过程，需携带参数。

　　onLoad:function(options){

　　// 页面初始化 options为页面跳转所带来的参数

　　//console.log(options);

　　var that=this;

　　wx.request({

　　url: 'api.xxxxxxx/api/classify/GetChildrenClsssify?id='+options.id,

　　data: {},

　　method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT

　　// header: {}, // 设置请求的 header

　　success: function(res){

　　// success

　　that.setData({courses:res.data.datas});

　　},

　　fail: function() {

　　// fail

　　},

　　complete: function() {

　　// complete

　　}

　　})

　　}

　　我在Page的onLoad事件中，向远程地址发起GET请求，其中，携带参数名为id的参数。

　　在此过程中，总是触发fail事件，接口响应200，这个错误，是由于本地域名映射，导致微信开发者工具，验证域名不通过造成的，我们只需要通过以下设置：

　　红色标注处，选中即可。至此，我们的请求便可顺利完成，远程请求返回成功后，我们通过访问当前页的

　　setData()方法来，设置当前页面的data属*。在这里，有些朋友可以注意到了，在we.request函数前，声明了一个var that=this;的语句，用变量that来接收this对象，这样是为了wx.request请求成功后，在success回到函数中，调用that.setData(object);方法，来赋值数据。wx.request中，success回调函数中的一个参数res，res.data就是获取到的数据。这样一来，页面加载时，向远程服务器发起请求，响应成功后，给data赋值，然后，就可以在视图绑定数据后，进行渲染了。

　　在这个过程中，你可能想知道，怎样传参?

　　微信小程序的传参，有点儿像HTTP请求中的传参方式，?参数名=参数值。我们还是回到首页，看一下代码：

　　{{item.name}}

　　我在view标记中，自定义了一个名为data-id的属*，这是自定义属*，有点儿类似于html5中的data-xxx。这样定义后，再看我们在index.js中是如何取值的：

　　//事件处理函数

　　bindViewTap: function(r) {

　　wx.navigateTo({url: '../classify/classify?id='+r.currentTarget.dataset.id})

　　}

　　bindViewTap是我自定义的函数名，用来绑定视图view的点击事件：(bindtap)。奥妙就在于bindViewTap的参数r,通过调试控制台输出，我们可以清晰的看到r的结构：

　　这是控制台输出的参数r的结构，这样我就可以通过参数r来获取到在index.wxml中给view标签定义的属*(data-id);于是就有了这样一句代码：

　　wx.navigateTo({url: '../classify/classify?id='+r.currentTarget.dataset.id})

　　wx.navigateTo是微信小程序点击跳转方法。于是，我们从首页点击，就看到了入下效果：

　　以上就是微信小程序控制台输出的开发实例，参照这个流程，你也可以学会小程序控制台输出要怎么设置了，更多相关资料请关注微信小程序素材网。

　　微信小程序输出日志怎么弄

　　微信小程序API音频播放控制

　　微信小程序自定义函数开发实例