#编写构建和存储的位置
#轮播图的展示成果及示例
#跳转页面或注册模式
1.1运行news
"pages/news/news", 03(5)
.img {
width: 700rpx;
height: 500rpx;
} 04(3)
<image class="img" src='../images/star.jpg'></image> 05(4)
<button bindtap="goNews">点我跳转</button> 06(10)
goNews: function () {
wx.navigateTo({
url: '../news/news'
})
}, 07(12)
1.2运行movie
"pages/music/music",
"pages/movie/movie",
"pages/logs/logs"
],
"tabBar": {
"list": [
{
"pagePath": "pages/music/music",
"text": "音乐",
"iconPath": "pages/images/music.png",
"selectedIconPath": "pages/images/music2.png"
},
{
"pagePath": "pages/movie/movie",
"text": "电影",
"iconPath": "pages/images/movie.png",
"selectedIconPath": "pages/images/movie2.png"
}
]
}, 03（4）
<button bindtap="goTabBar">进入导航</button> 04（10）
goTabBar: function () {
wx.switchTab({
url: '../music/music'
})
}, 05（13）
1.3前往付款
"pages/payment/payment", 03（4）
<view class="btn-area">
<button bindtap='showPrompt'>查看提示</button>
<button bindtap='goPayment'>前往付款</button>
</view> 04（10）
.btn-area{
display: flex;
flex-direction: row;
align-items: center;
} 05（3）
//查看提示-显示消息提示框的函数
showPrompt: function () {
wx.showToast({
title: '请谨慎付款',
icon: 'success',
image: "../images/sch.png",
duration: 5000
});
},
//前往付款-弹出模态窗口的函数
goPayment: function () {
wx.showModal({
title: '再次提醒',
content: '确定要跳转付款页面么?',
success(res) {
if (res.confirm) {
wx.navigateTo({
url: '../payment/payment'
})
} else if (res.cancel) {
console.log('用户点击了取消');
}
}
});
}, 06（12）
2.1轮播图运行效果
<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" circular="true">
<block wx:for="{{imgUrls}}" wx:key="key">
<swiper-item>
<image src="{{item}}" mode="widthFix"/>
</swiper-item>
</block>
</swiper> 02（3）
changeIndicatorDots(e) {
this.setData({
indicatorDots:!this.data.indicatorDots
})
},
changeAutoplay(e) {
this.setData({
autoplay: !this.data.autoplay
})
},
intervalChange(e) {
this.setData({
interval: e.detail.value
})
},
durationChange(e) {
this.setData({
duration: e.detail.value
})
} 03（18）
2.2天气预报
<view class="btn-area" wx:for="city" wx:key="citykey">
<button bindtap="goWeather" data-btnId="{{index}}">
{{city[index]}}
</button>
</view> 02（10）
goWeather: function(event) {
var cityIdx = event.target.dataset.btnid;
wx.navigateTo({
url: '../weather/weather?id=' + cityIdx
})
} 03（7）
// 获取按钮在city数组中的下标，将城市名和回调函数名传给getLocalWeatherData函数
onLoad: function(options) {
var idx = options.id;
this.getLocalWeatherData(this.data.city[idx], this.myCallback);
},
// 获取指定城市的本地json数据，传给回调函数callback处理
getLocalWeatherData: function (city, callback) {
var cityJson = localJsonData.dataList[`${city}`];
callback(cityJson);
},
// 回调函数的实现
myCallback: function(resData) {
this.data.city = resData.result.city;
this.data.realtime = resData.result.realtime;
this.data.future = resData.result.future;
this.setData({
city: this.data.city,
real:this.data.realtime,
future:this.data.future
});
}, 04（11）
2.3模拟快递查询
<button class="btn-clear" type="primary" plain
bindtap="bindOnClear">清空</button>
<button class="btn-search" type="primary" plain
bindtap="bindOnSearch" loading="{{loading}}">查询</button> 02（13）
// 选择快递公司函数
bindExpressChange: function(e) {
this.setData({
index:e.detail.value
});
},
// 清空函数
bindOnClear: function() {
this.setData({
jsonObj:{},
loading:false
});
}, 03（14）
// 查询函数
bindOnSearch: function() {
this.setData({
loading: !this.data.loading
});
var com = this.data.key[this.data.index];
var arrJson = localJsonData.dataList[`${com}`];
var idx = Math.floor(Math.random() * arrJson.length);
setTimeout(this.myCallback, 3000, arrJson[idx]);
},
// 回调函数（获取json格式的订单数据之后，用此函数处理）
myCallback: function(orderJsonObj) {
// 若获取订单数据成功，则将物流跟踪数据的数组逆序（不成功时json中无此数组）
orderJsonObj.result.list.reverse();
// 拿到Json数据，切换正在加载的图标，并推送到视图渲染线程
this.setData({
loading: !this.data.loading,
jsonObj: orderJsonObj
});
} 04（27）
3.1播放白蛇传界面
<view class='audioContainer'>
<!--当前为停止状态-->
<view id='play' wx:if="{{isplay==false}}" bindtap='play'>
<image class='audioImg' src='../images/play.png' />
</view>
<!--当前为播放状态 -->
<view id='pause' wx:if="{{isplay==true}}" bindtap='paues'>
<image class='audioImg' src='../images/pause.png' />
</view>
</view>
<view style='width:40%;'>
<button bindtap='review' type='primary' >重新播放</button>
</view> 02（14）
// 播放
play: function() {
innerAudioContext.play();
this.setData({
isplay:true
});
},
// 暂停
pause: function() {
innerAudioContext.pause();
this.setData({
isplay:false
});
},
// 重播
review: function() {
innerAudioContext.stop();
innerAudioContext.play();
this.setData({
isplay:true
});
}, 03（31）
onReady: function() {
// 监听音频自然播放至结束的事件
innerAudioContext.onEnded(this.onEndedCallback);
},
onEndedCallback() {
this.setData({
isplay:false
});
}, 04（57）
3.2发送弹幕
<video id="myVideo" src="{{src}}" loop="true" autoplay show-progress="true" object-fit="cover" enable-danmu danmu-btn controls></video>
<view class="inner-container">
<input class="input-danmu" bindblur="inputBullet" placeholder="在此输入弹幕内容" />
<view class="btn-area">
<button bindtap="play">播放</button>
<button bindtap="pause">暂停</button>
<button bindtap="sendBullet">发送弹幕</button> 02（3）
this.videoContext=wx.createVideoContext('myVideo')
this.data.src = `${this.data.filePath}` +
`${this.data.fileName}`;
this.setData({
src: this.data.src
});
},
// 输入弹幕信息
inputBullet(e) {
var danmuStr=e.datail.value.trim();
if (danmuStr !="") {
this.data.inputValue=danmuStr;
} else {
this.data.inputValue='哈哈哈，真搞笑！';
}
},
// 发送视频弹幕
sendBullet() {
this.videoContext.sendDanmu({
text:this.data.inputValue,
color:getRandomColor()
}) 03（22）
this.videoContext.play();
},
// 视频暂停
pause() {
this.videoContext.pause(); 04（48）
3.3显示缓存数据
wx.setStorage({
key:param.username.trim(),
data:param.password
}); 02（52）
wx.getStorage({
key:param.username.trim(),
success(res) {
// 通过用户名，从本地缓存数据中成功获取到注册时设置的密码
// 回调函数succCallback中，将输入密码和缓存密码比对，处理跳转
that.succGetUserName(param, res.data);
},
fail(res) {
// 如果没有获取到缓存密码，在此处理
that.failGetUserName(param);
}
}); 03（28）
var flag=wx.getStorageSync(userName);
if(flag) {
return true;
} else {
wx.showModal({
title:'提示',
showCancel:false,
content:'该手机尚未注册！'
});
return false;
} 04（76）
wx.setStorage({
key:userName,
data:newPwd
}); 05（36）