微信小程序框架为开发者提供了一系列的组件和API接口。
组件主要完成小程序的视图部分,例如文字、图片显示。API主要完成逻辑功能,例如网络请求、数据存储、音视频播放控制,以及微信开放的微信登录、微信支付等功能。
组件
官方文档:https://mp.weixin.qq.com/debug/wxadoc/dev/component/
小程序提供了如下组件:
API
官方文档:https://mp.weixin.qq.com/debug/wxadoc/dev/api/
同样我们先了解微信API的结构:
了解了文档结构后,我们就可以开始实战了。从简单的开始,当你需要实现某个界面或功能时,能够快速定位到应该看哪部分文档。
底部导航
底部导航的实现,是在小程序配置文件实现的,设置tabBar属性。对于其具体属性的设置可以快速定位到文档:https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html
其实现代码如下:
1 "tabBar": { 2 "backgroundColor": "#363636", 3 "color":"#666", 4 "selectedColor":"#fff", 5 "list": [{ 6 "pagePath": "pages/index/index", 7 "text": "正在热映", 8 "iconPath": "res/images/film.png", 9 "selectedIconPath": "res/images/film.png" 10 }, 11 { 12 "pagePath": "pages/recommend/recommend", 13 "text": "热门推荐", 14 "iconPath": "res/images/hot.png", 15 "selectedIconPath": "res/images/hot.png" 16 }, 17 { 18 "pagePath": "pages/search/search", 19 "text": "影片搜索", 20 "iconPath": "res/images/search.png", 21 "selectedIconPath": "res/images/search.png" 22 } 23 ] 24 }
顶部Banner实现
Banner可以自动左右滑动的组件,通过前面的了解,我们可以很快了解到使用swiper组件。查找方法:组件—视图容器—swiper找到文档,然后复制官方实例:
1 <swiper indicator-dots="{{indicatorDots}}" 2 autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}"> 3 <block wx:for="{{imgUrls}}"> 4 <swiper-item> 5 <image src="{{item}}" class="slide-image" width="355" height="150"/> 6 </swiper-item> 7 </block> 8 </swiper> 9 10 Page({ 11 data: { 12 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' 13 ], 14 indicatorDots: false, 15 autoplay: false, 16 interval: 5000, 17 duration: 1000 18 } 19 })
网络请求
小程序界面显示的电影信息等内容,均是来自网络。豆瓣电影开放了API接口,接口说明页面:https://developers.douban.com/wiki/?title=movie_v2
通过网络接口获取数据需要用到网络请求,当然利用js也可以实现,但我们前面了解了微信提供了网络方面的接口,API—网络—网络请求,通过这个接口可以进行网络数据的请求。
示例代码:
1 var url="https://api.douban.com/v2/movie/in_theaters"; 2 wx.request({ 3 url: url, 4 method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT 5 header: { 6 'Content-Type':'application/json'//返回json格式,必须要加 7 }, // 设置请求的 header 8 success: function(res){ 9 console.log(res.data.subjects); 10 that.setData({ 11 movies:res.data.subjects 12 }); 13 } 14 })
上面接口使用起来也还是很方便的,支持http和https(调试模式下)。
数据交互
有了界面,有了数据。那么如何将数据显示到界面,以及如何将界面数据提供给逻辑层,这时我们可以找到数据绑定部分的文档。
示例代码:
1 <view> {{ message }} </view> 2 3 Page({ 4 data: { 5 message: 'Hello MINA!' 6 } 7 })
这样很容易就了解了如何将逻辑层的数据传给视图层。
事件的使用方式
https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/event.html
- 在组件中绑定一个事件处理函数。如
bindtap
,当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数。
- 在相应的Page定义中写上相应的事件处理函数,参数是event。
下面是简单的事件使用的实例:
1 <view id="tapTest" data-hi="WeChat" bindtap="tapName"> Click me! </view> 2 3 Page({ 4 tapName: function(event) { 5 console.log(event) 6 } 7 })