目录
微信小程序创建项目配置底部导航栏
微信小程序滚动播放内容
微信小程序功能中心模块开发
微信小程序个人中心页面开发
微信小程序获取电话号码
微信小程序显示列表数据
微信小程序显示分页列表
微信小程序添加插屏广告
微信小程序添加激励式广告
最终效果可扫码查看
遇到问题可通过公众号留言反馈
准备资料
本篇是从头搭建微信小程序的第二篇,主要内容:
1.纵向滚动播放内容,循环的
2.网络请求数据
3.流量主的banner广告插入
4.点击事件的弹窗提醒
其中,备用的数据有两部分,分别对应两个循环滚动的内容
http://yr.lootaa.com/ship/time/todayEnd 上半部分滚动内容
http://yr.lootaa.com/time/channel/lately 下半部分滚动内容
开发阶段需要先忽略域名合法性校验。点击开发者工具详情,勾选即可。
请求数据
在index.js文件中,data里面增加list和list2参数,分别用于存储两部分数据。
定义全局变量that,在onLoad方法中赋值that=this;
使用wx.request请求数据,将返回结果使用that.setData赋值上。
请求方式的微信官方地址为:https://developers.weixin.qq.com/miniprogram/dev/api/network/request/wx.request.html
Page({
data: {
list:[],
list2:[],
background: ['demo-text-1', 'demo-text-2', 'demo-text-3'],
indicatorDots: false,
vertical: true,
autoplay: true,
circular: true,
interval: 2000,
duration: 500,
previousMargin: 0,
nextMargin: 0
},
onLoad() {
var that = this;
wx.request({
url: 'http://yr.lootaa.com/ship/time/todayEnd',
success (res) {
that.setData({
list: res.data.data.data
})
console.log(res.data.data.data)
}
})
wx.request({
url: 'http://yr.lootaa.com/time/channel/lately',
success (res) {
that.setData({
list2: res.data.data
})
console.log(res.data.data)
}
})
}
})
纵向滚动播放
滚动播放的组件使用的swiper和swiper-item,例如轮播图等也是这个组件。官方提供了demo,可以通过https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html查看。本篇的纵向轮播也是在官方demo基础上进行的修改。
样式
复制样式weui.wxss,可以从demo中直接复制,或者从github下载:https://github.com/weui/weui-wxss
index.wxss的样式直接复制过来,有写修改后没有使用的,继续保留了没有删除,不影响业务。
@import "./weui.wxss";
page {
background-color: #F8F8F8;
height: 100%;
font-size: 32rpx;
line-height: 1.6;
}
.page-body{
padding-top: 60rpx;
}
.page-section{
width: 100%;
margin-bottom: 60rpx;
}
.page-section_center{
display: flex;
flex-direction: column;
align-items: center;
}
.page-section:last-child{
margin-bottom: 0;
}
.page-section-gap{
box-sizing: border-box;
padding: 0 30rpx;
}
.page-section-spacing{
box-sizing: border-box;
padding: 0 20rpx;
}
.page-section-title{
font-size: 28rpx;
color: #999999;
margin-bottom: 10rpx;
padding-left: 30rpx;
padding-right: 30rpx;
}
.page-section-gap .page-section-title{
padding-left: 0;
padding-right: 0;
}
.demo-text-1{
position: relative;
align-items: center;
justify-content: center;
background-color: #1AAD19;
color: #FFFFFF;
font-size: 36rpx;
}
.demo-text-1:before{
content: 'A';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.demo-text-2{
position: relative;
align-items: center;
justify-content: center;
background-color: #2782D7;
color: #FFFFFF;
font-size: 36rpx;
}
.demo-text-2:before{
content: 'B';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.demo-text-3{
position: relative;
align-items: center;
justify-content: center;
background-color: #F1F1F1;
color: #353535;
font-size: 36rpx;
}
.demo-text-3:before{
content: 'C';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
button{
margin-bottom: 30rpx;
}
button:last-child{
margin-bottom: 0;
}
.page-section-title{
padding: 0;
}
.swiper-item{
display: block;
height: 150px;
}
.page-section-title{
margin-top: 60rpx;
position: relative;
}
.info{
position: absolute;
right: 0;
color: #353535;
font-size: 30rpx;
}
.page-foot{
margin-top: 50rpx;
}
布局
demo中修改部分内容
1.swiper-item修改为自己要轮播的数据,三行的view内容
2.swiper增加属性display-multiple-items,表示一屏幕显示几条数据,此处使用的2
3.轮播的默认值修改,可以直接在swiper参数中调整,本篇直接修改的data内容
调整后的布局为
<view class="container">
<view class="page-body">
<view class="page-section page-section-spacing swiper">
<view bindtap="dingyue" style="padding-bottom: 5px; color: blue;">今日截关信息,点击订阅每日提醒</view>
<swiper display-multiple-items="2"
indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" circular="{{circular}}" vertical="{{vertical}}"
interval="{{interval}}" duration="{{duration}}" previous-margin="{{previousMargin}}px" next-margin="{{nextMargin}}px">
<block wx:for="{{list}}" wx:key="*this">
<swiper-item>
<view>船名:{{item.shipNameCn}}</view>
<view>航次:{{item.voyage}}</view>
<view>截关时间:{{item.endTime}}</view>
</swiper-item>
</block>
</swiper>
</view>
<view class="page-section page-section-spacing swiper">
<view style="padding-bottom: 5px; color: blue;">最近集装箱进出场时间查询</view>
<swiper display-multiple-items="2"
indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" circular="{{circular}}" vertical="{{vertical}}"
interval="{{interval}}" duration="{{duration}}" previous-margin="{{previousMargin}}px" next-margin="{{nextMargin}}px">
<block wx:for="{{list2}}" wx:key="*this">
<swiper-item>
<view>提单号:{{item.billNo}}</view>
<view>箱号:{{item.boxNo}}</view>
<view>出场时间:{{item.time}}</view>
</swiper-item>
</block>
</swiper>
</view>
</view>
</view>
至此,基本数据展示流程完成。
流量主的banner广告插入
如果小程序的用户大于1000人,则可以申请开通流量主,然后直接添加banner广告后,则可以直接复制banner内容。添加到对应布局即可。
添加上banner后的布局完成内容为
<view class="container">
<ad unit-id="adunit-a797bfb98d2f529d"></ad>
<view class="page-body">
<view class="page-section page-section-spacing swiper">
<view style="padding-bottom: 5px; color: blue;">今日截关信息,点击订阅每日提醒</view>
<swiper display-multiple-items="2"
indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" circular="{{circular}}" vertical="{{vertical}}"
interval="{{interval}}" duration="{{duration}}" previous-margin="{{previousMargin}}px" next-margin="{{nextMargin}}px">
<block wx:for="{{list}}" wx:key="*this">
<swiper-item>
<view>船名:{{item.shipNameCn}}</view>
<view>航次:{{item.voyage}}</view>
<view>截关时间:{{item.endTime}}</view>
</swiper-item>
</block>
</swiper>
</view>
<view class="page-section page-section-spacing swiper">
<view style="padding-bottom: 5px; color: blue;">最近集装箱进出场时间查询</view>
<swiper display-multiple-items="2"
indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" circular="{{circular}}" vertical="{{vertical}}"
interval="{{interval}}" duration="{{duration}}" previous-margin="{{previousMargin}}px" next-margin="{{nextMargin}}px">
<block wx:for="{{list2}}" wx:key="*this">
<swiper-item>
<view>提单号:{{item.billNo}}</view>
<view>箱号:{{item.boxNo}}</view>
<view>出场时间:{{item.time}}</view>
</swiper-item>
</block>
</swiper>
</view>
</view>
</view>
点击事件的弹窗提醒
点击第一个滚动播放标题,需要提醒是否确定订阅(没有实现真实逻辑,仅仅测试绑定功能),模拟了点击是和点击否的操作。
view中添加bindtap即可指定对应方法名称,所以整体分为两步:编写对应方法、bindtap指定方法。
index.js中添加dingyue方法,该方法实现了弹窗提醒功能。完成的index.js代码
Page({
data: {
list:[],
list2:[],
background: ['demo-text-1', 'demo-text-2', 'demo-text-3'],
indicatorDots: false,
vertical: true,
autoplay: true,
circular: true,
interval: 2000,
duration: 500,
previousMargin: 0,
nextMargin: 0
},
onLoad() {
var that = this;
wx.request({
url: 'http://yr.lootaa.com/ship/time/todayEnd',
success (res) {
that.setData({
list: res.data.data.data
})
console.log(res.data.data.data)
}
})
wx.request({
url: 'http://yr.lootaa.com/time/channel/lately',
success (res) {
that.setData({
list2: res.data.data
})
console.log(res.data.data)
}
})
},
dingyue: function (e) {
var mobile = wx.getStorageSync('mobile');
var openid = wx.getStorageSync('openid');
var unionid = wx.getStorageSync('unionid');
if(!mobile && !openid && !unionid) {
wx.showModal({
title: '提示',
content: '您尚未登录,是否进入登录页面?',
success: function (res) {
if (res.confirm) {
console.log('用户点击确定')
} else {
console.log('用户点击取消')
}
}
})
} else {
wx.showModal({
title: '提示',
content: '请确保您已关注了公众号“洛塔志达”,我们将以公众号消息的形式向您推送截关提醒。此次提醒将续期7天。',
success: function (res) {
if (res.confirm) {
console.log('用户点击确定')
} else {
console.log('用户点击取消')
}
}
})
}
}
})
布局文件的view绑定该方法,代码为
<view class="container">
<ad unit-id="adunit-a797bfb98d2f529d"></ad>
<view class="page-body">
<view class="page-section page-section-spacing swiper">
<view bindtap="dingyue" style="padding-bottom: 5px; color: blue;">今日截关信息,点击订阅每日提醒</view>
<swiper display-multiple-items="2"
indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" circular="{{circular}}" vertical="{{vertical}}"
interval="{{interval}}" duration="{{duration}}" previous-margin="{{previousMargin}}px" next-margin="{{nextMargin}}px">
<block wx:for="{{list}}" wx:key="*this">
<swiper-item>
<view>船名:{{item.shipNameCn}}</view>
<view>航次:{{item.voyage}}</view>
<view>截关时间:{{item.endTime}}</view>
</swiper-item>
</block>
</swiper>
</view>
<view class="page-section page-section-spacing swiper">
<view style="padding-bottom: 5px; color: blue;">最近集装箱进出场时间查询</view>
<swiper display-multiple-items="2"
indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" circular="{{circular}}" vertical="{{vertical}}"
interval="{{interval}}" duration="{{duration}}" previous-margin="{{previousMargin}}px" next-margin="{{nextMargin}}px">
<block wx:for="{{list2}}" wx:key="*this">
<swiper-item>
<view>提单号:{{item.billNo}}</view>
<view>箱号:{{item.boxNo}}</view>
<view>出场时间:{{item.time}}</view>
</swiper-item>
</block>
</swiper>
</view>
</view>
</view>
点击后的效果