初尝微信小程序2-基本框架
2018-07-09 13:45:50来源:博客园 阅读 ()
基本框架:
.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出现提示之后,按回车自动会跳出配置模板,不进行任何修改也行。
保存编译之后报错消失。
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
上一篇:移动端,点击之后某个区域后有阴影
下一篇:山寨版计算器
- 如此沙雕的代码注释,原来程序员都是段子手 2020-06-08
- 还在羡慕程序员工资高吗?看完这篇前端学习计划,你也可以拿 2020-05-23
- 想成为一个高薪WEB前端程序员,这些书籍你要看 2020-05-22
- 1W2以下前端程序员该如何面对现实?我这有一套让你提升的方 2020-05-22
- 在web开发中,为什么前端比后端更得到转行程序员的青睐?必 2020-05-15
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash