侯体宗的博客
  • 首页
  • Hyperf版
  • beego仿版
  • 人生(杂谈)
  • 技术
  • 关于我
  • 更多分类
    • 文件下载
    • 文字修仙
    • 中国象棋ai
    • 群聊
    • 九宫格抽奖
    • 拼图
    • 消消乐
    • 相册

微信小程序新闻网站详情页实例代码

微信(小程序)  /  管理员 发布于 5年前   649

准备工作:

1、在微信公众号平台,申请小程序账号,获取appid 2、下载并安装微信开发者工具

3、做不同分辨率设备的自适应:单位使用rpx IPhone6下 1px=1rpx=0.5pt 使用rpx,小程序会自动在不同分辨率下进行转换

首先是项目的入口页面

welcome.wxml

  Hello, 七月   开启小程序之旅 

welcome.wxss

.container{ display: flex; flex-direction:column; align-items: center; background-color:#b3d4db;}.avatar{ width:200rpx; height:200rpx; margin-top:160rpx;}.motto{ margin-top:100rpx; font-size:32rpx; font-weight: bold;}.journey-container{ margin-top: 200rpx; border: 1px solid #405f80; width: 200rpx; height: 80rpx; border-radius: 5px; text-align:center;}.journey{ font-size:22rpx; font-weight: bold; line-height:80rpx; color: #405f80;}page{ height: 100%; background-color:#b3d4db;}

welcome.js

Page({ onTap: function (event) {  // wx.navigateTo({  //  url:"../posts/post"  // });    wx.switchTab({   url: "../posts/post"  });   }, onReachBottom:function(event){  console.log('asfasdfa') }})

welcome.json(主要是设置最上面的导航栏的颜色)

{ "navigationBarBackgroundColor": "#b3d4db"}

接下来是新闻列表页

这里是把循环的每条新闻的结构独立出来,到post-item文件夹中

post-item-template.wxml

post-item-template.wxss

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

post.wxml