【微信小程序】--WXML & WXSS & JS 逻辑交互介绍(四)

简介: 【微信小程序】--WXML & WXSS & JS 逻辑交互介绍(四)



一、小程序页面

  • 新建小程序页面

  小程序页面创建是非常简单的,只需要在 app.json -> pages 中新增页面的存放路径,微信开发者工具就会帮我们自动创建对应的页面文件🥰。

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs",
    "pages/CshPage1/CshPage1" //只要添加页面存放路径,就会自动创建
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle":"black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

  保存文件之后就能看到新建立的页面文件,整个过程还是非常便捷的,这里就有个想法了,如果把配置文件里路径删除呢,会不会把页面文件也删除,试一下发现是不行。

  • 修改项目首页

  有时候我们不想用 index 来当首页,(那就把 index 页面改成想要的首页,也不是不行,但是还有其他简单的方法)只需要调整 app.json -> pages 数组中页面路径的前后顺序,即可修改项目的首页。小程序会把排在第一位的页面,当作项目首页进行渲染.

{
  "pages":[
    "pages/CshPage1/CshPage1", //放在第一位
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle":"black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

   修改之后编译就能看模拟器将 CshPage1 变成了首页。

二、WXML模板

  • WXML

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

  • WXML 和 HTML 的区别

  虽然 WXMLHTML 作用很相似,都是由标签、属性等等构成。但是很多地方不一样的地方。从下面表格就可以看得出来 WXML 用起来比较有 Vue 的感觉,双向数据绑定更好利于开发。

不同点 WXML HTML
标签名称 view, text, image, navigator div, span, img, a
属性节点 <navigator url=“/pages/home/home”>
</navigator>
<a href=“#”>超链接</a>
模板语法 提供了类似于 Vue 中的模板语法:
数据绑定、列表渲染、条件渲染等

三、WXSS样式

  • WXSS

  WXSS (WeiXin Style Sheets)是一套样式语言,用于描述 WXML 的组件样式,看这名字不难猜出其作用类似于网页开发中的 CSS。

  • WXSS 和 CSS 的区别

   WXSS 具有 CSS 大部分的特性,小程序在 WXSS 也做了一些扩充和修改。比如新增了 rpx 尺寸单位、样式作用域等。

不同点 WXSS CSS
尺寸单位 view, text, image, navigator CSS 中需要手动进行像素单位换算,例如 rem
属性节点 提供了全局的样式和局部样式
app.wxss 作为全局样式,会作用于当前小程序的所有页面,
局部页面样式 page.wxss 仅对当前页面生效。
模板语法 WXSS 仅支持部分 CSS 选择器
.class 和 #id
element
并集选择器、后代选择器
全支持

四、JS 逻辑交互

  一个项目仅仅只有界面展示是不够的,还需要和用户做交互:响应用户的点击、获取用户的位置等等。

  在小程序里边,我们就通过编写 JS 脚本文件来处理用户的操作。这样就可以小程序中的 JS 文件分为三大类:

文件 作用
app.js 整个小程序项目的入口文件,通过调用 App() 函数来启动整个小程序;
page .js 页面的入口文件,通过调用 Page() 函数来创建并运行页面
function.js 普通的功能模块文件,用来封装公共的函数或属性供页面使用;

总结

  感谢观看,这里就是微信小程序WXML、WXSS和JS逻辑的简单介绍,如果觉得有帮助,请给文章点个赞吧,让更多的人看到。🌹 🌹 🌹

  也欢迎你,关注我。👍 👍 👍

  原创不易,还希望各位大佬支持一下,你们的点赞、收藏和留言对我真的很重要!!!💕 💕 💕 最后,本文仍有许多不足之处,欢迎各位认真读完文章的小伙伴们随时私信交流、批评指正!下期再见。


相关文章
|
9天前
|
小程序 前端开发 开发者
【微信小程序】-- WXSS 模板样式- rpx & import (十三)
【微信小程序】-- WXSS 模板样式- rpx & import (十三)
|
1天前
|
JavaScript 小程序
微信小程序 搜索框实现模糊搜索(带模拟数据,js,wxml,wxss齐全
微信小程序 搜索框实现模糊搜索(带模拟数据,js,wxml,wxss齐全
|
9天前
|
JavaScript 前端开发
JS中运算符的算术、赋值、+、比较(不同类型之间比较)、逻辑
JS中运算符的算术、赋值、+、比较(不同类型之间比较)、逻辑
10 1
|
9天前
|
小程序
微信小程序启动报错 WXML file not found: ./miniprogram_npm/@vant/weapp/action-sheet/index.wxml
微信小程序启动报错 WXML file not found: ./miniprogram_npm/@vant/weapp/action-sheet/index.wxml
46 3
|
9天前
|
小程序 JavaScript 前端开发
微信小程序全栈开发中的数据交互与渲染优化
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中的数据交互与渲染优化,旨在提升小程序性能和用户体验。数据交互涉及GET、POST、PUT和DELETE请求,优化措施包括使用HTTPS、数据压缩、缓存及限流。渲染优化则涵盖虚拟DOM、减少DOM操作、组件化和模板使用,以及WXSS样式设计和媒体查询。利用性能监控工具可识别并优化性能瓶颈。开发者应综合运用这些策略,持续优化小程序。
|
9天前
|
小程序
【微信小程序】-- WXSS 模板样式- 全局样式和局部样式(十四)
【微信小程序】-- WXSS 模板样式- 全局样式和局部样式(十四)
|
9天前
|
小程序 JavaScript 索引
【微信小程序】-- WXML 模板语法 - 列表渲染 -- wx:for & wx:key(十二)
【微信小程序】-- WXML 模板语法 - 列表渲染 -- wx:for & wx:key(十二)
|
9天前
|
小程序 前端开发 API
微信小程序全栈开发中的异常处理与日志记录
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中的异常处理和日志记录,强调其对确保应用稳定性和用户体验的重要性。异常处理涵盖前端(网络、页面跳转、用户输入、逻辑异常)和后端(数据库、API、业务逻辑)方面;日志记录则关注关键操作和异常情况的追踪。实践中,前端可利用try-catch处理异常,后端借助日志框架记录异常,同时采用集中式日志管理工具提升分析效率。开发者应注意安全性、性能和团队协作,以优化异常处理与日志记录流程。
|
9天前
|
小程序 安全 数据安全/隐私保护
微信小程序全栈开发中的身份认证与授权机制
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中的身份认证与授权机制。身份认证包括手机号验证、微信登录和第三方登录,而授权机制涉及角色权限控制、ACL和OAuth 2.0。实践中,开发者可利用微信登录获取用户信息,集成第三方登录,以及实施角色和ACL进行权限控制。注意点包括安全性、用户体验和合规性,以保障小程序的安全运行和良好体验。通过这些方法,开发者能有效掌握小程序全栈开发技术。
|
9天前
|
JavaScript 前端开发 小程序
微信小程序全栈开发之性能优化策略
【4月更文挑战第12天】本文探讨了微信小程序全栈开发的性能优化策略,包括前端的资源和渲染优化,如图片压缩、虚拟DOM、代码分割;后端的数据库和API优化,如索引创建、缓存使用、RESTful API设计;以及服务器的负载均衡和CDN加速。通过这些方法,开发者可提升小程序性能,优化用户体验,增强商业价值。

热门文章

最新文章