微信小程序开发组件和API接口使用教程

微信小程序开发者工具为开发者提供了组件和API接口,下面就和大家详细介绍一下微信小程序开发组件和API接口使用教程,希望对大家有所帮助!

(一)、什么是微信小程序开发组件和API接口

微信小程序开发组件主要是完成小程序视图部分,包括文字、图片等操作。

微信小程序开发组件

API接口主要是完成小程序逻辑功能部分,包括网络请求、数据库存储、微信支付等功能。

API接口

(二)、API接口使用教程

下面就以豆瓣为例,带大家分析一下API接口使用教程!

1.底部导航:可以通过设置tabBar属性来实现,可以参考官网文档https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html

API接口使用教程

示例代码如下:

“tabBar”: {

“backgroundColor”: “#363636”,

“color”:”#666″,

“selectedColor”:”#fff”,

“list”: [{

“pagePath”: “pages/index/index”,

“text”: “正在热映”,

“iconPath”: “res/images/film.png”,

“selectedIconPath”: “res/images/film.png”

},

{

“pagePath”: “pages/recommend/recommend”,

“text”: “热门推荐”,

“iconPath”: “res/images/hot.png”,

“selectedIconPath”: “res/images/hot.png”

},

{

“pagePath”: “pages/search/search”,

“text”: “影片搜索”,

“iconPath”: “res/images/search.png”,

“selectedIconPath”: “res/images/search.png”

}

]

}

2.顶部banner图

顶部banner图可以通过swiper组件来实现,具体操作:组件-视图容器-swiper。复制官方实例,操作之后,看看效果图,然后进行修改调整,代码示例:

<swiper indicator-dots=”{{indicatorDots}}”

autoplay=”{{autoplay}}” interval=”{{interval}}” duration=”{{duration}}”>

Page({

data: {

imgUrls: [      ‘http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg’,      ‘http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg’,      ‘http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg’

],

indicatorDots: false,

autoplay: false,

interval: 5000,

duration: 1000

}

})

3.展示部分

展示部分我们会用到视图容器view、媒体组件image、基础内容组件text等。

4.网络请求

网络请求可以通过js来实现,具体操作:API-网络-网络请求、示例代码:

var url=”https://api.douban.com/v2/movie/in_theaters”;

wx.request({

url: url,

method: ‘GET’, // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT      header: {

‘Content-Type’:’application/json’//返回json格式,必须要加

}, // 设置请求的 header      success: function(res){

console.log(res.data.subjects);

that.setData({

movies:res.data.subjects

});

}

})

5. 数据交互

数据交互找到数据,绑定文档,然后再提交给逻辑层,再将逻辑层传到视图层。

具体操作流程:框架—视图层—WXML(http://www.mpgcw.com/2294.html)—事件,如图所示:

{{ message }}

Page({

data: {

message: ‘Hello MINA!’

}

})

Click me!

Page({

tapName: function(event) {

console.log(event)

}

})

以上就是微信小程序开发组件和API接口使用教程,大家可以作为参考,也可以尝试操作一下。


声明:本站部分文章来源于互联网,如有侵犯作者著作权,请及时与我们联系。

木鱼小铺小程序

为您推荐