一. 如何获取自己的微信小程序的AppID
1. 打开微信开放文档(https://mp.weixin.qq.com/)
2.点击开发->开发管理->开发设置
实际截图:
image.png
二. 使用VSCode开发,推荐安装的插件:
image.png
三. 如何在小程序中注册一个组件:
image.png
四.在pages 页面想引用components组件的话,需要在pages中的页面的index.json文件中去做引用,例如:
image.png
五.上拉加载更多:
需求:如果当我拖动网页,到底部时希望下一页的数据继续展现,此时该怎么做呢?
image.png
六.下拉加载更多和设置当前下拉刷新页面的小点的背景颜色
需求: 当我下拉的时候能一直刷新数据,该怎么做呢?
image.png
七.如何从当前页面跳转到详情页面呢?例如:
image.png
七.一.传数据和取数据的整个过程:
image.png
七.二. 在detail-video中取数据:
image.png
八.弹幕需求:
现在很多的小程序 或者是某栈,某音都会在视频上会有弹幕,那这种需求在小程序中是如何实现的呢?
image.png
九.一 小程序中如何引用UI组件库呢? (早期小程序是不支持npm安装组件库的)
1. 我以引用VantUI为例使用npm 安装:
-- 可以打开你文件所在的目录然后打开终端
实际截图:
image.png
2. 在小程序终端使用命令安装:
w
生成一个package.json文件
image.png
九.二 以上那种安装了还是不可以使用的,需要打开编辑器的 详情 ==>使用npm模块勾选上
image.png
九.三. 打开编辑器 找到工具 ===> 里面有个构建npm, 勾选以后项目中会出现一个文件夹
image.png
image.png
image.png
九.四.如何在项目中使用引入的vantUI 呢?
image.png
以上是怎么使用的整个流程了
十.如何修改第三方库中的UI组件样式
1.设置全局页面的颜色
image.png
想修改第三方UI组件的样式的话,去标签中找到他对应的类样式
image.png
十一.一般在主页的搜索框是不能在当前页面搜索的,需要点击搜索框跳转到搜索详情页面的
image.png
十二.如何获取动态数据中的图片的高度
image.png
代码封装的写法:
在utils文件中创建一个 quer-rect.js文件
export default function (select) {
return new Promise((resolve) => {
const query = wx.createSelectorQuery()
query.select(select).boundingClientRect()
query.exec((res) => {
resolve(res)
})
})
}
在当前需要使用的index.js文件中引入
// 封装计算图片高度的函数
import queryRect from "../../utils/query-tect"
handleSwiperImageLoaded() {
// 封装计算图片高度的函数:
queryRect('.swiper-image').then(res => {
const rect = res[0]; // 这个是获取到的当前每一个的图片的item,然后在item中获取到height
this.setData({
swiperHeight: rect.height
})
})
},
十三. 上面的代码调用的频率太高,可以写一个防抖节流的函数来控制他多次的调用:
- 在utils中新建一个节流 throttle.js 函数
// 节流函数
export default function throttle(fn, interval = 1000, options = { leading: true, trailing: false }) {
// 1.记录上一次的开始时间
const { leading, trailing, resultCallback } = options
let lastTime = 0
let timer = null
// 2.事件触发时, 真正执行的函数
const _throttle = function(...args) {
return new Promise((resolve, reject) => {
// 2.1.获取当前事件触发时的时间
const nowTime = new Date().getTime()
if (!lastTime && !leading) lastTime = nowTime
// 2.2.使用当前触发的时间和之前的时间间隔以及上一次开始的时间, 计算出还剩余多长事件需要去触发函数
const remainTime = interval - (nowTime - lastTime)
if (remainTime <= 0) {
if (timer) {
clearTimeout(timer)
timer = null
}
// 2.3.真正触发函数
const result = fn.apply(this, args)
if (resultCallback) resultCallback(result)
resolve(result)
// 2.4.保留上次触发的时间
lastTime = nowTime
return
}
if (trailing && !timer) {
timer = setTimeout(() => {
timer = null
lastTime = !leading ? 0: new Date().getTime()
const result = fn.apply(this, args)
if (resultCallback) resultCallback(result)
resolve(result)
}, remainTime)
}
})
}
_throttle.cancel = function() {
if(timer) clearTimeout(timer)
timer = null
lastTime = 0
}
return _throttle
}
- 在当前需要节流的页面引入
// 引入节流函数
import throttle from "../../utils/throttle";
// 把queryRect函数传入到throttle中,会返回一个新的节流函数
const newThrottle = throttle(queryRect);
// 使用节流函数
newThrottle('.swiper-image').then(res => {
const rect = res[0]; // 这个是获取到的当前每一个的图片的item,然后在item中获取到height
this.setData({
swiperHeight: rect.height
})
})
十四.小程序中插槽的使用:
- 定义一个子组件 area-header.wxml
<view class="header">
<view class="title">{{title}}</view>
<view class="right" wx:if="{{showRight}}">
<view class="slot"><slot></slot></view>
<view class="default">
<text>{{rightText}}</text>
<image class="icon" src="/assets/images/icons/arrow-right.png"></image>
</view>
</view>
</view>
- area-header.wxss ---> .header .slot:empty + .default 这一行关键性的控制了显示与隐藏
.header {
display: flex;
justify-content: space-between;
align-items: center;
height: 88rpx;
}
.header .title {
font-size: 36rpx;
font-weight: 700;
}
/* .slot:empty:判断里面的子组件是否为空的 */
.header .slot:empty + .default {
display: flex;
}
.header .default {
display: none;
align-items: center;
font-size: 28rpx;
color: #777;
}
.header .default .icon {
width: 50rpx;
height: 50rpx;
}
- area-header.js
Component({
/**
* 组件的属性列表
*/
properties: {
title: {
type: String,
value: "默认标题"
},
rightText: {
type: String,
value: "更多"
},
showRight: {
type: Boolean,
value: true
}
}
})
- 在父组件中引用:
// 4.1 首先在父组件的index.json中引入
{
"usingComponents": {
"area-header": "/components/area-heafer/area-heafer"
}
}
// 4.2 在页面使用
<view class="recommend-song">
<area-header title="{{ '推荐歌曲' }}"></area-header>
</view>
十五.多个页面的数据共享问题:
小程序在app.js中提供了一个共享全局数据,但是那是globalData,他有一个致命的缺点,数据不是响应式的
image.png
- 这里引用了一个第三方库:
// 1. 安装第三方包
npm install hy-event-store
// 1.1 安装完成以后要打开编辑器中的 工具===> 勾选 构建npm
// 2. 在项目中创建一个store文件夹===> 新建一个ranking-store.js文件
import { HYEventStore } from 'hy-event-store';
import { getRankings } from "../service/api-home-music"
export const rankingStore = new HYEventStore({
state:{
hotRanking:{}
},
actions:{
getRankingDataAction(ctx) {
// console.log(ctx); // hotRanking:{}
getRankings(1).then(res=> {
// console.log(res);
ctx.hotRanking = res.playlist
})
}
}
});
// 3. store文件夹===> 新建一个index.js文件作为每个页面的所有出口
import { rankingStore } from "./ranking-store"
export {
rankingStore
}
// 4. 在当前需要使用的共享页面使用,比如在index.js文件中想引用:
// 1. 引入全局共享数据
import { rankingStore } from "../../store/index";
Page({
data: {
recommendSongs:[]
},
onLoad: function (options) {
// 2. 发起共享数据的请求
rankingStore.dispatch("getRankingDataAction");
// 3. 从store获取共享的数据
rankingStore.onState("hotRanking", res => {
console.log("homu-music", res);
if (res.tracks) {
const recommendSongs = res?.tracks.slice(0, 6)
console.log("recommendSongs==>", recommendSongs);
this.setData({
recommendSongs
})
}
})
},
})
实际截图:
image.png
image.png
十五.如何获取全局的设备的宽度和高度呢?
当在做横向滚动的时候使用<scroll-view >会有白色的空白区域,这个改咋处理呢?
image.png
十六.遇到Switch判断的时候可以优化代码:
image.png
十七.在组建中发射事件: ---> triggerEvent内置的一个事件方法
image.png
网友评论