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

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

})

},