上外网看新闻去哪个网站,wordpress 打赏js,太原网站建设方案开发,注册企业邮箱号基本框架#xff1a;
.wxml #xff1a;页面骨架
.wxss #xff1a;页面样式
.js #xff1a;页面逻辑 描述一些行为
.json #xff1a;页面配置
创建一个小程序之后#xff0c;app.js,app.json,app.wxss是必须的#xff0c;而且名字也不能随意更改#xff0c;…基本框架
.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 classcontainer
3 image classuserinfo-avatar
4 src/images/头像.jpeg/image text classuser-nametext stylecolor:redhello/text,morning/text
5 !-- style 这样的样式可以写在wxss里然后用class调用--
6 !--如果是静态的样式写在wxss里然后用class调用如果需要动态修改样式 用style实现--
7 !--在text/text 组件之中的文本才可以在手机上长按选中复制text可以嵌套使用在text里\n是换行而不是字符--
8 view classmoto-container text classmoto开启小程序之旅/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; /*开发建议以iphone6750rpx1334rpx为例设计单位是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?idbc12jhjtitle初尝微信小程序2-基本框架
