微信小程式開發相關記錄(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地址不在合法域名列表中的話,會出現如下問題:
- 解決方案:開啟小程式微信公眾平臺設定小程式開發設定,配置伺服器合法域名(必須是https),如下圖所示:
相關文章
- 原生微信小程式開發記錄微信小程式
- 微信小程式開發小記微信小程式
- 微信小程式開發記錄_01程式碼構成微信小程式
- 微信小程式開發記錄_03_開發指南_小程式程式碼組成微信小程式
- 微信小程式使用記錄微信小程式
- 微信小程式自定義元件的關鍵記錄微信小程式元件
- 微信小程式開發記錄02_執行機制微信小程式
- 微信小程式踩坑記錄微信小程式
- 微信小程式開發微信小程式
- 微信小程式BLE踩坑記錄微信小程式
- 關於uni-app微信小程式開發的部分筆記APP微信小程式筆記
- 微信小程式開發學習筆記[3]微信小程式筆記
- 微信小程式開發學習筆記[4]微信小程式筆記
- mpvue開發微信小程式踩坑筆記Vue微信小程式筆記
- 微信小程式開發學習筆記[2]微信小程式筆記
- 微信小程式開發2微信小程式
- 微信小程式開發教程微信小程式
- 微信小遊戲開發小記遊戲開發
- 【小程式】微信小程式開發準備微信小程式
- 微信小程式--關於加快小程式開發的幾個小建議微信小程式
- 記一次mpvue開發完整小程式相關筆記Vue筆記
- 微信小程式開發精講微信小程式
- 開發微信小程式的作用微信小程式
- 微信小程式藍芽開發微信小程式藍芽
- 微信小程式雲開發6微信小程式
- 微信小程式開發總結微信小程式
- 使用mpvue開發微信小程式Vue微信小程式
- 微信小程式開發--『狗蛋TV』微信小程式
- 微信小程式開發神器-Grace微信小程式
- 【微信小程式開發】梔子手作花花微信小程式商城開發最佳實踐微信小程式
- 微信小程式開發之大神之路最全微信小程式開發教程(視訊+精品文章)微信小程式
- 微信小程式開發風口下,微信小程式該如何運營?微信小程式
- 微信小程式開發系列七:微信小程式的頁面跳轉微信小程式
- 微信小程式開發系列教程三:微信小程式的除錯方法微信小程式除錯
- 微信小程式開發系列二:微信小程式的檢視設計微信小程式
- .NET微信網頁開發相關文章教程網頁
- 微信開發相關,瞭解一下
- 微信小程式--聊天室小程式(雲開發)微信小程式
- 記錄--uniapp相容微信小程式和支付寶小程式遇到的坑APP微信小程式