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

原创 2018年02月03日 14:02:10

审美是病,得治。
这里写图片描述
从左到右依次,初始界面,点一下,进入第二个作者目录,点击李贺,进入第三个作品目录,点击马诗二十三首,进入第四个作品详情,第五个是结构,◀▶切换前后。
依次往下捋,
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存在这里了。

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

微信小程序中换行,空格写法

在小程序中HTML的网页实体无法正常使用,小程序中的写法为:你好!\t七月流火啊!\n我在下一行\t 空格 \n 换行友情提示:必须在标签中!看评论说不行,我以为版本更新,自己又测了一下,结果...
  • qq_25252769
  • qq_25252769
  • 2017年07月25日 10:06
  • 16546

微信小程序跨页面传值

想实现点击不同的父页面跳转到不同的子页面上,从后台传来的JSON数据来看,一共有6个父页面,每个都作为一个对象被放在一个数组里面,而且每个都有一个特有的id值 1.先在上自定义一个“data-”属性...
  • xubingnan123
  • xubingnan123
  • 2018年01月16日 12:53
  • 78

微信小程序 页面跳转 传递参数

微信小程序的页面跳转,页面之间传递参数笔记.   先上demo图:    为了简化逻辑,所以index.wxml里面只写了两个text.既然是跳转,那就还有其他页面. 目录如下: 三个页面,...
  • qq_31383345
  • qq_31383345
  • 2016年10月12日 10:53
  • 60875

微信小程序多页面传参通信的探索与实践

一、前言最近微信小程序越来越火,不少公司都在将原生代码转为微信小程序代码。在开发过程中,由于微信小程序wx.navigateBack方法并不支持返回传参,导致一些页面,尤其是从列表页面跳入详情页,用户...
  • qq273681448
  • qq273681448
  • 2017年05月08日 00:23
  • 373

微信小程序 通过控制CSS实现view隐藏与显示

视图代码,使用变量控制隐藏类名         为了更好地帮助您解决问题,请准确填写您的邮箱地址和电话号码,以便管理员给你答复。                  希望回访:        ...
  • yelin042
  • yelin042
  • 2017年05月18日 16:28
  • 1854

微信小程序中的多个空格怎么打?

微信小程序中的多个空格怎么打?  不行。 在wxml中直接用 decode="{{true}}" 和  ,但是不行。代码语句如下: 部  门 ...
  • haolyj98
  • haolyj98
  • 2017年09月04日 14:24
  • 8659

微信小程序如何让text内容空格?

decode="{{true}}" space="{{true}}">   由于小程序有这需求,就是让显示的一段话首行空两个空格,所以网上查了一下, 顺便也小结一下:  在text...
  • llixiangjian
  • llixiangjian
  • 2017年11月06日 14:48
  • 2354

微信小程序实现转义换行符

在HTML5中我们都知道编辑文档换行的时候我们直接用就可以了,但在wxml中却识别不了标签。 但我们可以用\n来进行换行 实例: .js Page({ data:{ a...
  • jimolangyaleng
  • jimolangyaleng
  • 2017年01月12日 10:16
  • 13805

微信小程序页面跳转传参填充数据的小案例

在微信小程序中,把index.wxml中data-postid的值,传给detail.wxml,并为detail.wxml绑定传过来的值的案例...
  • anLazyAnt
  • anLazyAnt
  • 2017年02月28日 17:05
  • 1203

微信小程序的页面跳转和参数传递 —— 微信小程序教程系列(6)

页面跳转可以使用微信小程序提交的api :wx.navigeteTo
  • michael_ouyang
  • michael_ouyang
  • 2017年02月09日 13:01
  • 20045
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:微信小程序作品集实例:跨页面传参,数据库,换行,空格,css
举报原因:
原因补充:

(最多只允许输入30个字)