微信小程序开发与实践(1)

1.认识小程序的基本文件结构

在这里插入图片描述

1.1.根目录下的三个文件

app.js属于必选项,是小程序的逻辑文件
app.json属于必选项,是小程序的配置文件
app.wxss不是文件的必选项,是全局公共样式文件

  1. 与三个应用程序平行的是pages文件夹 ,一个小程序由若干个页面文件构成,上图中的pages文件夹下有两个页面【index、logs】;
  2. 每个页面可由四部分组成,分别是.js【必填项、页面逻辑】、.wxml【必填项、页面结构】、.wxxs【不是必填项、页面样式表】、.json【不是必填项、页面配置】;;
  3. wxml文件类似于HTML文件,是用来编写页面的标签和骨架,不同扥是wxml文件的标签元素不可使用HTML标签,只能使用小程序自己封装的一些组件;
  4. wxxs文件的作用类似于CSS文件,用于编写小程序的样式,是加上小程序的样式编写语言就是CSS;
  5. json文件用来配置页面的样式与行为;
  6. js用来编写小程序的页面逻辑;
  7. 除了pages文件,上图示例项目中还有一个utils文件,用来存放一些公共的js文件了

2.编写第一个小程序之旅

2.1开始编写小程序

2.1.1创建文件

首先根据上述知识新建对应的文件以及文件夹
在这里插入图片描述

2.1.2 写入文件内容

在index.wxml文件中输入文本内容

Welcome

2.1.3 注册相关页面

显示小程序中文本内容:要让小程序的MINA框架知道这个页面的存在以及这个页面的具体位置(文件路径),因此需要在某个应用程序级别配置文件中注册这个index页面

2.1.4 全局配置

app.json文件就是小程序提供的全局配置文件,在app.json中注册index页面

{  
	"pages": [    
		"pages/index/index"  
	]
}

上图代码是一个典型的json对象,可以将index页面注册到小程序中,这个对象的第一个属性pages接受一个数组,数组的每一项都是一个字符串,用来指定小程序是由哪些页面组成的,每一项由对应的页面的【路径+文件名组成】(这里强调文件名无需加后缀名,路径前面禁止出现"/")MINA框架会自动寻找页面路径,将.json、.js、.wxml、.wxss四个文件进行整合

2.1.5 正确调用pages()方法

Page({  })

页面的js文件不可以完全为空,否则小程序会报错。
index.json也不能为空

{  }

2.2.构建intex页面的元素和样式表

2.2.1在index.wxml文件中编写代码

<view>  
	<image></image>  
	<text>Hello</text>  
	<view>    
		<text>开启小程序之旅</text>  
	</view>
</veiw>

上述代码中用到的三个微信小程序组件,view组件通常作为容器,相当于HTML中的div;text组件用来显示文本,类似于HTML中的span标签;image组件用来显示一张图片;
与HTML类似,image组件需要设置一个src属性,用来指向图片的路径,在image目录下创建avatar文件用来存放图片。
在这里插入图片描述
注:图片大小会被MINA框架设置成宽度300px,高度225px,这是小程序默认的图片大小。

2.2.2 编写index的样式表

在index.wxml文件中给每个需要样式的组件添加样式名class name ,进行简单布局,最后的测试结果图如图所示

<view class="container">
<image class="avatar" src="/image/avatar/avatar-1.png"></image><text class="motto ">Hello</text>
<view class="journey-container">
  <text class="journey">开启小程序之旅</text>
 </view>
</view>
.container{
  display: flex;  
  flex-direction: column;  
  align-items: center;}
.avatar{
  width: 200rpx;  
  height: 200rpx;  
  margin-top: 160rpx;  
  border-radius: 50%;}
.motto{
  margin-top: 100rpx;  
  font-size: 35rpx;  
  font-weight: 
  bolder;  color: 
  blueviolet;}
.journey-container{
  margin-top: 200rpx;  
  border: 2px solid rgb(215, 41, 250);  
  width: 300rpx;  
  height: 30px;  
  border-radius: 5px;  
  text-align: center;}
.journey{
  font-size: 25rpx;  
  font-weight: bold;  
  line-height: 50rpx;  
  color: blueviolet;}

在这里插入图片描述
6种css选择
在这里插入图片描述

2.3.Flex布局

2.3.1 Flex也叫弹性布局

display:flex将view变成一个弹性盒子
flex布局的关键性概念:轴;
flex-dorection 属性决定主轴是水平轴(row自左到右、row-reverse自右到左)或者垂直轴(column自上到下、column-reverse自下到上)
使用flex-dorection属性指定view内元素的排列方向,属性有四个值:row、column、row-reverse、column-reverse

2.4.小程序自适应单位rpx简介

rpx使组件自适应屏幕的高度和宽度
1rpx = 0.5px

2.5.全局样式文件app.axss

全局样式表中可以一次性设置所有页面的样式,小程序会优先选择页面内的

2.6.app.json中的window配置项

navigationBarbackgroundColor属性设置window导航栏的背景颜色
window这个选项下并不是只有navigationBarbackgroundColor这一个属性,它还有以下几种属性:
• navigationBarTextStyle 配置导航栏文字颜色,只支持black/white。
• navigationBarTitleText 配置导航栏文字内容。
• backgroundColor 配置窗口颜色。
• backgroundTextStyle 下拉背景字体,仅支持dark/light。
• enablePullDownRefresh 是否开启下拉刷新。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值