凯的个人博客

微信小程序进阶

6/4/2024 微信小程序
  • 路由跳转方法
  • 组件开发思维--公共组件封装
  • 自定义顶部
  • 自定义底部
  • 微信 提供api ---request 代替 axios 发送接口请求

# 14.路由跳转-页面跳转

  • wx.switchTab()

只能跳转 属于 tabbar 的页面

 wx.switchTab({
   url: '../mine/mine',
 })
1
2
3
  • wx.reLaunch()

作用： 关闭所有页面，重新打开一个页面

场景：已经有很多子页面被打开了， 去到另一个功能中，可以使用关闭之前模块的子页面【提高性能】

  wx.reLaunch({
      url: '../goods/goods',
    })
1
2
3
  • wx.navigateTo()

作用： 打开一个 当前页面的子页面

原理： 历史记录，小程序 内存中 最多 一个主页面 可以拥有 10个【最多9个】

特点： 打开子页面后，会在 小程序 左上角 生成一个 "<" 返回按钮，点击之后 可以返回上一个页面

 wx.navigateTo({
          url:  "../goods/goods"
 })
1
2
3
  • wx.navigateBack()

作用： 返回上一个子页面的，必须先用过 navigateTo 方法

如果返回了2层，会关闭掉 navigateTo 打开的页面

如果返回层数 大于 navigateTo 已经有层数，直接返回 主页面 home--goods---goodsinfo ---xxx

wx.navigateBack({
  delta: 4
})
1
2
3
  • wx.redirectTo()

重定向页面

作用： 关闭当前页面，打开一个新页面，且不能是 tabbar 页面， 跟被关闭的当前页面 没有 层级关系。

  wx.redirectTo({
      url: '../goods/goods',
    })
1
2
3
  • 带参数的路由跳转与接收--跨页面传值
 wx.reLaunch({
      url: '../goods/goods?id=1000',
    })
1
2
3
onload(options){
    console.log(options.query)   // {id:1000}
}
1
2
3

# 15.公共组件--自定义组件创建

步骤： 1创 2.注册 3.使用 4.传值

  • 1.创建组件

项目跟目录下 components/goods-item/ 鼠标右键“创建Component”

  • 2父组件 注册子组件

在父组件的 json文件中，

{
     "usingComponents":{
         "goods-item":"公共组件的相对路径 ../../components/goods-item/goods-item"
     }
}
1
2
3
4
5
  • 3.父组件 使用子组件 wxml中
<goods-item> </goods-item>
1

# 16.父子组件传值---父传子

父组件

<app-header title="系统首页" list="{{list}}"></app-header>
1

子组件接收

Component({
    //全等于 vue 的props
    properties:{
        title:{
            type:String,
            default:"标题"
        },
        list:{
            type:Array,
            default:()=>[]
        }
    }
})
1
2
3
4
5
6
7
8
9
10
11
12
13

# 17.父子组件传值---子传父

  • 子组件定义 自定义事件带参数发送
//子组件
  methods: {
     //子组件自己的事件
     changeData(){
      this.triggerEvent('sendData',{data:'我是子组件传递的数据',msg:"你好啊，我是儿子"})
    }
  }
1
2
3
4
5
6
7
  • 父组件 通过监听自定义事件 在执行函数中获取数据
 <子组件  bindsendData="getData"></子组件>
1
getData(e){
    console.log(e.detail.data); //我是子组件传递的数据
    console.log(e.detail.msg);   //你好啊，我是儿子
  },
1
2
3
4

# 18.公共组件-自定义组件的生命周期

   created(){
        console.log('创建');
    },
    attached(){
        console.log('挂载');
    },
    detached(){
        console.log('销毁');
    }
1
2
3
4
5
6
7
8
9

# 19.自定义顶部navigation

# 1.前置 操作： 需要关闭 自带的 顶部配置

全局配置关闭： 所有页面都没有顶部了，自己写一个自定义组件 导入到页面组作为新的顶部

页面配置文件关闭： 在哪个 设置的关闭，这个页面没有顶部

  • 全局配置关闭 app.json
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle": "black",
     //全局自定义顶部
    "navigationStyle": "custom"   
  },
1
2
3
4
5
6
7
8
  • 页面配置关闭 index.json
{
    "usingComponents": {},
    //当前页面的顶部自定义
    "navigationStyle": "custom"   
}
1
2
3
4
5

# 2.创建自定义顶部 组件，且写好样式

难度：手机的兼容处理 ,每个手机的状态高度 不一致，会导致：设置自定义顶部组件的高度 不能写死，必须通过 微信的api 获取一下 当前用户的手机设备信息

wx.getsystemInfo()  //statusBrHeight 获取一下 当前用户的手机设备信息
1

top-bar.wxml

<view class="top" style="height: {{statusHeight+44}}px;">
    <view class="title" style="padding-top: {{statusHeight}}px;">
            页面标题
    </view>
</view>
1
2
3
4
5
6
  • top-bar.wxss

/* components/top-bar/top-bar.wxss */
.top{
    width: 100%;
    background:linear-gradient(to right top,#df16ff,#6c0bf1)
}
.title{
    width: 100%;
    height: 44px;
    line-height: 44px;
    text-align: center;
    color: #fff;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
  • top-bar.js
// components/top-bar/top-bar.js
Component({
    /**
     * 组件的属性列表
     */
    properties: {

    },

    /**
     * 组件的初始数据
     */
    data: {
        statusHeight:0,
    },

    /**
     * 组件的方法列表
     */
    methods: {

    },
    // 进入页面获取手机的状态栏高度
   async created(){
        let info =  await wx.getSystemInfo()
        this.setData({
            statusHeight:info.statusBarHeight
        })
    }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

# 3.在需要使用 自定义顶部 组件 的页面 进行注册使用

页面.json

{
    "usingComponents": {
        "top-bar":"../../components/top-bar/top-bar"
    }
}
1
2
3
4
5

页面.wxml

<!--pages/home/home.wxml-->
<!-- 顶部 -->
<top-bar ></top-bar>
<!-- 内容 -->

<!-- tabbar 底部 -->
1
2
3
4
5
6

# 20.自定义底部 tabBar

关闭 自带底部【全局关闭/某一个页面的关闭】

重写一个公共组件 实现底部功能---自定义组件

布局

点击跳转---switchTab 跳转到tab栏

# 1.关闭 自带底部【全局关闭】

  • app.json

就算 不自动生成底部，仍然需要写完整的tabBar 配置，写tabbar 目的是为了告诉小程序，我这几个页面跳转的时候 只能使用 switchTab

 "tabBar": {
        "color": "#666",
        "selectedColor": "#f60",
        "custom": true,        
        "list":[
            {
                "pagePath": "pages/home/home",
                "text": "首页",
                "iconPath": "/images/home.png",
                "selectedIconPath": "/images/home_active.png"
            },
            {
                "pagePath": "pages/discount/discount",
                "text": "找优惠",
                "iconPath": "/images/discount.png",
                "selectedIconPath": "/images/discount_active.png"
            },
            {
                "pagePath": "pages/shop/shop",
                "text": "找好店",
                "iconPath": "/images/shop.png",
                "selectedIconPath": "/images/shop_active.png"
            },
            {
                "pagePath": "pages/mine/mine",
                "text": "我的",
                "iconPath": "/images/mine.png",
                "selectedIconPath": "/images/mine_active.png"
            }
        ]
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

# 2.自定义公共组件 tab-bar

  • tab-bar.js
// components/tab-bar/tab-bar.js
Component({
    /**
     * 组件的属性列表
     */
    properties: {
        active:{
            type:Number,
            default:0
        }
    },

    /**
     * 组件的初始数据
     */
    data: {
        tabbar: {
            "color": "#666",
            "selectedColor": "#f60",
            "custom": true,        
            "list":[
                {
                    "pagePath": "pages/home/home",
                    "text": "首页",
                    "iconPath": "/images/home.png",
                    "selectedIconPath": "/images/home_active.png"
                },
                {
                    "pagePath": "pages/discount/discount",
                    "text": "找优惠",
                    "iconPath": "/images/discount.png",
                    "selectedIconPath": "/images/discount_active.png"
                },
                {
                    "pagePath": "pages/order/order",
                    "text": "下订单",
                    "isCenter":true, 
                    "iconPath": "/images/order.png",
                    "selectedIconPath": "/images/order_active.png"
                },
                {
                    "pagePath": "pages/shop/shop",
                    "text": "找好店",
                    "iconPath": "/images/shop.png",
                    "selectedIconPath": "/images/shop_active.png"
                },
                {
                    "pagePath": "pages/mine/mine",
                    "text": "我的",
                    "iconPath": "/images/mine.png",
                    "selectedIconPath": "/images/mine_active.png"
                }
            ]
        }
    },

    /**
     * 组件的方法列表
     */
    methods: {
        changePage(e){

            let path = e.currentTarget.dataset.path;
          wx.switchTab({
            url:'/'+ path,
          })

        }
    },
    created(){
        console.log(this.data.tabbar);
       
    }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
  • tabbar.wxss
.tab{
    display: flex;
    justify-content: space-around;
    width: 100%;
    height: 120rpx;
    background: #fff;
    border-top: 1px solid #ccc;
}
.item{
    height: 120rpx;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;

}
.img{
    width: 30px;
    height: 30px;
}
.text{
    font-size: 28rpx;
}
/* 特殊处理的中间的+ */
.center{
    width: 120rpx;
    height: 120rpx;
    background-color: skyblue;
    position: relative;
    top: -50rpx;
    border-radius: 50%;
    text-align: center;
}
.center-img{
    margin-top: 10rpx;
    width: 100rpx;
    height: 100rpx;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
  • tabbar.wxml
<view class="tab">
    <block wx:for="{{tabbar.list}}" wx:key="index">
        <!-- 如果需要特殊样式  isCenter -->
        <view class="center" data-path="{{item.pagePath}}" bindtap="changePage" wx:if="{{item.isCenter}}">
            <image class="center-img" src="{{active==index?item.selectedIconPath:item.iconPath}}" mode="" />
        </view>
        <!-- 没有拥有isCenter 盒子 -->
        <view wx:else>
            <view data-path="{{item.pagePath}}" bindtap="changePage" wx:if="{{active !=index}}" class="item" style="color:{{tabbar.color}}">
                <image class="img" src="{{item.iconPath}}" mode="" />
                <text class="text">{{item.text}}</text>
            </view>

            <view wx:else data-path="{{item.pagePath}}" bindtap="changePage" class="item" style="color:{{tabbar.selectedColor}}">
                <image class="img" src="{{item.selectedIconPath}}" mode="" />
                <text class="text">{{item.text}}</text>
            </view>
        </view>
    </block>
</view>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

# 3.在需要使用这个公共组件的页面 注册和使用

  • 全局样式--内容盒子 滚动效果 app.wxss
/**app.wxss**/
html,body{
    width: 100%;
    height: 100%;
}
page{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.content{
    flex: 1;
    overflow-y: scroll;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
  • home.json
{
    "usingComponents": {
        "top-bar":"../../components/top-bar/top-bar",
        "tab-bar":"../../components/tab-bar/tab-bar"
    },
    "navigationStyle": "custom"

}
1
2
3
4
5
6
7
8
  • home.wxml
<!--pages/home/home.wxml-->
<!-- 顶部 -->
<top-bar></top-bar>
<!-- 内容 -->
<view class="content">
   首页
</view>
<!-- tabbar 底部 active的值 调用时传递的就是 tab 数组索引 -->
<tab-bar active="0"></tab-bar>
1
2
3
4
5
6
7
8
9

# 21.微信使用UI组件库 17:10

# 22.关于微信 的常用api

# 1.请求后端接口 wx.request()

wx.request 没有使用 promise 进行封装 不能使用 async await

微信小程序 针对 接口请求 有特定限制：

http://xxxx.cn 没有限制的 【不能上线】

https//xxxx.cn 有限制【微信公众平台 将这个服务器地址 告诉 微信，】

wx.request({
    url:''  //后端接口地址,
    method:'get/post/put/delete',
    data:{  //不管是get还是 post 格式一样
    
    },
    success(res){
    	//res:后端返回的数据       
    },
    fail(err){
      	//err :错误信息  
    }
           
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 getShopData(){
        // 定义变量 报错一下 this当前的对象
        let _this = this;
          wx.request({
            url: 'http://129.211.169.131:6368/getFractionShop',
            method:'get',
            success(res){
                // 这里直接使用this ===undefined
                _this.setData({
                    list:res.data.fractions
                })
            }
          })
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
        this.getShopData()
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

微信小程序高阶