一个微信小程序的案例

参考https://www.bilibili.com/video/BV1WQ4y1T7D8?p=38&spm_id_from=pageDriver
小程序目录结构

<!--index.wxml-->
<!-- logo，消息框 -->
<view class="header"><view class="container hdCon"><navigator open-type="switchTab" url="/pages/index/index" class="logo"><image mode="heightFix" src="/image/logo.png"></image></navigator><view class="kefu"><button class="btn" open-type="contact"></button><!-- open-type="contact"打开聊天框 --><image mode="heightFix" src="/image/kefu.png"></image></view></view>
</view>
<!--自定义组件-->
<!-- <xsj></xsj> -->
<!-- 轮播图 -->
<view class="banner"><swiper indicator-dots indicator-color="rgba(255,255,255,0.5)" indicator-active-color="#fff" circular autoplay interval="4000"><swiper-item><image src="/image/banner1.png"></image></swiper-item><swiper-item><image src="/image/banner2.png"></image></swiper-item><swiper-item><image src="/image/banner3.png"></image></swiper-item></swiper>
</view>
<!-- 课程横导航<scroll-view> --><scroll-view class="major" scroll-x><view class="majorCon"><navigator class="scroll-nav-items" url="/pages/ps/ps"><image class="pic" src="/image/kecheng1.png"></image><view class="txt">平面设计</view></navigator><navigator class="scroll-nav-items" url=""><image class="pic" src="/image/kecheng2.png"></image><view class="txt">web前端</view></navigator><navigator class="scroll-nav-items" url=""><image class="pic" src="/image/kecheng3.png"></image><view class="txt">室内设计</view></navigator><navigator class="scroll-nav-items" url=""><image class="pic" src="/image/kecheng4.png"></image><view class="txt">UI设计</view></navigator><navigator class="scroll-nav-items" url=""><image class="pic" src="/image/kecheng5.png"></image><view class="txt">影视后期</view></navigator></view>
</scroll-view>
<!-- 学生作品 -->
<view class="works"><view class="container"><view class="pubTitle"><view class="txt">学员作品</view><navigator class="more">更多 ></navigator></view><view class="wkMain"><navigator class="box" url=""><image class="pic" src="/image/xszp1.png"></image><view class="ceng"><view class="tit">UI设计作品</view><view class="line"></view><view class="des">UI design works</view></view></navigator><navigator class="box" url=""><image class="pic" src="/image/xszp2.png"></image><view class="ceng"><view class="tit">web 前端</view><view class="line"></view><view class="des">Web front end work</view></view></navigator><navigator class="box" url=""><image class="pic" src="/image/xszp3.png"></image><view class="ceng"><view class="tit">UI设计作品</view><view class="line"></view><view class="des">UI design works</view></view></navigator><navigator class="box" url=""><image class="pic" src="/image/xszp4.png"></image><view class="ceng"><view class="tit">UI设计作品</view><view class="line"></view><view class="des">UI design works</view></view></navigator><navigator class="box" url=""><image class="pic" src="/image/xszp5.png"></image><view class="ceng"><view class="tit">UI设计作品</view><view class="line"></view><view class="des">UI design works</view></view></navigator><navigator class="box" url=""><image class="pic" src="/image/xszp6.png"></image><view class="ceng"><view class="tit">UI设计作品</view><view class="line"></view><view class="des">UI design works</view></view></navigator><navigator class="box" url=""><image class="pic" src="/image/xszp7.png"></image><view class="ceng"><view class="tit">UI设计作品</view><view class="line"></view><view class="des">UI design works</view></view></navigator><navigator class="box" url=""><image class="pic" src="/image/xszp8.png"></image><view class="ceng"><view class="tit">UI设计作品</view><view class="line"></view><view class="des">UI design works</view></view></navigator></view></view>
</view>
<!-- 动态 -->
<view class="dynamic"><view class="container"><view class="pubTitle"><view class="txt">行业动态</view><navigator class="more">更多 ></navigator></view><view class="dyMain"><navigator class="dyItem" wx:for="{{dataList}}"><view class="pic"><image src="/image/xszp8.png"></image></view><view class="txt"><view class="title">{{item.title}}</view><view class="info">作者：<text >{{item.author}}</text><text space="ensp"> - </text> 时间：<text>{{item.posttime}}</text></view></view></navigator></view></view>
</view><!-- footer -->
<view class="footer"><image class="pic" mode="widthFix" src="/image/logo.png"></image> <!-- 根据宽度适应高度--><view class="text">谷歌搜索接收反驳</view>
</view>

/**index.wxss**/
/* 学生作品 */
.pubTitle{ /* 公共样式*/display: flex;justify-content: space-between;height: 60rpx;align-items: center;margin-bottom: 40rpx;
}
.pubTitle .txt{font-size: 40rpx;position: relative;padding-left: 20rpx;
}
.pubTitle .txt::before{/* 使用伪元素在元素之前插入内容*/display: block;width: 8rpx;height: 34rpx;background: #c8020b;content: " ";position: absolute;left: 0;top: 50%;margin-top: -15rpx;
}
.pubTitle .more{font-size: 34rpx;color: #666;
}
/* logo 客服布局*/
.header{width: 750rpx;height: 90rpx;
}
.hdCon{display: flex;justify-content: space-between; /* 设置弹性盒子在主轴（横）方向上的对齐方式 */height: 100%;align-items: center; /* 定义flex容器的当前行的侧轴方向上的对其方式（子，父都要有高度）*/
}
.hdCon navigator, .hdCon .kefu{height: 50rpx;
}
.hdCon image{height: 100%;
}
.kefu{position: relative;animation: dh linear 1s infinite alternate;/* 给消息框调用动画（来源于app.wxss）*/
}
.kefu .btn{position: absolute;height: 100%;width: 100%;left: 0;right: 0;opacity: 0; /* 设置元素的不透明度级别，用按钮盖住图像*/
}
/* 轮播图*/
.banner{width: 100%;height: 295rpx;
}
.banner swiper{/* swiper默认高度150px，需要自己手动调整*/height: 100%;width: 100%;
}
.banner image{width: 100%;height: 295rpx;
}
/* 专业横排滚动导航*/
.majorCon{padding: 20rpx 0;display: flex;flex-wrap: nowrap;width: 1000rpx;/* justify-content: space-between; */
}
.major .pic{width: 100rpx;height: 100rpx;border-radius: 50%;
}
.major .scroll-nav-items{text-align: center;width: 200rpx;flex: 1;
}
.major .txt{font-size: 26rpx;margin-top: 10rpx;
}
/* 学生作品 */
.works{background: #f0f3f8;padding: 90rpx 0 70rpx;
}
.wkMain{display: flex;flex-wrap: wrap;justify-content: space-between;
}
.wkMain .box{width: 344rpx;height: 214rpx;margin-bottom: 10rpx;position: relative;
}
.pic{width: 100%;height: 100%;
}
.wkMain .ceng{width: 100%;height: 100%;background: rgba(0,0,0,0.5);position: absolute;top: 0;left: 0;color: #fff;display: flex;flex-direction: column;justify-content: center;align-items: center;padding: 0 20rpx;box-sizing: border-box;/* 指定两个并排的带边框的框*/text-align: center;
}
.wkMain .ceng .tit{font-size: 34rpx;
}
.wkMain .ceng .line{width: 50rpx;height: 2rpx;background: #fff;margin: 10rpx 0 20rpx;
}
.wkMain .ceng .des{opacity: 0.6; /*透明度*/text-transform: uppercase;/* 全大写*/font-size: 24rpx;letter-spacing: 5rpx;
}
/* 行业动态 */
.dynamic{padding: 90rpx 0 70rpx;
}
.dyItem{display: flex;padding: 15rpx 0;border: 1px dashed #f4f4f4;justify-content: space-between;
}
.dyItem .pic{/* flex: 2;占两份 */width: 230rpx;height: 150rpx;
}
.dyItem .pic image{width: 100%;height: 100%;
}
.dyItem .txt{width: 440rpx;display: flex;flex-direction: column;justify-content: space-between;
}
.dyItem .title{font-size: 34rpx;
}
.dyItem .info{font-size: 22rpx;color: #888;
}
.dyItem .info text{font-size: 26rpx;
}
/* footer */
.footer{padding: 30rpx 0;background: #f2f2f2;text-align: center;
}
.footer .pic{width: 180rpx;
}
.footer .text{font-size: 25rpx;color: #666;
}

{"usingComponents": {"xsj":"/components/xsj/xsj"}
}

index.js

// import common from "../../utils/public"
Page({/*** 页面的初始数据*/data: {dataList:[]},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {// 发送网络请求获取真实的行业动变  青年帮站酷 学习干货（数据接口)wx.request({url: 'https://ku.qingnian8.com/school/list.php',data:{num:5,page:4},success:res=>{res.data.forEach(item=>{/*处理获取到的时间戳 */// item.posttime=common.getMyDate(item.posttime,'Y-m-d')})this.setData({dataList:res.data})}})},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {}
})

<!--pages/ps/ps.wxml-->
<!-- header -->
<view class="header"><view class="container hdCon"><navigator open-type="switchTab" url="/pages/index/index" class="logo"><image mode="heightFix" src="/image/logo.png"></image></navigator><view class="kefu"><button class="btn" open-type="contact"></button><!-- open-type="contact"打开聊天框 --><image mode="heightFix" src="/image/kefu.png"></image></view></view>
</view><view class="banner"><image mode="widthFix" src="/image/ps1.png"></image>
</view><view class="psBox" wx:for="{{6}}"><view class="psBoxTit">专业软件技能</view><view class="psBoxCon"><image src="/image/ps2.png" mode="widthFix" class="pic"></image><view class="text"><view>人像精修</view><view>商业广告片调色</view><view>商业海报级视觉精修</view><view>卡通人物制造</view><view>2.5D插画制作</view><view>3D文字视觉特效制作</view><view>平面广告创意</view><view>合成特效制作</view></view></view>
</view><!-- footer -->
<view class="footer"><image class="pic" mode="widthFix" src="/image/logo.png"></image> <!-- 根据宽度适应高度--><view class="text">高端实训品牌</view>
</view>

/* pages/ps/ps.wxss */
/* logo 客服布局*/
.header{width: 750rpx;height: 90rpx;
}
.hdCon{display: flex;justify-content: space-between; /* 设置弹性盒子在主轴（横）方向上的对齐方式 */height: 100%;align-items: center; /* 定义flex容器的当前行的侧轴方向上的对其方式（子，父都要有高度）*/
}
.hdCon navigator, .hdCon .kefu{height: 50rpx;
}
.hdCon image{height: 100%;
}
.kefu{position: relative;animation: dh linear 1s infinite alternate;/* 给消息框调用动画（来源于app.wxss）*/
}
.kefu .btn{position: absolute;height: 100%;width: 100%;left: 0;right: 0;opacity: 0; /* 设置元素的不透明度级别，用按钮盖住图像*/
}/* 海报 */
.banner{width: 100%;
}
.banner image{width: 750rpx;display: block;
}
.psBox{padding: 80rpx 0;background: #1C356E;
}
.psBox:nth-child(2n){/*子选择器*/background: #fff;
}
.psBoxTit{width: 490rpx;height: 70rpx;background: #DE2E05;border-radius: 70rpx;color: #fff;text-align: center;line-height: 70rpx;font-size: 40rpx;margin: 0 auto;position: relative;margin-bottom: 40rpx;
}
.psBoxTit::before{display: block;content: " ";width: 100%;height: 100%;border: 2px dotted #DE2E05;position: absolute;top: 0;left: 0;box-sizing: border-box;border-radius: 70rpx;transform: scale(1.03,1.2);/*向外扩展（水平，垂直）*/
}
.psBoxCon .pic{width: 100%;
}
.psBoxCon .text{padding: 40rpx 26rpx;box-sizing: border-box;display: flex;flex-wrap: wrap;/*换行*/
}
.psBoxCon .text view{width: 50%;font-size: 30rpx;line-height: 1.8em;position: relative;padding-left: 18rpx;box-sizing: border-box;
}
.psBoxCon .text view::before{content: "";display: block;width: 10rpx;height: 10rpx;border-radius: 50%;background: #000;position: absolute;left: 0;top: 50%;margin-top: -5rpx;
}
.psBox:nth-child(2n-1) .psBoxCon .text{color: #fff;
}
.psBox:nth-child(2n-1) .text view::before{background: #fff;
}/* footer */
.footer{padding: 30rpx 0;background: #f2f2f2;text-align: center;
}
.footer .pic{width: 180rpx;
}
.footer .text{font-size: 25rpx;color: #666;
}

public.js

var commonlic={getStrLen:function(str,len){if(str.length>len){return str.substr(0,10)+"..."}else{return str}},getMyDate:function(timestamp,formats){// 将时间戳时间格式改成正常格式// formasts 格式包括// Y-m-d// Y-m-d H:i:s// Y年m月d日// Y年m月d日 H时i分formats=formats || 'Y-m-d';var zero = function(value){if(value < 10){return '0' + value;}return value;};var timestamp = timestamp*1000;var myDate = timestamp ? new Date(timestamp) : new Date();var year = myDate.getFullYear();var month = zero(myDate.getMonth() + 1);var day = zero(myDate.getDate());var hour = zero(myDate.getHours());var minite = zero(myDate.getMinutes());var second = zero(myDate.getSeconds());return formats.replace(/Y|m|d|H|i|s/ig,function(matches){return({Y:year,m:month,d:day,H:hour,i:minite,s:second})[matches];});}
}module.exports=commom

后台请求调用需要忽略非法域名

最后是效果图

一个微信小程序的案例相关推荐

分享一个微信小程序UI案例，好看的小程序UI
这是一个专为互联网人打造的内容兴趣社区,不定期更新UI设计,技术教程类内容. 小程序码
微信小程序开发案例2---省市区信息选择
在之前的案例1中小编教授了大家如何做一个微信小程序版的简易计算器,并实现其相应功能,同样这次小编将延续案例一中的风格,继续非常详细的一步一步的带小伙伴们亲手调试和开发编程. 下面我将教大家如何开发自己 ...
不用写一行代码，就能用ivx制作一个“微信小程序“，超牛逼
今天需要为大家介绍一款神器ivx. 它是通用无代码开发平台,是面向新一代全栈开发人员的通过不编写代码的方式实现快速开发的软件开发平台,提供图形化逻辑编排编程语言.抽象组件.集成开发环境等能力,能够支持 ...
分享下自己写的一个微信小程序请求远程数据加载到页面的代码
分享下自己写的一个微信小程序请求远程数据加载到页面的代码 1 思路整理就是页面加载完毕的时候请求远程接口,然后把数据赋值给页面的变量 ,然后列表循环 2 js相关代码我是改的 onload ...
【微信小程序】跳转到另一个微信小程序
前言调试基础库 2.12.0 开发者工具 1.03.2008270 跳转到另一个微信小程序目前有两个方法方法1:使用 API wx.navigateToMiniProgram 方法2:使用组件 ...
nodejs android 推送,利用Nodejs怎么实现一个微信小程序消息推送功能
利用Nodejs怎么实现一个微信小程序消息推送功能发布时间:2021-01-20 13:55:29 来源:亿速云阅读:92 作者:Leah 今天就跟大家聊聊有关利用Nodejs怎么实现一个微信小程 ...
手把手教你写一个微信小程序日历组件
今天我们一起写一个微信小程序日历组件微信小程序日历组件 github.com/749264345/w- 好,我们先看一下要实现的模样,如下图由以上截图我们可以看到 1.日历可以通过按钮[切换展示效 ...
一个程序如何连接到外网_如何从头开始开发一个微信小程序
网上有很多的人在问:怎么开发一个微信小程序?今天我来给大家详细讲讲如何申请开发并部署一个微信小程序,大家看完这篇文章后就能够自己运营一个属于自己的小程序了. 现在的小程序有百度小程序,头条小程序,支付 ...
python搭建微信小程序卖货要收费用吗_开发一个微信小程序需要多少钱？
很多朋友在微信上都在问司瓦图老张[也就是我本人,下面简称老张]关于小程序商城的开发费用,今天老张跟朋友分享下,开发一个微信电商小程序商城到底需要多少钱? //有的朋友关心为什么小程序费用有几百,几千差 ...

一个微信小程序的案例

一个微信小程序的案例相关推荐

最新文章

热门文章