微信小程序开发学习笔记1——安心食疗

news2025/1/23 9:20:55

2.1小程序代码结构

在这里插入图片描述

目录结构

1.小程序的目录
pages:小程序的页面 页面路径
一个小程序页面由四个文件组成,分别是:
xxx.js xxx.wxml xxx.json xxx.wxss
注意:为了方便开发者减少配置项,描述页面的四个文件必须具有相同的路径与文件名
如果使用其他的文件:比如 图片文件 和pages文件同级创建文件夹
2.utils 自带的一个js文件 处理日期格式的 在日志页面使用js文件
3.app.js 全局的逻辑
4.app.json 全局的配置 窗口样式
5.app.wxss 全局的样式
6.project.config.json 配置文件 文件的资源介绍 引用的文件 以及窗口样式
7.sitemap.json 开发者可以通过 sitemap.json 配置,或者管理后台页面收录开关来配置其小程序页面是否允许微信索引

在这里插入图片描述

2.2 全局app.json-pages页面

文档位置:指南—目录结构----app.json 小程序公共配置
功能:小程序根目录下的 app.json 文件用来对微信小程序进行全局配置,决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等
app.json :不能有注释

2.2.1 pages页面路径

在这里插入图片描述

属性:pages用于指定小程序由哪些页面组成,每一项都对应一个页面的路径(含文件名)
1.pages属性里面 第一个页面路径就是进入小程序首页
2.pages里面 写的页面的路径名字不写后缀
3.pages文件的最后一个页面路径结束后 不能加, 逗号
4.创建文件 在pages文件上 右键先创建文件名字,继续右键Page 会生成4个文件 wxml js json wxss,同时app.json里面pages属性自动配置页面路径。

2.2.2 window窗口配置

属性:window用于设置小程序的状态栏、导航条、标题、窗口背景色
{
“backgroundTextStyle”: “dark”,//loading图标颜色
“navigationBarBackgroundColor”: “#000”,//导航背景颜色
“navigationBarTextStyle”:“white”,//导航标题颜色
“navigationBarTitleText”: “我的小程序”,//导航标题内容
“backgroundColor”:“#999”,//窗口背景颜色 --下拉才可以看到
“enablePullDownRefresh”:true//允许窗口下拉
}

2.2.3 页面json配置

每一个小程序页面也可以使用同名 .json 文件来对本页面的窗口表现进行配置,页面中配置项会覆盖 app.json 的 window 中相同的配置项

2.3 标签栏配置-app.json

tabBar
如果小程序是一个多 tab 应用(客户端窗口的底部或顶部有 tab 栏可以切换页面),可以通过 tabBar 配置项指定 tab 栏的表现,以及 tab 切换时显示的对应页面
在这里插入图片描述
在这里插入图片描述

"tabBar":{
"color":"#666",//tab文字默认颜色
"selectedColor":"#000",//tab文字选中高亮颜色
"backgroundColor":"#eee",//tab背景颜色
"borderStyle":"black",//tabber的边框颜色
"position":"bottom",//tab位置
"list":[//tab的内容  最少2个  最多是5个内容 
{
"pagePath":"pages/index/index",//路径 路径在pages里面存在
"text":"首页",//tab文字
"iconPath":"images/tab1.png",//默认iicon
"selectedIconPath":"images/tab2.png"//选中的icon高亮
},
{
"pagePath": "pages/news/news",
"text": "新闻",
"iconPath": "images/tab3.png",
"selectedIconPath": "images/tab4.png"
},
{
"pagePath": "pages/about/about",
"text": "我的",
"iconPath": "images/tab5.png",
"selectedIconPath": "images/tab6.png"
}
]
}

在这里插入图片描述

三、样式

位置:指南—目录结构—app.wxss (page.wxss)’ 小程序公共样式表
WXSS (WeiXin Style Sheets)是一套样式语言,用于描述 WXML 的组件样式。

WXSS 用来决定 WXML 的组件应该怎么显示。
为了适应广大的前端开发者,WXSS 具有 CSS 大部分特性。同时为了更适合开发微信小程序,WXSS 对 CSS 进行了扩充以及修改。
与 CSS 相比,WXSS 扩展的特性有:
①尺寸单位
②样式导入

3.1 尺寸单位

rpx(responsive pixel): 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素。

建议: 开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准

3.2 样式导入

使用@import语句可以导入外联样式表,@import后跟需要导入的外联样式表的相对路径,用;表示语句结束。
示例代码:
/** common.wxss 文件**/
.small-p {//外部的wxss样式
padding:5px;
}
/** app.wxss 文件**/
@import “common.wxss”;//引入外部的wxss
.middle-p {//自己当前的wxss样式
padding:15px;
}
路径效果图:创建外部的base.wxss
app.wxss调用:
在这里插入图片描述

页面的pages的页面调用外部样式路径
在这里插入图片描述

四、组件

4.1 视图容器

view容器
swiper滑块视图容器。其中只可放置swiper-item组件,否则会导致未定义的行为
轮播:
在这里插入图片描述
图片:
在这里插入图片描述

4.2 基础内容

在这里插入图片描述

4.3 表单

在这里插入图片描述

4.4 导航

<navigator url='../details/details' open-type="navigate">新闻详情页面</navigator>

url:跳转的页面路径 相对路径地址
open-type 的合法值 跳转的方式
navigate:保留当前页面,跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层
redirect:关闭当前页面,跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面
switchTab:跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面
reLaunch:关闭所有页面,打开到应用内的某个页面
navigateBack:关闭当前页面,返回上一页面或多级页面
exit:退出小程序,target="miniProgram"时生效 (真机测试)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/397113.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

MySQL(二)视图、锁、存储过程、触发器、锁以及常用工具

MySQL进阶视图检查选项视图的更新存储过程存储过程基本语法变量系统变量用户自定义变量局部变量if判断参数casewhile循环repeat循环loop循环cursor游标handler条件处理程序存储函数触发器锁全局锁表级锁表锁元数据锁意向锁行级锁行锁间隙锁&临键锁InnoDB引擎逻辑存储结构事…

使用Arduino开发ESP32:开发环境搭建

开发环境搭建 使用Arduino开发ESP32开发环境搭建方式和用Arduino开发ESP8266相似&#xff1a;https://blog.csdn.net/Naisu_kun/article/details/80186950#t0 下载安装Arduino IDE&#xff1a; https://www.arduino.cc/en/Main/Software Arduino IDE中添加ESP32开发板数据&a…

第二道pwn题:shellcode

题目来自视频&#xff1a;链接&#xff1a;https://pan.baidu.com/s/17vX9dbfHkXBw71mcEXBgNQ?pwd6666 提取码&#xff1a;6666查看文件类型和保护&#xff0c;虽然现在的我还没有明白太多的保护。64位&#xff0c;放到ida里边rbp:保存的是栈中当前执行函数的基本地址。当前执…

xCAT安装指南

一、简介 xCAT使您能够轻松管理任何类型的技术计算工作负载的大量服务器。xCAT以卓越的扩展、各种支持的硬件和操作系统、虚拟化平台和完整的“day0”设置功能而闻名。 二、安装指南 免责声明 这些说明仅为指南&#xff0c;具体细节可能因操作系统版本而略有不同。有关最新推…

TCP与UDP

概述 传输层时向上层的应用层提供通讯服务的&#xff0c;是属于面向通信部份的最高层&#xff0c;同时也是用户功能的最底层 传输层有两个很重要的特点&#xff1a;复用、分用 复用&#xff1a;应用层所有的应用进程都可以通过运输层再传到网络层 分用&#xff1a;运输层从网…

【Unity】多分辨率适配

笔者按&#xff1a;使用Unity版本为2021.3LTS&#xff0c;与其他版本或有异同。请仅做参考 一、前言。 本文是笔者在学习使用Unity引擎的过程中&#xff0c;产学研的一个笔记。由笔者根据官方文档Unity User Manual 2021.3 (LTS)/Create user interfaces (UI)/Unity UI/UI 操作…

mingw编译opencv

我这里是msys2 这个是msys2的教程 https://blog.csdn.net/qq_39942341/article/details/105931335?ops_request_misc%257B%2522request%255Fid%2522%253A%2522167821146216800197067008%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&requ…

【LeetCode】剑指 Offer 24. 反转链表 p142 -- Java Version

题目链接&#xff1a;https://leetcode.cn/problems/fan-zhuan-lian-biao-lcof/submissions/ 1. 题目介绍&#xff08;24. 反转链表&#xff09; 定义一个函数&#xff0c;输入一个链表的头节点&#xff0c;反转该链表并输出反转后链表的头节点。 【测试用例】&#xff1a; 示…

C++右值引用/移动语义

在此之前&#xff0c;我们所用的引用&#xff0c;其实都是左值引用。 int a 10; int& ra a; 下面我们来重新认识一下引用&#xff1a; 而何为左值&#xff1f;左值引用其实是什么&#xff1f;请往下看~ 左值是一个表示数据的表达式(如变量名或解引用的指针)&#xff…

77. writerows写入多行

文章目录1. 目标任务2. 准备工作3. writerow单行写入4. writerows多行写入5. a以追加的模式写入值6. 总结1. 目标任务 新建【各班级成绩】文件夹&#xff1b; 在该文件夹下新建一个【1班成绩单.csv】文件&#xff1b; 在该文件中写入下面的内容&#xff1a; 成绩 姓名 刘一…

CentOS 8搭建EMQX集群

概览 EMQX (opens new window)是一款大规模可弹性伸缩的云原生分布式物联网 MQTT (opens new window)消息服务器。 EMQ X 设计目标是实现高可靠&#xff0c;并支持承载海量物联网终端的MQTT连接&#xff0c;支持在海量物联网设备间低延时消息路由: 1. 稳定承载大规模的 MQTT 客…

Allegro如何添加菜单栏操作指导

Allegro如何添加菜单栏操作指导 用Allegro设计PCB的时候,将常用的命令放在菜单栏的话可以方便使用,省去设计时间,菜单如下图 Allegro支持自由添加或者删除菜单,具体操作如下 点击View点击Customize Toolbar

【使用vue init和vue create的区别以及搭建vue项目的教程】

vue init 是vue-cli2.x的初始化方式&#xff0c;可以使用github上面的一些模板来初始化项目 webpack是官方推荐的标准模板名 使用方式&#xff1a;vue init webpack 项目名称 例如使用github上面electron-vue的模板使用方式&#xff1a;vue init electron-vue 项目名称教程目…

Java的数据库编程:JDBC

Content &#x1f389;1什么是API &#x1f389;2.什么是JDBC &#x1f389;3.数据库驱动包的安装 &#x1f389;4.数据库安装包在idea的使用 &#x1f389;5.JDBC的增删改查的简单实现 今天为大家带来JAVA的数据库编程,也就是用Java实现数据库 数据库的最基本的操作就是…

分布式锁简介

Redis因为单进程、性能高常被用于分布式锁&#xff1b;锁在程序中作用是同步工具&#xff0c;保证共享资源在同一时刻只能被一个线程访问。 Java中经常用的锁synchronized、Lock&#xff0c;但是Java的锁智能保证单机的时候有效&#xff0c;分布式集群环境就无能为力了&#xf…

软件设计师错题集

软件设计师错题集一、计算机组成与体系结构1.1 浮点数1.2 Flynn分类法1.3 指令流水线1.4 层次化存储体系1.4.1 程序的局限性1.5 Cache1.6 输入输出技术1.7 总线系统1.8 CRC循环冗余校验码二、数据结构与算法基础2.1 队列与栈2.2 树与二叉树的特殊性2.3 最优二叉树&#xff08;哈…

VisualSP Enterprise - February crack

VisualSP Enterprise - February crack VisualSP(可视化支持平台)提供了一个上下文中完全可定制的培训平台&#xff0c;它可以作为企业web应用程序的覆盖层提供。无论员工正在使用什么应用程序&#xff0c;他们都能够快速访问页面培训和指导&#xff0c;说明如何最有效地使用该…

C++基础了解-14-C++ 字符串

C 字符串 一、C 风格字符串 C 风格的字符串起源于 C 语言&#xff0c;并在 C 中继续得到支持。字符串实际上是使用 null 字符 \0 终止的一维字符数组。因此&#xff0c;一个以 null 结尾的字符串&#xff0c;包含了组成字符串的字符。 下面的声明和初始化创建了一个 RUNOOB …

教你如何搭建店铺—收支管理系统,demo可分享

1、简介1.1、案例简介本文将介绍&#xff0c;如何搭建店铺-收支管理。1.2、应用场景以店铺收支管理为核心&#xff0c;维度数据分析&#xff0c;智能指导门店经营&#xff0c;账目清晰一目了然&#xff0c;店铺经营更高效。2、设置方法2.1、表单搭建1&#xff09;新建表单【客户…

如何使用码匠连接 DynamoDB

目录 在码匠中集成 DynamoDB 在码匠中使用 DynamoDB 关于码匠 DynamoDB 是亚马逊 AWS 的一种高性能、全托管的 NoSQL 数据库服务。作为一种数据源&#xff0c;DynamoDB 能够提供高度可扩展性、低延迟和可靠性。它支持多种数据类型和数据模型&#xff0c;包括键-值、文档和图…