微信小程序开发入门与实战(小程序与前端开发的区别)

简介: 微信小程序开发入门与实战(小程序与前端开发的区别)

👨‍🦲小程序开发简介


小程序是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或者搜一下即可打开应用。也体现了“用完即走”的理念,用户不用关心是否安装太多应用的问题。应用将无处不在,随时可用,但又无需安装卸载。

👨‍🦲小程序代码的构成 - WXML 模板


👨‍🦲什么是 WXML


简单说明 :WXML(WeiXin Markup Language)是小程序框架设计的一套标签语言,用来构建小程序页面的结构,其作用类似于网页开发中的 HTML。

👨‍🦲WXML 和 HTML 的区别


① 标签名称不同:

  1. HTML (div, span, img, a)
  2. WXML(view, text, image, navigator)

② 属性节点不同:

HTML<ahref="#">超链接</a>WXML : <navigatorurl="/pages/home/home"></navigator>

③ 提供了类似于 Vue 中的模板语法

  1. 数据绑定
  2. 列表渲染
  3. 条件渲染

👨‍🦲小程序代码的构成 - WXSS 样式


👨‍🦲什么是 WXSS


简单说明 :WXSS (WeiXin Style Sheets)是一套样式语言,用于描述 WXML 的组件样式,类似于网页开发中的 CSS

👨‍🦲WXSS 和 CSS 的区别


① 新增了 rpx 尺寸单位


CSS 中需要手动进行像素单位换算,例如 rem

WXSS 在底层支持新的尺寸单位 rpx,在不同大小的屏幕上小程序会自动进行换算

② 提供了全局的样式和局部样式


项目根目录中的 app.wxss 会作用于所有小程序页面

局部页面的 .wxss 样式仅对当前页面生效

③ WXSS 仅支持部分 CSS 选择器


class 和 #id

element

并集选择器、后代选择器

::after 和 ::before 等伪类选择器

👨‍🦲小程序代码的构成 - JS 逻辑交互


👨‍🦲小程序中的 .js 文件


一个项目仅仅提供界面展示是不够的,在小程序中,我们通过 .js 文件来处理用户的操作。例如:响应用户的点击、获取用户的位置等等。

👨‍🦲小程序中 .js 文件的分类


小程序中的 JS 文件分为三大类,分别是:


① app.js 👉 是整个小程序项目的入口文件,通过调用 App() 函数来启动整个小程序


② 页面的 .js 文件 👉 是页面的入口文件,通过调用 Page() 函数来创建并运行页面


③ 普通的 .js 文件 👉 是普通的功能模块文件,用来封装公共的函数或属性供页面使用

最后


image.png

下篇文章再见ヾ( ̄▽ ̄)ByeBye

image.png

相关文章
|
5天前
|
小程序 Java 编译器
性能工具之JMeter 微信小程序 WebSocket 脚本入门
【5月更文挑战第12天】性能工具之JMeter 微信小程序 WebSocket 脚本入门
10 1
|
6天前
|
小程序 Java API
微信小程序和springboot实现微信支付
微信小程序和springboot实现微信支付
16 0
|
5天前
|
小程序 API
微信小程序-微信支付
微信小程序-微信支付
8 0
|
5天前
|
小程序 开发工具 Android开发
微信小程序开发工具的使用,各个配置文件详解,小程序开发快速入门(二)
微信小程序开发工具的使用,各个配置文件详解,小程序开发快速入门(二)
|
5天前
|
小程序 JavaScript 开发工具
微信小程序开发工具的使用,各个配置文件详解,小程序开发快速入门(一)
微信小程序开发工具的使用,各个配置文件详解,小程序开发快速入门(一)
|
5天前
|
移动开发 小程序 安全
使用阿里云短信+微信短链接跳转微信小程序
此内容是关于使用阿里云短信带传递参数的微信短链接跳转到微信小程序。首先,需要准备微信开发者工具和一个已认证的小程序。接着,开通云开发并配置云开发权限。然后,配置H5静态网页,包括设置云开发权限和处理不同设备的跳转方式。最后,上传云函数并修改其权限,获取微信短信链接,配置短链接参数,并开通阿里云短信服务以进行测试验证。整个过程涉及到了微信开发者工具、云开发、H5页面配置、云函数的创建和部署以及阿里云短信服务的开通和使用等步骤。
56 0
|
5天前
|
小程序 JavaScript Java
基于SpringBoot+Vue+uniapp微信小程序的在线课堂微信小程序的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的在线课堂微信小程序的详细设计和实现
36 3
|
3天前
|
移动开发 前端开发 JavaScript
10款精美的web前端源码的特效,2024年最新面试题+笔记+项目实战
10款精美的web前端源码的特效,2024年最新面试题+笔记+项目实战
|
5天前
|
存储 前端开发 JavaScript
前端笔记_OAuth规则机制下实现个人站点接入qq三方登录
前端笔记_OAuth规则机制下实现个人站点接入qq三方登录
39 1
|
6天前
|
XML 编解码 前端开发
css设计文本样式 前端开发入门笔记(十二)
css设计文本样式 前端开发入门笔记(十二)
8 0

热门文章

最新文章