孤梭の个人博客

2D转换(transform)移动盒子位置有三种方式：定位，盒子外边距，2D转换移动 2D转换是改变标签在二维平面上的位置和形状 移动：translate 旋转：rotate 缩放：scale 2D 转换之translatetranslate语法 x就是X轴上水平移动 y就是y轴上水平移动 123transform: translate(x, y);transform: translateX(n);transfrom: translateY(n); 重点知识点 2D的移动主要是指水平、垂直方向上的移动 translate最大的优点就是不影响其他元素的位置 translate中的100%单位，是相对于本身的宽度和高度来进行计算的 行内标签没有效果 12345678910111213141516171819202122div { background-color: lightseagreen; width: 200px; height: 100px; /* 平移 */ /* 水平垂直移动 100px */ /* transform: translate( ...

使用npm包目前小程序已经支持使用npm安装第三方程序，从而提高开发效率，使用npm包由如下三个限制 不支持依赖于node.js内置库的包 不支持依赖于浏览器内置对象的包 不支持依赖于C++插件的包 Vant Weapp安装vant组件库三步 通过npm安装 构建npm包 修改app.json 详细步骤参考vant官方文档 https://youzan.github.io/vant-weapp/#/quickstart#an-zhuang 定制全局主题样式Vant Weapp使用CSS变量来实现定制主题，关于CSS变量的基本用法，参考mdn文档 https://develop.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties API Promise优化基于回调函数的异步API的缺点 默认情况下，小程序官方提供的异步API都是基于回调函数实现的，容易造成回调地狱问题，代码可读性，维护性差。 API Promise化，指的是通过额外的配置，将官方提供的基于回调函数的API，升级改造为基于Promise的异步API， ...

自定义组件组件的创建与引用创建组件根目录>创建components>test文件夹>右键新建component 会自动生成组件对应的四个文件 为保证目录结构清晰，建议把不同组件存放到单独目录中 引用组件 局部引用：组件只能在当前被引用的页面内使用 全局引用：组件可以在小程序页面中使用 局部引用在页面.json 文件中引用叫做局部引用 12345678//页面.json 文件{"usingComponents": { "my-test1": "/components/test/test1"}}//在页面.wxml中使用组件<my-test1></my-test1> 全局引用在app.json 文件中引用叫做局部引用 12345{"usingComponents": { "my-test1": "/components/test/test1"}} ...

页面导航页面导航是页面之间相互跳转，浏览器实现有两种方式 <a>链接 location.href 小程序中实现有两种方式 声明式导航 编程式导航 声明式导航导航到tabBar页面tabBar页面是被配置为tabBar页面。 在使用<navigator>组件跳转到指定的tabBar页面时，需指定url和open-type属性 url表示跳转页面的地址，必须/开头 open-type表示跳转的方式，必须为switchTab 1<navigator url="/pages/message/message open-type="switchTab">跳转到消息页面</navigator> 导航到非tabBar页面非tabBar页面是没有被配置为tabBar的页面 与tabBar相比，只有open-type不同，必须为navigate,open-type="navigate"属性可省略 1<navigator url="/pages/info/info open-typ ...

WXSS模板语法WXSS（Weixin Style Sheet)是一套样式语言，用于美化WXML组件样式，类似CSS WXSS具有CSS的大部分特性，扩展特性包括 rpx尺寸单位 @import样式引入 rpxrpx(responsive pixel)是微信小程序独有的，用来解决屏幕适配的尺寸单位 rpx实现原理 监狱不同设备屏幕大小不同，为实现屏幕自动适配，rpx把所有设备的屏幕在宽度上等分为750份(即当前屏幕总宽度为750rpx) 在较小的设备上，rpx代表的宽度越小 在较大的设备上，rpx代表的宽度越大 小程序在不同设备上运行时，会自动把rpx的样式单位换算成对应的像素单位来渲染 rpx与px单位换算 在iPhone6上，屏幕宽度为375px，共有750个物理像素等分为750rpx，则 750rpx=375px=750物理像素 1rpx=0.5px=1物理像素 所以建议在开发微信小程序时，设计师可以用iphone6作为视觉标准。 样式导入使用WXSS提供的@import语法，可以导入外联样式表 @import语法格式 @import后跟需要导入的外联样式表的相对路径， ...

WXML模板语法数据绑定数据绑定的基本原则 在data中定义数据 在WXML中使用数据 在data中定义页面数据在页面对应的js文件中，把数据定义到data对象中即可 12345678Page({ data:{ // 字符串类型的数据 info:'init data', // 数组类型的数据 msgList:[{msg:'hello'}, {msg:'world'}] }}) Mustache语法的格式把发他中的数据绑定到页面中渲染，使用Mustache语法（双大括号）将变量包起来即可 1<view>{{要绑定的数据名称}}</view> 应用场景： 绑定内容 绑定属性 运算（三元运算，算数运算等） 动态绑定内容页面的数据如下 12345Page({ data:{ in ...

小程序简介小程序与网页开发的区别 运行环境不同 API不同 开发模式不同 项目结构 pages 用来存放所有小程序的页面 utils用来存放工具性质的模块（例如格式化时间的自定义模块） app.js小程序项目的入口文件 app.json小程序项目的全局配置文件 app.wxss小程序项目的全局样式文件 project.config.json项目的配置文件 sitemap.json用来配置小程序及其页面是否允许被微信索引 json配置文件的作用json是一种数据格式，常以配置文件形式出现 app.json是当前小程序的全局配置，包括小程序所有页面路径，窗口外观，界面表现，底部tab project.config.json是项目配置文件，记录对小程序开发工具所作的个性化配置 sitemap.json用来配置小程序及其页面是否允许被微信索引 页面的json文件来对页面窗口外观进行配置，会覆盖app.json 和window中相同的配置 新建程序页面和修改项目主页 WXML模板WXML(weixin Markup Language)是小程序框架设计的一套标签语言，用来构建小程序 ...

布局原理flex是flexible Box的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性，任何一个容器都剋指定为flex布局 当我们为父盒子设为flex之后，子元素的float,clear,vertical-align属性将失效‘ 伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局 采用Flex布局的元素，称为flex容器（flex container），简称“容器”，它让所有子元素自动称为容器成员，称为flex项目（flex item），简称“项目”。简单来说就是通过给父盒子添加flex属性，来控制子盒子的位置和排列方式。 父项常见属性以下6个属性是对父元素设置的 flex-direction:设置主轴方向 justify-content:设置主轴上的子元素排列方式 flex-wrap:设置子元素是否换行 align-content:设置侧轴上子元素的排列方式（多行） align-items:设置侧轴上的子元素排列方式（单行） flex-flow:复合属性，相当于同时设置了flex-direction和flex-wrap 「flex-direction」主轴和 ...

BOM概述什么是BOMBOM（Browser Object model）即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的现象，其核心对象是window BOM是由一系列相关的对象构成，并且每个对象都提供了很多方法和属性 BOM缺乏标准，JavaScript语法的标准化组织是ECMA，DOM的标准化组织是W3C，BOM最初是Netscape浏览器标准的一部分。 BOM的构成BOM比DOM更大，它包含DOM window对象是浏览器的顶级对象，它具有双重角色 他是JS访问浏览器窗口的一个接口 他是一个全局对象，定义在全局作用域中的变量，函数都会变成window对象的属性和方法 在调用的时候可以忽略window，前面学习的对话框都属于window对象方法， 注意window下的一个特殊属性 window.name window对象的常见事件「2.1窗口加载事件」123window.onload = function() {}或者window.addEventListener("load", function() {} ...

注册事件「1.1注册事件概述」给元素添加事件，称为注册事件或者绑定事件 注册事件有两种方式，传统方式和方法监听注册方式 传统注册方式 <button onclick="alert('hi')"></button> btn.onclick = function() { } 特点： 注册事件的唯一性 同一元素同一事件只能设置一个处理函数，最后注册的处理函数会覆盖前面注册的处理函数 方法监听注册方式 addEventListener() attachEvent() //IE9之前 特点： W3C标准推荐方式 同一元素同一事件可以注册多个监听器 按注册顺序依次执行 「1.2 addEventListener 事件监听方式」1eventTarget.addEventListener(type, listener, useCapture) eventTarget.addEventListener() 方法将指定的监听器注册到eventTarget（目标对象）上，当该对象触发指定事件时，就会执行事件处 ...