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

})

},

?

總結

以上是生活随笔為你收集整理的微信小程序开发实战基础一、页面跳转，底部导航栏，分享，加载图片标签，列表的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。