微信小程序开发-总结1

app.json中的pages节点。这个pages节点是一个数组，存储了项目中所有页面的访问路径。其中，

pages数组中第一个页面路径，就是小程序项目里的默认首页。

小程序常用的UI组件

1.text文本

selectable：文本是否可选择，除了text组件之外，其他组件都无法长按选中，默认false小程序开发，boolean类型。

space：显示连续空格，可选择：ensp(英文空格)广西网站建设，emsp(中文空格)，nbsp，默认值false，String类型。

decode：是否解码，可解析： & '

2.view视图容器（相当于网页开发中的div标签）

hover-class：指定按下去的样式类。当hover-class=‘none’时，没有点击效果。默认值为none，类型是String。

hover-stop-propagation：指定是否阻止本节点的祖先节点出现点击态。默认false，boolean类型。

hover-start-time：按住后多久出现点击态，单位毫秒。默认值是50，类型是number。

hover-stay-time：手指松开后点击态保留时间，单位毫秒。默认值400，类型是number。

3.button按钮

size：按钮的大小。默认值default，类型String。

type：按钮的样式类型。默认值default，类型String。

plain：按钮是否镂空，背景色透明。默认值default，类型boolean。

disabled：是否禁用。默认值false，类型boolean。

loading：名称前是否带loading图标。默认值false，类型boolean。

4.input输入框

value：输入款的初始内容。类型String。

type：input的类型。默认值：‘text’，类型String。

password：是或否是密码类型。默认值false，Boolean类型。

placeholder：输入框为空时占位符。类型String。

disabled：是否禁用。默认值false，类型为boolean。

maxlength：最大输入长度，设置为-1时不限制最大长度。默认值140，类型Number。

5.image图片

1.src：支持本地和网络上的图片

2.mode：指定图片裁剪，缩放的模式

3.aspectFit：保持纵横比缩放图片，使图片的长边能完全显示出来。

4.aspectFill：保持纵横比缩放图片，使图片的短边能完全显示出来，图片通常只在水平或垂直方向是完整的。。

image组件默认宽度300px，高度225px

若只写一个，也会有一个300*225固定宽高的空白位置

wxss和css的区别：

不同点是：wxss扩展的特性有：尺寸单位，样式导入。

小程序的API

1. API概念：

API应用程序编程接口，是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力。

2. API的三种分类：

（1）事件监听API

以 on 开头的 API 用来监听某个事件是否触发

（2）同步API

以 Sync 结尾的 API 都是同步 API

（3）异步API（类似网页端的ajax

通常需要指定回调函数接受调用的结果；小程序中，大多数的 API 都是异步 API

API介绍：#API

组件和API的区别：

相同点：都是微信官方提供的，目的都是为了方便小程序的快速开发

不同点：组件以UI结构布局为主，一般不需要处理业务逻辑；API以纯业务逻辑为主，一般没有对应的UI结构

小程序成员管理：登录小程序账号 --> 管理 --> 成员管理 -- 项目成员

开发者权限：开发模块权限，可使用体验版小程序，开发者工具

运营者权限：管理，推广，设置等模块，可使用体验版小程序

数据分析者（基础分析）：统计模块权限，可使用体验版小程序

详情查阅：

微信开发者工具下载：

创建小程序项目：

打开小程序开发者工具，用微信扫码登录开发者工具

点击左侧菜单中的小程序选项

点击+号新建小程序项目

填写项目名称

选择项目存放路径（必须选择空目录）

填写 AppID

点击新建按钮

小程序预览：

点击 工具栏 --> 预览 即可弹出预览窗口

预览方式：扫描二维码预览、自动预览

静态页面的内容：

1.html结构标签mui element-ui

结构：text，view，button，input，image

2.css

1.选择器

标签选择器，class选择器，id选择器，伪类伪元素选择器，data-*自定义属性选择器，nth-child nth-of-type 子类选择器

2.组合选择器的优先级 （*

3.css模块化（模块内部不影响外部：模块独立性，使用导入功能进行相互调用）

vue: scoped

react: css modules

小程序: 样式导入

4.适配问题

网页用rem，

小程序用rpx（rpx是微信小程序独有的，解决屏幕自适应的尺寸单位。

统一规定：在横向上屏幕分为750份rpx

rpx对最终显示的css单位的对应关系：

1rpx = 0.5px（设备css单位） = 1设计稿px（基于iphone6进行的2倍750宽度的设计稿）

小程序中的rpx尺寸单位，把所有宽度尺寸的屏幕，统一划分为了750份，不论大屏幕还是小屏幕，

375rpx会被小程序识别，并渲染为屏幕宽度的一半。

官方建议：开发微信小程序时，设计师可以用iphone6作为视觉稿的标准。

如果要根据iphone的设计稿绘制小程序页面，可以直接把单位从px替换为rpx。

例如，假设iphone6设计稿上小程序开发，要绘制一个宽高为200px的盒子，换算为rpx为200rpx。

5.@import样式导入

可以导入外联样式表

语法格式为：@import "wxss样式表的相对路径"; (分号一定要带上！)

6.全局样式与局部样式

全局样式：定义在app.wxss中的样式为全局样式，作用于每一个页面。

局部样式：早page的wxss文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖app.wxss中相同的选择器。

当局部样式的权重大于或者等于全局样式的权重时，才会覆盖全局的样式效果！

小程序的唯一标识：appid