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

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

微信小程序的基础组件和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