组件的创建与引用创建组件
在项目的根目录,创建components 文件夹
在新建components的文件夹 下新建组件文件夹,鼠标右键组件文件夹,点击新建component
之后组件文件夹会自动生成四个文件
局部引入组件在页面的 .json 配置 中引入组件
{
"usingComponents":{
"my-test1":"/components/test/test"
}
}
全局引入组件在app.json全局配置文件中引入组件
"usingComponents":{
"my-test1":"/components/test2/test2"
}
区别
如果某组件只在特定的页面中被用到,建议进行“局部引用”
如果某组件在多个页面中经常被用到,建议进行“全局引用”
组件的 .json 文件中需要声明 “component”: true 属性
组件的 .js 文件中调用的是 Com ...
在小程序使用vant
小程序初始是没有packback.json文件
使用
npm init --y
// 初始化packback.json
安装 vant组件库
# 通过 npm 安装
npm i @vant/weapp -S --production
# 通过 yarn 安装
yarn add @vant/weapp --production
# 安装 0.x 版本
npm i vant-weapp -S --production
构建npm
删除app.json 中的 “style”:”v2”
使用 API Promise 化
首先下载Promise 包
npm i --save miniprogram-api-promise
构建npm,先前构建过最好先删掉
在全局js中引入
// 按需导入
import { promisifyAll } from 'miniprogram-api-promose'
//声明一个常量,为一个空对象
//并在wx顶级对象下添加一个属性p也指向该空对象,使所有成员都可以使用该对象 ...
1.小程序简介
1.1.小程序与普通网页开发的区别运行环境的不同网页运行在浏览器小程序运行在微信环境
API 不同小程序无法调用 DOM 和 BOM 的 API但是小程序可以调用微信环境提供的一些 API地理定位扫码支付
开发模式不同网页的开发模式: 浏览器+代码编辑器小程序开发模式申请小程序开发账号安装小程序的开发者工具创建和配置小程序项目
2小程序代码的构成2.1.项目的基本组成结构
pages 用来存放所有小程序的页面,每个页面都是一个单独的文件夹
utils 用来存放工具性质的模块
app.js 整个小程序项目的入口文件
app.json 小程序项目的全局配置文件
app.wxss 小程序项目的全局样式文件
project.config.json 项目的配置文件
sitemap.json 用来配置小程序及其页面是否允许被微信索引
2.2.小程序页面的组成部分小程序官方建议把所有小程序的页面,都存放在 pages 目录中,以单独的文件夹存在,
每个页面由 4 个基本文件组成,它们分别是: .js 文件(页面的脚本文件,存放页面的数据、事件处理函数等) .json 文件( ...
1.WXML模板语法1.1数据绑定
在data中定义数据
在wxml中使用数据
在data中定义页面的数据
Page({
data:{
info:"Holle world",
## 如果是短横线声明数据,需要使用双引号包裹
"user-name": "xxx",
imgSrc:"xxxxxx",
## 生成10以内的随机数
randomNum:Math.random()*10
}
})
2. 在wxml中使用数据
<view>{{ info }}</view>
<image src="{{imgSrc}}"> </image>
<view> {{randomNum >= 5 ? '数字大于或等于5': ...
页面导航声明式导航
跳转到tabbar页面
url 表示要跳转的页面的地址,必须以 / 开头
open-type 表示跳转的方式,必须为 switchTab
导航到非 tabBar 页面da’w’sa’w’d’sa’w’sa’w’d’sa’w
url 表示要跳转的页面的地址,必须以 / 开头
open-type 表示跳转的方式,必须为 navigate
为了方便, 非 tabBar 页码的跳转时 open-type 也可以省略
后退导航
open-type 的值必须是 navigateBack ,表示要进行后退导航
delta 的值必须是数字,表示要后退的层级
状态管理Pinia
Pinia是Vue的存储库,它允许跨组件/ 页面共享状态
pinia中的store是模块化的,根据不同的状态划分不同的模块
创建ProductStore 用于存储商品列表状态
// src/stores/ProductStore.js
import { defineStore } from "pinia"
import products from "@/data/products.json"
export const useProductStore = defineStore("ProductStore",{
state: () => {
return {
products,
test:"test"
}
}
})
// src/App.vue
import {useProductStore} from "./stores/ ...
在 vue 中使用 JSX
目标:学习在 vue 中使用 jsx 语法的方式
认识函数式组件和 JSX
学习 JSX 语法规则和函数式组件的使用方式
① 认识函数式组件和 JSX
React 使用函数式组件和 JSX 构建用户界面,Vue 目前也对函数式组件和 JSX 语法进行了支持。
TSX// 返回 JSX 的函数就是函数式组件
export const LearnJsx = () => {}
TSX// JSX 语法
const jsx = <div>Hello, JSX</div>;
TSX// src/test/LearnJsx.tsx
// 函数式组件, 要求返回用户界面, 而用户界面使用 JSX 进行构建
export const LearnJsx = () => {
// JSX 语法, JSX 和 HTML 很像,但 JSX 是 JavaScript 不是 HTML。
return (
<div>
我是组件 LearnJsx
< ...
React基础
未读全局状态管理-Redux01. 状态管理概述
目标:理解组件管理的局限性和全局状态管理的优势
1.1 组件状态管理React 只是一个用于构建用户界面的库,专注于数据驱动 DOM 的领域,虽然也提供了状态管理的能力,但是对于复杂项目的状态管理依然吃力。
React 采用组件的方式进行状态的管理,当组件与组件的关系比较疏远时传递状态和更新状态变的异常复杂。
1.2 全局状态管理Redux 是一个专业的面向 JavaScript 的状态管理工具,在使用了 Redux 以后状态可以被统一管理,不再完全依赖于组件。
状态被存储在 store 的对象中,所有组件直接在 store 对象中获取状态,所有组件通过统一的方式修改 store 对象中的状态。
当 store 对象中的状态被修改后,使用到了该状态的组件会自动更新。
全局状态管理解决了组件状态管理的弊端、避免了通过 props 的方式进行复杂的状态传递。
02. 状态管理 Redux
目标:掌握使用 Redux 管理状态的方式
npm install redux@4.2.0
2.1 概述在使用 Redux 管理状态之前,我们必须先理解 ...
anzhiyu中使用alphatab实现播放乐谱要在 Hexo 中使用 anzhiyu 主题并实现通过 AlphaTab 播放乐谱,可以按照以下步骤操作。以下是详细的实现方法:
1. 确保 Hexo 和 anzhiyu 主题已正确安装在开始之前,请确认你已经成功安装了 Hexo 和 anzhiyu 主题。如果尚未安装,可以参考以下命令:
# 安装 Hexo
npm install -g hexo-cli
# 初始化 Hexo 项目
hexo init my-blog
cd my-blog
# 安装 anzhiyu 主题
git clone https://github.com/anzhiyu/hexo-theme-anzhiyu.git themes/anzhiyu
然后在 _config.yml 文件中设置主题为 anzhiyu:
theme: anzhiyu
运行以下命令启动本地服务器,确保一切正常:
hexo server
2. 引入 AlphaTabAlphaTab 是一个开源的乐谱渲染和播放库。你需要将其集成到你的 Hexo 博客中。
root/一律代表你的博客根 ...
创建vue项目安装npm install @vue/cli@5.0.4 -g
启动npm run serve
组合式API优势
在选项式API中,它将数据和逻辑进行了分离,所有不相关的数据被放置在了一起,随着应用规模的增加,项目将会变得难以维护
export default{
setup(){
// 属性
// 方法
// 计算属性
// 数据监听
one()
two()
}
}
// 功能1
function one(){
...
}
// 功能2
function two(){
...
}
组合式API入口
setup函数在任何生命周期之前执行,且函数内部this为undefined
setup函数的返回值必须是一个对象,对象的属性会被添加到组件实例对象中,
setup() {
console.log(this);
let name = ref("张三");
let age ...