微信小程序

鱼空

已于 2022-09-19 16:13:10 修改

阅读量124

点赞数

文章标签：前端 javascript 微信小程序小程序

于 2022-08-31 20:11:02 首次发布

本文链接：https://blog.csdn.net/m0_69502730/article/details/126631072

版权

一、小程序路由

路由分类

标签式路由【声明式】

<navigator url='要跳转的路径' open-type='跳转方式'>文本</navigator>

例如：  <navigator url='/pages/index/index' open-type="switchTab">跳转到首页</navigator>

类似于vue的router-link to=''

编程式路由
- wx.swtichTab()
  - 只能跳转到tabbar，不能跳转非tabbar
  - 不能传参，但可以通过globalData方式传参
  - 不能历史回退
- wx.reLaunch()
  - tabbar页和非tabbar页都能跳转
  - 没有历史回退
  - 能传参
- wx.redirectTo() 相当于vue的this.$router.replace()
  - 只能跳转到非tabbar页，不能跳转tabar
  - 能传参
  - 不能历史回退
- wx.navigateTo() 相当于vue的this.$router.push()
  - 只能非tabbar页
  - 能回退
  - 能传参
- wx.navigateBack
  - 返回上几层
  - 格式：
```
  wx.navigateBack({
     delta:1  //返回的级数
   })
```

二、小程序组件

2.1 内置组件

swiper：轮播图
scroll-view：局部滚动

rich-text:富文本

  <rich-text nodes="{{ ohtml }}"></rich-text>

checkbox-group和checkbox
button
audio：音频
video：视频

2.2 自定义组件【重点】

组件封装三要素：

props，propertys 父传子，子接收
事件：让引入的父组件感知我触发的事件 $emit,triggerEvent
插槽:可以定制嵌套复杂的页面结构

如何封装一个组件啊，举个例子，例如：封装一个弹框

props
- 用户如何将值传入组件中，说白了，弹框的需求是什么样
- 弹框的标题，内容区，按钮区
事件：
- 如何让父组件知道触发的事件，例如：登录，退出，关闭等
- vue $emit
- 小程序：this.triggerEvent()
如果有定制需求时我用插槽实现
- 比如：客户加个二维码，加下下载连接，加个广告图片

具体实现：弹框

弹框布局样式
默认隐藏弹框
通过事件触发显示弹框
如何在父组件中调用子组件的方法？
- this.selectComponent('子组件id名称‘')
事件派发，让父级知道触发事件
- 向父级派发事件：this.triggerEvent('自定义事件名',要传递的数据)
- 父级监听：bind:自定义事件名='父组件方法'
通过插槽定义复杂组件结构
- 默认只有一个插槽
- 如果有多插槽，得需要配置

完整弹组件代码：

dialog.wxml

wxml:
<view class="dialog_box" hidden="{{ isShow }}">
  <!-- 蒙层 -->
  <view class="dialog_mask"></view>
  <!-- 弹框内容区 -->
  <view class="dialog_container">
    <slot name='close'></slot>
    <!-- 弹框标题 -->
    <view class="dialog_title">{{ title }}</view>

    <!-- 弹框内容区 -->
    <view class="dialog_content">{{ content }}</view>

    <!-- 弹框底部 -->
    <view class="dialog_btns">
      <button size="mini" catchtap='confirm_btn'>
      <slot name='icon'></slot>
      确定
      </button>
      <button  size="mini" catchtap='cancel_btn'>取消</button>
    </view>
  </view>
</view>

JS: dialog.js

// components/Dialog/Dialog.js
Component({
  options: {
    multipleSlots: true // 在组件定义时的选项中启用多 slot 支持
  },
  /**
   * 外部数据组件的属性列表
   */
  properties: {

    title:{
      type:String,
      value:'此处有标题哦'
    },
    content:{
      type:String,
      value:'此处有内容哦'
    }

  },

  /**
   * 组件的初始私有数据
   */
  data: {
    isShow:true,
    v:'要传递的子组件数据'
  },

  /**
   * 组件的方法列表
   */
  methods: {
    //隐藏和显示对话框方法
    toggleShowHide() {
      this.setData({
        isShow:!this.data.isShow
      })
    },
    //点击确定
    confirm_btn() {
      //通过自定义事件派发给父组件,如果有传参，也可以在这里传参
      //this.triggerEvent('自定义事件',要传递的数据)
      this.triggerEvent('confirmEvent',this.data.v)
    },

    //点击取消
      //点击确定
      cancel_btn() {
        //通过自定义事件派发给父组件,如果有传参，也可以在这里传参
        //this.triggerEvent('自定义事件',要传递的数据)
        this.triggerEvent('cancelEvent')
      }

  }
})

2.3 第三方组件

vant ui 小程序版本官方地址，看这里

如果让小程序支持Npm第三方，需要配置，然后再使用

先创建package.json
```
npm init -y
```
安装依赖
```
npm i @vant/weapp -S --production
```
将 app.json 中的 "style": "v2" 去除
构建 npm 包
详情--勾选Npm和增强编译

三、数据请求

wx.request,默认不支持Promise

wx.request({
  url:xxx,
  data:xxx,
  success() {}
})

四、接口封装-----基于Promise二次封装

env.js

module.exports={
  local:{},
  test:{
    baseURL:''
  },
  prod:{
    baseURL:'https://api.it120.cc'
  }
}

request.js

const {baseURL}=require('./env').prod

//这个个性域名要改成的自己的！！！！！不要用hjl
const isVip='hjl'

module.exports={
    request:function(url='',method='GET',data={},isDomain=true) {
      //url路径包括3部分=基地址+个性域名+请求业务地址
      //例如：https://api.it120.cc/hjl/shop/goods/list/v2

      if(isDomain){
        url=`${baseURL}/${isVip}/${url}`
      }else {
        url=`${baseURL}/${url}`
      }

      return new Promise((resolve,reject)=>{

        wx.request({
          //请求路径
          url,
          //请求方式
          method,
          //请求参数
          data,
          //成功返回
          success(res) {
            resolve(res.data)
          },
          //失败返回
          fail(error) {
            reject(error)
          }
        })

      })   
    },
}

api.js

const {request}=require('./request')


module.exports={

  //请求轮播图
  getBannerApi(type='index') {
    return request('banner/list','GET',{type:type})
  },

   //请求分类接口
   getCateListApi() {},


  //请求商品列表
  getGoodsListApi() {},
}

页面上使用

//JS部分：引入api

const {getBannerApi}=require('../../http/api')

Page({
  //进入页面就触发，可重复触发
  async onShow() {
    const res=await getBannerApi()
    this.setData({
      bannerArr:res.data
    })    
  },
})



wxml:

<view class="banner">
  <swiper
  indicator-dots="{{ true }}"
  indicator-color="#f00"
  indicator-active-color="#fff"
  autoplay="{{ true }}"
  circular="{{ true }}"
  >
  
    <swiper-item wx:for='{{ bannerArr }}' wx:key='id'>
      <image src='{{ item.picUrl }}'></image>
    </swiper-item>
  </swiper>
</view>