微信小程序开发学习笔记（2）好学的很。。。。

最新推荐文章于 2024-06-20 10:05:48 发布

小鱼编程

最新推荐文章于 2024-06-20 10:05:48 发布

阅读量603

点赞数 2

本文链接：https://blog.csdn.net/phthon1997/article/details/84454976

版权

今天的学习内容是进行对基本页面的制作做一个介绍，用变量替换界面里的固定文本以及对界面进行一定的美化。
“pages/aboutme/aboutme”,这一行代码坑了我好久，改变首页，不加这句话就会不改变首页的内容，怎么编译都不会改变页面的显示。

<!--aboutme.wxml-->
<view class="container">
 <view><image src="{{img}}" background-size="cover"></image></view>
 <view>{{title}}</view>
 <view>shanghaishitongjidaxue</view>
 <view>{{contab}}</view>
 <view>上海市嘉定区</view>
 <view>联系电话：{{mobile}}</view>
</view>

用变量替换界面里的固定文本：

//aboutme.js
//获取应用实例
const app = getApp()

Page({
  data: {
    img:'../../image/wechatHL.png',
    title:"中国大学",
    contab:"hdjfkhweufhjksahdfgbvsljkdfghlaerh",
    address:"上海市嘉定区",
    mobile:"1610640853"
    
  },

<!--aboutme.wxml-->
<view class="about">
<view class="about-wei">
 <view  class="about-img"><image src="{{img}}" class="in-img" background-size="cover" model="scaleTOFill"></image></view>
 <view class="about-title">{{title}}</view>
</view>
<view class="about-content">{{contab}}</view>
<view>地址:{{address}}</view>
<view>联系电话：{{mobile}}</view>
</view>

下面是WXSS的代码，WXSS的作用是对WXML进行修饰，进行美化，和网页开发的CSS功能一样，也是用类实现的。

.about-wei{text-align: center;}
.about-img{display: block;width: 124px;height: 110px;margin: 20px auto 0;}
.about-title{display: inline-block;margin:20px 0;}
.about-content{text-indent: 2em;font-size: 16px;margin:0 24px;line-height: 1.5;}
.about-addr{font-size: 16px;line-height: 2;text-indent: 2em;}
.in-img{width: 124px;height:110px;}

总体代码效果如下：
在这里插入图片描述