2020年10月_viceen

原创【js知识】过滤——JS中filter函数的使用方法和实例

JS中filter函数的使用方法和实例filter 方法用来迭代一个数组，并且按给出的条件过滤出符合的元素。filter 方法传入一个回调函数，这个回调函数会携带一个参数，参数为当前迭代的项（我们叫它 val ）。回调函数返回 true 的项会保留在数组中，返回 false 的项会被过滤出数组。使用 filter 来创建一个新数组，新数组的值是 oldArray 中值小于6的元素。不许改变原数组 oldArray .代码：var oldArray = [1,2,3,4,5,6,7,8,9,10,

2020-10-30 19:39:46 15316 2

原创【js知识】循环结构 while、do-while. for；

循环结构 while、do-while. for;while(循环条件){循环体;}do{循环体;}while(循环条件);for(循环变量赋初值；循环条件；循环变量增值){循环语句;}console.log（…）; 以日志的形式在控制台输出结果！<script> // 需求 : 统计 1~100 之间能够被3和7整除的数字个数 var count = 0; // 1. 遍历 1~100 之间的所有整型数值 for (var i = 1; i

2020-10-30 14:39:03 74

原创【休闲】随机点名-html

随机点名代码<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <style type="text/css"> #start{width: 100px;height: 50px;text-align:center;line-height

2020-10-30 14:36:09 3453 2

原创【休闲】随机抽奖-html

随机抽奖代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>随机点名</title> <style> body{ text-align: center; }; .icon-home2:before { c

2020-10-30 14:32:15 998

原创微信小程序商城API文档

电商移动前端API文档request域名：小程序只支持 https 协议，并且要求是已备案的域名，还需配置域名证书。https://www.zhengzhicheng.cn备用：https://autumnfish.cn/wxhttps://itjustfun.cnhttps://easy-mock.com路径说明根路径说明 https://ip域名/api/public/v1路径权限说明路径所有权限都可以访问 https://ip域名/api/public/v1

2020-10-30 01:23:33 2212 1

原创小程序发布流程-详细版

小程序发布流程需要使用自己的APPID点击小程序开发工具右上角【上传】按钮上传成功后，小程序会进入到管理后台的【开发版本】列表点击提交审核按钮，那么会进入到【审核版本】列表如果腾讯审核通过，那么就会进行入到最终的【线上版本】列表，只有进入到这个列表后，该小程序才可以被微信用户搜索到提交审核之前也可以将小程序设置为体验版本，需要添加体验成员，添加之后，这些微信账号就可以直接扫码二维码打开小程序进行测试码打开小程序进行测试如果小程序需要调用后台接口，那么需要进行域名的授权：开发->

2020-10-30 01:16:18 1035

原创个人中心——open-data标签渲染

个人中心——open-data标签渲染页面布局用户头像和昵称我的信息列表我的订单管理收货地址获取头像和昵称<open-data type="userAvatarUrl"></open-data><open-data type="userNickName"></open-data>实例open-data-用户中心——https://developers.weixin.qq.com/miniprogram/dev/component/o

2020-10-30 01:15:32 589 1

原创订单（五）02-支付-删除已支付商品并跳转回购物车页面——wx.requestPayment-发起微信支付 & wx.switchTab-跳转到导航页面& wx.setStorageSync-本地缓存

支付-删除已经支付的商品并跳转回购物车页面——wx.requestPayment()-发起微信支付 & wx.switchTab()-跳转到 tabBar 页面 & wx.setStorageSync()-本地缓存调用后台接口（我们自己平台的接口记录支付的交易数据）request('my/orders/req_unifiedorder', 'post', { order_number: this.orderNum}, { Authorization: token}).th

2020-10-29 23:57:31 1271

原创订单（五）01-商品总价与支付菜单布局——计算属性-计算选中商品的总价

商品总价与支付菜单布局——计算属性-计算选中商品的总价商品总价与支付菜单  <div class="all-price"> 合计：<span>￥{{calcTotal}}</span> <button type="primary" @click='handlePay'>支付</button> </div> </div&gt

2020-10-29 19:52:18 461

原创订单（四）02-订单布局-订单商品列表展示——onLoad()加载时，商品列表页面结算跳转-过滤商品列表 & 订单界面只展示选中商品

订单布局——onLoad()加载时，商品列表页面结算跳转-过滤商品列表 & 订单界面只展示选中商品遍历订单列表数据<div class="list-title">商品列表</div><div class="ware-list"> <div class="ware-item" >  <navigator class="ware-image" url="#"> &

2020-10-29 19:33:27 406

原创订单（四）01-订单页面布局-获取收货地址——从购物车界面-选购结算-缓存数据操作后，订单界面才会有数据

订单页面布局——从购物车界面-选购结算-缓存数据操作后，订单界面才会有数据实例编译订单界面在order文件夹下新建main.less.cart-top { .receive { display: flex; padding: 20rpx; justify-content: space-between; position: relative; padding-right: 50rpx; } .address { padding: 20rpx

2020-10-29 18:33:47 1300

原创订单（三）-跳转到订单确认页面——小程序页面生命周期-页面载入onLoad() 应该在第一次显示页面的时候调用

跳转到订单确认页面第一步：在pages文件夹下新建文件夹订单order文件夹新建入口文件main.jsimport Vue from 'vue'import App from './index'const app = new Vue(App)app.$mount()购物车跳转方式 // 调用接口生成订单 request('my/orders/create', param, 'post', { Authorization: token }

2020-10-29 17:52:47 1605

原创订单（二）-创建订单——wx.request()-发起 HTTPS 网络请求 & request.js文件中增加header参数

创建订单——wx.request()-发起 HTTPS 网络请求 & request.js文件中增加header参数wx.request()-发起 HTTPS 网络请求——https://developers.weixin.qq.com/miniprogram/dev/api/network/request/wx.request.html调用接口第一步：引用请求方法import request from '../../utils/request.js'第二步：增加utils/reques

2020-10-29 16:43:00 1213

原创订单（一）——准备订单数据

订单——准备订单数据准备订单数据在pages/cart/index.vue中 methods: { generateGoodsList () { // 生成订单商品列表数据 let list = [] for (let key in this.cart) { let p = this.cart[key] if (p.checked) { // 选中的商品 list.push({

2020-10-29 16:25:22 439

原创购物车（八）03-去结算-用户登录授权——wx.login-获取登录凭证code& wx.navigateBack-返回上一或多级页面 & POST请求-增加request.js中的method方法

用户登录授权——wx.login()-调用接口获取登录凭证（code） & wx.navigateBack()-返回上一页面或多级页面 & POST请求-增加封装接口文件request.js中的method方法用户授权wx.login()-调用接口获取登录凭证（code）——https://developers.weixin.qq.com/miniprogram/dev/api/open-api/login/wx.login.html微信登录信息结构 <div>

2020-10-29 15:33:49 904

原创购物车（八）02-去结算-用户授权——button属性中的@getuserinfo-点击获取用户授权信息：用户名、性别、图片等

用户授权-button属性中的@getuserinfo-点击获取用户授权信息：用户名、性别、图片等用户授权基本布局open-type=‘getUserInfo’指定该属性，可以使点击按钮时提示授权弹窗@getuserinfo=‘getUserInfo’点击允许后，可以通过该事件函数获取微信授权后的信息<button open-type='getUserInfo' @getuserinfo='handleInfo'>授权登录</button>实例

2020-10-29 14:30:14 712

原创购物车（八）01-去结算——没有登录-提示-跳转授权登录页面 & wx.showToast()-消息提示 & 已经登录-创建订单 & 路由跳转-wx.navigateTo()

去结算——没有登录-提示-跳转授权登录页面 & wx.showToast()-消息提示 & 已经登录-创建订单 & 路由跳转-wx.navigateTo()如果没有选择商品，就提示用户选择商品// 判断用户是否选择了要购买的商品let isSelected = this.orderGoods().length === 0if (isSelected) { // 用户没有选中商品，给一个提示并且终止提交订单 mpvue.showToast({ title

2020-10-28 19:04:59 784

原创购物车（七）-计算商品总价——计算总价-计算属性 & 数据缓存api-wx.setStorageSync()方法

计算商品总价——计算总价-计算属性 & 数据缓存api-wx.setStorageSync()方法通过计算属性计算商品总价allPrice() { // 计算购物车所有商品的总价格 // 单价 X 数量再进行累加操作 let sum = 0 //计算总价 for(let key in this.cart) { let p = this.cart[key] if(p.checked) { // 选中的商品 // 单价 X 数量

2020-10-28 16:23:13 3193

原创【js知识】关于delete操作符用法——对象的属性是数字，那么只能用方括号方式进行删除

关于delete操作符用法——对象的属性是数字，那么只能用方括号方式进行删除 <script type="text/javascript"> var obj = { uname:'lisi', age:12 } console.log(obj) </script>打印1、删除某个属性 <script type="text/javascript"> var obj = {

2020-10-28 15:48:44 382

原创购物车（六）-控制商品数量——控制商品数量加一和商品数量减一，数量为0时删除id

控制商品数量——控制商品数量加一和商品数量减一，数量为0时删除id控制商品数据加一商品数量加一:根据id查询出cart中的对应商品的信息，修改对应的num数量addNum(gid) { // 控制单件商品数量加一： // 获取点击商品的ID，根据id修改对应商品的num数量 var c = JSON.parse(JSON.stringify(this.cart)) c[gid].num = c[gid].num + 1 this.cart = c}控制商品数量减一如果

2020-10-28 15:17:54 2186

原创购物车（五）02-商品的全选控制——点击全选按钮控制选中与否：单选按钮的状态取反

商品的全选控制——点击全选按钮控制选中与否：单选按钮的状态取反控制商品是否全选实现思路：把products中所有商品的checked属性全部修改一遍selectAll () { // 实现所有商品的全部选中或者全部取消 // 控制全选按钮的样式 this.isAll = !this.isAll let products = [...this.products] // 修改所有的商品的选中状态 products.forEach(item => { item.ch

2020-10-28 14:46:46 953

原创购物车（五）01-控制全选按钮的颜色——计算属性-只要有一个没有选中，那么全选按钮就是灰色

控制全选按钮的颜色——计算属性-只要有一个没有选中，那么全选按钮就是灰色实现思路：根据所有商品的选中与否决定全选按钮的颜色isAll() { // 控制全选按钮的颜色：所有的商品都选中，那么全选按钮变红 // 只要有一个没有选中，那么全选按钮就是灰色 let flag = true /* this.cart = { 12312: { goods_price: 100, num: 1, checked: false

2020-10-28 14:20:00 393

原创【vue知识】vue中给data动态添加响应式数据或属性值的方法

vue中给data动态添加响应式数据或属性值的方法文件结构源代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <div id="app"> <div>{{msg.tom}}</div>

2020-10-28 13:52:40 12411

原创购物车（四）-控制单件商品的选中与否——根据id去修改相应商品的checked & 深拷贝一个商品列表cart对象 -对象转字符串，成为单独一份数据；再转为对象

控制单件商品的选中与否——根据id去修改相应商品的checked & 深拷贝一个商品列表cart对象 -对象转字符串，成为单独一份数据；再转为对象控制单件商品的选中与否控制每件商品的选中与否：本质上就是控制每件商品的checked属性值根据id去修改相应商品的checked（保证该值在true和false之家进行切换）singleCheck (gid) { // 控制单件商品的选中与否 // 直接通过对象的引用修改里面的属性值不可以（原因数据是后加的，不具备响应式能力） //

2020-10-28 11:38:07 383

原创购物车（三）02-获取商品列表接口数据——在 v-for 里使用对象-v-for=(value, name) in object & onShow ()方法-页面展示时使用

获取购物车-商品数据列表——在 v-for 里使用对象-v-for="(value, name) in object" & onShow ()方法-页面展示时使用<script>export default { data () { return { //收货地址 address: null, // 购物车数据 cart: null } }, onShow () { // 页面显示时，从本地

2020-10-27 18:49:54 638

原创购物车（三）01-商品列表展示-基本布局

商品列表展示商品列表布局结构<div class="list-title">优购生活馆</div><div class="ware-list"> <div class="ware-item">  <div class="choice-button"> <icon :color="item.check

2020-10-27 18:16:21 396

原创【js知识】es6拼接字符串的``方式——常用于vue计算属性中拼接商品地址

es6拼接字符串的方式在项目中，某些数据是需要后台返给我们，然后我们进行拼接动态展现到页面中的，拼接字符很几种方式，例如str += "<li>" + "<span></span>" + "</li>";或者：str += "</li>\ <span></span>\ </li>";拼接数据, 例如：str += "<li>\ + "<s

2020-10-27 18:14:27 1119

原创购物车（二）-收货地址——计算属性-组合地址-es6中推出的``方式拼接字符串 & wx.chooseAddress()调用

购物车-收货地址——计算属性-组合地址-es6中推出的``方式拼接字符串 & wx.chooseAddress()调用收货地址基本布局<div class="cart-top" v-if='address'> <div class="receive"> <div class="name">收货人: 张三</div> <div class="phonen-number"&g

2020-10-27 17:37:04 473

原创购物车（一）-立即购买——switchTab跳转到菜单指定的路径；navigateTo跳转非菜单指定的路径

商品详情-立即购买——switchTab跳转到菜单指定的路径；navigateTo跳转非菜单指定的路径立即购买先加入购物车，再跳转到购物车页面toBuy () { // 直接购买：添加购物车；跳转到购物车 this.addCart() // switchTab跳转到菜单指定的路径 // navigateTo跳转非菜单指定的路径 mpvue.switchTab({ url: '/pages/cart/main' })}实例加入购物车后添加提示结构

2020-10-27 16:18:20 579

原创商品详情（四）-加入购物车——基本功能：记录商品种类和单类数量 & 初始数量和种类判断和数量累加

加入购物车——基本功能：记录商品种类和单类数量将商品信息添加到本地存储addCart () { // 添加购物车实际上是把商品的信息填充到本地存储中 let cart = mpvue.getStorageSync('mycart') || {} // 把商品的数量默认设置成1 this.detail.num = 1 // 把商品存入购物车：（商品的id：商品的详情） cart[this.detail.goods_id] = this.detail // 添加完成购物车之后

2020-10-26 17:34:29 2497

原创商品详情（三）-基本布局——v-html里面-图组详情介绍是第三方网址链接，会存在xss跨站脚本攻击-里面有恶意脚本，存在安全隐患

商品详情布局——v-html里面-图组详情介绍是第三方网址链接，会存在xss跨站脚本攻击-里面有恶意脚本，存在安全隐患商品的基本信息<div class="goods-info"> <div class="goods-price"> ￥ {{detail.goods_price}} </div> <div class="goods-title"> <h4>{{detail.goods_name}}</h4&

2020-10-26 17:00:14 193

原创商品详情（二）-轮播图布局——swiper实现轮播图效果 & 编译模式-详情页加具体参数id

轮播图布局——swiper实现轮播图效果 & 编译模式-详情页加具体参数id通过小程序swiper实现轮播图效果<swiper indicator-dots> <block v-for="(item, index) in detail.pics" :key="index"> <swiper-item> <image :src="item.pics_big_url" class="slide-image" mode="asp

2020-10-26 16:34:02 765

原创商品详情（一）-实现列表页跳转 & 获取商品详情数据

商品详情获取商品ID通过小程序生命周期函数获取路径参数onLoad (param) { // 获取路径中的参数 this.goodsId = param.goods_id}实例列表页-跳转:url="'/pages/goods_detail/main?gid=' + item.goods_id"  <div class="goods-list"> <navigator :url="'/pages/goo

2020-10-26 16:17:43 6375

原创【js知识】函数防抖和函数节流——限制接口调用频率

限制接口调用频率（函数防抖和函数节流）防止发送请求的频率（防抖）在固定的时间内，没有触发特定的条件，就执行一次任务// 函数防抖（固定时间内没有触发条件，就执行一次）async inputHandle () { clearTimeout(this.timer) this.timer = setTimeout(async () => { let res = await request('goods/qsearch', 'get', { query: this

2020-10-26 15:20:20 1699

原创搜索列表（四）-控制接口调用频率——函数节流-上一个接口调用成功后，才允许发送下一次请

控制接口调用频率——函数节流-上一个接口调用成功后，才允许发送下一次请即：需要保证：上一次请求加载成功后，才能发送下一个请求通过加载标志位控制加载频率（函数节流）上一个接口调用成功后，才允许发送下一次请求async loadData () { // 判断当前接口调用是否完成 if(this.isLoading) { // 表示正在发送请求，尚未获取到后台数据 // 此时应该终止后续请求 return } this.isLoading = true

2020-10-26 15:10:06 422

原创搜索列表（三）-页面滚动到底部触发数据加载 & 列表数据累加操作 & 加载完成临界条件处理-数据的长度

页面滚动到底部触发数据加载 // 监控小程序页面的触底操作，加载下一页数据onReachBottom () { // 滚动条触底的时候触发该方法 this.loadData()}实例 onReachBottom () { // 监控小程序页面的触底操作 if(this.list.length >= this.total) { // 数据加载完成 this.isFinished = false return }

2020-10-26 14:42:47 508

原创搜索列表（二）-获取商品列表接口动态数据 & 加载更多

搜索列表加载更多控制加载更多async loadData () { // 获取列表数据 let res = await request('goods/search', { //参数 query: this.kw, // 页码 pagenum: this.pagenum, pagesize: this.pagesize }) // 如果要处理分页，数据需要进行累加 this.list = [...this.list, ...res.g

2020-10-26 13:38:46 834

原创搜索列表（一）-搜索列表的基本布局

商品列表布局商品列表页搜索条<div class="search"> <div class="search-input"> <icon type="search" size="16" color="#999"/> {{keyword}} </div></div>商品列表Tab布局<div class="tabs"> <div @click='tabHandle(index)' :c.

2020-10-24 01:12:51 1170

原创搜索功能（八）-历史关键字跳转——小程序内置navigator组件方式

搜索历史跳转——历史关键字跳转-小程序内置组件方式通过navigator组件实现跳转，并且携带参数<div class="history-list"> <div :key='index' v-for='(item, index) in keywordHistory' class="history-item"> <navigator :url="'/pages/search_list/main?query=' + item"> {{item}

2020-10-23 20:14:53 245

原创搜索功能（七）-搜索关键字页面跳转——回车触发跳转并通过？方式携带参数

关键字页面跳转——回车触发跳转并通过？方式携带参数控制跳转-通过?携带参数// 输入关键字后，回车触发跳转并携带参数mpvue.navigateTo({ url: '/pages/search_list/main?query=' + this.keyword})添加商品列表页面商品列表页面获取路径参数onLoad (param) { // 参数query表示路径传递过来的参数 this.keyword = param.query}实例回车键触发方法-完整代码

2020-10-23 20:03:31 3624

空空如也

发布文章的题目，从100个字降到30个字了，英文字母多一些就不够用