微信小程序作品集实例：跨页面传参，数据库，换行，空格，css

审美是病，得治。



从左到右依次，初始界面，点一下，进入第二个作者目录，点击李贺，进入第三个作品目录，点击马诗二十三首，进入第四个作品详情，第五个是结构，◀▶切换前后。

依次往下捋，

data里面post-data.js：

var local_database= [{
"zuozhe":"李贺",
"zuopin": [["马诗", "大漠沙如雪，\n燕山月似钩。\n何当金络脑，\n快走踏清秋。"], ["南园", "男儿何不带吴钩，\n收取关山五十州。\n请君暂上凌烟阁，\n若个书生万户侯。"], ["马诗二十三首", "龙脊贴连钱，\n银蹄白踏烟。\n无人织锦韂，\n谁为铸金鞭。\n\n腊月草根甜，\n天街雪似盐。\n未知口硬软，\n先拟蒺藜衔。\n\n忽忆周天子，\n驱车上玉山。\n\n鸣驺辞凤苑，\n赤骥最承恩。\n\n\n此马非凡马，\n房星本是精。\n\n向前敲瘦骨，\n犹自带铜声。\n\n\n大漠沙如雪，\n燕山月似钩。\n\n何当金络脑，\n快走踏清秋。\n\n\n饥卧骨查牙，\n粗毛刺破花。\n\n鬣焦珠色落，\n发断锯长麻。\n\n\n西母酒将阑，\n东王饭已干。\n\n君王若燕去，\n谁为曳车辕？\n\n赤兔无人用，\n当须吕布骑。\n\n吾闻果下马，\n羁策任蛮儿。\n\n\n催榜渡乌江，\n神骓泣向风。\n\n君王今解剑，\n何处逐英雄？\n\n内马赐宫人，\n银鞯刺麒麟。\n\n午时盐坂上，\n蹭蹬溘风尘。\n\n\n批竹初攒耳，\n桃花未上身。\n\n他时须搅阵，\n牵去借将军。\n\n\n宝玦谁家子，\n长闻侠骨香。\n\n堆金买骏骨，\n将送楚襄王。\n\n\n香幞赭罗新，\n盘龙蹙蹬鳞。\n\n回看南陌上，\n谁道不逢春？\n\n不从桓公猎，\n何能伏虎威？\n一朝沟陇出，\n看取拂云飞。\n\n\n唐剑斩隋公，\n□毛属太宗。\n\n莫嫌金甲重，\n且去捉飘风。\n\n\n白铁锉青禾，\n砧间落细莎。\n\n世人怜小颈，\n金埒畏长牙。\n\n\n伯乐向前看，\n旋毛在腹间。\n\n只今掊白草，\n何日蓦青山？\n\n萧寺驮经马，\n元从竺国来。\n\n空知有善相，\n不解走章台。\n\n\n重围如燕尾，\n宝剑似鱼肠。\n\n欲求千里脚，\n先采眼中光。\n\n\n暂系腾黄马，\n仙人上彩楼。\n\n须鞭玉勒吏，\n何事谪高州？\n\n汉血到王家，\n随鸾撼玉珂。\n\n少君骑海上，\n人见是青骡。\n\n\n武帝爱神仙，\n烧金得紫烟。\n\n厩中皆肉马，\n不解上青天。\n\n"], ["金铜仙人辞汉歌", "衰兰送客咸阳道"], ["祝酒歌", "主父西游何时归"], ["祝酒歌", "主父西游何时归"], ["祝酒歌", "主父西游何时归"], ["祝酒歌", "主父西游何时归"], ["祝酒歌", "主父西游何时归"], ["祝酒歌", "主父西游何时归"], ["祝酒歌", "主父西游何时归"], ["祝酒歌", "主父西游何时归"], ["祝酒歌", "主父西游何时归"], ["祝酒歌", "主父西游何时归"], ["祝酒歌", "主父西游何时归"]]
},
{
"zuozhe": "李白",
"zuopin": [["静夜思", "床前明月光"], ["蜀道难", "难于上青天"], ["将进酒", "高堂明镜悲白发"]]

}

]
module.exports = {
postList: local_database
}

无他，\n是换行，\t是空格。

image里面timg.jpg是初始界面那张图，Photoshop做的。



pages里面index是初始界面。

index.wxml：

<image hidden="{{yincang}}" class='beijing' src='/image/timg.jpg' bindtap="yincang"></image>
<view hidden="{{xianshi}}" class="biaotou">唐宋名家作品集</view>
<view hidden="{{xianshi}}" class="yiji" wx:for="{{postList}}" wx:for-item="item" wx:for-index="index">
<navigator url="./../detail/detail?id={{index}}" >
<view>
<button hidden="{{xianshi}}" class="yiji">{{index+1}}-{{item.zuozhe}}</button>
</view>
</navigator>
</view>

用了一个hidden的值切换，hidden=true的时候，图片隐藏，=‘’的时候，图片显示。

index.wxss

page {
display: block;
min-height: 100%;
background-color:whitesmoke;
}
.biaotou{
text-align:center;
width:100%;
line-height: 100rpx;
font-size: 60rpx;
background-color:bisque;
}

.beijing{
width:100%;
height: 100%;
position: absolute;
background-size: contain;
}
.yiji{
text-align: center;
margin-top: 5rpx;
line-height: 80rpx;
font-size: 50rpx;
border-radius: 3px;
border-color:black;
background-color:azure;
}

设置了样式，挺丑的。

index.js:

var postData = require("../../data/post-data.js");
Page({
data: {
postList: postData.postList,
yincang:'',
xianshi:'true'
},
yincang: function(){
this.setData({
yincang:'true',
xianshi:''
})
}
})

里面就一个hidden的值。

pages的detail，作者列表的那个界面。

<view class="biaotou">
<view>作者：{{details[id].zuozhe}}</view>
</view>
<view class="yiji" wx:for="{{details[id].zuopin}}" wx:for-item="item" wx:for-index="index">
<navigator url="./../detail0/detail0?id={{id}}/{{index}}" >
<view>
<text class="yiji">{{index+1}}-{{item[0]}}</text>
</view>
</navigator>
</view>
<text>\n\n\n\n\n\n\n\n</text>
<view class="jishu">第{{id+1}}位作者，共{{details.length}}位作者</view>
<view class="huanti">
<button class="huanti0" bindtap="lastQuestion">◀</button>
<button class="huanti0" bindtap="nextQuestion">▶</button>
</view>

注意：navigator url=”./../detail0/detail0?id={{id}}/{{index}}”，注意id={{id}}/{{index}}，这是把两个参数传递到detail0页面去了，一个id，一个index。

detail.wxss

page {
display: block;
min-height: 100%;
background-color:whitesmoke;
}
.biaotou{
text-align:left;
width:100%;
line-height: 80rpx;
font-size: 60rpx;
background-color:bisque;
}
.yiji{
text-align: left;
margin-top: 5rpx;
line-height: 70rpx;
font-size: 50rpx;
border-radius: 3px;
border-color:black;
background-color:azure;
}

detail.js：

var postData = require("../../data/post-data.js");

Page({
data: {
id: "",
details: postData.postList,

},
onLoad: function (options) {
this.setData({
id: parseInt(options.id)
})
console.log('options---', options)
console.log('详情', this.data.details)
},

nextQuestion: function () {
var that = this;
if (that.data.id < postData.postList.length - 1) {
this.setData({
id: that.data.id + 1
});
}
},
lastQuestion: function () {
var that = this;
if (that.data.id > 0) {
this.setData({
id: that.data.id - 1
});
}
}

})

加载，解析数据库，上一题，下一题。

pages里的detail0。

detail0.wxml:

<view class="zuopin">
<text>{{details[id].zuopin[index][1]}}</text>
</view>
<text>\n\n\n\n\n\n\n\n</text>
<view class="jishu">第{{index+1}}首作品，共{{details[id].zuopin.length}}首作品</view>
<view class="huanti">
<button class="huanti0" bindtap="lastQuestion">◀</button>
<button class="huanti0" bindtap="nextQuestion">▶</button>
</view>

一个id是作者的序号，一个index是作品的序号。

detail0.wxss：

page {
display: block;
min-height: 100%;
background-color:aliceblue;
}
.zuopin{
text-align:center;
margin-top:40rpx;
width:100%;
line-height: 60rpx;
font-size: 40rpx;
}

detail0.js:

var postData = require("../../data/post-data.js");

Page({

data: {
id:'',
index:'',
details: postData.postList,
},

onLoad: function (options) {
this.setData({
id: parseInt(options.id.split('/')[0]),
index: parseInt(options.id.split('/')[1])

})
},
nextQuestion: function () {
var that = this;
if (that.data.index < postData.postList[that.data.id].zuopin.length - 1) {
this.setData({
index: that.data.index + 1
});
}
},
lastQuestion: function () {
var that = this;
if (that.data.index > 0) {
this.setData({
index: that.data.index - 1
});
}
}
})

注意：

id: parseInt(options.id.split(‘/’)[0]),

index: parseInt(options.id.split(‘/’)[1])

options.id是从上一个页面传递过来的参数，上一个页面是id={{id}}/{{index}}，那这里用split函数切分一下，再把id和index分开，这样就能获得序号了。

最后面app里也改了一些全局的。

app.json：

{
"pages": [
"pages/index/index",
"pages/logs/logs",
"pages/detail/detail",
"pages/detail0/detail0"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "b3a8ac",
"navigationBarTitleText": "唐宋名家作品集",
"navigationBarTextStyle": "black"
}
}

改了个导航条的背景色和文字内容。

app.wxss:

/**app.wxss**/
.container {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 200rpx 0;
box-sizing: border-box;
}
.jishu{
position: fixed;
width:100%;
text-align:center;
margin-top:300rpx;
bottom:150rpx;
line-height: 70rpx;
font-size: 40rpx;
background-color:lightcyan;
}
.huanti{
position: fixed;
width: 100%;
height: 100rpx;
bottom: 20rpx;
display: flex;
}
.huanti0{
width: 50%;
boder-width: 3px;
background-color:bisque;
}

全局用的，detail和detail0的class存在这里了。

完全可以用这个方式做一个微信小程序的作品集了，除了丑，没有啥缺点。