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

news2025/1/19 2:59:12

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

文件必须作用
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.coloradmin.cn/o/843247.html

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

相关文章

FL Studio Producer Edition 21 v21.0.3 Build 3517 Windows/mac官方中文版

FL Studio Producer Edition 21 v21.0.3 Build 3517 Windows FL Studio Producer Edition 21 v21.0.3 Build 3517 Windows/mac官方中文版是一个完整的软件音乐制作环境或数字音频工作站&#xff08;DAW&#xff09;。它代表了 25 多年的创新发展&#xff0c;将您创作、编曲、录…

Spring Boot通过切面实现方法耗时情况

Spring Boot通过切面实现方法耗时情况 依赖 <dependency><groupId>org.aspectj</groupId><artifactId>aspectjweaver</artifactId><version>1.9.9.1</version></dependency>自定义注解 package com.geekmice.springbootself…

【广州华锐视点】海上石油钻井VR在线实训平台

随着科技的不断发展&#xff0c;VR元宇宙平台已经成为了越来越多领域的培训工具。在海上石油钻井实训中&#xff0c;VR元宇宙平台也能够发挥重要的作用&#xff0c;为学员提供更加真实、直观的培训体验。 首先&#xff0c;VR元宇宙平台可以模拟真实的海上钻井作业环境。通过VR眼…

项目出bug,找不到bug,如何拉回之前的版本

1.用gitee如何拉取代码 本文为转载于「闪耀太阳a」的原创文章原文链接&#xff1a;https://blog.csdn.net/Gufang617/article/details/119929145 怎么从gitee上拉取代码 1.首先找到gitee上想要拉取得代码URL地址 点击复制这里的https地址 1 ps:&#xff08;另外一种方法&…

C++/Qt读写ini文件

今天介绍C/Qt读写ini文件&#xff0c;ini文件一般是作为配置文件来使用&#xff0c;比如一些程序的一些默认参数会写在一个ini文件中&#xff0c;程序运行时会进行对应的参数读取&#xff0c;详细可以查看百度ini文件的介绍。https://baike.baidu.com/item/ini%E6%96%87%E4%BB%…

Linux命令200例:sed对文本进行修改、替换和删除等操作的强大工具(常用)

&#x1f3c6;作者简介&#xff0c;黑夜开发者&#xff0c;全栈领域新星创作者✌。CSDN专家博主&#xff0c;阿里云社区专家博主&#xff0c;2023年6月csdn上海赛道top4。 &#x1f3c6;数年电商行业从业经验&#xff0c;历任核心研发工程师&#xff0c;项目技术负责人。 &…

Framework才是Android 开发的热门技术~

相信大家都有感觉到今年的市场竞争的激烈&#xff0c;投出简历并不像往年一样立马就有回应&#xff0c;大多是这种情况&#xff1a;投出简历没有停歇&#xff0c;状态却是70%未读&#xff0c;30%已读。 这种情况并不是说市场落寞了&#xff0c;不招人了&#xff0c;而是经过了…

Windows下调试UEFI程序:Visual Studio调试

以edk2\MdeModulePkg\Application\HelloWorld这个项目作为调试目标。 1. 使用VS2017建立Makefile工程 VS2017, 新建 project&#xff0c;取名X64dbg_vs。 Visual C > Other > Makefile Project, 注意项目路径为HelloWord程序路径。 随便填写config中的字符串&#xff…

决策树和随机森林对比

1.用accuracy来对比 # -*-coding:utf-8-*-""" accuracy来对比决策树和随机森林 """ from sklearn.tree import DecisionTreeClassifier from sklearn.ensemble import RandomForestClassifier from sklearn.datasets import load_wine#(178, 13…

C++ STL vector

目录 一.认识vector 二.vector的使用 1.vector的构造函数 2.vector的迭代器 2.1 begin&#xff08;&#xff09;&#xff0c;end&#xff08;&#xff09; 2.2 rbegin&#xff08;&#xff09;&#xff0c;rend&#xff08;&#xff09; 2.3 迭代器初始化对象 3. vector…

宝塔Linux面板点击SSL闪退打不开?怎么解决?

宝塔Linux面板点击SSL证书闪退如何解决&#xff1f;旧版本的宝塔Linux面板确实存在这种情况&#xff0c;如何解决&#xff1f;升级你的宝塔Linux面板即可。新手站长分享宝塔面板SSL闪退的解决方法&#xff1a; 宝塔面板点击SSL证书闪退解决方法 问题&#xff1a;宝塔Linux面板…

【脚踢数据结构】链表(1)

(꒪ꇴ꒪ )&#xff0c;Hello我是祐言QAQ我的博客主页&#xff1a;C/C语言,Linux基础,ARM开发板&#xff0c;软件配置等领域博主&#x1f30d;快上&#x1f698;&#xff0c;一起学习&#xff0c;让我们成为一个强大的攻城狮&#xff01;送给自己和读者的一句鸡汤&#x1f914;&…

【果树农药喷洒机器人】Part3:变量喷药系统工作原理

文章目录 一、变量喷药系统工作原理二、液压通路设计与控制系统封装2.1液压通路设计2.2 控制系统总体封装 三、喷头测定与布置实验3.1喷雾角度测定实验3.2确定喷头布置间距 一、变量喷药系统工作原理 果树喷药机器人通过现代测量技术获取果树冠层参数信息&#xff0c;并对获取…

【Linux:线程池】

文章目录 1 线程池概念2 第一个版本的线程池3 第二个版本的线程池4 第三个版本的线程池5 STL中的容器以及智能指针的线程安全问题6 其他常见的各种锁7 读者写者问题(了解) 1 线程池概念 一种线程使用模式。线程过多会带来调度开销&#xff0c;进而影响缓存局部性和整体性能。而…

16-2_Qt 5.9 C++开发指南_使用样式表Qss自定义界面

进行本篇介绍学习前&#xff0c;请先参考链接01_1_Qt工程实践_Qt样式表Qss&#xff0c;后再结合本篇进行融合学习如何使用样式表定义界面。 文章目录 1. Qt样式表2. Qt样式表句法2.1 一般句法格式2.2 选择器 (selector)2.3 子控件&#xff08;sub-controls&#xff09;2.4 伪状…

neo4j的CQL命令实例演示

天行健&#xff0c;君子以自强不息&#xff1b;地势坤&#xff0c;君子以厚德载物。 每个人都有惰性&#xff0c;但不断学习是好好生活的根本&#xff0c;共勉&#xff01; 文章均为学习整理笔记&#xff0c;分享记录为主&#xff0c;如有错误请指正&#xff0c;共同学习进步。…

vim学习笔记(致敬vim作者)

vim cheat sheet 30. vim 删除大法 vim 删除某个字符之后改行的其他的字符&#xff1f;删除某行之后的其他行&#xff1f;删除某个字符之后的其他字符&#xff1f;【1】删除单个字符&#xff1f; 跳到要删除的字符位置 按下d键然后按下shift 4键 【2】删除某行之后的其他行…

List list=new ArrayList()抛出的ArrayIndexOutOfBoundsException异常

1.应用场景&#xff0c;今天生产日志监控到一下ArrayList 进行add 异常&#xff0c;具体日志如下&#xff1a; eptionHandler.handler(178): TXXYBUSSINESS|执行异常 java.util.concurrent.CompletionException: java.lang.ArrayIndexOutOfBoundsException: Index 1 out of bo…

激活函数总结(一):ReLU及其变体

激活函数介绍&#xff08;一&#xff09; 1 引言2 常用激活函数介绍2.1 Sigmoid激活函数2.2 Tanh激活函数2.3 ReLU激活函数2.4 Leaky ReLU激活函数2.5 Parametric ReLU&#xff08;PReLU&#xff09;激活函数2.6 Swish激活函数 3. 总结 介绍的激活函数都在目录中有所展示&#…

VLE基于预训练文本和图像编码器的图像-文本多模态理解模型:支持视觉问答、图文匹配、图片分类、常识推理等

项目设计集合&#xff08;人工智能方向&#xff09;&#xff1a;助力新人快速实战掌握技能、自主完成项目设计升级&#xff0c;提升自身的硬实力&#xff08;不仅限NLP、知识图谱、计算机视觉等领域&#xff09;&#xff1a;汇总有意义的项目设计集合&#xff0c;助力新人快速实…