微信小程序开发相关记录（2017.07.25）

本文主要是介绍微信小程序开发相关记录（2017.07.25），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

1、底部的tabBar

可设置的属性有color、selectedColor、borderStyle、backgroundColor、list至少2个，最多5个（其属性有pagePath、text、iconPath、selectedIconPath等）

"tabBar": {"color":"#dddddd","selectedColor":"#3cc51f","borderStyle":"black","backgroundColor":"#2B2B2B","list": [{"pagePath": "pages/movie/movie","text": "影院热映","iconPath": "assets/img/dy-1.png","selectedIconPath": "assets/img/dy.png"},{"pagePath": "pages/recommend/recommend","text": "电影推荐","iconPath": "assets/img/tj-1.png","selectedIconPath": "assets/img/tj.png"},{"pagePath": "pages/search/search","text": "查询电影","iconPath": "assets/img/search-1.png","selectedIconPath": "assets/img/search.png"}]},

效果如下图所示：

2、滑块视图容器swiper

swiper

滑块视图容器。

属性名	类型	默认值	说明	最低版本
indicator-dots	Boolean	false	是否显示面板指示点
indicator-color	Color	rgba(0, 0, 0, .3)	指示点颜色	1.1.0
indicator-active-color	Color	#000000	当前选中的指示点颜色	1.1.0
autoplay	Boolean	false	是否自动切换
current	Number	0	当前所在页面的 index
interval	Number	5000	自动切换时间间隔
duration	Number	500	滑动动画时长
circular	Boolean	false	是否采用衔接滑动
vertical	Boolean	false	滑动方向是否为纵向
bindchange	EventHandle		current 改变时会触发 change 事件，event.detail = {current: current, source: source}

从公共库v1.4.0开始，change事件返回detail中包含一个source字段，表示导致变更的原因，可能值如下：

autoplay 自动播放导致swiper变化；
touch 用户划动引起swiper变化；
其他原因将用空字符串表示。

注意：其中只可放置<swiper-item/>组件，否则会导致未定义的行为。

swiper-item

仅可放置在<swiper/>组件中，宽高自动设置为100%。

示例代码：

<swiper indicator-dots="{{indicatorDots}}"autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}"><block wx:for="{{imgUrls}}"><swiper-item><image src="{{item}}" class="slide-image" width="355" height="150"/></swiper-item></block>
</swiper>
<button bindtap="changeIndicatorDots"> indicator-dots </button>
<button bindtap="changeAutoplay"> autoplay </button>
<slider bindchange="intervalChange" show-value min="500" max="2000"/> interval
<slider bindchange="durationChange" show-value min="1000" max="10000"/> 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},changeIndicatorDots: function(e) {this.setData({indicatorDots: !this.data.indicatorDots})},changeAutoplay: function(e) {this.setData({autoplay: !this.data.autoplay})},intervalChange: function(e) {this.setData({interval: e.detail.value})},durationChange: function(e) {this.setData({duration: e.detail.value})}
})

效果如下图所示：

3、豆瓣API

在浏览器中输入豆瓣电影接口地址

http://api.douban.com/v2/movie/in_theaters

然后F12，打开调试窗口，选择Console，输入var a=接口返回的json串，如下图所示：

然后回车，再输入a，再回车，即可看到已经格式化的JSON对象，如下图所示：

3、从接口获取数据进行绑定

<block wx:for="{{movies}}"><view class="movie"><view class="pic"><image mode="aspectFit" src="{{item.images.medium}}"></image></view><view class="movie-info"><view class="base-info"><text>{{item.text}}</text></view></view></view><view class="hr"></view></block>

// pages/movie/movie.js
Page({/*** 页面的初始数据*/data: {imgUrls: ['../../assets/img/001.jpg','../../assets/img/002.jpg','../../assets/img/003.jpg'],indicatorDots: true,autoplay: true,interval: 3000,duration: 1000,movies:[],hidden:false},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {this.loadMovie();},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {},/*** 加载电影*/loadMovie:function(){var page = this;wx.request({url: 'http://api.douban.com/v2/movie/in_theaters',header:{'Content-Type':"application/json"},success:function(res){var subjects = res.data.subjects;processSubjects(subjects);page.setData({ movies: subjects, hidden:true});}})},/*** */processSubjects: function (subjects) {//循环for (var i = 0; i < subjects.length;i++){var subject = subjects[i];this.processSubject(subject);}},/*** */processSubject:function(subject){//名称var title = subject.title;//导演var directors  = subject.directors;var directorStr = "";for (var index in directors){directorStr= directorStr+directors[index].name+" / ";}if(directorStr!=""){directorStr = directorStr.substring(0,directorStr.length-2);}//主演var casts = subject.casts;var castStr = "";for(var index in casts){castStr= castStr+casts[index].name+" / ";}if(castStr!=""){castStr= castStr.substring(0,castStr.length-2);}//类型var genres = subject.genres;var genresStr = "";for(var index in genres){genresStr = genresStr+genres[index]+" / ";}if(genresStr!=""){genresStr= genresStr.substring(0,genresStr.length-2);}//年份var year = subject.year;//拼接字符串var text = "名称："+title+"\n导演："+directorStr+"\n主演："+castStr+"\n类型："+genresStr+"\n上映年份:"+year;subject.text = text;}})

4、加载进度条

<view class="body-view"><loading hidden="{{hidden}}" bindchange="loadingChange">加载中...</loading>
</view>

data: {imgUrls: ['../../assets/img/001.jpg','../../assets/img/002.jpg','../../assets/img/003.jpg'],indicatorDots: true,autoplay: true,interval: 3000,duration: 1000,movies:[],hidden:false},

/*** 加载电影*/loadMovie:function(){var page = this;wx.request({url: 'https://api.douban.com/v2/movie/in_theaters',header:{'Content-Type':"application/json"},success:function(res){var subjects = res.data.subjects;processSubjects(subjects);page.setData({ movies: subjects, hidden:true});}})},

5、如果出现请求的URL地址不在合法域名列表中的话，会出现如下问题：