小程序75-100

一、npm支持

1.使用npm包

安装命令：npm init -y

npm i @vant/weapp

完成后点击工具 => 构建npm

2.自定义构建npm

3.Vant Weapp组件库的使用

"usingComponents": {

"van-image": "@vant/weapp/image/index",

"van-loading": "@vant/weapp/loading/index"

}

<!-- index.wxml -->

<!-- 坑： -->
<!-- 在使用 van-image 图片组件，如果需要渲染本地的图片，不能使用 ../ -->
<!-- 需要相对于小程序源码的目录来查找图片才可以 -->
<van-image   
  round 
  use-loading-slot
  use-error-slot
  width="10rem" 
  height="10rem" 
  custom-class="custom-class"
  src="/assets/floor/1.png" 
  bind:click="imageHandler"
> 
  <!-- slot：loading -->
  <van-loading slot="loading" type="spinner" size="20" vertical />

  <!-- slot：error -->
  <text slot="error">加载失败</text>
</van-image>
<!-- <image src="../../assets/floor/1.png" mode=""/> -->

/**index.wxss**/

.custom-class {
  border: 10rpx solid lightseagreen !important;
}

// index.js

Page({

  imageHandler () {
    console.log('点击图片时触发点击事件，执行该事件处理函数~~~')
  }

})

3.Vant Weapp组件样式覆盖

"usingComponents": {

"van-button": "@vant/weapp/button/index",

"custom01": "./components/custom01/custom01"

}

<!-- cate.wxml -->

<!-- 第一个方法：解除样式隔离 -->
<!-- <van-button type="primary">主要按钮</van-button> -->

<!-- <custom01 /> -->


<!-- 第二个方法：使用外部样式类 -->
<!-- <van-button type="primary" custom-class="custom-class">主要按钮</van-button> -->


<!-- 第三个方法：使用 css 变量：如果需要在多个页面或者是一个组件中，需要批量修改组件、定制主题 -->
<van-button type="primary" class="my-button">主要按钮</van-button>





<!--components/custom01/custom01.wxml-->
<!-- <text>components/custom01/custom01.wxml</text> -->

<van-button type="primary">主要按钮</van-button>

/**app.wxss**/

page {

  --color: lightseagreen;
  
}







/* components/custom01/custom01.wxss */

/* 注意事项：在自定义组件中如果需要修改 Vant Weapp 组件的样式，需要解除样式隔离， shared */
/* .van-button--primary {
  font-size: 28rpx !important;
  background-color: lightseagreen !important;
  border: 1px solid lightseagreen !important;
} */









/* cate.wxss */
/* .van-button--primary {
  font-size: 28rpx !important;
  background-color: lightseagreen !important;
  border: 1px solid lightseagreen !important;
} */

/* .custom-class {
  font-size: 28rpx !important;
  background-color: lightseagreen !important;
  border: 1px solid lightseagreen !important;
} */

.my-button {
  --color: rgb(17, 0, 255);
}

.van-button--primary {
  font-size: 28rpx !important;
  background-color: var(--color) !important;
  border: 1px solid var(--color) !important;
}

二、分包加载

1.小程序分包加载

2.配置分包加载以及打包、引用原则

// app.jion

{
"subPackages": [
    {
      "root": "modules/goodModules",
      "name": "goodModules",
      "pages": [
        "pages/list/list",
        "pages/detail/detail"
      ]
    }
  ]
}

<!-- index.wxml -->

<!-- 如果需要跳转到分包页面，需要在路径之前添加上分包的根目录路径 root 路径才可以 -->
<navigator url="/modules/goodModules/pages/list/list">跳转到商品列表页面</navigator>

3.独立分包

"independent": true

// app.jion

{
"subPackages": [
    {
      "root": "modules/goodModules",
      "name": "goodModules",
      "pages": [
        "pages/list/list",
        "pages/detail/detail"
      ]
    },
    {
      "root": "modules/marketModules",
      "name": "marketModules",
      "pages": [
        "pages/market/market"
      ],
      "independent": true
    }
  ]
}

4.分包预下载

// app.jion

{
  "preloadRule": {
    "pages/index/index": {
      "network": "all",
      "packages": ["modules/goodModules"]
    },
    "modules/marketModules/pages/market/market": {
      "network": "all",
      "packages": ["__APP__"]
    }
  }
}

三、开放能力

1.获取微信头像

<view>
  <button class="btn" open-type="chooseAvatar" bindchooseavatar="chooseAvatar">
    <image class="avatar" src="{{ avatarUrl }}" mode=""/>
  </button>
</view>

/**index.wxss**/

.btn {
  background-color: transparent;
}

.btn::after {
  border: none;
}

.avatar {
  width: 200rpx;
  height: 200rpx;
  border-radius: 50%;
}

Page({

  data: {
    avatarUrl: '../../assets/floor/2.png'
  },

  // 获取微信头像
  chooseAvatar (event) {
    // console.log(event)

    // 目前获取的微信头像是临时路径
    // 临时路径是有失效时间的，在实际开发中，需要将临时路径上传到公司的服务器
    const { avatarUrl } = event.detail

    this.setData({
      avatarUrl
    })
  }

})

2.获取微信昵称

// index.js

Page({ 
 // 获取微信昵称 
  onSubmit (event) {
    // console.log(event.detail.value)
    const { nickname } = event.detail.value
    console.log(nickname)
  }
})

<!-- index.wxml -->

<!-- 需要使用form组件包裹住 input 以及 button 组件 -->
<form bindsubmit="onSubmit">

  <!-- input 输入框组件的 type 属性设置为 nickname，用户点击输入框，键盘上方才会显示微信昵称 -->
  <!-- 如果添加了 name 属性，form 组件就会自动收集带有 name 属性的表单元素的值 -->
  <input type="nickname" name="nickname" placeholder="请输入昵称" />

  <!-- 如果将 form-type="submit" ，就将按钮变为提交按钮 -->
  <!-- 在点击提交按钮的时候，会触发表单的 bindsubmit 提交事件 -->
  <button type="primary" plain form-type="submit">点击获取昵称</button>
</form>

3.转发功能

,!-- cate.wxml -->

<button open-type="share">转发</button>

// pages/cate/cate.js
Page({

  // 用来监听页面按钮的转发 以及 右上角的转发按钮的转发
  onShareAppMessage (obj) {
    console.log(obj)

    return {
      title: '这是一个非常神奇的页面~~',
      path: '/pages/cate/cate',
      imageUrl: '../../assets/floor/3.png'
    }

  }

})

4.分享到朋友圈

// pages/cate/cate.js
Page({

  // 用来监听页面按钮的转发 以及 右上角的转发按钮的转发
  onShareAppMessage (obj) {
    console.log(obj)

    
    return {
      title: '这是一个非常神奇的页面~~',
      path: '/pages/cate/cate',
      imageUrl: '../../assets/floor/3.png'
    }

  },

  // 监听右上角 分享到朋友圈 按钮
  onShareTimeline () {

    return {
      title: '帮我砍一刀~~',
      query: 'id=1',
      imageUrl: '../../assets/floor/2.png'
    }

  }
})

5.手机号验证组件

<!-- cart.wxml -->

<view class="line"></view>

<button
  type="primary"
  plain
  open-type="getPhoneNumber"
  bindgetphonenumber="getphonenumber"
>快速验证组件</button>

<view class="line"></view>

<button
  type="warn"
  plain
  open-type="getRealtimePhoneNumber"
  bindgetrealtimephonenumber="getRealtimePhoneNumber"
>实时验证组件</button>


<view class="line"></view>

// cart.js

Page({

  // 手机号快速验证

  getPhoneNumber (event) {
    // 通过事件对象，可以看到，在 event.detail 中可以获取到 code
    // code 动态令牌，可以使用 code 换取用户的手机号
    // 需要将 code 发送给后端,后端在接收到 code 以后
    // 也需要调用 API,换取用户的真正手机号 
    // 在换取成功以后,会将手机号返回给前端
    console.log(event)
  },

  // 手机号实时验证
  getRealtimePhoneNumber (event) {
    console.log(event)
  }
  
})

6.客服功能

<!-- profile -->

<button type="warn" plain open-type="contact">联系客服</button>

四、补充

1.框架接口-getApp()

<!-- profile.wxml -->

<button type="primary" plain bind:tap="login">登录</button>

// cart.js

const appInstance = getApp()

Page({

  onLoad () {

    console.log(appInstance.globalData.token)

  }
  
})






// profile.js

// getApp() 方法用来获取全局唯一的 App() 实例
const appInstance = getApp()

Page({

  login () {

    // 不要通过 app 实例调用钩子函数
    console.log(appInstance)

    appInstance.setToken('dhskjvhdvn;aksv')

  }

})









// app.js

App({

  // 全局共享的数据
  globalData: {
    token: ''
  },
  
  // 全局共享的方法
  setToken (token) {
    // 如果想获取 token，可以使用 this 的方法进行获取
    this.globalData.token = token

    // 在 App() 方法中如果想获取 App() 实例，可以通过 this 的方法进行获取
    // 不能通过 getApp() 方法获取
  }

})

2.页面间通信

<!-- index.wxml -->

<button type="warn" plain bind:tap="handler">跳转到列表页面</button>

// index.js

Page({

  // 点击按钮触发的事件处理函数
  handler () {

    wx.navigateTo({
      url: '/pages/list/list',
      events: {
        // key: 被打开页面通过 eventChannel 发射的事件
        // value: 回调函数
        // 为事件添加一个监听器，获取到被打开页面传递给当前页面的数据
        currentevent: (res) => {
          console.log(res)
        }
      },
      success (res) {
        // console.log(res)
        // 通过 success 回调函数的形参，可以获取 eventChannel 对象
        // eventChannel 对象提供了 emit 方法，可以发射事件，同时携带参数
        res.eventChannel.emit('myevent', { name: 'tom' })
      }
    })

  }
  
})







// list.js

Page({

  onLoad () {

    // 通过 this.getOpenerEventChannel() 可以获取 EventChannel 对象
    const EventChannel = this.getOpenerEventChannel()

    // 通过 EventChannel 提供的 on 方法监听页面发射自定义事件
    EventChannel.on('myevent', (res) => {
      console.log(res)
    })

    // 通过 EventChannel 提供的 emit 方法也可以向上一级页面传递数据
    // 需要使用 emit 定义自定义事件，携带需要传递的数据
    EventChannel.emit('currentevent', { age: 10 })

  }

})

3.组件通信-事件总线

<!-- cart.js -->

<view class="parent">

  <view class="title">父组件，子组件 a 和 子组件 b 是兄弟关系</view>

  <view class="container">
    <custom01 />
    <custom02 />
  </view>
</view>







<!--components/custom01/custom01.wxml-->
<!-- <text>components/custom01/custom01.wxml</text> -->

<view>
<text>子组件 a</text>
<button bind:tap="sendData">传递数据给兄弟</button>
</view>









<!--components/custom02/custom02.wxml-->
<!-- <text>components/custom02/custom02.wxml</text> -->

<view>
  <text>子组件 b</text>
  <view>{{ name }}</view>
</view>

// components/custom01/custom01.js

import PubSub from 'pubsub.js'

Component({

  // 组件的初始数据
  data: {
    name: 'tom'
  },

  // 组件的方法列表
  methods: {
    sendData () {

      // pulish 发布、发射自定义事件
      // 1.自定义事件的名称
      // 2.需要传递的数据
      PubSub.pulish('myevent', { name: this.data.name, age: 10 })

    }
  }
  
})











// components/custom02/custom02.js

import PubSub from 'pubsub.js'


Component({

  // 组件的初始数据
  data: {
    name: ''
  },

  // 组件的方法列表
  methods: {
    
  },

  lifetimes: {
    attached () {

      // subscribe 订阅、监听自定义的事件
      // 1.需要订阅、监听的自定义事件名称
      // 2.回调函数，回调函数有两个参数
      // 2.1 msg: 自定义事件的名称
      // 2.2 data: 传递过来的数据
      PubSub.subscribe('myevent', (msg, data) => {
        console.log(msg, data)

        this.setData({
          name: data.name
        })
      })

    }
  }
  
})

4.自定义导航栏

// cate.json

{
  "backgroundTextStyle":"custom"
}

<!-- cate.wxml -->

<swiper class="custom-swiper" indicator-dots autoplay interval="2000">
  <swiper-item>
    <image src="../../assets/floor/3.png" mode=""/>
  </swiper-item>
  
  <swiper-item>
    <image src="../../assets/floor/3.png" mode=""/>
  </swiper-item>

  <swiper-item>
    <image src="../../assets/floor/3.png" mode=""/>
  </swiper-item>

</swiper>

// cate.wxss

.custom-swiper {
  height: 440rpx;
}

.custom-swiper image {
  height: 100%;
  width: 100%;
}

5.上线发布

五、项目初始化

1.项目介绍

2.申请开发权限

2.创建项目以及项目初始化

初始化

3.自定义构建 npm 和 集成 Sass

看P98集内容

1.把源码移入新建文件夹miniprogram中

2.在project.config.json中写以下标蓝内容

3.在终端写命令 npm init -y

4.再写命令 npm i @vant/weapp

5.点击工具 => 构建npm

4.集成项目页面文件和基础配置

5.拓展-VsCode开发小程序项目