04 2024 档案
摘要：uni-app（神领物流）项目实战 学习目标： 能够独立完成回交付、回车登记的功能 能够自定义回车登记交互组件 能够使用 Pinia 实现组件间数据共享 能够打包发布 H5、小程序和 App 项目应用 能够配置App的图标及启动屏幕 一、【神领物流】任务 1、交付 司机在将货物运达目的地后会与接货人
阅读全文
摘要：uni-app（神领物流）项目实战 学习目标： 能够对 Pinia 进行初始化操作 掌握创建 Store 及数据操作的步骤 能够对 Pinia 数据进行持久化的处理 掌握 uniForm 表单验证的使用方法 能够根据业务需求配置请求/响应拦截器 一、【神领物流】项目启动 本节的主要任务是获取项目的静
阅读全文
摘要：一、uni-app 基础知识 uni-app 是组合了 Vue 和微信小程序的相关技术知识，要求大家同时俱备 Vue 和原生小程序的开发基础。 1、全局文件 在小程序中有全局样式、全局配置等全局性的设置，为此在 uni-app 中也有一些与之相对应的全局性的文件。 uni.scss uni-app
阅读全文
该文被密码保护。
摘要：介绍 什么是Pinia Pinia 是 Vue 的专属的最新状态管理库 ，是 Vuex 状态管理工具的替代品 手动添加Pinia到Vue项目 1. 使用 Vite 创建一个空的TS + Vue3项目 1 npm create vite@latest vue-pinia-ts -- --templat
阅读全文
摘要：前置 基于Vite创建Vue3 + TS环境 vite官方文档：https://cn.vitejs.dev/guide/ vite除了支持基础阶段的纯TS环境之外，还支持 Vue + TS开发环境的快速创建, 命令如下： 1 npm create vite@latest vue-ts-project
阅读全文
摘要：一、介绍 TypeScript 是具有类型语法的 JavaScript，是一门强类型的编程语言 带来的好处 ① 静态类型检查，提前发现代码错误 ② 良好的代码提示，提升开发效率 什么时候用 以下是来自社区的一些建议： 1. 你做的是一个大型的应用吗？ 2. 是否是团队协作开发模式？ 多一句没有，少一
阅读全文
该文被密码保护。
该文被密码保护。
摘要：腾讯定位服务 官网：https://lbs.qq.com 位置服务（LBS）是基于用户的位置来提供服务的技术，通过要配合第三方的服务来实现，如腾讯地图、高德地图、百度地图等，享+项目采用的是腾讯的位置服务。 申请使用腾讯位置服务需要按如下步骤操作： 注册账号 创建应用 生成 key 小程序管理后台添
阅读全文
该文被密码保护。
摘要：微信小程序授权流程 以保存图片到本地为例，保存图片之前先进行授权校验 1 /** 2 * 授权设置，点击保存图片的时候，触发该事件，然后获取用户的授权信息，判断是否存在某项授权，不存在则提示，跳转到设置页面，否则直接执行 3 */ 4 authSetting () { 5 wx.getSetting
阅读全文
摘要：事件处理 事件对象 前面已经介绍过小程序事件监听的语法：bind:事件类型=事件回调，但是小程序的事件回调不支持传参数，因此要将模板中的数据传递到事件回调中就必须要通过事件对象来实现。 小程序事件回调函数的第 1 个参数即为事件对象，事件对象中包括了一些有用的信息： index.wxml 1 <!-
阅读全文
摘要：内置API 内置 API 实际上就是小程序提供的一系列的方法，这些方法都封装在了全局对象 wx 下，调用这些方法实现小程序提供的各种功能，如网络请求、本地存储、拍照、录音等。 ① 网络请求 官方文档：https://developers.weixin.qq.com/miniprogram/dev/a
阅读全文
摘要：WXML语法官方文档：https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/ 数据绑定 插值 {{ }} 语法： • 内容绑定 • 属性绑定 1 <!-- 花括号{{}} 和 引号 "" 之间 不可以留多余的空格字符串 -->
阅读全文
摘要：获取昵称和头像 用户昵称 input 组件的 type 属性设置为 nickname 监听 input 组件的 blur 事件（在开发者工具中需要失去焦点两次） 事件回调中通过事件对象 ev.detail 获取用户昵称 用户头像 button 组件的 open-type 属性设置为 chooseAv
阅读全文
摘要：自定义组件 小程序中内置了许多的组件供开发者使用，不仅如此开发者还可根据需要自定义组件。 基本语法 创建自定义组件 通过小程序开发者工具可以快速创建组件，新建Component。 创建好的自定义组件从结构上看与页面是完全一致的，由 .wxml、.wxss、.js、.json 构成，也有两点重要的区
阅读全文
摘要：一、分包加载 官方文档：https://developers.weixin.qq.com/miniprogram/dev/framework/subpackages.html 分包加载是优化小程序加载速度的一种手段。 1.1 为什么？ 微信平台对小程序单个包的代码体积限制为 2M，超过 2M 的
阅读全文
摘要：生命周期 生命周期是一些名称固定自动执行的函数。 页面生命周期 文档：https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html#%E5%8F%82%E6%95%B0 onLoad 在页面加载完成时执行，只会执行
阅读全文
摘要：① navigator 文档：https://developers.weixin.qq.com/miniprogram/dev/component/navigator.html 功能描述 页面链接。 navigator 在 Skyline 下视为文本节点，只能嵌套文本节点（如 text），不能嵌套
阅读全文
摘要：一、小程序 ① 项目结构介绍 ② 页面组成部分 WXML与HTML WXML（WeiXin Markup Language）是小程序框架设计的一套标签语言，用来构建小程序页面的结构，其作 用类似于网页开发中的 HTML。 WXML 和 HTML 的区别 ① 标签名称不同 HTML （div, spa
阅读全文
摘要：小程序的优势： 学习内容： 两部分内容： 1、组件、配置、生命周期、事件处理、数据渲染、API、自定义组件、Vant UI、分包加载等 2、通告管理、用户管理、房屋管理、报修管理、访客管理等各个功能模块 一、注册小程序账号 微信公众平台 1、在微信公众平台注册小程序账号，账号类型选择【小程序】，然后
阅读全文
该文被密码保护。
摘要：常用依赖 vue脚手架 1 npm i @vue/cli -g 或 yarn global add @vue/cli vue/cli-service 1 npm i -D @vue/cli-service axios 1 npm install axios 或 cdn方式：<script src="
阅读全文
摘要：1、样式穿透 在使用elementUI的时候，el-card提供了插槽，可以在使用的时候根据具名插槽指定自己想要的插槽内容，但是当要修改插槽内样式的时候，直接通过类名定位改样式，不好使，此时可以通过样式穿透来实现修改样式 1 <template> 2 <div class="login-page">
阅读全文
摘要：css变量 1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 7 <meta name="v
阅读全文
摘要：1、介绍 Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库 2、安装 1 npm i element-ui -S 3、引入依赖 全局引入： main.js引入依赖 1 import Vue from 'vue'; 2 import ElementUI from
阅读全文
摘要：1、组件下载 vue 与vuex的版本对应关系： Vue 2 匹配的 Vuex 3 Vue 3 匹配的 Vuex 4 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。 官方网站：htt
阅读全文
摘要：一、基本使用 1、介绍 Vant 是一个轻量、可靠的移动端组件库，于 2017 年开源。 目前 Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本，并由社区团队维护 React 版本和支付宝小程序版本。 2、安装 1 # Vue 3 项目，安装最新版 Vant： 2 npm i
阅读全文
摘要：搭建vue3项目 前置条件 - 已安装18.0或更高版本的Node.js 1、执行如下命令，这一指令将会安装并执行 create-vue，create-vue是Vue官方新的脚手架工具，底层切换到了 vite （下一代前端工具链），为开发提供极速响应 1 npm init vue@latest 或者
阅读全文
摘要：一、ESLint 在vscode插件中搜索ESLint，https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint 什么是 ESLint 官方概念：ESLint 是可组装的 JavaScript 和 JSX 检
阅读全文
摘要：1、默认插槽 默认插槽对应的插槽的名字为default 1、组件目录下 components/MyDialog.vue 1 <template> 2 <div class="dialog"> 3 <div class="dialog-header"> 4 <h3>友情提示</h3> 5 <span
阅读全文
摘要：一、路由 单页应用程序: SPA - Single Page Application VueRouter 的 介绍 作用：修改地址栏路径时，切换显示匹配的组件 说明：Vue 官方的一个路由插件，是一个第三方包 官网：https://v3.router.vuejs.org/zh/ vue2 对应 ro
阅读全文
摘要：一、组件的三大组成部分(结构/样式/逻辑) 组件的三大组成部分 组件的样式冲突scoped 1、components目录下 components/BaseOne.vue 1 <template> 2 <div class="base-one"> 3 BaseOne 4 </div> 5 </temp
阅读全文
摘要：工程化开发 脚手架Vue CLI 基本介绍： Vue CLI 是 Vue 官方提供的一个全局命令工具。 可以帮助我们快速创建一个开发Vue 项目的标准化基础架子。【集成了webpack配置】 好处： 1. 开箱即用，零配置 2. 内置babel 等工具 3. 标准化 修改npm源： npm conf
阅读全文
摘要：生命周期 ① Vue 生命周期和生命周期的四个阶段 ② Vue 生命周期函数（钩子函数） 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatibl
阅读全文
摘要：一、computed 计算属性 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta
阅读全文
摘要：Vue 指令 ① v-html 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta
阅读全文
摘要：① 概念 VUE官网：https://cn.vuejs.org/ ② 创建Vue实例 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible"
阅读全文
该文被密码保护。
该文被密码保护。
该文被密码保护。
该文被密码保护。
