使用微信开发工具制作一个简单的古诗词展示微信小程序

效果截图：

1、运行环境：微信开发者工具

2、数据准备：博主是使用Mock进行存储模拟数据

Mock数据准备格式如下：

{"code": 0,"data": {"work4_1_data": [{"id": 0,"link": "","name": "《石灰吟》","writer": "明代·于谦","content": "千锤万凿出深山，烈火焚烧若等闲。粉骨碎身浑不怕，要留清白在人间","imgSrc": "https://tse3-mm./th/id/OIP-C.lLL75NpaYfCQGYYSsEaGvwHaEG?w=182&h=100&c=7&r=0&o=5&dpr=1.25&pid=1.7"},{"id": 1,"link": "","name": "《马嵬》","writer": "清代·袁枚","content": "莫唱当年长恨歌，人间亦自有银河。石壕村里夫妻别，泪比长生殿上多","imgSrc": "https://tse1-mm./th/id/OIP-C.QoprVEZtiV4dAx2mzEDY2QHaDF?w=182&h=80&c=7&r=0&o=5&dpr=1.25&pid=1.7"},{"id": 2,"link": "","name": "《己亥杂诗》","writer": "清代·龚自珍","content": "九州生气恃风雷，万马齐喑究可哀。我劝天公重抖擞，不拘一格降人材","imgSrc": "https://tse3-mm./th/id/OIP-C.xq1Yo1Qa0eLd0HPsenqpKQHaD2?w=182&h=95&c=7&r=0&o=5&dpr=1.25&pid=1.7"},{"id": 3,"link": "","name": "《竹石》","writer": "清代·郑燮","content": "咬定青山不放松，立根原在破岩中。千磨万击还坚劲，任尔东西南北风","imgSrc": "https://tse1-mm./th/id/OIP-C.eVvBGrAb9RzKZaKH-H_AFQHaEc?w=182&h=109&c=7&r=0&o=5&dpr=1.25&pid=1.7"},{"id": 4,"link": "","name": "《闻鹧鸪》","writer": "清代·尤侗","content": "鹧鸪声里夕阳西，陌上征人首尽低。遍地关山行不得，为谁辛苦尽情啼","imgSrc": "https://tse4-mm./th/id/OIP-C.fDIHeFaYQz1ybyzkAXNZSQHaCs?w=182&h=80&c=7&r=0&o=5&dpr=1.25&pid=1.7"}]}}

3、编写小程序界面

（1）编写页面标题（index.json）

{"navigationBarTitleText": "古诗词展示","usingComponents": {}}

（2）编写js文件的启动函数与绑定点击事件函数（index.js）

// pages/work4/index.jsPage({/*** 页面的初始数据*/data: {poems : [], poems_id :[], poems_content : [],poems_data : [],poems_image : [],},work4_1(){let _this = thiswx.request({url: 'http://47.108.95.164:7300/mock/617d0f1d97d29b60d1af0f32/work4_1', //Mock的链接地址method:"POST",success(res){_this.setData({poems : res.data.data.work4_1_data,poems_data : res.data.data.work4_1_data[0],poems_content : res.data.data.work4_1_data[0].content.split("。"),poems_image : res.data.data.work4_1_data[0].imgSrc})}})},work4_1_poems(e){let that = thislet id = e.target.dataset.index;that.setData({poems_id : e.target.dataset.index})wx.request({url: 'http://47.108.95.164:7300/mock/617d0f1d97d29b60d1af0f32/work4_1',method:"POST",success(res){that.setData({poems_data : res.data.data.work4_1_data[id],poems_content : res.data.data.work4_1_data[id].content.split("。"),poems_image : res.data.data.work4_1_data[id].imgSrc})}})},urlInput(e){this.setData({url: e.detail.value})},msgInput(e){this.setData({msg: e.detail.value})},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {this.work4_1();},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {}})

（3）编写页面视图（index.wxml）

<view class="nav_wrap"><scroll-view class="nav" scroll-x><view class="nav_item {{index===poems_id?'active':''}}" wx:for="{{poems}}" wx:key="index" bindtap="work4_1_poems"data-index="{{index}}">{{item.name}}</view></scroll-view></view><view class="slides"><image class='background' src="{{poems_image}}"></image></view><view><text class="center-text" style="width: 750rpx; height: 90rpx; display: flex; box-sizing: border-box">{{poems_data.name}}</text></view><view><text class="center-text" style="width: 750rpx; height: 60rpx; display: flex; box-sizing: border-box">{{poems_data.writer}}</text></view><view wx:for="{{poems_content}}" wx:key="index"><text class="center-text">{{item}}。</text></view>

（4）编写样式（index.wxss）

.nav_wrap {color: aliceblue;}.nav {white-space: nowrap;padding: 5rpx 0;}.nav_item {padding: 20rpx 45rpx;font-size: 30rpx;color: #de688b;display: inline-block;}.nav_item.active {border-bottom: 5rpx solid #68de82;}.center-text{display: flex;align-items: center;justify-content: center;font-family: FZShuTi;/*方正舒体*/font-size: 20px;}.background {width: 100%;height: 40%;position: fixed;background-size:100% 100%;z-index: -1; /*置于底层不影响其他操作*/}.slides {margin-top: 10rpx;}.slides swiper {height: 40%;}.slides navigator {width: 100%;height: 100%;}.slides image {width: 100%;height: 30%;}