项目-小程序-mpvue框架
viceen
这个作者很懒,什么都没留下…
展开
-
【组件-工具】小程序ui组件Color UI快速入门
小程序ui组件Color UI快速入门什么是ColorUIColorUI是UI组件库!不是一个Js框架。相比于同类小程序组件库,ColorUI更注重于视觉交互,样式更加华丽精美,使用方法简单,只需将ColorUI的代码片段复制到你的小程序中即可,还方便自己定制。官网相对于其他框架,有文档,该组件库没有文档说明,使用什么直接在demo里粘贴就好了,附送下载链接官方网站:https://www.color-ui.com/GitHub:https://github.com/weilanwl/Co原创 2020-11-06 16:15:22 · 3170 阅读 · 0 评论 -
微信小程序商城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 · 2214 阅读 · 1 评论 -
小程序发布流程-详细版
小程序发布流程需要使用自己的APPID点击小程序开发工具右上角【上传】按钮上传成功后,小程序会进入到管理后台的【开发版本】列表点击提交审核按钮,那么会进入到【审核版本】列表如果腾讯审核通过,那么就会进行入到最终的【线上版本】列表,只有进入到这个列表后,该小程序才可以被微信用户搜索到提交审核之前也可以将小程序设置为体验版本,需要添加体验成员,添加之后,这些微信账号就可以直接扫码二维码打开小程序进行测试码打开小程序进行测试如果小程序需要调用后台接口,那么需要进行域名的授权:开发->原创 2020-10-30 01:16:18 · 1035 阅读 · 0 评论 -
个人中心——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 · 590 阅读 · 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 · 1272 阅读 · 0 评论 -
订单(五)01-商品总价与支付菜单布局——计算属性-计算选中商品的总价
商品总价与支付菜单布局——计算属性-计算选中商品的总价商品总价与支付菜单 <!-- 商品总价和支付按钮 --> <div class="all-price"> 合计:<span>¥{{calcTotal}}</span> <button type="primary" @click='handlePay'>支付</button> </div> </div>原创 2020-10-29 19:52:18 · 461 阅读 · 0 评论 -
订单(四)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 阅读 · 0 评论 -
订单(四)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 · 1301 阅读 · 0 评论 -
订单(三)-跳转到订单确认页面——小程序页面生命周期-页面载入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 · 1606 阅读 · 0 评论 -
订单(二)-创建订单——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 阅读 · 0 评论 -
订单(一)——准备订单数据
订单——准备订单数据准备订单数据在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 阅读 · 0 评论 -
购物车(八)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 阅读 · 0 评论 -
购物车(八)02-去结算-用户授权——button属性中的@getuserinfo-点击获取用户授权信息:用户名、性别、图片等
用户授权-button属性中的@getuserinfo-点击获取用户授权信息:用户名、性别、图片等用户授权基本布局open-type=‘getUserInfo’指定该属性,可以使点击按钮时提示授权弹窗@getuserinfo=‘getUserInfo’点击允许后,可以通过该事件函数获取微信授权后的信息<button open-type='getUserInfo' @getuserinfo='handleInfo'>授权登录</button>实例原创 2020-10-29 14:30:14 · 712 阅读 · 0 评论 -
购物车(八)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 · 786 阅读 · 0 评论 -
购物车(七)-计算商品总价——计算总价-计算属性 & 数据缓存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 · 3198 阅读 · 0 评论 -
【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 评论 -
购物车(六)-控制商品数量——控制商品数量加一和商品数量减一,数量为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 · 2187 阅读 · 0 评论 -
购物车(五)02-商品的全选控制——点击全选按钮控制选中与否:单选按钮的状态取反
商品的全选控制——点击全选按钮控制选中与否:单选按钮的状态取反控制商品是否全选实现思路:把products中所有商品的checked属性全部修改一遍selectAll () { // 实现所有商品的全部选中或者全部取消 // 控制全选按钮的样式 this.isAll = !this.isAll let products = [...this.products] // 修改所有的商品的选中状态 products.forEach(item => { item.ch原创 2020-10-28 14:46:46 · 954 阅读 · 0 评论 -
购物车(五)01-控制全选按钮的颜色——计算属性-只要有一个没有选中,那么全选按钮就是灰色
控制全选按钮的颜色——计算属性-只要有一个没有选中,那么全选按钮就是灰色实现思路:根据所有商品的选中与否决定全选按钮的颜色isAll() { // 控制全选按钮的颜色:所有的商品都选中,那么全选按钮变红 // 只要有一个没有选中,那么全选按钮就是灰色 let flag = true /* this.cart = { 12312: { goods_price: 100, num: 1, checked: false原创 2020-10-28 14:20:00 · 394 阅读 · 0 评论 -
【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 · 12418 阅读 · 0 评论 -
购物车(四)-控制单件商品的选中与否——根据id去修改相应商品的checked & 深拷贝一个商品列表cart对象 -对象转字符串,成为单独一份数据;再转为对象
控制单件商品的选中与否——根据id去修改相应商品的checked & 深拷贝一个商品列表cart对象 -对象转字符串,成为单独一份数据;再转为对象控制单件商品的选中与否控制每件商品的选中与否:本质上就是控制每件商品的checked属性值根据id去修改相应商品的checked(保证该值在true和false之家进行切换)singleCheck (gid) { // 控制单件商品的选中与否 // 直接通过对象的引用修改里面的属性值不可以(原因数据是后加的,不具备响应式能力) //原创 2020-10-28 11:38:07 · 384 阅读 · 0 评论 -
购物车(三)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 · 640 阅读 · 0 评论 -
购物车(三)01-商品列表展示-基本布局
商品列表展示商品列表布局结构<div class="list-title">优购生活馆</div><!-- 商品列表信息 --><div class="ware-list"> <div class="ware-item"> <!-- 左侧按钮checkbox --> <div class="choice-button"> <icon :color="item.check原创 2020-10-27 18:16:21 · 396 阅读 · 0 评论 -
购物车(二)-收货地址——计算属性-组合地址-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 阅读 · 0 评论 -
购物车(一)-立即购买——switchTab跳转到菜单指定的路径;navigateTo跳转非菜单指定的路径
商品详情-立即购买——switchTab跳转到菜单指定的路径;navigateTo跳转非菜单指定的路径立即购买先加入购物车,再跳转到购物车页面toBuy () { // 直接购买:添加购物车;跳转到购物车 this.addCart() // switchTab跳转到菜单指定的路径 // navigateTo跳转非菜单指定的路径 mpvue.switchTab({ url: '/pages/cart/main' })}实例加入购物车后添加提示结构原创 2020-10-27 16:18:20 · 580 阅读 · 0 评论 -
商品详情(四)-加入购物车——基本功能:记录商品种类和单类数量 & 初始数量和种类判断 和 数量累加
加入购物车——基本功能:记录商品种类和单类数量将商品信息添加到本地存储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 · 2501 阅读 · 0 评论 -
商品详情(三)-基本布局——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 阅读 · 0 评论 -
商品详情(二)-轮播图布局——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 · 766 阅读 · 0 评论 -
商品详情(一)-实现列表页跳转 & 获取商品详情数据
商品详情获取商品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 · 6380 阅读 · 0 评论 -
【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 · 1704 阅读 · 0 评论 -
搜索列表(四)-控制接口调用频率——函数节流-上一个接口调用成功后,才允许发送下一次请
控制接口调用频率——函数节流-上一个接口调用成功后,才允许发送下一次请即:需要保证:上一次请求加载成功后,才能发送下一个请求通过加载标志位控制加载频率(函数节流)上一个接口调用成功后,才允许发送下一次请求async loadData () { // 判断当前接口调用是否完成 if(this.isLoading) { // 表示正在发送请求,尚未获取到后台数据 // 此时应该终止后续请求 return } this.isLoading = true原创 2020-10-26 15:10:06 · 422 阅读 · 0 评论 -
搜索列表(三)-页面滚动到底部触发数据加载 & 列表数据累加操作 & 加载完成临界条件处理-数据的长度
页面滚动到底部触发数据加载 // 监控小程序页面的触底操作,加载下一页数据onReachBottom () { // 滚动条触底的时候触发该方法 this.loadData()}实例 onReachBottom () { // 监控小程序页面的触底操作 if(this.list.length >= this.total) { // 数据加载完成 this.isFinished = false return }原创 2020-10-26 14:42:47 · 509 阅读 · 0 评论 -
搜索列表(二)-获取商品列表接口动态数据 & 加载更多
搜索列表加载更多控制加载更多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 · 835 阅读 · 0 评论 -
搜索列表(一)-搜索列表的基本布局
商品列表布局商品列表页搜索条<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 · 1171 阅读 · 0 评论 -
搜索功能(八)-历史关键字跳转——小程序内置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 · 246 阅读 · 0 评论 -
搜索功能(七)-搜索关键字页面跳转——回车触发跳转并通过?方式携带参数
关键字页面跳转——回车触发跳转并通过?方式携带参数控制跳转-通过?携带参数// 输入关键字后,回车触发跳转并携带参数mpvue.navigateTo({ url: '/pages/search_list/main?query=' + this.keyword})添加商品列表页面商品列表页面获取路径参数onLoad (param) { // 参数query表示路径传递过来的参数 this.keyword = param.query}实例回车键触发方法-完整代码原创 2020-10-23 20:03:31 · 3627 阅读 · 0 评论 -
搜索功能(六)-清空历史关键字
清空历史关键字清空本地存储个历史记录,clearHistory () { // 清空搜索关键字的历史信息 // 清空的是本地存储的数据(清空本地存储的数据并不会影响data中的数据) mpvue.clearStorageSync() // 清空的是data中的数据 this.keywordHistory = []}实例图例第一步:给图标按钮绑定事件 @click='handleClear' <!-- 搜索历史标题 --> <div c原创 2020-10-23 19:23:06 · 369 阅读 · 0 评论 -
搜索功能(五)03-搜索关键字历史重复记录-数组去重操作——es6 set类数组-数据结构-数组去重 & 三个点(...)方法-对象的延展操作-拆解数组
数组去重操作——es6 set类数组-数据结构——去重 & 三个点(…)方法——对象的延展操作**情况:**输入历史,存在重复记录情况 // 数组去重操作 this.hkw = [...new Set(this.hkw)]完整处理逻辑代码 toSearch () { // 回车时触发,跳转到商品列表页面并且缓存关键字 // console.log('enter') // 把搜索历史关键字放到数组中 this.hkw.uns原创 2020-10-23 15:48:30 · 288 阅读 · 0 评论 -
搜索功能(五)02-搜索历史关键字缓存 & @confirm=‘toSearch‘-enter回车键监控 & unshift方法-将新项添加到数组起始位置 & push方法-向数组的末尾添加元素
历史关键字渲染——搜索历史关键字缓存 & @confirm=‘toSearch’-enter键回车监控 & unshift()方法-将新项添加到数组起始位置 & push()方法-向数组的末尾添加元素缓存关键字-实例给输入框绑定回车监控事件<!-- 输入框 --> <div class="search-input"> <icon type='search' size='16'/> <原创 2020-10-23 14:15:12 · 328 阅读 · 0 评论 -
搜索功能(五)01-关键字历史存储——搜索历史基本布局
关键字历史存储——搜索历史基本布局按回车键时保存关键字到本地存储更新页面数据confirmHandle () { // 当回车的时候,记录关键字到本地存储 this.keywordHistory.unshift(this.keyword) // 如何进行数组去重 this.keywordHistory = [...new Set(this.keywordHistory)] // 把最新的数据覆盖到本地存储中 mpvue.setStorageSync('keyword', k原创 2020-10-23 01:45:31 · 451 阅读 · 0 评论