微信小程序开发5
在小程序使用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...
微信小程序开发4
组件的创建与引用创建组件 在项目的根目录,创建components 文件夹 在新建components的文件夹 下新建组件文件夹,鼠标右键组件文件夹,点击新建component 之后组件文件夹会自动生成四个文件 局部引入组件在页面的 .json 配置 中引入组件 { "usingComponents":{ "my-test1":"/components/test/test" } } 全局引入组件在app.json全局配置文件中引入组件 "usingComponents":{ "my-test1":"/components/test2/test2" } 区别 如果某组件只在特定的页面中被用到,建议进行“局部引用” 如果某组件在多个页面中经常被用到,建议进行“全局引用” 组件的 .json 文件中需要声明 “component”: true 属性 组件的 .js 文件中调用的是...
微信小程序开发3
页面导航声明式导航 跳转到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 的值必须是数字,表示要后退的层级
微信小程序开发2
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 ?...
微信小程序开发1
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...
TypeScript教程
TypeScript 教程1. TypeScript 概述1.1 TypeScript 是什么TypeScript 是一门基于 JavaScript 的编程语言,它是具有类型系统的 JavaScript,是一种解决 JavaScript 缺点的编程语言。 // 所有的 JavaScript 代码都是合法的 TypeScript 代码。 var a = 10; function fn () {} if (true) {} for (var i = 0; i < 10; i++) {} // TypeScript 是静态类型编程语言,即编译期间进行类型检查,变量、参数、返回值等都必须有固定的类型。 let x: number = 10; x = 20; // ✅ x = "a"; // ❎ TypeScript 不能在浏览器环境或者 Node 环境直接运行,它在执行前需要先被编译为 JavaScript。 // TypeScript let isLogin: boolean =...
Redis基础使用
安装Linux安装在终端输入: $ sudo apt-get install redis-server 安装完后检查是正常安装 $ cd /usr/bin # 进入此目录 $ ls redis*# 查看是否有以下东西 启动第一次启动:(更新配置文件后也要输入这个,并且要重启服务) # 授权 启动服务 服务配置文件 $ sudo redis-server /etc/redis/redis.conf $ sudo service redis-server start # 启动 $ sudo service redis-server stop # 停止 $ sudo service redis-server restart # 重启 查看进程$ ps -aux|grep redis 进入$ redis-cli # 默认进入本机的redis $ redis-cli -h <ip地址> -p <端口号> # 例: $ redis-cli -h 127.0.0.1 -p...
React路由[V5]
React 路由01. 路由概述 目标:理解前端路由的作用 在传统的 web 应用中前端都是由多页面组成的,用户可以通过链接在不同的页面之间进行跳转。 为了提升用户体验,在现代的 web 应用中前端大多都是单页面应用程序,也就是只有一个 HTML 页面的应用程序。 即使是单页面应用程序我们也要满足用户可以在”不同页面之间”跳转的需求,所以前端路由应运而生。 前端路由是指让用户从一个视图导航(跳转)到另一个视图,此处的视图指的是表示页面的组件,也就是使用组件代替传统 web 应用中的 HTML 页面。 前端路由实际上就是 URL 路径与组件之间的映射关系,即不同的页面组件对应不同的 URL 路径,用户可以通过不同的 URL 路径访问不同的页面组件。 02. 基本使用 目标:掌握路由的基本用法 下载 React Router 并准备页面组件 创建路由规则并在应用中使用 Route 组件的另一种语法格式 ① 下载 React Router 并准备页面组件 npm install react-router-dom@5.3.3 //...
React 全局状态管理-Redux
全局状态管理-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...
React 基础-组件-组件进阶
React基础-组件进阶-类组件01. 组件属性校验 目标:掌握组件属性校验的基本使用方式 对于组件来说,组件属性 (props) 是组件的调用者传递的,如果组件调用者传递的组件属性不符合要求,将会导致组件内部的代码执行出错,所以为了组件运行的稳定性,我们需要在组件内部对接收的组件属性进行校验。 https://zh-hans.reactjs.org/docs/typechecking-with-proptypes.html class App extends React.Component { render() { return <Colors colors={100} />; } } class Colors extends React.Component { render() { return ( <ul> {this.props.colors.map((item) => ( ...