草庐IT

【小程序从0到1】宿主环境｜WXML｜WXSS｜JS逻辑交互

codeMak1r.小新 2023-05-22 原文

欢迎来到我的博客
📔博主是一名大学在读本科生，主要学习方向是前端。
🍭目前已经更新了【Vue】、【React–从基础到实战】、【TypeScript】等等系列专栏
🛠目前正在学习的是🔥 R e a c t / 小程序 React/小程序 React/小程序🔥，中间穿插了一些基础知识的回顾
🌈博客主页👉codeMak1r.小新的博客

😇本文目录😇

本文被专栏【小程序｜原力计划】收录

🕹坚持创作✏️，一起学习📖，码出未来👨🏻‍💻！

新建小程序页面

只需要在 app.json ⇒ pages中新增页面的存放路径，小程序开发者工具即可帮我们自动创建对应的页面文件。


在pages数组中新增一个list项，保存后，开发者工具即可帮我们自动创建一个list文件夹，里面包含了四个文件：list.js / list.json / list.wxml / list.wxss。

修改项目首页

只需要调整 app.json ⇒ pages 数组中页面路径的前后顺序，即可修改项目的首页。小程序会把排在第一位的页面，当作项目首页进行渲染。

什么是WXML？

WXML（WeiXin Markup Language）是小程序框架设计的一套标签语言，用来构建小程序页面的结构，其作用类似于网页开发中的HTML。
HTML ⇒ WXML

WXML和HTML的区别

  1. 标签名称不同

HTML：（div、span、img、a……）
WXML：（view、text、image、navigator……）
说白了，WXML在HTML的基础上做了一些改进，同时又借鉴了一些别的框架（比如React里的navigate）

  1. 属性节点不同

HTML：<a href="#">超链接</a>
WXML：<navigator url="/pages/home/home"></navigator>

  1. 提供了类似于Vue中的模版语法

数据绑定｜列表渲染｜条件渲染

什么是WXSS？

WXSS （WeiXin Style Sheets）是一套样式语言，用于描述WXML 的组件样式，类似于网页开发中的 CSS。
CSS ⇒ WXSS

WXSS和CSS的区别

  1. 新增了 rpx 尺寸单位
  • 在CSS中需要手动进行像素单位换算，例如 rem；
  • WXSS在底层支持新的尺寸单位 rpx ，在不同大小的屏幕上小程序会自动进行换算
  1. 提供了全局的样式和局部样式
  • 项目根目录中的app.wxss会作用于所有小程序页面
  • 局部页面中的.wxss 只会对当前局部页面生效
  1. WXSS仅支持部分CSS选择器
  • .class 和 #id
  • element
  • 并集选择器、后代选择器
  • ::after 和 ::before等伪类选择器
    只要不是特别冷门的选择器，WXSS都是能够给予支持的

小程序中的.js文件

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

.js文件的分类

  1. app.js

是整个小程序项目的入口文件，通过调用App()函数来启动整个小程序。

  1. 页面的.js文件

是页面的入口文件，通过调用Page()函数来创建并运行对应的页面。

  1. 普通的.js文件

是普通的功能模块文件，用来封装公共的函数或属性供页面使用。

宿主环境

什么是宿主环境？

宿主环境（host environment）指的是程序运行所必需的依赖环境。例如：
Android系统和IOS系统是两个不同的宿主环境。安卓版的微信App是不能在IOS环境下运行的，所以，Android是安卓软件的宿主环境，脱离了宿主环境的软件是没有任何意义的！


小程序的宿主环境

众所周知，小程序并不是直接安装在手机操作系统上的，而是安装在手机微信内的，所以手机微信才是小程序的直接宿主环境。

小程序借助宿主环境提供的能力，可以完成很多普通网页无法完成的功能，例如：
微信扫码、微信支付、微信登录、地理定位、等等……

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

  1. 通信模型
  2. 运行机制
  3. 组件
  4. API

通信的主体

小程序中通信的主体是渲染层和逻辑层，其中：

  1. WXML模版和WXSS样式工作在渲染层
  2. JS脚本工作在逻辑层

渲染层与逻辑层之间是需要进行通信的，故通信的主体就是渲染层和逻辑层。

小程序中的通信模型分为两部分

  1. 渲染层和逻辑层之间的通信
  2. 逻辑层和第三方服务器之间的通信

都是由微信客户端进行转发的

小程序运行机制——启动的过程

  1. 将小程序的代码包下载到本地
  2. 解析app.json全局配置文件
  3. 执行app.js小程序入口文件，调用App（）创建小程序实例
  4. 渲染小程序首页
  5. 小程序启动完成

小程序运行机制——页面渲染过程

  1. 加载解析页面的.json配置文件
  2. 加载页面的.wxml模版和.wxss样式
  3. 执行页面的.js文件，调用Page()创建页面实例
  4. 页面渲染完成

小程序组件

小程序中的组件也是由宿主环境提供的，开发者可以基于组件快速搭建出漂亮的页面结构。官方把小程序的组件分为9大类，分别是：

  1. 视图容器
  2. 基础内容
  3. 表单组件
  4. 导航组件
  5. 媒体组件
  6. map地图组件
  7. canvas画布组件
  8. 开放能力
  9. 无障碍访问

下篇文章内容：小程序常用组件使用与API分类
专栏订阅入口【小程序｜原力计划】

WXMLWXSSblockquotestrongxff小程序前端微信小程序

有关【小程序从0到1】宿主环境｜WXML｜WXSS｜JS逻辑交互的更多相关文章

  1. ruby - 在 Ruby 程序执行时阻止 Windows 7 PC 进入休眠状态 - 2

    我需要在客户计算机上运行Ruby应用程序。通常需要几天才能完成(复制大备份文件)。问题是如果启用sleep，它会中断应用程序。否则，计算机将持续运行数周，直到我下次访问为止。有什么方法可以防止执行期间休眠并让Windows在执行后休眠吗？欢迎任何疯狂的想法;-) 最佳答案 Here建议使用SetThreadExecutionStateWinAPI函数，使应用程序能够通知系统它正在使用中，从而防止系统在应用程序运行时进入休眠状态或关闭显示。像这样的东西:require'Win32API'ES_AWAYMODE_REQUIRED=0x0

  2. ruby - 如何指定 Rack 处理程序 - 2

    Rackup通过Rack的默认处理程序成功运行任何Rack应用程序。例如:classRackAppdefcall(environment)['200',{'Content-Type'=>'text/html'},["Helloworld"]]endendrunRackApp.new但是当最后一行更改为使用Rack的内置CGI处理程序时，rackup给出“NoMethodErrorat/undefinedmethod`call'fornil:NilClass”:Rack::Handler::CGI.runRackApp.newRack的其他内置处理程序也提出了同样的反对意见。例如Rack

  3. ruby - 在 Ruby 中编写命令行实用程序 - 2

    我想用ruby​​编写一个小的命令行实用程序并将其作为gem分发。我知道安装后，Guard、Sass和Thor等某些gem可以从命令行自行运行。为了让gem像二进制文件一样可用，我需要在我的gemspec中指定什么。 最佳答案 Gem::Specification.newdo|s|...s.executable='name_of_executable'...endhttp://docs.rubygems.org/read/chapter/20 关于ruby-在Ruby中编写命令行实用程序

  4. ruby-on-rails - Rails 应用程序之间的通信 - 2

    我构建了两个需要相互通信和发送文件的Rails应用程序。例如，一个Rails应用程序会发送请求以查看其他应用程序数据库中的表。然后另一个应用程序将呈现该表的json并将其发回。我还希望一个应用程序将存储在其公共(public)目录中的文本文件发送到另一个应用程序的公共(public)目录。我从来没有做过这样的事情，所以我什至不知道从哪里开始。任何帮助，将不胜感激。谢谢! 最佳答案 无论Rails是什么，几乎所有Web应用程序都有您的要求，大多数现代Web应用程序都需要相互通信。但是有一个小小的理解需要你坚持下去，网站不应直接访问彼此

  5. ruby - 无法运行 Rails 2.x 应用程序 - 2

    我尝试运行2.x应用程序。我使用rvm并为此应用程序设置其他版本的ruby​​:$rvmuseree-1.8.7-head我尝试运行服务器，然后出现很多错误:$script/serverNOTE:Gem.source_indexisdeprecated,useSpecification.Itwillberemovedonorafter2011-11-01.Gem.source_indexcalledfrom/Users/serg/rails_projects_terminal/work_proj/spohelp/config/../vendor/rails/railties/lib/r

  6. ruby-on-rails - Rails 应用程序中的 Rails : How are you using application_controller. rb 是新手吗？ - 2

    刚入门rails，开始慢慢理解。有人可以解释或给我一些关于在application_controller中编码的好处或时间和原因的想法吗？有哪些用例。您如何为Rails应用程序使用应用程序Controller？我不想在那里放太多代码，因为据我了解，每个请求都会调用此Controller。这是真的？ 最佳答案 ApplicationController实际上是您应用程序中的每个其他Controller都将从中继承的类(尽管这不是强制性的)。我同意不要用太多代码弄乱它并保持干净整洁的态度，尽管在某些情况下ApplicationContr

  7. ruby-on-rails - 如何在 ruby​​ 交互式 shell 中有多行？ - 2

    这可能是个愚蠢的问题。但是，我是一个新手......你怎么能在交互式ruby​​shell中有多行代码？好像你只能有一条长线。按回车键运行代码。无论如何我可以在不运行代码的情况下跳到下一行吗？再次抱歉，如果这是一个愚蠢的问题。谢谢。 最佳答案 这是一个例子:2.1.2:053>a=1=>12.1.2:054>b=2=>22.1.2:055>a+b=>32.1.2:056>ifa>b#Thecode‘if..."startsthedefinitionoftheconditionalstatement.2.1.2:057?>puts"f

  8. ruby-on-rails - 如何在我的 Rails 应用程序 View 中打印 ruby​​ 变量的内容？ - 2

    我是一个Rails初学者，但我想从我的RailsView(html.haml文件)中查看Ruby变量的内容。我试图在ruby​​中打印出变量(认为它会在终端中出现)，但没有得到任何结果。有什么建议吗？我知道Rails调试器，但更喜欢使用inspect来打印我的变量。 最佳答案 您可以在View中使用puts方法将信息输出到服务器控制台。您应该能够在View中的任何位置使用Haml执行以下操作:-puts@my_variable.inspect 关于ruby-on-rails-如何在我的R

  9. ruby-on-rails - 在 Rails 开发环境中为 .ogv 文件设置 Mime 类型 - 2

    我正在玩HTML5视频并且在ERB中有以下片段:mp4视频从在我的开发环境中运行的服务器很好地流式传输到chrome。然而firefox显示带有海报图像的视频播放器，但带有一个大X。问题似乎是mongrel不确定ogv扩展的mime类型，并且只返回text/plain，如curl所示:$curl-Ihttp://0.0.0.0:3000/pr6.ogvHTTP/1.1200OKConnection:closeDate:Mon,19Apr201012:33:50GMTLast-Modified:Sun,18Apr201012:46:07GMTContent-Type:text/plain

  10. java - 我的模型类或其他类中应该有逻辑吗 - 2

    我只想对我一直在思考的这个问题有其他意见，例如我有classuser_controller和classuserclassUserattr_accessor:name,:usernameendclassUserController//dosomethingaboutanythingaboutusersend问题是我的User类中是否应该有逻辑user=User.newuser.do_something(user1)oritshouldbeuser_controller=UserController.newuser_controller.do_something(user1,user2)我

随机推荐