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

2024-06-05 04:25:40

1、页面跳转

wx.navigateTo({ url: "../four/four" })——可返回

wx.redirectTo({ url: "../four/four" })——不可返回

<view>

<navigator url="../four/four" hover-class="changestyle">页面跳转，可以返回</navigator>

</view>

<view>

<navigator url="../logs/logs" hover-class="changestyle" redirect>页面跳转，无法返回</navigator>

</view>

2、底部导航栏

1、添加icon图片

2、添加tabBar到app.json文件下即可

"tabBar": {

"color": "#8c8c8c",

"selectedColor": "#f4645f",

"backgroundColor": "white",

"list": [

{

"pagePath": "pages/index/index",

"text": "首页",

"iconPath": "images/1.png",

"selectedIconPath": "images/2.png"

},

{

"pagePath": "pages/tianqi/tianqi",

"text": "天气",

"iconPath": "images/wu.png",

"selectedIconPath": "images/wulv.png"

},

{

"pagePath": "pages/wode/wode",

"text": "话题",

"iconPath": "images/wo.png",

"selectedIconPath": "images/wolv.png"

}

],

"position": "bottom"

},

3、效果：

3 、用户点击右上角分享

1、默认方式

onShareAppMessage: function () {

},

2、自定义分享

onShareAppMessage: function () {

return {

title: '自定义分享标题',

desc: '自定义分享描述',

path: '/pages/user/user'

}

},

4、加载图片标签

1、单张图片

<image class="userinfo-avatar" src="./images/tt.png" ></image>

2、轮播图

wxml代码：

<swiper indicator-dots="{{indicatorDots}}"

autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">

<block wx:for="{{imgUrls}}" wx:key="unique">

<swiper-item>

<image src="{{item}}" class="slide-image"/>

</swiper-item>

</block>

</swiper>

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、条件逻辑语句

<block wx:if="{{3>2}}">>

<text>pages/tianqi/11111.wxml</text>

</block>

<block wx:else>

<text>pages/tianqi/33.wxml</text>

</block>

6、自定义变量

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

7、列表渲染

1、wxml布局

<view wx:for="{{array}}" id="{{cardTeam.id}}" class="item" >

<image class="img" src="{{item.imgsrc}}" mode="scaleToFill"></image>

<view class="number-wrapper">

<text class="name">{{item.name}}</text>

<text class="name">{{item.name}}</text>

</view>

</view>

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

列表保持原状态——添加属性wx:key

<switch wx:for="{{numberArray}}" wx:key="*this" > {{item}} </switch>

1、刷新item

changedataa: function(e){

const length = this.data.array.length

for (let i = 0; i < length; ++i) {

if(i==3){

this.data.array[3].name = 'aabbcc'

}

}

this.setData({

array: this.data.array,

time: 'sfsdfewf',

})

},

2、添加item

addToFront: function(e) {

const length = this.data.objectArray.length

this.data.objectArray = [{

id: length,

unique: 'unique_' + length

}].concat(this.data.objectArray)

this.setData({

objectArray: this.data.objectArray

})

},

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

Python+微信小程序开发（四）页面跳转和获取用户信息
上一篇已经介绍了如何搭建一个自己的静态页面,接下来则涉及到一些用户信息获取与跳转的操作. 一.页面跳转首先新建一个跳转页面,按上篇的操作生成pages/redirect/redirect. 1.对标 ...
微信小程序开发实战基础二、wxml模板，动态更新内联样式
1.模板使用 1.wxml中创建模板 <template name="msgItem"> <view> <text> {{index}}: {{ ...
微信小程序开发实战（9）：单行输入和多行输入组件
-----------支持作者请转发本文----------- 1. 单行输入组件(input) input组件用于录入单行文本,尽管input的基本功能是文本录入,但该组件的属性还是比较多的,也比 ...
《微信小程序开发实战》课后题
黑马程序员版<微信小程序开发实战> 第一章填空题 1.微信小程序可以通过________方式打开. 答案:扫描二维码 2.微信开发者工具中的上传是指将代码上传到________. 答案: ...
王者级微信小程序开发实战教学从零到高手搭建微信小程序框架开发教程
王者级微信小程序开发实战教学从零到高手搭建微信小程序框架开发教程小程序进阶王者级微信小程序开发实战教学课程,讲师手把手对同学们进行微信小程序开发的进阶实战,从零开始搭建,从本地到云端开始系统化的 ...
视频教程-微信小程序开发实战之番茄时钟开发-微信开发
微信小程序开发实战之番茄时钟开发 4年web前后端开发经验,熟悉PHP,Python后端技术,熟悉基于Lnmp环境的项目开发和部署,擅长Yii,ThinkPHP,CI,Django,Flask等国内外 ...
JEECG社区微信小程序开发实战-张代浩-专题视频课程
JEECG社区微信小程序开发实战-511人已学习课程介绍微信小程序开发培训,包含环境搭建.实例讲解.对接支付功能等课题. 课程收益微信小程序开发培训,包含环境搭建.实例讲 ...
微信小程序python入门教程-2020Python+微信小程序开发实战（视频+课件）
本套课程出自老男孩IT教程的Python+微信小程序开发实战官网售价79元,课程基于微信小程序平台开发的的拍卖系统.课程分为4个章节微信小程序快速入门用微信小程序快速开发认证和发布动态模块,第二章拍卖 ...
微信小程序开发实战课程之油耗计算器-耿广龙-专题视频课程
微信小程序开发实战课程之油耗计算器-3406人已学习课程介绍微信小程序开发实战课程之油耗计算器,通过练习开发工具类的油耗计算器小程序,可以帮助大家了解微信小程序的API,相关组件的 ...

最新文章

热门文章