![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
微信小程序开发
翘阳啦
只有不断学习,才不会落后!做笔记的博客
展开
-
【微信小程序学习】 保存cookie到Storage中,通过cookie获取视频的数据
1、获取cookie首先登录的时候就把用户的cookies存入本地存储中,2、请求带上cookie当我们需要保存cookie,在request.js文件中写上请求头:完整request.js文件//发送ajax请求import config from './config.js'export default (url,data={},method='GET')=>{ return new Promise((resolve,reject)=>{...原创 2022-05-24 09:31:49 · 1454 阅读 · 1 评论 -
【微信小程序学习】本地存储Storage
语法说明 1. 存入数据 a) wx.setStorage() 异步 b) wx.setStorageSync() 同步wx.setStorage({ key:"key", data:"value"})2. 读取数据 a) wx.getStorage() 异步b) wx.getStorageSync() 同步wx.getStorage({ key:'key', success(res){ console.log(res.dat...原创 2022-05-20 09:51:22 · 1473 阅读 · 0 评论 -
【微信小程序学习】小程序API
一、API 使用说明1. 小程序提供了很多实用的方法供开发者使用2. 小程序全局对象是: wx3. 所有的 API 都保存在 wx 对象中二、常用 API1. 界面交互 a) 显示消息提示框: wx.showToast() b) 显示消息加载框: wx.showLoading() c) 关闭消息提示框: wx.hideToast() d) 关闭消息加载框: wx.hideLoading()2. 路由跳转 a) wx.navigate...转载 2022-05-19 21:14:43 · 1472 阅读 · 0 评论 -
【微信小程序学习】搜索音乐页面代码实现
这里记录一下搜索页面的代码,总结复习一下。下面原创 2022-05-19 20:50:43 · 1870 阅读 · 0 评论 -
【微信小程序学习】网易云音乐歌曲详情页代码实现
这里记录一下做网易云小程序的音乐播放详情页面的代码。音乐播放界面的主要的重点有几个: 1、磁盘和摇杆的旋转效果,这里运用了css的动画属性 2、音乐播放和暂停,下一首/上一首等播放效果的实现 3、进度条的样式和控制 4、和上一页音乐推荐列表页通信,利用订阅与发布PubsubHTML<!--pages/songDetail/songDetail.wxml--><view class="songDetailContainer"> <...原创 2022-05-19 20:10:13 · 7199 阅读 · 7 评论 -
【微信小程序学习】视频页上下滚动,保持上方导航不动
上下滚动视频页,保持上方的导航栏不动,这里利用了css的新的一个计算的属性calc()calc可以动态计算css宽高 运算符左右两侧必须加空格视口单位:vh vw 1vh=1%的视口高度 1vw=1%的视口宽度.videoScroll{ margin-top: 10rpx; /* calc可以动态计算css宽高 运算符左右两侧必须加空格 */ /* 视口单位:vh vw 1vh=1%的视口高度 1vw=1%的视口宽度 */ height: calc(100vh ...原创 2022-05-17 09:53:08 · 501 阅读 · 0 评论 -
【微信小程序学习】解决多个视频同时播放的问题
我们这里用到了单例模式单例模式:1、需要创建多个对象的场景下,通过一个变量接收,一直保持只有一个对象2、节省内存空间问题:多个视频同时播放的问题点击视频1播放后,再点击视频2,视频1会暂停,播放视频2。需求:1、 点击播放的事件中需要找到上一个播放的视频2、在播放新的视频之前关闭上一个正在播放的视频关键:1、如何找到上一个视频的实例对象2、如何确认点击播放的视频和正在播放的视频不是同一个视频解决方法://点击播放/继续播放的回调...原创 2022-05-17 09:16:01 · 2123 阅读 · 0 评论 -
【微信小程序学习】js开发中常见的点击事件变换css样式(active)
例如,点击下方哪个文字,下方的红底就会跑到哪里去,刚开始时,红底在第一个文字位置。界面WXML<scroll-view scroll-x class="navScroll" enable-flex> <view class="navItem" wx:for="{{videoGroupList}}" wx:key="id"> <view class="navContent {{navId === item.id?'active':''}}原创 2022-05-12 11:52:24 · 4283 阅读 · 0 评论 -
【微信小程序学习】收集表单数据、event对象传参、前端验证和后端验证、本地存储、个人中心页面和登录页面交互
1、登录流程1、收集表单项数据2、前端验证(1)验证用户信息(账号 密码)是否合法(2)前端验证不通过就提示用户,不需要发请求给后端(3)前端验证通过,发请求(携带账号密码)给服务器3、后端验证(1)验证用户是否存在(2)用户不存在直接返回,告诉前端用户不存在(3)用户存在需要验证密码是否正确(4)密码不正确返回给前端提示密码不正确(5)密码正确返回给前端数据,提示用户登录成功(会携带用户的相关信息)2、本地存储从后端得到的用户数据返回到个人登录界面,原创 2022-05-11 21:36:23 · 1660 阅读 · 2 评论 -
【微信小程序学习】tabBar使用
各种属性对应的位置:具体步骤新建文件夹,里面写好pages三个文件夹分别代表下方三个tabbar然后在app.json文件中,配置tabBar"tabBar": { "list": [{ "pagePath": "pages/index/index", "text": "主页", "iconPath": "/static/images/tabs/tab-home.png", "selectedIconPath...原创 2022-05-11 10:31:43 · 1442 阅读 · 0 评论 -
【微信小程序学习】前后端交互
1、语法:wx.request() onLoad: function (options) { wx.request({ url: 'http://localhost:3000/banner', data:{type:2}, success:(res)=>{ console.log('请求成功:',res) }, fail:(err)=>{ console.log('请求失败:', err)原创 2022-05-11 09:49:57 · 3667 阅读 · 0 评论 -
【微信小程序学习】小程序里的轮播图
微信小程序的轮播图里已经提供了swiper插件,可在官方文档中查看属性。HTML文件<view class="indexContainer"> <!-- 轮播图区域 --> <swiper class="banners" indicator-dots='true' indicator-color="ivory" indicator-active-color="#d43c33"> <swiper-item> .原创 2022-05-10 10:34:19 · 231 阅读 · 0 评论 -
【微信小程序学习】获取用户基本信息
1、用户未授权(首次登录)button open-type='getUserInfo'2、用户已经授权(再次登录)wx.getUserInfohtml文件:<view class="indexContainer"> <image wx:if='{{userInfo.avatarUrl}}' class="avatarUrl" src="{{userInfo.avatarUrl}}"></image> <button wx:e.原创 2022-05-10 10:05:39 · 503 阅读 · 0 评论 -
【微信小程序学习】数据绑定、事件绑定、路由跳转、生命周期函数
一、数据绑定1.小程序(1)data中初始化数据(2)修改数据:this.setData修改数据的行为始终是同步的(3)数据流 单向数据流 model-->view2.Vue(1)data中初始化数据(2)修改数据:this.key = value(3)数据流 Vue是单向数据流:model--->view Vue实现了双向数据绑定 v-model二、事件绑定1、事件分类(...原创 2022-05-09 11:49:20 · 404 阅读 · 0 评论 -
【微信小程序学习】微信小程序安装及配置
一、小程序概述1. 没有 DOM2. 组件化开发 具备特定功能效果的代码集合3. 体积小 单个压缩包体积不能大于 2M 否则无法上线4. 小程序的四个重要的文件 a) *.js b) *.wxml ------> view结构 --------> html c) *.wxss ------> view样式 ----------> css d) *. json --------> view 数据 ----------> json文件...原创 2022-05-09 10:35:43 · 4007 阅读 · 0 评论