Hyman-ya-CSDN博客

创建 settle 分支git checkout -b settle1.0 点击结算按钮进行条件判断说明：用户点击了结算按钮之后，需要先后判断1. 是否勾选了要结算的商品、2. 是否选择了收货地址、3. 是否登录。在 my-settle 组件中，为结算按钮绑定点击事件处理函数：<view class="btn-settle" @click="settlement">结算({{checkedCount}})</view>在 m

2021-07-17 19:27:18 2923 1

原创 uni-app 小程序项目四封装 radio组件、NumberBox组件以及数据问题、滑动删除组件、收货地址组件以及授权问题、结算区域

购物车页面1.0 创建购物车页面的编译模式打开微信开发者工具，点击工具栏上的“编译模式”下拉菜单，选择“添加编译模式”：勾选“启动页面的路径”之后，点击“确定”按钮，新增购物车页面的编译模式：1.1 商品列表区域1.11 渲染购物车商品列表的标题区域定义如下的 UI 结构：<view class="cart-title">  <uni-icons type="sho

2021-07-16 20:04:55 1538 5

原创 uni-app 小程序项目三 1. 商品列表、过滤器、封装商品item组件、上拉加载、节流阀、下拉刷新、2. 商品详情、轮播图、商品价格闪烁问题 3.加入购物车、vuex、持久化存储、mixiins

1.0 创建 goodslist 分支1.1 定义请求参数对象为了方便发起请求获取商品列表的数据，我们要根据接口的要求，事先定义一个请求参数对象：data() { return { // 请求参数对象 queryObj: { // 查询关键词 query: '', // 商品分类Id cid: '', // 页码值 pagenum: 1, // 每页显示多少条数据 pagesize:

2021-07-15 16:55:05 1545

原创 uni-app 小程序项目二分类页面、滚动条、自定义搜索组件、使用自定义组件的props和emit、吸顶效果、修改uni组件的默认效果、防抖处理、搜索历史、搜索历史记录存储到本地以及清空

1.0 分类（先建立分支）运行如下的命令，基于 master 分支在本地创建 cate 子分支，用来开发分类页面相关的功能：git checkout -b cate1.1 渲染分类页面的基本结构1. 定义页面结构如下：<template> <view> <view class="scroll-view-container">  <scroll-view class="lef

2021-07-12 18:54:47 1024

原创 uni-app 小程序项目一起步构建项目、tabBar、配置网络请求（使用npm包）、首页（轮播图、分页区域、楼层区）

1.0 uni-app 简介uni-app 是一个使用 Vue.js 开发所有前端应用的框架。开发者编写一套代码，可发布到 iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。详细的 uni-app 官方文档，请翻阅 https://uniapp.dcloud.net.cn/1.1 开发工具（ HBuilderX ）uni-app 官方推荐使用 HBuilderX 来开发 uni-app 类型的项目。主要好处：模板丰富完善的智能提示一

2021-07-11 18:09:38 1538 1

原创微信小程序五 npm 包、安装 vant组件、promise组件、全局数据共享、分包！！！、自定义 tabBar 案例

1.0 使用 npm 包1.1 小程序对 npm 的支持与限制目前，小程序中已经支持使用 npm 安装第三方包，从而来提高小程序的开发效率。但是，在小程序中使用npm 包有如下 3 个限制：不支持依赖于 Node.js 内置库的包不支持依赖于浏览器内置对象的包不支持依赖于 C++ 插件的包总结：虽然 npm 上的包有千千万，但是能供小程序使用的包却“为数不多”。1.2 Vant WeappVant Weapp 是有赞前端团队开源的一套小程序 UI 组件库，助力开发者快速搭建小

2021-07-09 18:36:44 664

原创微信小程序四组件的运用组件的创建和引用、组件的样式、组件的数据与方法和属性、数据监听器（及他的案例）、纯数据字段、组件和组件所在页面的生命周期、插槽、父子组件之间同、behaviors

1.0 该次学习的总结能够创建并引用组件全局引用、局部引用、usingComponents能够知道如何修改组件的样式隔离选项options -> styleIsolation（ isolated, apply-shared, shared）能够知道如何定义和使用数据监听器observers能够知道如何定义和使用纯数据字段options -> pureDataPattern能够知道实现组件父子通信有哪3种方式属性绑定、事件绑定、this.selectComp

2021-07-07 23:48:10 345

原创微信小程序三声明式导航、编程式导航及导航传参、下拉刷新、上拉触底事件、自定义编译模式、应用和页面生命周期函数、内嵌和外联的 WXS 脚本、案例

1.0 页面导航1. 什么是页面导航页面导航指的是页面之间的相互跳转。例如，浏览器中实现页面导航的方式有如下两种：① <a> 链接② location.href1.1 小程序中实现页面导航的两种方式声明式导航在页面上声明一个导航组件通过点击组件实现页面跳转编程式导航调用小程序的导航 API，实现页面的跳转1.2 页面导航 - 声明式导航1. 导航到 tabBar 页面tabBar 页面指的是被配置为 tabBar 的页面。在使用组件跳转到指定的 tab

2021-07-06 19:27:36 1725 2

原创微信小程序二 WXML 模板语法、 WXSS 模板样式、全局配置、页面配置、网络数据请求、小案例

1.0 WXML 模板语法1.1 数据绑定的基本原则在 data 中定义数据在 WXML 中使用数据1.12 在 data 中定义页面的数据在页面对应的 .js 文件中，把数据定义到 data 对象中即可：Page({ data: { // 字符串类型的数据 info: 'init data', // 数组类型的数据 msgList: [{msg: 'hello'},{msg: 'world'}] }})1.13 Mustache 语法的格式把data中的数据绑定

2021-07-05 19:23:53 1057 1

原创微信小程序一小程序的创建、宿主环境、常用组件、开发上线等

小程序简介1. 小程序与普通网页开发的区别运行环境不同网页运行在浏览器环境中小程序运行在微信环境中API 不同由于运行环境的不同，所以小程序中，无法调用 DOM 和 BOM 的 API。但是，小程序中可以调用微信环境提供的各种 API，例如：地理定位、扫码、支付开发模式不同网页的开发模式：浏览器 + 代码编辑器小程序有自己的一套标准开发模式：申请小程序开发账号、安装小程序开发者工具、创建和配置小程序项目2. 注册小程序开发帐号（获取小程序的 AppID）点击注册按钮

2021-07-02 20:07:35 1054

原创 Vue进阶篇三服务器端渲染同构的本质、 SSR 和 CSR

1 - 什么是服务器端渲染？server side render 前端页面的产生是由服务器端生成的，我们就称之为服务端渲染1.1 新建server文件夹server1.2 生成一个node项目npm init -y1.3 安装expressexpress 官方文档npm install express --save1.4 服务端渲染小案例app.jsconst express = require('express')const app = express()const

2021-06-30 18:35:50 757 1

原创 Vue进阶篇二 Vue组件开发 .native 修饰符、Editor第三方编辑器

vue组件开发1. 整体目标了解组件开发的整体流程掌握组件事件和标签事件的区别掌握在组件上使用v-model的方式2. Button组件开发2.1 确定组件API属性属性名说明类型默认值type设置按钮类型，可选值为 primary danger 或者不设Stringdefaultsize设置按钮大小，可选值为 small large 或者不设Stringdefault事件事件名称说明回调参数click按钮点击事

2021-06-30 17:22:29 576 1

原创 Vue进阶篇一 Object.defineProperty方法（es6的）、数据反映到视图、视图反映到数据（原生的v-model）、发布订阅模式优化架构

总结<!-- 1. Object.defineProperty ES6提供的原生方法 Object.defineProperty(data, 'name', { // 访问data.name属性的时候会自动调用并且get函数的返回值就是你通过data.name拿到的值 get(){ return '柴柴老师' }, // 设置一个对象属性的时候自动调用的函数会把设置的最新的值当成实参传入set

2021-06-28 23:26:51 409 2

原创 Vue 移动端实战九编辑用户资料、修改呢称、生日、性别、头像、以及头像的剪裁器依赖使用、Content-Type 要求的 multipart/form-data 格式

编辑用户资料1.0 创建组件并配置路由1、创建 views/user/index.vue<template> <div> <van-nav-bar title="个人信息" left-arrow right-text="保存" /> <van-cell-group> <van-cell title="头像" is-link> <van-image round

2021-06-26 17:33:31 1674

原创 Vue 移动端实战八文章评论评论列表组件、点赞、发布评论、评论回复等、Vue依赖注入方法、解决列表重复数据问题和不重新获取数据问题

1.0 展示文章评论列表1.1 准备组件为了更好的开发和维护，这里我们把文章评论单独封装到一个组件中来处理。1、创建 src/views/article/components/article-comment.vue<template> <div class="article-comments">  <van-list v-model="loading" :finished="finishe

2021-06-25 20:19:58 3342 3

原创 Vue 移动端实战七文章详情、关注用户、点赞、收藏等公共组、后端返回数据中的大数字问题、图片点击预览组件使用

1.0 文章详情1.1 创建组件并配置路由1、创建 views/article/index.vue 组件<template> <div class="article-container">文章详情</div></template><script>export default { name: 'ArticleIndex', components: {}, props: { // 通过路由参解耦的形式

2021-06-20 15:19:14 871

原创 Vue 移动端实战六文章搜索关键字高亮的技巧、本地数据的储存和调用、防抖插件的调用

文章搜索1.0 创建组件并配置路由1、创建 src/views/search/index.vue<template> <div class="search-container">搜索页面</div></template><script> export default { name: "SearchPage", components: {}, props: {}, data() { re

2021-06-18 14:20:39 338 1

原创 Vue 移动端实战五频道编辑组件的调用

首页—频道编辑1.0 处理页面弹出层Vant 中内置了 Popup 弹出层组件。1、在 data中添加一个数据用来控制弹层的显示和隐藏data () { return { ... isChannelEditShow: true // 这里我们先设置为 true 就能看到弹窗的页面了 }}2、然后在首页模板中的频道列表后面添加弹出层组件<van-popup class="edit-channel-popup" v-

2021-06-17 16:07:04 214 1

原创 Vue 移动端实战四首页-文章列表头部导航、tab标签、list列表组件、dayjs插件、处理第三方图片资源问题

首页—文章列表max-width: unset; // 取消使用flex： unser // 取消使用flex/deep/ 深度作用操作符！！！！！对于 scoped 为了影响里面所有的后代元素flex-shrink: 1；默认是 1 ，参与 flex布局的计算，改为 0 就是不参与 flex的布局计算vh 个 vw 单位重点！！！！！！！！！！！！！！！！1.0 页面布局1.1 头部导航栏1、使用导航栏组件2、在导航栏组件中插入按钮文本图标3、样式

2021-06-15 23:10:17 490

原创 Vue 移动端实战三个人中心优化 token

1.0 个人中心1.1 TabBar 处理通过分析页面，我们可以看到，首页、问答、视频、我的都使用的是同一个底部标签栏，我们没必要在每个页面中都写一个，所以为了通用方便，我们可以使用 Vue Router 的嵌套路由来处理。父路由：一个空页面，包含一个 tabbar，中间留子路由出口子路由首页问答视频我的一、创建 tabbar 组件并配置路由这里主要使用到的 Vant 组件：[Tabbar 标签栏](创建 src/views/layout/index.vue&l

2021-06-12 16:30:53 988

原创 Vue 移动端实战二登录和注册定时器的用法、Token过期问题（处理刷新的token和自动的token）

1.0 登录注册目标能实现登录页面的布局能实现基本登录功能能掌握 Vant 中 Toast 提示组件的使用能理解 API 请求模块的封装能理解发送验证码的实现思路能理解 Vant Form 实现表单验证的使用2.0 准备2.1 创建组件并配置路由1.创建 src/views/login/index.vue 并写入以下内容<template> <div class="login-container">登录页面</div></tem

2021-06-11 20:41:41 950

原创 Vue 移动端实战一项目初始化创建项目、git版本管理、调整初始结构、导入图标素材、引入vant、移动端 rem适配、.postcssr配置介绍、封装axios

项目初始化目标能使用 Vue CLI 创建项目了解 Vant 组件库的导入方式掌握制作使用字体图标的方式掌握如何在 Vue 项目中处理 REM 适配理解 axios 请求模块的封装1.0 使用 Vue CLI 创建项目如果你还没有安装 VueCLI，请执行下面的命令安装或是升级npm install --global @vue/cli在命令行中输入以下命令创建 Vue 项目：vue create toutiao-m （-m 表示的移动端）Vue CLI v4

2021-06-11 14:20:06 283

空空如也

空空如也