微信小程序开发【从0到1~入门篇】2023.08

一个小程序主体部分由三个文件组成,必须放在项目的根目录,如下:

文件必须作用
app.js小程序逻辑
app.json小程序公告配置
app.wxss小程序公告样式表

3. 小程序项目结构 

一个小程序页面由四个文件组成,分别是:

文件类型必须作用
js页面逻辑
wxml页面结构
json页面配置
wxss页面样式表

》》》》》》》》》》》》》》

首先在Demo项目根目录下创建app.json文件,其内容如下

{"pages":["pages/index/index"]
}

然后在Demo项目根目录下新建pages目录,在pages目录下新建index目录,接着在index目录下创建两个文件index.wxml和index.js。
index.wxml的内容为:

<view><view style="text-align:center;padding:200rpx"><text>{{motto}}</text></view>
</view>

index.js的内容为:

Page({data: {motto: 'Hello World',},onLoad() {}
})

完成上述步骤后开发者工具的结构如下:

点击小程序开发者工具的“编译”命令,开发者工具会对demo项目的内容进行编译,并在微信开发者工具的模拟器界面上显示出Hello World结果

4.4 给小程序当前页面设置局部配置(index.wxml为例:修改背景,字体颜色)

1. 选择pages下面的index目录里面的index.json文件里面修改配置

  • 完整代码如下!可直接复制粘贴
    {"usingComponents": {},"navigationBarBackgroundColor": "#000000","navigationBarTextStyle": "white","navigationBarTitleText": "第一个小程序项目","backgroundColor": "#eeeeee","backgroundTextStyle": "light"}

 

 4.3 给小程序新增一个页面

1. 进入app.json 在第一个pages数组里面指定生成页面文件路径即可自动创建

注!想要哪一个页面先展示可按顺序排即可,第一个页面路径就是第一个显示的页面

4.5 给小程序设置拖把栏(全局配置)

1. 选择app.json进入后在文件内第一个花括号里面添加代码进行编辑,多个节点进行逗号分开

 

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

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

相关文章

Swintransformer模型的优化

SwinTransformer模型优化 文章目录 SwinTransformer模型优化1.SwinTransformer概述2.性能瓶颈分析3.模型优化3.1.transpose消除3.2.更好的layergroup3.1.1.SliceOp3.1.2.SqueezeOp3.1.3.weight切分 4.优化效果 1.SwinTransformer概述 自从Transformer在NLP任务上取得突破性的进…

20天突破英语四级高频词汇——第②天

2&#xfeff;0天突破英语四级高频词汇~第2天加油(ง •_•)ง&#x1f4aa; &#x1f433;博主&#xff1a;命运之光 &#x1f308;专栏&#xff1a;英语四级高频词汇速记 &#x1f30c;博主的其他文章&#xff1a;点击进入博主的主页 目录 2&#xfeff;0天突破英语四级高…

Bert详细学习及代码实现详解

BERT概述 BERT的全称是Bidirectional Encoder Representation from Transformers&#xff0c;即双向Transformer的Encoder&#xff0c;因为decoder是不能获要预测的信息的。在大型语料库&#xff08;Wikipedia BookCorpus&#xff09;上训练一个大型模型&#xff08;12 层到 …

【基础IO】文件系统 {磁盘的物理结构,存储结构,逻辑结构;CHS 和 LBA 寻址方式;磁盘分区和块组;文件inode;软硬链接}

文件系统 文件分为&#xff1a; 内存文件&#xff1a;被进程打开的文件&#xff0c;文件被加载到内存中供进程快速读写。磁盘文件&#xff1a;没有被打开的文件&#xff0c;保存在磁盘上。磁盘文件被分门别类的存储和管理&#xff0c;用于支持更好的存取。 提示&#xff1a; …

华为发布数字资产继承功能

在华为开发者大会2023&#xff08;HDC.Together&#xff09;上&#xff0c;华为常务董事、终端BG CEO、智能汽车解决方案BU CEO余承东正式发布了数字资产继承功能&#xff0c;HarmonyOS提供了安全便捷的数字资产继承路径。 在鸿蒙世界中&#xff0c;我们每个人在每台设备、应用…

复原 IP 地址——力扣93

文章目录 题目描述回溯题目描述 回溯 class Solution{public:static constexpr int seg_count=4<

第6集丨Vue 江湖 —— Class 与 Style 样式绑定

目录 一、class绑定1.1 字符串1.2 数组1.3 对象1.4 完整案例 二、style绑定2.1 案例2.2 效果 操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是 attribute&#xff0c;所以我们可以用 v-bind 处理它们&#xff1a;只需要通过表达式计算出字符串结果即可…

Typescript - 索引签名

目录 1&#xff0c;什么是索引签名1&#xff0c;js 中使用对象的属性2&#xff0c;ts 中的索引签名3&#xff0c;扩展索引签名定义的类型 2&#xff0c;与 Record 对比3&#xff0c;遇到的问题1&#xff0c;索引 key 的类型问题&#xff0c;keyof2&#xff0c;索引 key 的类型问…

uni-app:实现表格多选及数据获取

效果&#xff1a; 代码&#xff1a; <template><view><scroll-view scroll-x"true" style"overflow-x: scroll; white-space: nowrap;"><view class"table"><view class"table-tr"><view class&quo…

mysql高级三:sql性能优化+索引优化+慢查询日志

内容介绍 单表索引失效案例 0、思考题&#xff1a;如果把100万数据插入MYSQL &#xff0c;如何提高插入效率 &#xff08;1&#xff09;关闭自动提交&#xff0c;只手动提交一次 &#xff08;2&#xff09;删除除主键索引外其他索引 &#xff08;3&#xff09;拼写mysql可以执…

Typescript中的元组与数组的区别

Typescript中的元组与数组的区别 元组可以应用在经纬度这样明确固定长度和类型的场景下 //元组和数组类似&#xff0c;但是类型注解时会不一样//元组赋值的类型、位置、个数需要和定义的类型、位置、个数完全一致&#xff0c;不然会报错。 // 数组 某个位置的值可以是注解中的…

新能源电车交流充电桩控制主板的安全性维度

你是否想过&#xff0c;交流充电桩主板的安全性有多重要?它不仅关乎充电设备的寿命&#xff0c;还关乎电网的安全。今天我们就来探讨一下&#xff0c;如何从多个维度保证交流充电桩主板的安全性。 首先&#xff0c;交流充电桩主板采用多重安全保护技术&#xff0c;可以有效地保…

SM2算法的抗侧信道攻击

SM2 算法中底层模块抗侧信道 标量乘 ( [ k ] G [k]G [k]G) 运算过程中需要用到大量的倍点运算与点加运算。传统倍点运算与点加运算之间由于需要的运算次数不同&#xff0c;功耗存在明显区别&#xff0c;攻击者可以通过功耗波形特征分析密钥信息。传统算法如下图所示&#xff1a…

11. 使用tomcat中碰到的一些问题

文章目录 问题一&#xff1a;Tomcat的startup.bat启动后出现乱码问题二&#xff1a;一闪而退之端口占用问题三&#xff1a;非端口问题的一闪而退问题四&#xff1a;服务器的乱码和跨域问题问题五: 在tomcat\webapps\下创建文件夹为什么tomcat重启就会丢失问题六&#xff1a;Tom…

【C++】AVL(平衡二叉搜索树)树的原理及实现

文章目录 一、引言 二、AVL树的概念 三、AVL树的插入 3、1 AVL树的简单插入 3、2 旋转分类 3、2、1 新节点插入较高右子树的右侧&#xff1a;左单旋 3、2、2 新节点插入较高左子树的左侧&#xff1a;右单旋 3、2、3 新节点插入较高左子树的右侧&#xff1a;左右双旋&#xff08…

数据库执行新增时,字段写值错乱/字段值写反了 的问题

今天给表加了个字段&#xff0c;执行新增后查看表&#xff0c;发现数据库执行新增完成后&#xff0c;字段写值错乱了&#xff0c;表现为这两个字段的值写反了↓↓↓↓↓↓ 排查了xml中所有赋值的地方&#xff0c;全都没有问题 字段与属性的通用映射&#xff1a; <resultMap…

【已解决】Java 中使用 ES 高级客户端库 RestHighLevelClient 清理百万级规模历史数据

&#x1f389;工作中遇到这样一个需求场景&#xff1a;由于ES数据库中历史数据过多&#xff0c;占用太多的磁盘空间&#xff0c;需要定期地进行清理&#xff0c;在一定程度上可以释放磁盘空间&#xff0c;减轻磁盘空间压力。 &#x1f388;在经过调研之后发现&#xff0c;某服务…

编织人工智能:机器学习发展历史与关键技术全解析

文章目录 1. 引言1.1 机器学习的定义1.2 重要性和应用场景重要性应用场景 2. 机器学习的早期历史2.1 初期理论与算法感知机决策树 2.2 早期突破支持向量机神经网络初探 3. 21世纪初期的发展3.1 集成学习方法随机森林XGBoost 3.2 深度学习的崛起卷积神经网络&#xff08;CNN&…

css-4:元素水平垂直居中的方法有哪些?如果元素不定宽高呢?

1、背景 在开发中&#xff0c;经常遇到这个问题&#xff0c;即让某个元素的内容在水平和垂直方向上都居中&#xff0c;内容不仅限于文字&#xff0c;可能是图片或其他元素。 居中是一个非常基础但又是非常重要的应用场景&#xff0c;实现居中的方法存在很多&#xff0c;可以将这…

Spring IOC

◆ 传统Javaweb开发的困惑 ◆ IoC、DI和AOP思想提出 ◆ Spring框架的诞生 Spring | Home IOC控制反转&#xff1a;BeanFactory 快速入门 package com.xiaolin.service.Impl;import com.xiaolin.dao.UserDao; import com.xiaolin.service.UserService;public class UserServic…