web 小程序 ch3 小程序框架

最新推荐文章于 2024-04-07 09:05:27 发布
最新推荐文章于 2024-04-07 09:05:27 发布
阅读量129 收藏
点赞数
分类专栏： web公选课
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44382711/article/details/107192327
版权

文章目录


在这里插入图片描述

在这里插入图片描述

框架

（倒数第二行第二个逻辑层换成视图层）

mina框架

在这里插入图片描述

视图层如何将数据变化实时展示出来（setData）

在这里插入图片描述

运行与启动机制

在这里插入图片描述

逻辑层

在这里插入图片描述

注册程序

app函数，之能一个，app.js里

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

后台与前台

在这里插入图片描述

函数

在这里插入图片描述

在这里插入图片描述

全局变量

在这里插入图片描述

onPageNotFound（监听器）

在这里插入图片描述

在这里插入图片描述

getApp（获得实例）

在这里插入图片描述

在这里插入图片描述

注册页面，每个页面的js文件中（Page来进行注册），每个页面一个

在这里插入图片描述

在这里插入图片描述

自定义页面变量

在这里插入图片描述

初始数据 data属性，并必须可转为json文件格式，渲染层可进行数据绑定

在这里插入图片描述

使用{{}}进行绑定

在这里插入图片描述

声明周期回调函数

在这里插入图片描述

页面事件处理函数

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

注意这里的参数

在这里插入图片描述

onTabItemTap，点击监听

在这里插入图片描述

在这里插入图片描述

绑定事件（组件上添加事件绑定）

在这里插入图片描述

在这里插入图片描述

route查看路径地址

在这里插入图片描述

setData

在这里插入图片描述

初始数据定义

在这里插入图片描述

在这里插入图片描述

使用数据

在这里插入图片描述

生命周期

应用生命周期

在这里插入图片描述

页面生命周期

在这里插入图片描述

生命周期流程

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

页面路由

页面栈

在这里插入图片描述

获取页面栈

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

模块化

文件作用域（该文件中），

全局调用时：app.js getApp()调用

在这里插入图片描述

模块化，引用js文件（定义好函数，page中引用）

在这里插入图片描述

在这里插入图片描述

API

在这里插入图片描述

视图层

在这里插入图片描述

wxml

在这里插入图片描述

数据绑定
简单绑定{{}}

在这里插入图片描述

属性绑定

在这里插入图片描述

控制属性绑定

在这里插入图片描述

关键字绑定，不可以去掉双花括号，会被认为为字符串

在这里插入图片描述

运算绑定

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

组合绑定，（对象或数组）

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

…符号将对象内容展开显示

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

列表渲染
简单列表 wx：for（绑定一个数组，依次渲染）

在这里插入图片描述

在这里插入图片描述

item或index自定义（元素与下标的）变量名

在这里插入图片描述

嵌套列表（wx：for嵌套出现）

在这里插入图片描述

多节点列表（block标签上）

在这里插入图片描述

wx：key属性（建议提高性能）（避免乱序）

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

条件渲染
简单条件 wx：if=“{{condition}}”

在这里插入图片描述

在这里插入图片描述

多节点条件

在这里插入图片描述

多节点条件 与 hidden

在这里插入图片描述

模板 template，定义代码片段，不同页面调用

在这里插入图片描述

定义模板

在这里插入图片描述

使用模板，引用的必须有is属性，并用data属性将所需数据值传入

在这里插入图片描述

事件

在这里插入图片描述

事件使用方式：绑定处理函数

在这里插入图片描述

添加同名函数

在这里插入图片描述

触发事件

在这里插入图片描述

在这里插入图片描述

事件：分类：冒泡，非冒泡（向不向父节点传递）

在这里插入图片描述

冒泡事件一览

在这里插入图片描述

事件的绑定与冒泡，bind/catch… value是字符串，函数名（catch阻止冒泡）

在这里插入图片描述

bindtap与catchtap

在这里插入图片描述

事件的捕获

在这里插入图片描述

在这里插入图片描述

事件对象详解：基础，自定义，触摸

在这里插入图片描述

在这里插入图片描述

dataset只接受data-*的传递形式

在这里插入图片描述

在这里插入图片描述

强制小写字母

在这里插入图片描述

touches是一个数组

在这里插入图片描述

在这里插入图片描述

引用

在这里插入图片描述

import（也能import 模板template）

在这里插入图片描述

在这里插入图片描述

不会引用第三方模板（引用引用）

在这里插入图片描述

include：直接复制代码

在这里插入图片描述

在这里插入图片描述

wxss

在这里插入图片描述

尺寸单位：rpx

在这里插入图片描述

在这里插入图片描述

样式导入 @import

在这里插入图片描述

常用属性

在这里插入图片描述

在这里插入图片描述

内联样式

style

在这里插入图片描述

支持动态绑定 {{color}}（尽量避免静态）

在这里插入图片描述

class：小程序使用class指定，可以同时接受两个

在这里插入图片描述

选择器：表

在这里插入图片描述

在这里插入图片描述

全局样式与局部样式（app.wxss）

在这里插入图片描述

在这里插入图片描述

基本布局方法 flex弹性盒

在这里插入图片描述

基本概念

flex布局

在这里插入图片描述

容器container 项目item，允许嵌套

在这里插入图片描述

坐标轴：左上角为原点

在这里插入图片描述

Flex属性：容器属性（布局方式-》排列与对齐），项目属性（尺寸位置对齐方式）

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

居中

在这里插入图片描述

容器属性

flex-direction：主轴方向

在这里插入图片描述

在这里插入图片描述

flex-warp：是否允许换行

在这里插入图片描述

在这里插入图片描述

justify-content：对齐方式

在这里插入图片描述

在这里插入图片描述

align-items：行对齐方式

在这里插入图片描述

在这里插入图片描述

align-content 交叉轴上

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

项目属性

order：主轴排列顺序

在这里插入图片描述

在这里插入图片描述

flex-shrink：收缩因子

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

flex-grow 扩张因子

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

flex-basis 项目宽或高：替代width或height（看主轴方向）

请添加图片描述请添加图片描述
在这里插入图片描述

flex：简写

在这里插入图片描述

align-self 行中交叉轴对齐，覆盖align-items

在这里插入图片描述

在这里插入图片描述

新川宝宝
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javaweb小程序
12-25
javaweb写的网站小程序，代码比较粗糙，只是为了完成老师的作业。
JAVA_WEB小程序
06-06
【JAVA WEB小程序】是利用Java Web技术开发的一种网络应用程序，它结合了服务器端的Java编程语言和客户端的网页技术，以实现数据管理、用户交互等功能。在这个简单的程序中，我们可能涉及到了数据库的使用以及完整的...
Web微信小程序开发-框架及结构（二）
qq_44790423的博客
08-16 997
为了更好的，更简单有效的方式让用户体验到APP的服务，我们就需要好好了解小程序的框架，以及它提供的语言，并且能使开发者能够专注于数据和逻辑 一、小程序文件结构和传统Web对比 结构 传统Web 微信小程序 结构 HTML WXML 样式 CSS WXSS 逻辑 Javascript Javascript 配置 无 JSON 二、基本项目目录 打开vs，可看到对应...
关于小程序的一切，读这一篇就够了～
奇舞周刊
12-07 537
1. 小程序发展史1.1 Native App在智能机刚兴起的时代，网络还不是很发达，网页浏览速度也很慢，以文字为主。市面上的应用以 Native App 为主。Native App 是基...
Web微信小程序开发（一）
qq_44790423的博客
08-15 2389
微信作为一种通讯工具的使用可以说是越来越频繁了，随之兴起的也有很多，比如服务号，小程序，但是似乎小程序更能符合大众的心意，在面临着越来越多的APP的普及，大家更多的是希望手机上的APP能越来越少 所以菜菜就顺应时代的潮流学习如何做一个简单的小程序（嘻嘻嘻） 一、开发环境的准备 首先就是要有自己的权限来开发一个小程序 注册一个属于自己的开发者账号 （由于我们后期需要调用微信端口等功能，即需要一...
Web学习笔记（3） 一个简单的Web小程序为例，如何学习入门JavaWeb
sinat_41838539的博客
02-25 352
简单的JavaWeb，作为初学者我认为就是MVC框架模式。从这学起，往往事半功倍。 这种  Model-View-Controller（模型-视图-控制器）多用于应用程序的分层开发。 下面介绍一个简单小例子，抛砖引玉，希望帮助你入个门儿。 （1）View  就不做过多介绍了，基本需求HTML+CSS相关知识。 （2）Controller 这里 Servlet 是最常用的“处理请求和发送响应...
使用Netty搭建WebSocket服务器，可修改单包大小限制
03-21
Netty是一个高性能、异步事件驱动的网络应用程序框架，它非常适合用来构建WebSocket服务器。 Netty提供了WebSocketServerProtocolHandler来处理WebSocket协议，但在默认情况下，它会对接收到的数据包大小进行限制。...
PHP与MySQL程序设计(第3版)源代码
04-05
5. **ch24 - MVC and the Zend Framework**：MVC（模型-视图-控制器）是一种常见的软件设计模式，用于构建Web应用程序。Zend Framework是一个基于MVC的PHP框架，本章可能详细介绍了如何使用它来组织代码，以及如何...
Java Web开发实践教程源码ch04
10-12
在本Java Web开发实践教程的源码包"ch04"中，我们聚焦于Web应用程序的构建和实现，这是Java开发者必备的技能之一。Java Web开发涵盖了从服务器端编程到客户端交互的诸多方面，旨在创建功能丰富的、动态的、交互性强...
ch3文件与打印.rar_.net_c# 打印
09-22
在.NET框架中，C#语言提供了强大的文件操作和打印功能，这对于开发桌面应用程序或Web应用程序至关重要。本资源“ch3文件与打印.rar”显然是一个针对C#编程中关于文件处理和打印技术的学习资料，适用于VC#.NET初学者...
web前端微信小程序
Gnemoah6的博客
04-14 425
web前端微信小程序 1、基础部分讲解 1.1 下载开发工具 1.1.1 微信开发文档 第一步进入开发文档： https://developers.weixin.qq.com/miniprogram/dev/framework/ 第二步打开工具下载微信开发者工具稳定版 1.2 注册成为开发者 微信公众平台https://mp.weixin.qq.com/，进行注册账号 2、微信开发工具的了解 2.1 小程序项目的主要目录文件作用 以wxss为后缀名的文件主要是写一些样式的，自认为就像css功能一
web前端开发之微信小程序
Web_chicken的博客
12-28 8689
My first wechat app 一、微信小程序 1.1 微信小程序历史 2016年1月11日，微信之父张小龙时隔多年的公开亮相，解读了微信的四大价值观。张小龙指出，越来越多产品通过公众号来做，因为这里开发、获取用户和传播成本更低。拆分出来的服务号并没有提供更好的服务，所以微信内部正在研究新的形态，叫「微信小程序」需要注意的是，之前是叫做应用号 2016年9月21日，微信小程序正式开启内测。在微信生态下，触手可及、用完即走的微信小程序引起广泛关注。腾讯云正式上线微信小程序解决方案，提供小程序在云端服
web前端小程序开发实例分享，html+css移动端布局，一个月成功收割腾讯、阿里、字节offer
最新发布
2401_83621095的博客
04-07 1494
面试题千万不要死记，一定要自己理解，用自己的方式表达出来，在这里预祝各位成功拿下自己心仪的offer。一个人可以走的很快，但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎扫码加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！2.m-navbar 模块// ============== 公用样式 ==================margin: 0;padding: 0;
web前端开发 | 对小程序的理解及分包
zjjcchina的博客
06-08 804
微信小程序限制了代码包不能超过 2MB，限制大小是对小程序启动速度的考虑，但是2MB 大小严重限制了小程序功能的扩展，业务需求可能需要更大的体积，综合考虑微信推出了“分包加载方案”。微信小程序，是小程序的一种，英文名Wechat Mini Program，是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用。热启动：如果用户已经打开过某小程序，然后在一定时间内再次打开该小程序，此时小程序并未被销毁，只是从后台状态进入前台状态，这个过程就是热启动。
微信小程序web-view使用说明，及链接打不开问题
m0_60312580的博客
04-25 1万+
开发微信小程序时，有时会需要在小程序内打开网页链接，这时就需要用到 web-view 标签。web-view 是小程序上用来承载网页的容器，且每个页面只能有一个 web-view，它会自动铺满整个页面，并覆盖其他组件。目前个人类型的小程序上不支持使用。在小程序上打开的网页链接地址大致可以分为两种类型：外部网页链接，如百度、知乎等网页地址微信公众号文章链接web-view 跳转外部网页链接需要配置业务域名，外部网页内 iframe 的域名也需要配置。配置小程序业务域名的方法可以参考。
web前端-微信小程序开发学习
yong_19930826的博客
03-21 6541
微信小程序和普通网页开发的区别：关于微信公众号平台如何注册小程序的账号， 如何获取小程序的appid， 如何下载小程序的开发工具， 这里我不做过多叙述。大家自行百度安装开发环境。创建组件：在项目的根目录中，鼠标右键创建components->test文件夹在新建的components -> test文件夹上，鼠标右键，点击新建components输入组件的名称之后回车，会自动生成组件对应的4个文件，后缀名分别为为了保证目录结构的清晰，建议把不同的组件，存放到单独目录中。
小程序WebSocket 简单实例一
热门推荐
天马3798
06-12 1万+
一、小程序端代码 <button bindtap='startConnect'>创建连接</button> <button bindtap='sendOne'>发送内容</button> <button bindtap='closeOne'>关闭连接</button> //创建连接 startConnect: func...
值得推荐的一款小程序开发框架wepy
web_yjw的博客
07-17 1866
WEPY 是腾讯开源的小程序组件化开发框架 介绍 WePY (发音: /'wepi/)是一款让小程序支持组件化开发的框架，通过预编译的手段让开发者可以选择自己喜欢的开发风格去开发小程序。框架的细节优化，Promise，Async Functions的引入都是为了能让开发小程序项目变得更加简单，高效。 同时WePY也是一款成长中的框架，大量吸收借鉴了一些优化前端工具以及框架的设计理念和思想。如...
重磅：微信官方推出 Web 前端和小程序统一框架
非著名程序员
02-19 2269
大家好，我是你们的校长。说实话，小程序真的是越来越火了。而市面上也有很多小程序的开发框架，尤其是针对 Vue 的，大家的想法很简单，就是想通过做 Web 的项目，能不能直接转换成小程序呢...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值