初尝微信小程序2-基本框架

基本框架:

.wxml :页面骨架

.wxss :页面样式

.js :页面逻辑    描述一些行为

.json :页面配置

创建一个小程序之后,app.js,app.json,app.wxss是必须的,而且名字也不能随意更改,这些是作用于APP全局的,而用户创建的一些目录,这些可以看做一个个页面,这些目录下面也包含上面所说的.wxml文件,.wxss文件,.js文件,.json文件。这些文件和目录的名字是可以随意取的。有的文件不是必须的,可以参考微信小程序官方文档。如下:

就近关系:对于一个样式来说,如果既在全局里配置了,也在某个页面配置了,那么以离页面最近的样式为准。比如在全局样式表里配置文本颜色是红色,在某个页面的样式表配置了文本颜色是黑色。那么当打开这个页面的时候,文本颜色是黑色,而不是红色。这对于.json文件也是一样。

应用程序和页面之间的关系:

微信小程序允许纵向级数最高五级,后面会介绍导航组件,设置几级页面以及之间的跳转。

 

代码实例:

程序目录为:

 

app.json:

 1 /*app.json是全局配置文件,在这里不能随意添加注释*/
 2 {
 3   "pages": [                                     
 4     "pages/welcome/welcome"   /*设置页面路径,一定要按照先后顺序来写,不然会报错。*/
 5                   /*会自动关联以welcome开头的所有类型文件*/
 6 
 7   ],
 8 
 9   "window":{
10     "navigationBarBackgroundColor":"#b3d4db"   /*设置导航栏颜色*/
11 } }

 

 app.wxss:

1 text{
2   font-family: MicroSoft Yahei;    /*配置全局文本字体,通用的配置放在这里*/
3 
4 }

 

welcome.wxml:

1 <!--wxml是编写小程序骨架的文件-->
2 <view class="container">
3     <image class="userinfo-avatar"            
4            src="/images/头像.jpeg"></image> <text class="user-name"><text style="color:red">hello</text>,morning</text> 
5       <!-- style="" 这样的样式可以写在wxss里,然后用class调用-->        
6         <!--如果是静态的样式,写在wxss里然后用class调用;如果需要动态修改样式, 用style实现-->
7     <!--在<text></text> 组件之中的文本,才可以在手机上长按选中复制;text可以嵌套使用;在text里\n是换行而不是字符-->
8 <view class="moto-container"> <text class="moto">开启小程序之旅</text> </view> </view>

 

 welcome.wxss:

 1 /*CSS要有一个整体布局的思想,把页面看做一个整体,然后对它进行样式的配置。而不是把一个页面中,每个部分独立分开排布。*/2 .container{                       3   display: flex;            /*将容器变成弹性模型*/4   flex-direction: column;   /*列方向排列*/5   align-items: center;    /*居中*/6 }7 8 .userinfo-avatar {9   width: 200rpx;   /*开发建议以iphone6,750rpx:1334rpx为例设计,单位是rpx可以自适应各种移动端分辨率。*/
10   height: 200rpx; /*设置宽,高。*/
11   margin-top: 160rpx;/*设置距离顶部的距离*/
12 }
13 
14 .user-name{
15   margin-top: 100rpx;
16   font-size: 32rpx;        /*字体大小*/
17   font-weight: bold;       /*字体加粗*/
18 
19 }
20 
21 .moto-container{
22   margin-top: 200rpx;
23   border: 1px solid #405f80;   /*外边矩形*/
24   width: 200rpx;
25   height: 80rpx;
26   border-radius: 5px;          /*圆角矩形*/
27   text-align: center;      /*水平居中*/
28 }
29 
30 .moto{
31   font-size: 22rpx;
32   font-weight: bold;
33   line-height: 80rpx;         /*垂直居中,让文字高度等于容器高度*/
34   color: #405f80;
35 }
36 
37 page{               /*小程序自动在页面的最外层加了一层<page></page>标签,我们的所有组件的标签都是写在这里面的。所以,如果我们要对整个页面进行操作,需要修改page的样式。*/38   height: 100%;   /*整个页面的高度*/
39   background-color: #b3d4db;  /*设置整个页面的颜色,这样就算把页面向下滑动,
                    整个页面的背景也是这个颜色的。
*/ 40 41 }

 

整个页面显示如图:

 7.7修改:

 

如果出现此报错,说明在此目录下.js文件中没有对页面进行任何配置,在老版本的开发工具中不会报错,而现在会报错,必须在.js里进行页面的配置,哪怕是空配置也可以。解决如下:

输入Page出现提示之后,按回车自动会跳出配置模板,不进行任何修改也行。

保存编译之后报错消失。

本文转载于:猿2048➩https://www.mk2048.com/blog/blog.php?id=bc12jhj&title=初尝微信小程序2-基本框架

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

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

相关文章

JSP内置对象,动作,指令总结

总的来说关于JSP界面有九大内置对象,7大动作,三大指令,现在博主就将这些粘贴出来,此文是很久前整理的学习笔记,如有雷同请谅解! jsp九大内置对象:1>out 向客户端输出数据,字节流.如out.print(" dgaweyr"); 2>request 接收客户端的http请求.String getParameter…

洛谷 P1795 无穷的序列_NOI导刊2010提高(05)

P1795 无穷的序列_NOI导刊2010提高&#xff08;05&#xff09; 题目描述 有一个无穷序列如下&#xff1a; 110100100010000100000… 请你找出这个无穷序列中指定位置上的数字 输入输出格式 输入格式&#xff1a;第一行一个正整数N&#xff0c;表示询问次数&#xff1b; 接下来的…

java 取字符串中的数字_java截取字符串中的数字

随便给你一个含有数字的字符串&#xff0c;比如&#xff1a;String s"eert343dfg56756dtry66fggg89dfgf";那我们如何把其中的数字提取出来呢&#xff1f;大致有以下几种方法&#xff0c;正则表达式&#xff0c;集合类&#xff0c;还有就是String类提供的方法。1 Stri…

番石榴的对象类:Equals,HashCode和ToString

如果您有幸使用JDK 7 &#xff0c;那么新的可用Objects类 &#xff08; 至少对我来说 &#xff09;是实现“通用” Java对象方法&#xff08;例如equals&#xff08;Object&#xff09; [with Objects.equals&#xff08;Object&#xff0c;Object &#xff09; ]&#xff0c; …

此服务器的时钟与主域控制器的时钟不一致_中移动“超高精度时间同步服务器”开标,两家中标...

8月25日&#xff0c;中国移动发布《2020年至2022年同步网设备集中采购_中标候选人公示》公告。两家中标。同步网技术比较小众&#xff0c;但是同步网是5G承载网的重要一环&#xff0c;分享一下&#xff0c;供大家参考。中标情况 标包1-时钟同步设备中标候选人依次排序为&#x…

java 异常管理员_GitHub - kangZan/JCatch: Exception异常管理平台,支持Java、PHP、Python等多种语言...

什么是JCatch当程序发生异常(Exception)&#xff0c;处理方式一般是通过日志文件记录下来&#xff0c;这种方式很容易被忽略&#xff0c;而且查询起来比较麻烦。JCatch提供了一种方案&#xff0c;当程序发生异常时&#xff0c;通过JCatch平台接口提交到JCatch平台&#xff0c;由…

oled

gnd、vcc、clk、miso、rst、mosi、cs 转载于:https://www.cnblogs.com/scrazy/p/7892733.html

使用html css js实现计算器

使用html css js实现计算器&#xff0c;开启你的计算之旅吧 效果图&#xff1a; 代码如下&#xff0c;复制即可使用&#xff1a; <!DOCTYPE html><html lang"en"> <head> <meta charset"utf-8"> <style> /* 主体 */ .co…

面向对象的三个基本特征

面向对象的三个基本特征是&#xff1a;封装、继承、多态。封装 封装最好理解了。封装是面向对象的特征之一&#xff0c;是对象和类概念的主要特性。封装&#xff0c;也就是把客观事物封装成抽象的类&#xff0c;并且类可以把自己的数据和方法只让可信的类或者对象操作&#xff…

Spring构造函数注入和参数名称

在运行时&#xff0c;除非在启用了调试选项的情况下编译类&#xff0c;否则Java类不会保留构造函数或方法参数的名称。 这对于Spring构造函数注入有一些有趣的含义。 考虑以下简单的类 package dbg; public class Person {private final String first;private final String …

java学习文档_资深程序员带你深入了解JAVA知识点,实战篇,PDF文档

JAVA 集合JAVA 集合面对浩瀚的网络学习资源&#xff0c;您是否为很难找到适合自己的学习资源而感到苦恼过&#xff1f;那么&#xff0c;您来对地方了。在这里我们帮助大家整理了一份适于轻松学习 Java 文章的清单。JVM文字太多&#xff0c;不便之处敬请谅解JAVA 集合文字太多&a…

java程序员电影_Java程序员必看电影:Java 4-ever

(Scene: A father and his son playing "throw-and-catch")(场景: 一位父亲和儿子玩丢接球游戏)Narrator: They appear to be a perfect family旁白: 他们看起来像是一个完美的家庭(Scene: bedtime story)(场景: 床边故事)Father: Export all OLE objects with the c…

深入理解softmax函数

Softmax回归模型&#xff0c;该模型是logistic回归模型在多分类问题上的推广&#xff0c;在多分类问题中&#xff0c;类标签 可以取两个以上的值。Softmax模型可以用来给不同的对象分配概率。即使在之后&#xff0c;我们训练更加精细的模型时&#xff0c;最后一步也需要用soft…

《第二章:深入了解超文本》

从本章开始要去除无用的话&#xff0c;只在笔记中记载要点----- 使用<a>元素创建一个超文本链接&#xff0c;链接到另一个Web页面。 <a>元素的内容会成为Web页面中可单击的文本。 href属性告诉浏览器链接的目标文件。 了解属性 例&#xff1a;style的type属性指定…

strcpy函数_错误更正(拷贝赋值函数的正确使用姿势)

这是一篇对什么是C的The Rule of Three的错误更正和详细说明。阅读时间7分钟。难度⭐⭐⭐虽然上一篇文章的阅读量只有凄惨的两位数&#xff0c;但是怀着对小伙伴负责的目的&#xff0c;必须保证代码的正确性。这是大厨做技术自媒体的态度。前文最后一段代码是这样的&#xff1a…

将Java应用程序打包为一个(或胖)JAR

这篇文章的目标是一个有趣但非常强大的概念&#xff1a;将应用程序打包为单个可运行的JAR文件&#xff0c;也称为一个或胖 JAR文件。 我们习惯了大型WAR归档文件&#xff0c;其中包含所有打包在某些公用文件夹结构下的依赖项。 使用类似于JAR的打包&#xff0c;情况有所不同&a…

学习java的第三天,猜字符的小程序

关于猜字符的小程序 主要实现&#xff1a;随机输出5个字母&#xff0c;用户输入猜测的字母&#xff0c;进行对比得出结果 主要有3个方法&#xff1a;主方法main(); 产生随机字符的方法generate(); 比较用户输入的字符与随机产生的字符的方法check&#xff08;&#xff09;&…

《Linux命令行与shell脚本编程大全 第3版》创建实用的脚本---10

以下为阅读《Linux命令行与shell脚本编程大全 第3版》的读书笔记&#xff0c;为了方便记录&#xff0c;特地与书的内容保持同步&#xff0c;特意做成一节一次随笔&#xff0c;特记录如下&#xff1a;转载于:https://www.cnblogs.com/guochaoxxl/p/7894995.html

python安装包找不到setup_如何安装没有setup.py的Python模块?

在系统上开始使用该代码的最简单的方法是&#xff1a;>将文件放入机器上的目录中,>将该目录的路径添加到您的PYTHONPATH步骤2可以从Python REPL完成如下&#xff1a;import syssys.path.append("/home/username/google_search")您的文件系统的外观示例&#xf…

Spring Batch中面向TaskletStep的处理

许多企业应用程序需要批处理才能每天处理数十亿笔交易。 必须处理这些大事务集&#xff0c;而不会出现性能问题。 Spring Batch是一个轻量级且强大的批处理框架&#xff0c;用于处理这些大数据集。 Spring Batch提供了“面向TaskletStep”和“面向块”的处理风格。 在本文中&a…