百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 热门文章 > 正文

微信小程序开发教程2(从0基础到学会UI组件开发)

bigegpt 2024-08-24 23:08 2 浏览

6、小程序的网络数据请求

6.1、举例添加一个网络请求接口

(1)配置可用的请求接口

(注意如果更改了域名需要本地手动编译下才可以调用)

(2)发起GET/POST请求

下图为get请求,post请求只要把method更改成POST即可

再次请求接口时,如果需要与旧数据拼接可用如下

(3)页面加载时请求接口

onload方法在新建页面时有自动生成,可以直接使用

(4)暂时绕过htts校验

(5)请求接口展示数据加载中效果

7、页面导航(页面之间跳转)

1、导航到tabBar(页签)页面

方式一通过navigator

跳转后可在模拟器如下查看到传递的参数

方式二通过代码

2、导航到非tabBar(非页签)页面

方法一通过navigator

方法二通过代码

3、导航到后一页(上一页)

方法一:通过navigator

方法二:通过代码

4、导航传递/接收参数

方法一传递通过navigator

方法二传递通过代码

接收参数方法

8、wxs语法介绍

1、与js的区别

2、在小程序页面wxml里使用

3、wxs文件的使用

4、注意事项

9、微信开发者文档

1、微信提供了一些方法,可以直接使用

10、小程序组件

1、新建小程序组件

2、组件的引用

2.1 局部引用

2.2全局引用

3、组件和页面的区别

4、组件里的样式隔离

4.1 组件的样式隔离

4.2 修改组件的样式隔离

5、组件的开发

5.1定义数据

5.2定义方法

1、data和properties的区别

2、组件里修改properties里的值

5.3、组件里的监听器

1、监听字段值的变化

1、监听器使用举例

2、监听对象里的字段

3、监听组件所在页面的行为

(页面的生命周期)

5.4 组件的插槽

1、使用单个插槽

2、配置使用多个插槽

5.5、组件的通信

1、与页面的通信Properties

传入的参数Properties

2、组件之间的通信

(1)方式一通过属性绑定通信

(2)方式二通过事件绑定通信

(3)方式三通过获取组件实例

5.6、组件间代码共享behaviors

1、代码共享

2、组件与共享代码有同名数据处理方式

6、纯数据字段

7、组件的生命周期函数

7.1定义生命周期函数

8、引入第三方组件

1、npm的支持与限制

2、小程序的UI组件库

1、Vant UI组件库的使用

(1)安装Vant库

注意js和ts安装步骤不同,本例为Js官网也有说明

  • 1、初始包管理配置文件

由于使用了npm所以,所以记得需要初始包管理配置文件,生成package.json

2、安装指定版本的包

npm i @vant/weapp@1.3.3 -S --production

3、构建npm包

如果找不到本地设置因为新版工具已经默认支持了

这时包就安装好了,会出现如下目录

4、不使用微信默认基础组件

(2)使用Vant组件

官方文档中也有事例

(3)Vant定制全局主题样式

  • 原理

例子:

  • Vant里的例子:

如下即可修改danger按钮的默认样式:

因为每个页面根节点都是page,所以我们在全局样式里用page作为根节点即可

  • 通过官方文档的可找到对应样式的变量名称,如下

3、优化回调函数的组件(API promise化)

1、安装api promise组件

同样安装npm包都需要构建以下:

2、实现promise化

4、全局共享数据的组件(状态管理)

1、使用Mobx

(1)安装Mobx

(2)使用Mobx

  • 页面中使用
  • 组件中使用

相关推荐

Docker篇(二):Docker实战,命令解析

大家好,我是杰哥上周我们通过几个问题,让大家对于Docker有了一个全局的认识。然而,说跟练往往是两个概念。从学习的角度来说,理论知识的学习,往往只是第一步,只有经过实战,才能真正掌握一门技术所以,本...

docker学习笔记——安装和基本操作

今天学习了docker的基本知识,记录一下docker的安装步骤和基本命令(以CentOS7.x为例)一、安装docker的步骤:1.yuminstall-yyum-utils2.yum-con...

不可错过的Docker完整笔记(dockerhib)

简介一、Docker简介Docker是一个开源的应用容器引擎,基于Go语言并遵从Apache2.0协议开源。Docker可以让开发者打包他们的应用以及依赖包到一个轻量级、可移植的容器中,...

扔掉运营商的 IPTV 机顶盒,全屋全设备畅看 IPTV!

其实现在看电视节目的需求确实大大降低了,折腾也只是为了单纯的让它实现,享受这个过程带来的快乐而已,哈哈!预期构想家里所有设备直接接入网络随时接收并播放IPTV直播(电信点播的节目不是太多,但好在非常稳...

第五节 Docker 入门实践:从 Hello World 到容器操作

一、Docker容器基础运行(一)单次命令执行通过dockerrun命令可以直接在容器中执行指定命令,这是体验Docker最快捷的方式:#在ubuntu:15.10容器中执行ech...

替代Docker build的Buildah简单介绍

Buildah是用于通过较低级别的coreutils接口构建OCI兼容镜像的工具。与Podman相似,Buildah不依赖于Docker或CRI-O之类的守护程序,并且不需要root特权。Builda...

Docker 命令大全(docker命令大全记录表)

容器生命周期管理run-创建并启动一个新的容器。start/stop/restart-这些命令主要用于启动、停止和重启容器。kill-立即终止一个或多个正在运行的容器rm-于删除一个或...

docker常用指令及安装rabbitMQ(docker安装rabbitmq配置环境)

一、docker常用指令启动docker:systemctlstartdocker停止docker:systemctlstopdocker重启docker:systemctlrestart...

使用Docker快速部署Storm环境(docker部署confluence)

Storm的部署虽然不是特别麻烦,但是在生产环境中,为了提高部署效率,方便管理维护,使用Docker来统一管理部署是一个不错的选择。下面是我开源的一个新的项目,一个配置好了storm与mono环境的D...

Docker Desktop安装使用指南:零基础教程

在之前的文章中,我多次提到使用Docker来安装各类软件,尤其是开源软件应用。鉴于不少读者对此有需求,我决定专门制作一期关于Docker安装与使用的详细教程。我主要以Macbook(Mac平台)为例进...

Linux如何成功地离线安装docker(linux离线安装httpd)

系统环境:Redhat7.2和Centos7.4实测成功近期因项目需要用docker,所以记录一些相关知识,由于生产环境是不能直接连接互联网,尝试在linux中离线安装docker。步骤1.下载...

Docker 类面试题(常见问题)(docker面试题目)

Docker常见问题汇总镜像相关1、如何批量清理临时镜像文件?可以使用sudodockerrmi$(sudodockerimages-q-fdanging=true)命令2、如何查看...

面试官:你知道Dubbo怎么优雅上下线的吗?你:优雅上下线是啥?

最近无论是校招还是社招,都进行的如火如荼,我也承担了很多的面试工作,在一次面试过程中,和候选人聊了一些关于Dubbo的知识。Dubbo是一个比较著名的RPC框架,很多人对于他的一些网络通信、通信协议、...

【Docker 新手入门指南】第五章:Hello Word

适合人群:完全零基础新手|学习目标:30分钟掌握Docker核心操作一、准备工作:先确认是否安装成功打开终端(Windows用户用PowerShell或GitBash),输入:docker--...

松勤软件测试:详解Docker,如何用portainer管理Docker容器

镜像管理搜索镜像dockersearch镜像名称拉取镜像dockerpullname[:tag]列出镜像dockerimages删除镜像dockerrmiimage名称或id删除...