VPS参考测评推荐
专注分享VPS主机优惠信息
衡天云优惠活动
华纳云最新优惠促销活动
jtti最新优惠促销活动

微信开发:姐妹实用教程。

locvps
主机参考:VPS测评参考推荐/专注分享VPS服务器优惠信息!若您是商家可以在本站进行投稿,查看详情!此外我们还提供软文收录、PayPal代付、广告赞助等服务,查看详情!
我们发布的部分优惠活动文章可能存在时效性,购买时建议在本站搜索商家名称可查看相关文章充分了解该商家!若非中文页面可使用Edge浏览器同步翻译!PayPal代付/收录合作

本文主要介绍微信小程序实际小程序实例的相关信息,有需要的朋友可以参考一下。

微信小程序的基础组件和API已经讲完了,我们要回到正题。我们花了很长时间做了一个简化版的谜,包括段落、图片、音频、视频和四个模块。本文将带你简单描述一下这个小APP,源代码放在GitHub上欢迎开始。

我能从项目中学到什么?

Tabbar使用模式

网络呼叫真实接口

装载用途

Scroll-view实现下拉刷新和上拉加载。

图像组件对图像的处理,

音乐和视频组件的使用

跳转转移值使用

等等,等等,等等。。。

App.json全局配置文件

{ & quot页面& quot:

这里只需要配置程序的全局属性,每个页面都需要在pags属性中引入。有时候tabbar不显示,可能就是这个原因。tabbar底部的导航项目分为四个,都在列表中。这里主要配置每个底部选项页面的未勾选颜色背景色、页面介绍、图片介绍。窗口属性主要配置表单的整体颜色、文本颜色和背景颜色,这里的窗口属性会被每个页面的窗口属性覆盖。

app.wxss

/*整体视图样式*/。contains view { Padding:15 rpx 15 rpx 15 rpx 15 rpx;margin -top:15 rpx;margin -bottom:15 rpx;background -颜色:白色;}/*整体头型*/。top contains view { display:flex;flex -方向:rowalign -项:居中;margin -bottom:18 rpx;}/* * *《阿凡达》风格*/。profile image { width:60 rpx;高度:60rpxborder -半径:30rpx}/*标题中显示的名称和时间的整体样式*/。top right view { margin -left:15 rpx;显示器:flexflex -方向:列;}/*用户名样式*/。top right name { font -size:18 rpx;}/*时间样式*/。toprighttime { font -size:14r px;颜色:# b 8 b 2 b 2;margin -top:10 rpx;}/*因为中间部分不一样,所以不放在整体风格里*/*仰视整体风格*/。bottom view { display:flex;flex -方向:rowjustify -内容:space -之间;align -项:居中;}/*每个项目样式*/。bottom item view { display:flex;flex -方向:rowalign -项:居中;justify -内容:居中;margin -top:18 rpx;划-左:10rpx划-右:10rpx}/*项目样式中的图标样式是共享评论的顶部*/。*/.bottom item image { width:45 rpx;高度:45rpx}/*项目中的文字样式置顶分享评论*/。底部项目文本{ font -size:15 rpx;颜色:# b 8 b 2 b 2;margin -left:10 rpx;margin -top:8 rpx;}/*分割线样式*/。pLine{背景:# f3f3f3宽度:100%;身高:15rpx}

App.wxss我把四个模块分为三个部分:头部、内容区和底部。因为每页的头和底的样式是一样的,但是中间部分不一样,所以我把1和3画成整体,注释清楚。

分段模块

word.wxml

& lt正在加载hidden = & quot{ { loadingHidden } } & quot& gt装货...;& ltview class = & quotpLine & quot& gt& lt/view & gt;& lt!--整体物品风格-->;& ltview class = & quot包含视图& quot& gt& ltview class = & quottopContainsView & quot& gt& ltimage class = & quot个人资料图像& quotsrc = & quot{ { item.profile _ image } } & quot/& gt;& ltview class = & quottopRightView & quot& gt& lttext class = & quottopRightName & quot& gt{ { item.name } } & lt/text & gt;& lttext class = & quottopRightTime & quot& gt{ { item.passtime } } & lt/text & gt;& lt/view & gt;& lt/view & gt;& lt!--中间内容-->& lttext class = & quot中心内容& quot& gt{ { item.text } } & lt/text & gt;& lt!--仰视图样式-->& ltview class = & quot底部视图& quot& gt& ltview class = & quotbottomItemView&quot& gt& ltimage class = & quotbottomItemImage & quotsrc = & quot../../image/ding . png & quot;/& gt;& lttext class = & quotbottomItemText & quot& gt{ { item.ding } } & lt/text & gt;& lt/view & gt;& ltview class = & quotbottomItemView&quot& gt& ltimage class = & quotbottomItemImage & quotsrc = & quot../../image/Cai . png & quot;/& gt;& lttext class = & quotbottomItemText & quot& gt{ { item.cai } } & lt/text & gt;& lt/view & gt;& ltview class = & quotbottomItemView&quot& gt& ltimage class = & quotbottomItemImage & quotsrc = & quot../../image/share . png & quot;/& gt;& lttext class = & quotbottomItemText & quot& gt{ { item.repost } } & lt/text & gt;& lt/view & gt;& ltview class = & quotbottomItemView&quot& gt& ltimage class = & quotbottomItemImage & quotsrc = & quot../../image/comment . png & quot;/& gt;& lttext class = & quotbottomItemText & quot& gt{ { item.comment } } & lt/text & gt;& lt/view & gt;& lt/view & gt;& lt/view & gt;& lt/block & gt;& lt/scroll -view & gt;在外层,我们用scroll-view对其进行包装,以加载更多并上拉刷新属性bindscrolltoupper = " bindscrolltoupper "。当滑动到顶部时,将调用此方法。滑动到底部时,会调用这个方法。一开始可以把页眉和底部布局画出来,通过介绍来使用,这样就不用把四页都写完了,自己也能记下来。

word.js

页面({数据:{列表:

这里通过requestData方法加载数据,该方法接受一个参数,即通过这个参数加载的是最新的还是更多的数据,通过maxtime参数加载下一页,上一页的maxtime作为加载下一页的条件。当加载下一页的数据时,我们通过concat方法拼接数组并改变加载状态。Word.wxml和word.json,一个设置内容的字体大小,一个设置导航栏,就不贴了。

图片模块

image.wxml

& lt正在加载hidden = & quot{ { loadingHidden } } & quot& gt装货...;& ltview class = & quotpLine & quot& gt& lt/view & gt;& lt!--整体物品风格-->;& ltview class = & quot包含视图& quot& gt& ltview class = & quottopContainsView & quot& gt& ltimage class = & quot个人资料图像& quotsrc = & quot{ { item.profile _ image } } & quot/& gt;& ltview class = & quottopRightView & quot& gt& lttext class = & quottopRightName & quot& gt{ { item.name } } & lt/text & gt;& lttext class = & quottopRightTime & quot& gt{ { item.passtime } } & lt/text & gt;& lt/view & gt;& lt/view & gt;& lt文本样式= & quotfont -size:30 rpx & quot;& gt{ { item.text } } & lt/text & gt;& lt!-- gif图-->;& ltview wx:if = & quot;{{item.is_gif!= 0 } } & quotstyle = & quot位置:相对;"& gt& ltimage class = & quot中心内容& quotsrc = & quot{ { item.cdn _ img } } & quotmode = & quotaspectFill & quot/& gt;& lt/view & gt;& lt!--查看大图,点击查看所有图片--& gt;& lt查看数据-URL = & quot;{ { item.cdn _ img } } & quotdata -height = & quot;{ { item.height } } & quotdata -width = & quot;{ { item.width } } & quotbindtap = & quotlookBigPicture & quotwx:elif = & quot;{ { item.is _ gif = = 0 } } & quotstyle = & quot位置:相对;"& gt& lt!--图片资源--& gt;& ltimage class = & quot中心内容& quotsrc = & quot{ { item.cdn _ img } } & quotmode = & quotaspectFill & quot/& gt;& lt!--点击浮动图片查看详细图片查看--& gt;& ltview class = & quotflexView & quot& gt& ltimage src = & quot../../image/see big picture . png & quot;style = & quot宽度:60rpx高度:60rpx"/& gt;& lttext class = & quotflexText & quot& gt点击查看完整图片

这里主要看中间部分来区分是不是gif。如果不是gif,可以点击查看大图。下面是一个视图悬浮效果,结合界面和image.wxss。

image.wxss

/*中间文本样式*/。center content { margin -top:20 rpx;宽度:100%;身高:600rpx}/*中间浮动文本样式*/。flex view { display:flex;justify -内容:居中;align -项:居中;宽度:100%;身高:80rpx位置:绝对;z-指数:2;顶配:540rpx背景:# 000000;不透明度:0.6}/*浮动文本*/。flexText{ color:白色;font -size:35 rpx;}image.js

var明细= & amp#39;../详细信息/详细信息& amp#39;Page({ data: { list: [],maxtime:& amp;#39;& amp#39;,Loadinghidden: false},onload:function(options){//页面初始化选项是参数this . request data(&;#39;新名单& amp#39;);},/* * *滚动到底部时加载下一页*/BindScrollTower:function(){ console . log(&;#39;到底&;#39;)this . request data(& amp;#39;列表和。#39;);},/* * * Load data */request data:function(a){ var that = this;wx . request({ URL:& amp;#39;http://api.budejie.com/api/api_open.php&第39名;,数据:{ a: a,c:& amp;#39;数据与信息。#39;,//上一页的maxtime作为加载下一页的条件,maxtime: this.data.maxtime,type:&;#39;10 & amp#39;,},方法:& amp#39;获取& amp#39;,成功:function(RES){ console . log(RES)console . log(& amp;#39;上一页&;#39;,that.datalist) that.setData({ //拼接数组列表:that . data . list . concat(RES . data . list),加载hidden: true,Maxtime:RES . data . info . Maxtime })} },/* *查看大图*/看大图:function(e){ console . log(e);console . log(e . current target . id)//Image URL对应wxml = " { { item.url } } & quotvar URL = e . current target . dataset . URL;//获取数据-height = & quot;在wxml中对应图片高度;{ { item.height } } & quotvar height = e . current target . dataset . height;//获取图片高度对应的wxml中的data -width = & quot;{ { item.width } } & quotvar width = e . current target . dataset . width;//Request wx . navigate to({ URL:detail+&;#39;?& amp#39;+& amp;#39;url = & amp#39;+URL+& quot;& ampheight = & quot+高度+& quot;& ampwidth = & quot+ width,success:function(RES){ console . log(RES)},fail:function(err){ console . log(err)},}) },OnReady: function () {//页面渲染完成},onShow: function () {//页面显示},onHide: function () {//页面隐藏},OnUnload: function () {//页面关闭}})这里主要看lookBigPicture方法ViewData-URL = "{{item。cdn _ img}}" Data-height = "{{item。height}}" Data-width = "{{item。宽度} }”将被替换为。语法使用var URL = e . current target . dataset . URL;传递值和传递,就像发送请求一样按照格式去获取。

[相关建议]

1.下载微信微信官方账号平台源代码。

2.下载投票源代码

这几篇文章你可能也喜欢:

  • 暂无相关推荐文章

本文由主机参考刊发,转载请注明:微信开发:姐妹实用教程。 https://zhujicankao.com/115288.html

【腾讯云】领8888元采购礼包,抢爆款云服务器 每月 9元起,个人开发者加享折上折!
打赏
转载请注明原文链接:主机参考 » 微信开发:姐妹实用教程。
主机参考仅做资料收集,不对商家任何信息及交易做信用担保,购买前请注意风险,有交易纠纷请自行解决!请查阅:特别声明

评论 抢沙发

评论前必须登录!