微信小程序

小程序的优点

1、不用安装，随扫随用，用完即走

2、加载速度快

相关信息

张小龙提出来的微信小程序，2017

目录结构

小程序构成

.wxml：编写结构代码

.wxss：编写样式代码

.js：编写js代码

.json：每个页面的配置文件

结构代码

在 .wxml 文件中，是可以直接编写 html 代码，用来搭建页面结构的

<!--index.wxml-->
<div class="index">
<h1>hello</h1>
</div>

<view class="box">
   <text>hello</text>
</view>

但是，为了提升开发速度，小程序提供了官方的组件库，可以使用这些组件加快我们的开发速度

样式代码

大部分css特性都可以在 wxss 中使用

但是进行了扩充和修改

新增了 rpx 单位，此单位类似与 rem，可以随着屏幕的宽度或者像素的变化而进行变化

可以在 app.wxss 中编写能够自动应用于所有 wxml 文件的样式，也可以在对应的 wxss 中编写只适合当前 wxml 的样式

js代码

微信小程序中 也有 data，类似于 vue 中的 data

微信小程序中也有开发者自定义函数，与 vue 不同，不需要写道 methods 中

微信小程序也有类似于钩子函数，比如 onLoad 类似于 vue 中的 created

案例

创建项目文件夹

方式1

在 pages 目录上右键，选择新建文件夹，命名为 index，然后再 index 目录上右键 新建 page，命名为index

方式2

在 app.json 中的 pages 属性中，直接编写页面名称，然后保存，工具会自动在 pages 目录下创建对应的页面

"pages": [
"pages/index/index",
"pages/about/about",
"pages/list/list"
],

欢迎页面

welcome.wxml

<view class="container">
  <!-- <image class="avatar" src="/images/avatar/1.webp"></image>   -->
  <view class="avatar-container">
    <open-data class="avatar" type="userAvatarUrl"></open-data>
  </view>
  <view class="user-nick">
    <text class="motto">你好， </text>
    <open-data type="userNickName"></open-data>
  </view>
  <view class="button-container" bindtap="gotoPosts">
    <text class="self-button">进入小程序</text>
  </view>

</view>

welcome.wxss

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #b3d4db;
}

.avatar-container {
  width: 200rpx;
  height: 200rpx;
  border-radius: 50%;
  margin-top: 160rpx;
  overflow: hidden;
  /* border: 1px solid black; */
}

.avatar {
  width: 200rpx;
  height: 200rpx;
}

.user-nick {
  display: flex;
  margin-top: 100rpx;

}

.motto {
  color: #666;
  font-size: 32rpx;
  font-weight: bold;
}

.button-container {
  width: 200rpx;
  height: 80rpx;
  border: 1px solid #405f80;
  border-radius: 5px;
  text-align: center;
  margin-top: 200rpx;
}

.self-button {
  font-size: 22rpx;
  color: #405f80;
  line-height: 80rpx;
  font-weight: bold;
}

page {
  background-color: #b3d4db;
}

app.json

{
  "pages": [
    "pages/welcome/welcome"
  ],
  "window": {
    "navigationBarBackgroundColor": "#b3d4db",
    "navigationBarTitleText": "爱读诗"
  },
  "sitemapLocation": "sitemap.json"
}

页面跳转

welcome.wxml

<view class="button-container" bind:tap="toToPosts">
<text class="self-button">进入小程序</text>
</view>

welcome.js

toToPosts:function(){
  wx.redirectTo({
    url: '/pages/posts/posts',
  })
},

阅读页面

轮番图

swiper组件

<view>
  <swiper interval="3000" circular vertical="{{false}}" indicator-dots="{{true}}" autoplay="{{true}}">
    <swiper-item>
       <image data-post-id="3" bind:tap="onGoToDetail1"
src="/images/posts/1.jpg"> </image>
   </swiper-item>
   <swiper-item>
      <image data-post-id="0" bind:tap="onGoToDetail"
src="/images/posts/2.jpg"></image>
   </swiper-item>
   <swiper-item>
      <image data-post-id="4" bind:tap="onGoToDetail"
src="/images/posts/3.jpg"></image>
   </swiper-item>
 </swiper>
</view>

swiper{
width:100%;
height:460rpx
}
swiper image{
width:100%;
height:460rpx
}

总结：

swiper 是滑块视图容器，并不是只能作为图片的轮播图

swiper 中只可放置swiper-item组件，否则会导致未定义的行为，好比ul 中只能放置 li 标签一样

swiper-item 仅可放置在swiper组件中，宽高自动设置为100%。

通过插槽的方式向 swiper-item 组件中放置元素，swiper-item 实现并不知道，所以如上面案例，swiper-item 中放置的图片的尺寸，需要我们自己定义

定义尺寸时，需要设置 image 与 swiper 的宽高一致即可，swiper 不用单独设置，因为其默认宽高自动设置为swiper的100%

关于属性设置：swiper 组件上有几个属性，如果属性值要求为布尔值，需要使用{{}} 将 true 或者false 包含起来，否则会将值是做字符串，所以，“true” 和 "false" 的布尔值都是“真”，导致无法达到我们期望的效果

当前图片路径来自本地，实际开发中应该来自后台接口响应的数据

阅读列表

<!-- 诗词阅读列表 -->
<view class="post-container">
<!-- 头像和发表日期 -->
<view class="post-author-date">
<image class="post-author" src="/images/avatar/2.jpg"></image>
<text class="post-date">2020-04-06</text>
</view>
<!-- 标题 -->
<text class="post-title">碧玉妆成一树高，万条垂下绿丝绦</text>
<image class="post-image" src="/images/posts/biyu.webp"></image>
<text class="post-content">
杨柳的形象美是在于那曼长披拂的枝条。一年一度，它长出了嫩绿的新叶，丝丝下垂，在春风吹拂中，有
着一种迷人的意态。这是谁都能欣赏的。古典诗词中，借用这种形象美来形容、比拟美人苗条的身段，婀娜的
腰身，也是读者所经常看到的。这诗别出新意，翻转过来。“碧玉妆成一树高”，一开始，杨柳就化身为美人而
出现：“万条垂下绿丝绦”，这千条万缕的垂丝，也随之而变成了她的裙带....
</text>
<view class="post-like">
<image class="post-like-image" src="/images/icon/collection.png">
</image>
<text class="post-like-font">99</text>
<image class="post-like-image" src="/images/icon/like.png"></image>
<text class="post-like-font">120</text>
</view>
</view>

说明：
收藏和喜欢图片采用的是 iconfont 中的字体图标，下载其 png 格式图片样式

swiper{
width:100%;
height:460rpx
}
swiper image{
width:100%;
height:460rpx
}
.post-container{
display: flex;
flex-direction: column;
margin-top: 20rpx;
margin-bottom: 40rpx;
background-color: #fff;
border-bottom:1px solid #ededed;
padding-bottom: 10rpx;
}
.post-author-date{
/* margin-top:10rpx;
margin-bottom: 20rpx;
margin-left: 10rpx; */
margin: 10rpx 0 20rpx 10rpx;
display: flex;
flex-direction: row;
align-items: center;
}
.post-author{
width:60rpx;
height:60rpx;
/* vertical-align: middle; */
}
.post-date{
margin-left:20rpx;
font-size: 26rpx;
/* vertical-align: middle; */
}
.post-title{
font-size: 34rpx;
font-weight: 600;
margin-bottom: 20rpx;
margin-left: 20rpx;
color:#333;
}
.post-image{
width: 100%;
height:340rpx;
margin-bottom: 30rpx;
}
.post-content{
color: #666;
font-size:28rpx;
margin-bottom: 20rpx;
margin-left:20rpx;
line-height: 40rpx;
letter-spacing: 2rpx;
}
.post-like{
display: flex;
flex-direction: row;
align-items: center;
margin-left:20rpx;
}
.post-like-image{
height:32rpx;
width:32rpx;
margin-right:16rpx;
}
/* html */
.post-like-font{
margin-right: 40rpx;
font-size:26rpx;
}

说明
整体仍然采用 flex 布局，包括实现文字与图片垂直居中，使用 flex 布局要比使用其他方式更加简单直观

使用字体图标

图片是有问题的

上面收藏和喜欢使用的是 png 格式图片，问题有两个
图片尺寸固定，某些尺寸屏幕上可能造成浪费

难以修改颜色

所以使用字体图标替代图片

步骤

1. 添加字体图标到购物车
2. 添加至项目
3. 项目中选择 Font class，然后选择“查看在线字体”，然后生成在线地址
4. 地址栏中访问上面地址，查看生成的代码，然后右键另存为，修改扩展名为 wxss，保存到根目录 下
5. 根目录下新建 app.wxss，使用下面代码引入

@import '/iconfont.wxss'

6. 最后在页面或组件中直接使用即可

<text class="iconfont icon-Like"></text>

附上 posts 页面中最后修改的代码

<!-- <image class="post-like-image" src="/images/icon/collection.png"></image> --
>
<text class="post-like-image iconfont icon-collection"></text>
<text class="post-like-font">99</text>
<!-- <image class="post-like-image" src="/images/icon/like.png"></image> -->
<text class="post-like-image iconfont icon-Like"></text>
<text class="post-like-font">120</text>

post-like-image 样式类也要做适当的修改

.post-like-image{
/* height:32rpx;
width:32rpx; */
font-size: 32rpx;
margin-right:16rpx;
}

动态数据

posts.js 代码

data: {
postsList: []
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
const url =
`https://www.fastmock.site/mock/feab55dd20334e49edf0d5adb2f79cbe/libaiserver/api/posts`
wx.request({
url: url,
success:(res)=> {
this.setData({
postsList: res.data.data
})
}
})

修改 posts.wxml

<block wx:for="{{postsList}}" wx:key="id">
<view class="post-container">
<!-- 头像和发表日期 -->
<view class="post-author-date">
<image class="post-author" src="{{item.avatar}}"></image>
<text class="post-date">{{item.date}}</text>
</view>
<!-- 标题 -->
<text class="post-title">{{item.title}}</text>
<image class="post-image" src="{{item.imgSrc}}"></image>
<text class="post-content">{{item.desc}}</text>
<view class="post-like">
<!-- <image class="post-like-image"
src="/images/icon/collection.png"></image> -->
<text class="post-like-image iconfont icon-collection"></text>
<text class="post-like-font">{{item.collection}}</text>
<!-- <image class="post-like-image" src="/images/icon/like.png">
</image> -->
<text class="post-like-image iconfont icon-Like"></text>
<text class="post-like-font">{{item.reading}}</text>
</view>
</view>
</block>
</view>

补充

wx:for-item可以修改item名

wx:for-item="post"
<image class="post-author" src="{{post.avatar}}"></image>