微信小程序开发实战基础一、页面跳转,底部导航栏,分享,加载图片标签,列表

【附】相关架构及资料

往期Android高级架构资料、源码、笔记、视频。高级UI、性能优化、架构师课程、NDK、混合式开发(ReactNative+Weex)微信小程序、Flutter全方面的Android进阶实践技术,群内还有技术大牛一起讨论交流解决问题。

网上学习资料一大堆,但如果学到的知识不成体系,遇到问题时只是浅尝辄止,不再深入研究,那么很难做到真正的技术提升。

需要这份系统化学习资料的朋友,可以戳这里获取

一个人可以走的很快,但一群人才能走的更远!不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人,都欢迎加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!

return {

title: ‘自定义分享标题’,

desc: ‘自定义分享描述’,

path: ‘/pages/user/user’

}

},

4、加载图片标签

1、单张图片

2、轮播图

wxml代码:

<swiper indicator-dots=“{{indicatorDots}}”

autoplay=“{{autoplay}}” interval=“{{interval}}” duration=“{{duration}}”>

js脚本

data: {

imgUrls: [

‘http://e.hiphotos.baidu.com/image/pic/item/4610b912c8fcc3cef70d70409845d688d53f20f7.jpg’,

‘http://f.hiphotos.baidu.com/image/pic/item/4bed2e738bd4b31c5a30865b89d6277f9f2ff8c6.jpg’,

‘http://g.hiphotos.baidu.com/image/pic/item/83025aafa40f4bfbb5163db50d4f78f0f6361808.jpg’

],

indicatorDots: true,

autoplay: true,

interval: 3000,

duration: 500,

},

wxss样式

.slide-image {

height: 100%;

width:95%;

margin-left: 10px;

margin-right: 10px;

}

效果:

5、条件逻辑语句

>

pages/tianqi/11111.wxml

pages/tianqi/33.wxml

6、自定义变量


https://blog.csdn.net/meixi_android/article/details/94616272

7、列表渲染


1、wxml布局

{{item.name}}

{{item.name}}

2、wxss

.item{

width: 100%;

height: 190rpx;

position: relative;

display: flex;

margin-top: 10rpx;

border-bottom: 1px solid rgb(45, 216, 216);

}

.item .img{

width: 200rpx;

height: auto;

padding: 20rpx;

}

.item .name{

margin: 10rpx 10rpx 10rpx 10rpx;

font-size: 30rpx;

overflow: hidden;

flex: 1;

}

.item .number-wrapper{

height: 100%;

flex: 1;

display: flex;

flex-direction: column;

}

3、js实现

data: {

array: [{

message: ‘foo’,

“imgsrc”: “…/…/images/wo.png”,

“name”: “第1代处理图形音像游戏全套”,

}, {

message: ‘bar’,

“imgsrc”: “…/…/images/wo.png”,

“name”: “第2代处理图形音像游戏全套”,

} , {

message: ‘bar’,

“imgsrc”: “…/…/images/wo.png”,

“name”: “第3代处理图形音像游戏全套”,

}, {

message: ‘bar’,

“imgsrc”: “…/…/images/wo.png”,

“name”: “第4代处理图形音像游戏全套”,

}, {

message: ‘bar’,

“imgsrc”: “…/…/images/wo.png”,

“name”: “第5代处理图形音像游戏全套”,

}]

},

附:全局images与pages内images引用

“imgsrc”: “…/…/…/images/tt.png”,——pages内images

“imgsrc”: “…/…/images/wo.png”,——全局images

效果:

8、刷新列表item,添加item


题外话

我们见过很多技术leader在面试的时候,遇到处于迷茫期的大龄程序员,比面试官年龄都大。这些人有一些共同特征:可能工作了7、8年,还是每天重复给业务部门写代码,工作内容的重复性比较高,没有什么技术含量的工作。问到这些人的职业规划时,他们也没有太多想法。

其实30岁到40岁是一个人职业发展的黄金阶段,一定要在业务范围内的扩张,技术广度和深度提升上有自己的计划,才有助于在职业发展上有持续的发展路径,而不至于停滞不前。

不断奔跑,你就知道学习的意义所在!

注意:我们之前因为秋招收集的二十套一二线互联网公司Android面试真题(含BAT、小米、华为、美团、滴滴)和我自己整理Android复习笔记(包含Android基础知识点、Android扩展知识点、Android源码解析、设计模式汇总、Gradle知识点、常见算法题汇总。)

网上学习资料一大堆,但如果学到的知识不成体系,遇到问题时只是浅尝辄止,不再深入研究,那么很难做到真正的技术提升。

需要这份系统化学习资料的朋友,可以戳这里获取

一个人可以走的很快,但一群人才能走的更远!不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人,都欢迎加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!

和深度提升上有自己的计划,才有助于在职业发展上有持续的发展路径,而不至于停滞不前。

不断奔跑,你就知道学习的意义所在!

注意:我们之前因为秋招收集的二十套一二线互联网公司Android面试真题(含BAT、小米、华为、美团、滴滴)和我自己整理Android复习笔记(包含Android基础知识点、Android扩展知识点、Android源码解析、设计模式汇总、Gradle知识点、常见算法题汇总。)

[外链图片转存中…(img-wUJ2nFVZ-1715333295561)]

网上学习资料一大堆,但如果学到的知识不成体系,遇到问题时只是浅尝辄止,不再深入研究,那么很难做到真正的技术提升。

需要这份系统化学习资料的朋友,可以戳这里获取

一个人可以走的很快,但一群人才能走的更远!不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人,都欢迎加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值