- 博客(40)
- 收藏
- 关注
RSS订阅原创 JavaScript学习笔记，页面滚动事件scroll的应用(滚动固定侧边栏)
知识点：scroll 滚动窗口至文档中的特定位置。(监听网页滚动条滚动事件，这个事件就是：window.onscroll)pageXOffset 属性返回文档在窗口左上角水平方向滚动的像素，pageYOffset 属性返回文档在窗口左上角垂直方向滚动的像素。pageXOffset 设置或返回当前页面相对于窗口显示区左上角的 X 位置，pageYOffset 设置或返回当前页面相对于窗口显示区左上角的 Y 位置。pageXOffset 和 pageYOffset 属性相等于 scrollX 和 s
2020-12-11 23:22:09
752
1
原创 JavaScript学习笔记，实现秒杀倒计时效果
案例分析这个倒计时是不断变化的，因此需要定时器来自动变化( setInterval )三个黑色盒子里面分别存放时分秒三个黑色盒子利用innerHTML放入计算的小时分钟秒数第―次执行也是间隔毫秒数，因此刚刷新页面会有空白最好采取封装函数的方式，这样可以先调用一次这个函数，防止刚开始刷新页面有空白问题 div { margin: 200px; } span { display: inline-blo
2020-12-05 16:43:48
291
1
原创 重温CSS3 的新特性
CSS3 新增选择器CSS3给我们新增了选择器，可以更加便捷，更加自由的选择目标元素。属性选择器结构伪类选择器伪元素选择器1、属性选择器属性选择器可以根据元素特定属性的来选择元素。这样就可以不用借助于类或者id选择器注意:类选择器、属性选择器、伪类选择器，权重为10。2、结构伪类选择器结构伪类选择器主要根据文档结构来选择器元素，常用于根据父级选择器里面的子元素nth-child (n) 选择某个父元素的一个或多个特定的子元素n 可以是数字，关键字和公式n 如果是数字，就是选择第
2020-10-24 18:59:44
187
原创 微信小程序项目_秋泊优选77完
小程序项目的发布项目上线后 不可随便调用外网接口，是不安全的（将小程序所需要用的外网接口添加到白名单里面）less样式文件只在开发时候使用 而微信小程序用的样式文件还是wxss（上传不需要less文件）版本发布上线...
2020-09-27 16:32:34
245
原创 微信小程序项目_秋泊优选76
70、首页_添加商品的跳转链接pages\index\index.wxml首页轮播图的跳转<navigator url="{{item.navigator_url}}">...</navigator>首页分类导航栏的跳转pages\index\index.wxml<navigator url="/pages/category/index" open-type="switchTab">...</navigator>首页商品图片展示的跳转商
2020-09-27 15:54:21
119
原创 微信小程序项目_秋泊优选75
69、意见反馈_提交按钮功能点击“提交”按钮获取文本域的内容（1 data中定义变量表示输入框内容、2 文本域绑定输入事件事件触发的时候把输入框的值存入到变量中）对这些内容合法性验证验证通过用户选择的图片上传到专门的图片的服务器返回图片外网的链接（1 遍历图片数组、2 挨个上传、3 自己再维护图片数组存放图片上传后的外网的链接）文本域和外网的图片的路径一起提交到服务器 (前端的模拟不会发送请求到后台...)清空当前页面返回上一页绑定事件pages\feedback\index.wxml
2020-09-27 14:37:59
225
原创 微信小程序项目_秋泊优选74
69、意见反馈_删除图片点击自定义图片组件获取被点击的元素的索引获取data中的图片数组根据索引数组中删除对应的元素把数组重新设置回data中pages\feedback\index.wxml<Tabs tabs="{{tabs}}" bindtabsItemChange="handleTabsItemChange"> <view class="fb_main"> <view class="fb_title">问题的种类</v
2020-09-27 13:22:52
116
原创 微信小程序项目_秋泊优选73
68、意见反馈_动态功能（选择显示图片）1 点击“+”触发tap点击事件pages\feedback\index.wxml<button bindtap="handleChooseImg">+</button> 调用小程序内置的选择图片的api（wx.chooseImage）获取到图片的路径数组把图片路径存到data的变量中页面就可以根据图片数组进行循环显示自定义组件pages\feedback\index.js // 点击“+”选择图片 handleCh
2020-09-27 13:10:44
280
原创 微信小程序项目_秋泊优选72
67、意见反馈_自定义图片组件新建自定义组件意见反馈页面引入组价pages\feedback\index.json{ "usingComponents": { "Tabs":"../../components/Tabs/Tabs", "UpImg":"../../components/UpImg/UpImg" }, "navigationBarTitleText": "意见反馈"}自定义组件 标签和样式components\UpImg\UpImg.wxml&l
2020-09-27 12:09:32
169
原创 微信小程序项目_秋泊优选71
66、意见反馈_静态结构pages\feedback\index.wxml<Tabs tabs="{{tabs}}" bindtabsItemChange="handleTabsItemChange"> <view class="fb_main"> <view class="fb_title">问题的种类</view> <view class="fb_tips"> <text
2020-09-27 11:25:27
138
原创 微信小程序项目_秋泊优选70
65、意见反馈_引入tabs组件微信小程序内置_意见反馈引入tabs组件及功能的实现（仿照商品列表页面）pages\goods_list\index.json——>pages\feedback\index.json{ "usingComponents": { "Tabs":"../../components/Tabs/Tabs" }, "navigationBarTitleText": "意见反馈"}pages\goods_list\index.wxml——>
2020-09-27 10:24:55
162
原创 微信小程序项目_秋泊优选69
63、商品搜索_页面取消按钮功能1 给商品列表添加对应的超链接——>跳转到商品详情页面pages\search\index.wxml<view class="search_row"> <input value="{{inpValue}}" placeholder="请输入您要搜索的商品" bindinput="handleInput"></input> <button bindtap="handleCancel" hidden="{{!
2020-09-27 10:00:46
168
原创 微信小程序项目_秋泊优选68
63、商品搜索_防抖功能防抖（防止抖动）定时器1 防抖一般输入框中防止重复输入重复发送请求（定义全局的定时器id）2 节流一般是用在页面下拉和上拉pages\search\index.js// 0 引入 来发送请求的方法 一定要把路径补全import {request} from "../../request/index.js";import regeneratorRuntime from '../../lib/runtime/runtime';Page({ /** * 页面
2020-09-27 09:31:17
123
原创 微信小程序项目_秋泊优选67
62、商品搜索_页面动态功能1 输入框绑定值改变事件input事件 获取到输入框的值 合法性判断 检验通过把输入框的值发送到后台 返回的数据打印到页面上绑定事件pages\search\index.wxml<view class="search_row"> <input placeholder="请输入您要搜索的商品" bindinput="handleInput"></input> <button>取消</button
2020-09-23 23:16:02
183
原创 微信小程序项目_秋泊优选66
61、搜索页面_功能实现pages\search\index.json{ "usingComponents": {}, "navigationBarTitleText": "商品搜索"}添加商品搜索页面的编译模式pages\search\index.wxml<view class="search_row"> <input placeholder="请输入您要搜索的商品"></input> <button>取消</
2020-09-23 22:25:51
135
原创 微信小程序项目_秋泊优选65
61、商品收藏_静态页面续收藏页面的标签pages\collect\index.wxml<Tabs tabs="{{tabs}}" bindtabsItemChange="handleTabsItemChange"> <view class="collect_main"> <view class="collect_title"> <text class="collect_tips active">全
2020-09-23 21:45:07
201
原创 微信小程序项目_秋泊优选64
60、商品收藏_引入自定义tabs组件和之前的订单列表引入是一样的pages\order\index.json——>pages\collect\index.json{ "usingComponents": { "Tabs":"../../components/Tabs/Tabs" }, "navigationBarTitleText": "商品收藏"}pages\order\index.js——>pages\collect\index.jsPage({ /*
2020-09-23 20:59:11
171
原创 微信小程序项目_秋泊优选63
59、个人中心_显示收藏的商品数量在个人中心显示 被收藏的商品pages\user\index.jsPage({ data: { userinfo:{}, // 被收藏的商品的数量 collectNums:0 }, onShow(){ const userinfo=wx.getStorageSync( "userinfo"); const collect=wx.getStorageSync("collect")||[]; this.setD
2020-09-22 21:23:33
157
原创 微信小程序项目_秋泊优选62
58、商品详情页面_收藏功能②商品详情 点击 图标切收藏 <view class="goods_collect"> <!--isCollect值为true加载icon-shoucang图标，false加载icon-shoucang1图标--> <text class="iconfont {{isCollect?'icon-shoucang':'icon-shoucang1'}}"></text>
2020-09-22 21:00:05
157
原创 微信小程序项目_秋泊优选61
57、商品详情页面_收藏功能①商品收藏（页面加载获取收藏数据）1 页面onShow的时候―加载缓存中的商品收藏的数据2 判断当前商品是不是被收藏是改变页面的图标不是 不做任何操作3 点击商品收藏按钮判断该商品是否存在于缓存数组中已经存在把 该商品删除没有存在 把商品添加到收藏数组中 存入到缓存中即可pages\goos_detail\index.js// 0 引入 来发送请求的方法 一定要把路径补全import {request} from "../../request/in
2020-09-22 20:17:14
209
原创 微信小程序项目_秋泊优选60
56、订单查询页面_动态渲染pages\order\index.wxml <view class="order_main"> <view wx:for="i{orders}}" wx:key="order_id" class="order_item"> <view class="order_no_row"> <view
2020-09-22 19:32:04
124
原创 微信小程序项目_秋泊优选59
55、订单查询页面_动态修改订单标题根据type来决定页面标题的数组元素哪个被激活选中根据标题索引来激活选中标题数组pages\order\index.js// pages/order/index.jsPage({ /** * 页面的初始数据 */ data: { orders:[], tabs:[ { id: 0, value:"全部", isActive: true },
2020-09-21 19:59:44
189
原创 微信小程序项目_秋泊优选58
54、订单查询页面_获取订单接口数据订单查询页面的业务逻辑1 页面被打开的时候 onShow onshow不同于onLoad 无法在形参上接收options参数 判断缓存中有没有token （1 没有直接跳转到授权页面，2 有直接往下进行） 获取url上的参数type 根据type去发送请求获取订单数据 渲染页面2点击不同的标题重新发送请求来获取和渲染数据历史订单查询接口文档pages\order\index.js// pages/order/index.jsPage({
2020-09-21 18:40:22
196
原创 微信小程序项目_秋泊优选57
53、订单查询页面（参考商品列表页面的引入tabs组件）历史订单查询接口文档订单查询 业务逻辑1 标题2 订单查询引入tabs组件pages\goods_list\index.json——>pages\order\index.json{ "usingComponents": { // 引入tabs组件 "Tabs":"../../components/Tabs/Tabs" }, "navigationBarTitleText": "订单查询"}商品列表j
2020-09-21 14:18:11
172
原创 微信小程序项目_秋泊优选56
52、续个人中心_其它的静态结构pages\user\index.wxml<view class="user_info_wrap"> <view wx:if="{{userinfo.avatarUrl}}" class="user_img_wrap"> <image class="user_bg" src="{{userinfo.avatarUrl}}"></image> <view class="user_in
2020-09-21 13:22:30
166
原创 微信小程序项目_秋泊优选55
51、个人中心_历史足迹我的订单静态结构pages\user\index.wxml<view class="user_content"> <view class="user_main"> <!--历史足迹--> <view class="history_wrap"> <navigator> <view class="his_num">0&
2020-09-19 22:34:49
136
原创 微信小程序项目_秋泊优选54
50、个人中心_背景展示pages\user\index.json{ "usingComponents": {}, "navigationBarTitleText": "个人中心"}pages\user\index.wxml<view class="user_info_wrap"> <view class="user_img_wrap"> <image class="user_bg" src="{{userinfo.avatarUrl}
2020-09-19 21:12:18
1657
原创 微信小程序项目_秋泊优选53
49、登录获取用户信息pages\login\index.json{ "usingComponents": {}, "navigationBarTitleText": "登录"}pages\login\index.wxml<button type="primary" plain>登录</button>pages\login\index.wxssbutton{ margin-top: 40rpx; width: 70%;}获取用户信息
2020-09-19 20:17:38
159
原创 微信小程序项目_秋泊优选52
48、支付代码优化（封装统一的请求头到request方法中）如果发起request请求的路径带有==/my/==自己带上header请求头request\index.js// 同时发送异步代码的次数let ajaxTimes = 0;export const request=(params)=>{ // 判断url中是否带有/my/请求的是私有的路径带上header token let header={...params.header}; if(params.ur1.includ
2020-09-18 15:06:41
131
原创 微信小程序项目_秋泊优选51
47、支付成功_移除购物车已经支付的数据已经完成了微信支付手动删除缓存中已经被选中了的商品删除后的购物车数据填充回缓存再跳转页面pages\pay\index.js // 点击支付 async handleOrderPay(){ try { // 1 判断缓存中有没有token const token=wx.getStorageSync("token"); // 2 判断 if(!token){
2020-09-18 14:25:22
174
原创 微信小程序项目_秋泊优选50
46、支付完成微信支付获取支付参数接口pages\pay\index.js // 5 发起预支付接口 const res=await request({url:"/my/orders/req_unifiedorder", method : "POST", header, data:{order_number} }); console.log(res);点击支付utils\asyncWx.js// Promise 形式requestPayment 微信小程序支付/**
2020-09-18 14:03:00
198
原创 微信小程序项目_秋泊优选49
45、支付创建订单（创建订单、获取订单编号）创建订单的接口使用参数发请求拿数据获取订单编号pages\pay\index.js // 点击支付 async handleOrderPay(){ // 1 判断缓存中有没有token const token=wx.getStorageSync("token"); // 2 判断 if(!token){ wx.navigateTo({ url: '/pages/auth/index'
2020-09-18 12:52:57
638
原创 微信小程序项目_秋泊优选48
44、支付支页面_订单创建功能（支付获取用户token）给支付按钮绑定点击事件（bindtap=“handleOrderPay”）pages\pay\index.wxml <!--支付按钮--> <view class="order_pay_wrap" bindtap="handleOrderPay"> 支付{{totalNum}} </view>添加点击事件—>跳转授权页面pages\pay\index.js
2020-09-17 12:19:58
309
原创 微信小程序项目_秋泊优选47
43、支付支页面_订单创建分析1 创建订单接口文档2 获取用户token接口文档3 支付按钮先判断缓存中有没有token没有跳转到授权页面进行获取token有token ...继续业务逻辑
2020-09-17 11:05:23
144
原创 微信小程序项目_秋泊优选46
42、支付支页面_付权限的分析微信支付哪些人哪些帐号可以实现微信支付1 企业帐号2 企业帐号的小程序后台中必须给开发者添加上白名单一个 app id 可以同时绑定多个开发者这些开发者就可以公用这个appid和它的开发权限注意：没有企业app id是做不了支付功能的小程序发起微信支付API微信小程序支付开发者文档秋泊优选_支付流程...
2020-09-17 10:51:12
216
原创 微信小程序项目_秋泊优选45
41、支付页面_数据展示1、修改标题pages\pay\index.json{ "usingComponents": {}, "navigationBarTitleText": "商品支付"}2、快速将购物车的布局搬过来复制内容pages\cart\index.wxml——>>>pages\pay\index.wxml复制文件pages\cart\index.less——>>>pages\pay下复制内容pages\cart\index.js——
2020-09-17 10:15:40
257
原创 微信小程序项目_秋泊优选44
40、购物车-结算按钮功能点击结算按钮1 判断有没有收货地址信息2 判断用户有没有选购商品3 经过以上的验证跳转到支付页面!pages\cart\index.wxml绑定点击按钮事件 <!--结算--> <view class="order_pay_wrap" bindtap="handlePay"> 结算{{totalNum}} </view>showToast的封装utils\asyncWx.js// Pro
2020-09-16 14:12:36
192
原创 微信小程序项目_秋泊优选43
39、购物车_没有商品的提示功能pages\cart\index.wxml<!-- 购物车内容--><view class="cart_content"> <view class="cart_title">购物车</view> <view class="cart_main"> <!--当cart数组长度不为0显示商品信息--> <block wx:if="{{car
2020-09-16 13:24:11
133
原创 微信小程序项目_秋泊优选42
38、购物车_商品删除功能3.1当购物车的数量=1同时用户点击 “-"弹窗提示询问用户是否要删除（showModal）API1 确定直接执行删除2 取消什么都不做utils\asyncWx.js// 将弹窗提示 封装为Promise 形式/** * Promise 形式showModal * @param {object} param0 参数 */export const showModal=({content})=>{ return new Promise((re
2020-09-16 12:35:17
235
原创 微信小程序项目_秋泊优选41
37、购物车_商品数量编辑数量的编辑1 “+””-”按钮绑定同一个点击事件区分的关键自定义属性1 "+" "+1"2 "-" "-1"2 传递被点击的商品id goods_id3 获取data中的购物车数组来获取需要被修改的商品对象4 直接修改商品对象的数量num5 把cart数组重新设置回缓存中和data中 this.setCartpages\cart\index.wxml<!--商品信息--> <view class="cart_i
2020-09-16 11:52:18
234
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人