初尝微信小程序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 }

整个页面显示如图:

原文地址:https://www.cnblogs.com/lvmingchen/p/9273049.html

时间: 2024-10-25 20:04:48

初尝微信小程序2-基本框架的相关文章

初尝微信小程序2-Swiper组件、导航栏标题配置

swiper 滑块视图容器. 很多网页的首页都会有一个滚动的图片模块,比如天猫超市首页,滚动着很多优惠活动的图片,用来介绍优惠内容,以及供用户点击快速跳转到相应页面. Swiper不仅可以滚动图片,也可以是文本,以及其他组件,需要灵活应用. 基本的配置包括:是否显示面板指示点.指示点颜色,当前选中的指示点颜色.是否自动切换.自动切换时间间隔.是否垂直滚动等. 详情如下官方文档: 实例:编写新闻阅读列表 示意图: 按照第二篇随笔:初尝小程序2-基本框架,中的工程,进行添加内容. 工程目录结构为:

初尝微信小程序1-特点

微信小程序特点:1.不需要下载安装即可使用 2.用户用完即走,不用关心是否安装太多应用 3.应用将无处不在,随时可用 适合开发的小程序类型:1.简单的用完即走的应用 2.低频的应用 3.性能要求不高的应用 学习一定要多看微信官方文档,关注版本更新. 原文地址:https://www.cnblogs.com/lvmingchen/p/9270766.html

初尝微信小程序3-移动设备的分辨率与rpx

屏幕尺寸就是实际的物理尺寸. 分辨率(pt),是逻辑分辨率,pt的大小只和屏幕尺寸有关,简单可以理解为长度和视觉单位. 分辨率(px),是物理分辨率,单位是像素点,和屏幕尺寸没有关系. 微信开发者工具上iphone6尺寸是375,指的是逻辑分辨率,设计图常常给出的750px是物理分辨率.1个pt可以有1个px构成,也可以是2个,还可以有3个甚至更多(其实@2x已经是人眼的极限了,再增加也不会改变清晰度).如果是以iphone6的尺寸开发的话,那么设计图给的物理像素除以2,才是写在代码里的逻辑分辨

MPVUE - 使用vue.js开发微信小程序

MPVUE - 使用vue.js开发微信小程序 什么是mpvue? mpvue 是美团点评前端团队开源的一款使用 Vue.js 开发微信小程序的前端框架.框架提供了完整的 Vue.js 开发体验,开发者编写 Vue.js 代码,mpvue 将其解析转换为小程序并确保其正确运行. 简单上手mpvue 官方提供了一套quickstart模板. vue init mpvue/mpvue-quickstart my-project 安装好依赖之后,执行npm run dev,将会将小程序文件打包进dis

微信小程序最新开发资源汇总,对学习微信小程序的新手有一定帮助

微信小程序最新开发资源汇总,希望给想学习或正在学习微信小程序开发的同学们带来一定帮助,汇总的小程序资源有点繁杂,各种类型的小程序demo都有,大家可以选择自己想要的demo进行下载学习.这些微信小程序资源大多是整理自github,如果可以,希望大家能够给github上的原作者一颗star,感谢原作者的无私奉献. 这里整理的是资源的原帖子,下载链接也在帖子里,当然本人也只体验了部分demo,有兴趣的同学可以都下载试试. 下载地址: 仿微信聊天,朋友圈小程序源码wepy框架开发的小程序商城源码,功能

微信小程序图表组件 wx-f2

摘自 杀个程序猿祭天  https://www.jianshu.com/p/6b9fe45f799f Github地址:https://github.com/antvis/wx-f2 AntV F2地址: AntV F2 微信小程序图表组件 wx-f2,源于 F2,专为移动而生 F2,专为移动而生的可视化解决方案,特为大家提供了微信小程序端版本,体积小巧,性能卓越,底层基于图形语法,可以提供非常丰富的图表类型. 可以使用微信扫描以下二维码先体验一番: image wx-f2 F2 的微信小程序版

入门系列(一) 微信小程序简介

一.简介 1.目录结构 首先,我们使用微信公众平台提供的开发者工具,创建一个简单的小程序项目,观察项目的目录结构 不难看出,一个典型的微信小程序,通常包含一个描述整体的主体部分,以及一个描述页面的 pages 文件夹 主体:用于描述整体的程序,位于根目录下,通常由三个文件构成 app.js:小程序的逻辑代码文件,遵守 JavaScript 语言规范 app.json:小程序的公共配置文件,遵守 JSON 语言规范 app.wxss:小程序的公共样式文件,兼容 CSS 语法规范 页面:用于描述小程

当微信小程序遇到AR(二)

当微信小程序遇到AR,会擦出怎么样的火花?期待与激动...... 通过该教程,可以从基础开始打造一个微信小程序的AR框架,所有代码开源,提供大家学习. 第二章:基石-摄像头数据获取 [目的] 微信小程序获取摄像头数据,可以实时获得每一帧的每一个像素数据. [准备] 下面需要搭建环境,做一些准备工作. 首先,需要注册微信小程序开发者.注册地址=> 注册成功之后,需要下载微信小程序开发工具.下载地址=> 目前笔者的开发环境是:Windows 10 下载的微信小程序版本为:RC v1.0.2.190

微信小程序开发—小程序框架详解(二)

上一节讲了微信小程序的目录结构及各个文件的作用,主要介绍了小程序的配置文件及其支持的配置属性. 本节主要从逻辑层和视图层来说明小程序的框架. 小程序的逻辑层由js完成,视图层由微信提供的WXML(WeiXin Mark Language)和WXSS(WeiXin Style Sheet)文件来完成. 其中官方给出的解释:页面的脚本逻辑是在JsCore中运行,JsCore是一个没有窗口对象的环境,所以不能在脚本中使用window,也无法在脚本中操作组件.同时由于zepto/jquery 会使用到w