当前位置: 首页 > news >正文

微信小程序学习笔记(1)

文章目录

  • 一、文件作用
    • `app.json`:
    • `project.config.json`:
    • `sitemap.json`
    • 页面中`.json`
  • 二、项目首页
  • 三、语法
    • **WXML**和**HTML**
    • WXSS 和CSS的区别
    • 小程序中.js文件的分类

一、文件作用

在这里插入图片描述

app.json

当前小程序的全局配置,包括所有页面路径、窗口外观、界面表现、底部tab

在这里插入图片描述

pages:当前小程序的所有页面路径

window:全局定义小程序的背景色、文字色等可以设置如下:

在这里插入图片描述

更多用法:window用法

style:全局定义小程序组件所使用的样式版本

sitemapLocation:指定sitemap.json的路径

project.config.json:

项目配置文件,记录对小程序开发工具所做的个性化配置

setting:保存了编译相关的配置

appid:小程序的账号 ID

sitemap.json

微信现已开放小程序内搜索,效果类似于PC网页的SEO。sitemap.json文件用来配置小程序页面是否允许
微信索引。
当开发者允许微信索引时,微信会通过爬虫的形式,为小程序的页面内容建立索引。当用户的搜索关键字和页面的索引匹配成功的时候,小程序的页面将可能展示在搜索结果中。

页面中.json

app.json一样,但是页面中的配置会覆盖app.json相同window配置

二、项目首页

app.jsonpages的前后顺序,默认第一个是首页

三、语法

WXMLHTML

  • 标签名称不同
    HTML ( div, span, img, a )
    WXML ( view, text, image, navigator)

    (上面的是一一对应的类似用法比较)

  • 属性节点不同

    <a href="#">超链接</a>
    <navigator url="/ pages/home/home"> </navigato>
    
  • 提供了类似于Vue中的模板语法
    数据绑定
    列表渲染

    条件渲染

WXSS 和CSS的区别

① 新增了rpx尺寸单位

  • cSS中需要手动进行像素单位换算,例如 rem
  • wXSS在底层支持新的尺寸单位 rpx,在不同大小的屏幕上小程序会自动进行换算

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

  • 项目根目录中的app.wxSs会作用于所有小程序页面
  • 局部页面的.wxSS样式仅对当前页面生效

③ WxSS仅支持部分CSS选择器

  • .class和#id
  • element
  • 并集选择器、后代选择器
  • ::after和 ::before等伪类选择器

小程序中.js文件的分类

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

appg.js

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

② 页面的.js 文件

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

③ 普通的.js 文件

  • 是普通的功能模块文件,用来封装公共的函数或属性供页面使用
http://www.lryc.cn/news/368949.html

相关文章:

  • OpenGauss数据库-6.表空间管理
  • 相约乌镇 续写网络空间命运与共的新篇章(二)
  • 【全网最简单的解决办法】vscode中点击运行出现仅当从 VS 开发人员命令提示符处运行 VS Code 时,cl.exe 生成和调试才可用
  • NFS共享存储服务
  • Docker面试整理-Docker 常用命令
  • Cinema 4D 2024 软件安装教程、附安装包下载
  • 2024全国高考作文题解读(Chat GPT 4.0版本)
  • 欧美北美南美国外媒体投稿和东南亚中东亚洲媒体海外新闻发稿软文推广营销策略有哪些?
  • Rust-10-数据类型
  • C#面:PDB是什么东西? 在调试中它应该放在哪里
  • C#--使用CMake构建C++程序调用示例
  • 三十七篇:大数据架构革命:Lambda与Kappa的深度剖析
  • Vue3【十五】标签的Ref属性
  • Java实现数据结构——顺序表
  • 线程知识点总结
  • 计算机网络:数据链路层 - 扩展的以太网
  • 视频修复工具,模糊视频变清晰!
  • 协程库——面试问题
  • 数据结构与算法题目集(中文)6-2顺序表操作集
  • 8086 汇编笔记(十二):int 指令 端口 直接定址表
  • 揭开FFT时域加窗的奥秘
  • 【AI基础】第二步:安装AI运行环境
  • 【MySQL】聊聊唯一索引是如何加锁的
  • k8s-CCE使用node节点使用VIP--hostNetworkhostPort
  • 18、关于优化中央企业资产评估管理有关事项的通知
  • AI大模型日报#0610:港大等1bit大模型“解决AI能源需求”、谷歌开源TimesFM时序预测模型
  • 速盾:图片cdn加速 免费
  • 贪心算法例子
  • vivado HW_ILA_DATA、HW_PROBE
  • refault distance算法的一点理解