微信小程序知识点---注意单位rpx要换算---更新

菜菜不想做菜菜
450 阅读9分钟

1.认识小程序

1.1小程序与普通网页开发的区别

1.运行环境不同 2.API不同:无法调用DOM和BOM，但是小程序中可以调用微信环境提供的各种API 3.开发模式不同：申请小程序开发账号----安装小程序开发工具-----创建和配置小程序项目 image.png

1.2注册小程序账号&获取APPID

1.2.1注册小程序账号

按照流程走即可 image.png

1.2.2获取小程序的AppID

注册小程序账号最主要的目的是为了获取APPID

image.png

1.3新建项目&下载开发者工具

根据电脑选择合适的去下载

image.png

1.3.1设置外观和代理

代理为了方便选择第一个---按照图片进行 image.png

1.3.2新建项目---注意目录

image.png 流程 image.png

1.3.3查看项目

模拟器上：

image.png 真机上预览：

image.png

1.3.4主菜单介绍

模拟器调试的机型，使用iphone6以上 image.png image.png

1.4项目目录及详细介绍

image.png

1.4.1pages详细介绍

image.png

1.4.2JSON配置文件

image.png 1.app.json---v2表示最新版本

image.png 2.project.config.json

image.png 3.sitemap.json

image.png 4.页面的.json配置文件---页面的配置会覆盖掉app.json中window中相同的配置项

image.png

1.4.3js相关文件

image.png

1.5新建小程序界面

1.5.1新建

直接在app.json下面添加路径，会自动生成 image.png

1.5.2设置新的首页

image.png

1.6WXML与HTML的区别（标签、属性）

相同点：都是用来描述页面的结构 不同点：如下 image.png

1.7WXSS与CSS的区别（3点-提供全局样式和局部样式）

相同点：都是用来描述样式 不同点：

1.新增了尺寸单位，WXSS在底层支持新的尺寸单位rpx----适配使用iphone6---整数--1px=2rpx rpx补充：把屏幕宽度分为750份 image.png 单位换算：适配使用iphone6---整数--1px=2rpx image.png 2.仅支持部分CSS选择器(常用)----h标签不支持 3.WXSS提供全局样式和局部样式（局部样式会覆盖全局样式）

WXSS导入---@import image.png

全局样式和局部样式

image.png

2宿主环境及相关组件

image.png 手机微信就是微信小程序的宿主环境

小程序宿主环境包含的内容：

2.1通信模型

通信主体：渲染层------逻辑层 image.png 通信模型：通讯模型分为两部分----图要记住 image.png

2.2运行机制

小程序启动： image.png 渲染过程加载：

image.png

2.3组件

image.png

2.3.1视图组件

image.png

2.3.1.1view

image.png

2.3.1.2scroll-view----往哪个方向滚动就要给包裹性宽或高设置宽度

image.png

2.3.1.3awiper和swiper-item实现轮播图

image.png

2.3.2常用内容基础组件

2.3.2.1text文本组件-sortable

view容器不支持复制内容（长按功能），但text文本组件有

2.3.2.2rich-text富文本组件：支持把HTML字符串渲染为WXML结构--nodes属性-里面单引号

通过nodes属性将HTML转换为WXML结构，注意里面要使用单引号 image.png 总结 image.png

2.3.3其他常用组件

image.png

2.3.3.1button

image.png image.png

2.3.3.2image

通过mode属性修改样式 image.png

2.3.3.4navigator---相当于a链接

后续会详细讲解

2.4API及特点

3大API分类： 1.事件监听 2.同步API 3.异步API image.png

2.5协调工作

由于项目是多人协调开发的，所以要对不同岗位、不同角色的员工权限进行边界的划分 image.png 项目人员：

image.png 小程序开发流程：

image.png

image.png

image.png 开发者权限：

image.png 添加成员： image.png

2.6发布

image.png

2.6.1开发版本：开发版本---体验版本----审核中的版本----线上版本

image.png

2.6.2上传代码

image.png

2.6.3后台查看版本

image.png

2.6.4提交审核

image.png

2.6.5发布

image.png

2.6.6推广

image.png image.png

2.6.7查看相关数据

image.png

3.基础操作语法

3.1数据绑定

数据绑定基本原则：1.在data中定义数据2.在WXML中使用数据

3.1.1定义数据

image.png

3.1.2使用数据

image.png

3.1.3动态绑定

image.png

3.1.4三元运算符

image.png

3.1.5算数运算

可以进行算数运算

3.2事件绑定

3.2.1常见事件

image.png

3.2.2事件对象的属性参数列表

image.png target&&currentTarget的区别 image.png

3.2.3案例

image.png

3.3修改data中的数据-----this.setData(数据对象)----实现重新赋值

image.png

3.4事件传参---传入数字使用{{}}--否则默认是字符串

事件传参不同于vue,不可以在绑定事件的同时为事件处理函数传递参数，会认为是调用一个名字 image.png

3.4.1事件传参的方式---data-参数名="{{}}"

image.png

3.4.2如何接收使用参数---event.target.dataset.参数名

image.png

3.5绑定input事件

image.png

3.5.1拿到文本框变化后最新的值e.detail.value

3.5.2实现文本框和data的数据同步---通过value实现文本框的动态绑定

image.png 通过value动态绑定 image.png

3.6条件渲染结合block使用---v-if ----v-else

3.6.1v-if

image.png

3.6.2结合block使用---相当于template

image.png

3.6.3hidden

image.png

3.6.4hidden和v-if的区别

image.png

3.6列表渲染-----vx:for=“{{数组}}”

3.6.1默认列表渲染

image.png

3.6.1.1绑定key值，提高性能----不加{{}}---一般使用id，没有id使用索引

image.png

3.6.2手动修改---不常用---了解

image.png

3.7全局配置

image.png 页面布局 image.png

3.7.1window常用全局配置项

image.png

3.7.1.1导航栏

设置标题：

image.png 设置标题颜色：只支持白色和黑色

image.png 设置背景色：只支持#的表示方法，不可以使用green等

image.png

3.7.2下拉刷新---不会自动回到顶部

可以设置全局和局部 image.png 模拟器有时并不精确，以扫码实际效果为准 设置背景色： image.png 设置下拉刷新loading的样式 image.png

3.7.3设置上拉触底距离----一般不去设置

image.png

3.8tabBar-------与window齐平，注意书写位置

3.8.1什么是tabBar

分为底部和顶部，最多五个，最少两个 image.png

3.8.2tabBar的组成部分

image.png

3.8.4tabBar的配置项---list必填---配置项最少两个最多五个

image.png 如： image.png

image.png

3.9页面配置文件---页面配置和全局配置（设置在window里面）

image.png image.png

3.10数据请求request及跨域问题--小程序没有跨域

3.10.1小程序对数据接口请求的限制

网页开发可以请求http和https类型的请求 image.png 小程序对于接口的请求有两个限制：

1.只能请求https类型的接口2.必须将接口的域名添加到信任列表中

image.png

3.10.2配置合法域名---开发时间紧时可以跳过request合法域名校验

image.png

3.10.3发起get请求------写到.js文件---- URL必须是合法的域名

image.png

3.10.4发起post请求------写到.js文件---- URL必须是合法的域名

image.png

3.10.5跳过request合法域名校验

当后端人员仅仅提供http协议的接口时，为了不影响开发，可以暂时跳过合法域名的检验，但项目上线时依旧需要 image.png image.png

3.10.7页面刚加载时请求数据

image.png

4.导航

image.png

4.1声明式导航---navigator

4.1.1导航到tabBar页面-----必须加open-type="switchTab"---必须以/开头

两个注意点：必须加open-type="switchTab"---必须以/开头 image.png

4.1.2导航到非tabBar页面-----加open-type="navigate"可以省略不写---必须以/开头

image.png 两个注意点： image.png

4.1.3后退导航---navigateBack---delta默认为1---为1时可以补写，控制回退几个

image.png

4.2编程式导航

4.2.1导航到tabBar页面---wx.switchTab()---URL必须要写

image.png 代码： image.png

4.2.2导航到非tabBar页面---URL必须要写

image.png 代码部分： image.png

4.1.3后退导航---navigateBack---delta默认为1---为1时可以补写，控制回退几个

image.png 代码： image.png

4.3导航传参

4.3.1声明式导航传参----利用url--参数和路径之间？相隔，不同参数&分隔

image.png

4.3.2编程式导航传参

image.png

4.4接收参数

image.png 将接收到的参数转存到data数据中---常用query接收 image.png image.png

5下拉刷新----重新加载页面数据

下拉刷新是移动端的专有名字，指通过手指在屏幕上的下拉滑动操作，从而重新加载页面数据

5.1启用下拉刷新

image.png

5.1.2设置样式

image.png 代码：

image.png

5..13监听页面的下拉事件

image.png

5.1.4停止下拉刷新的效果---需要手动关闭下拉刷新

image.png

5.2上拉触底----相当于数据分页

上拉触底是移动端的专有名字，通过手指在屏幕上的上拉滑动操作，从而加载更多数据的行为

5.2.1监听页面的上拉触底事件

image.png

5.2.2上拉触底的距离

image.png

5.3案例

6.自定义编译

image.png

7.生命周期

7.1认识生命周期

image.png

7.2生命周期分类---应用生命周期&页面生命周期

image.png

7.2生命周期分类

image.png

image.png

7.2.1应用生命周期函数

前台就是进入，后台就是切除小程序 image.png

7.2.1页面生命周期函数

image.png

8.wxs

8.1认识wxs

image.png

8.2使用场景----过滤器

image.png

8.3wxs和javaScript的关系

image.png

8.4使用wxs

8.4.1内嵌写法---写在wxml中

image.png 代码：

image.png

8.4.2外联的wxs脚本

8.4.2.1定义

image.png

8.4.2.1使用

image.png

8.5wxs注意事项----特点

1.借鉴了大量的javaScript语法，但本质上是两种不同的语言

image.png 2.不能作为组件的事件回调

image.png 3.隔离性：不能调用js中定义的函数 、不能调用小程序提供的API

image.png 4.性能好

image.png

9.自定义组件

9.1组件使用

9.1.1新建组件

image.png

9.1.2组件引用

组件引用包括全局引用和局部引用

image.png

9.1.2.1局部引用

image.png

9.1.2.2全局引用

image.png

9.1.2.3全局引用VS局部引用

image.png

9.1.2.3全局引用VS局部引用

image.png

9.2自定义组件样式---组件样式隔离

9.2.1组件样式隔离

image.png

9.2.2组件样式隔离注意点---组件和引用的页面使用类选择器，不要使用其他

image.png

9.3取消组件样式隔离----两种方法

image.png styleIsolation可选值 image.png

9.4自定义组件相关数据---data、method

9.4.1data

image.png

9.4.2method

image.png

image.png

9.5prperties属性---.js文件---接收外界传入的值

image.png

9.5.1使用setData修改properties的值

image.png

9.6自定义组件的数据监听器

image.png

9.6.1数据监听器的使用

image.png

9.7纯数据字段---不应用于界面渲染的data字段---近组件内部使用

image.png

9.7.1纯数据字段使用规则

image.png

9.8自定义组件的生命周期

9.8.1自定义组件的生命周期介绍

image.png 重要的生命周期函数详细介绍：---- attached

image.png

9.8.2自定义组件的生命周期定义----lifetimes节点---使用第一种方法创建

image.png

9.8.3组件所在页面的生命周期

image.png

9.8.3.1定义组件所在页面的生命周期

image.png

9.9自定义组件的插槽---由使用者决定里面放什么内容

image.png

9.9.1单个插槽---默认每个自定义组件中只允许一个slot进行占位

image.png

9.9.2启用多个插槽

image.png

9.9.2.1定义多个插槽----使用name进行区分

image.png

9.9.2.2使用多个插槽----slot

image.png

9.10组件间通信

9.10.1父子组件间传值的三种方式

image.png

9.10.1.1属性绑定-父组件向子组件传递指定属性---properties

image.png

9.10.1.2事件绑定---子向父传

image.png 详细步骤：

image.png 2.

image.png 3.

image.png 4.

image.png

9.10.1.3获取组件实例---只能用id或者class选择器

image.png

9.11behaviors---用于实现组件间代码共享---类似于mixins

image.png

9.11.1工作方式

image.png

9.11.2创建

image.png 如：

image.png image.png

10.使用npm包

10.1使用限制

image.png

10.2Vant Weapp

image.png

11.全局数据共享

12.分包---把完整的一个小程序项目，按照需求不同划分为不同的子包

image.png

12.1分包的好处---优化首次启动的事件、多团队共同开发解耦协作

image.png

12.2项目组成

12.2.1分包前----所有页面和资源被打包到一起

image.png

12.2.2分包后----1个主包+多个分包

image.png

12.3分包后加载规则---默认下载主包并启动---进入分包先下载再展示

image.png 分包的体积限制：

image.png

avatar
文章
阅读
粉丝