小程序新闻网站详情页

准备工作：

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

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

首先是项目的入口页面

welcome.wxml

<view class="container">
    image ="avatar" src="/images/avatar/1.png"></imagetext ="motto">Hello,七月</text="journey-container" bindtap="onTap">
        ="journey">开启小程序之旅view>
>

welcome.wxss

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

.avatar{
    width:200rpx;
    height:
    margin-top:160rpx;
}

.motto{100rpx;
    font-size:32rpx;
    font-weight: bold;
}

.journey-container{ 200rpx;
    border: 1px solid #405f80; 80rpx;
    border-radius: 5px;
    text-align:center;
}

.journey{22rpx; bold;
    line-height:80rpx;
    color: #405f80;
}

page{ 100%;#b3d4db;
}

welcome.js

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

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

{
    "navigationBarBackgroundColor": "#b3d4db"
}

接下来是新闻列表页

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

post-item-template.wxml

template name="postItem"="post-container">
       ="post-author-date">
           ="post-author"="{{avatar}}">
                ="post-date">{{date}}="post-title">{{title}}>
            ="post-image"="{{imgSrc}}"="post-content">{{content}}
            ="post-like">
                    ="post-like-image" 
                    src="/images/icon/chat.png"="post-like-font">{{collection}}>

                    ="/images/icon/view.png">{{reading}}template>

post-item-template.wxss

.post-container{flex;20rpx;
    margin-bottom:40rpx;
    margin-left: 0rpx;#fff;
    border-bottom: 1px solid #ededed;
    border-top:
    padding-bottom: 5px;
}

.post-author-date{10rpx; 20rpx; 10px;
}

.post-author{60rpx;
    vertical-align: middle;
}

.post-date{ 20px;

.post-image{100%;340rpx;
    margin:auto 0; 15px;
}26rpx;
.post-title{34rpx; 600;#333; 10px;
.post-content{#666;28rpx;
    letter-spacing:2rpx; 40rpx;
}
.post-like{13px; 16px;

.post-like-image{16px;
    margin-right: 8px;middle;
}

.post-like-font{middle; 20px;
}

post.wxml

import src="post-item/post-item-template.wxml" />
<!--<import src="/pages/posts/post-item/post-item-template.wxml" />-->
swiper catchtap="onSwiperTap" vertical="{{false}}" indicator-dots="true" autoplay interval="5000"swiper-itemid="7"="/images/wx.png" data-postId="3"="/images/vr.png"="4"="/images/iqiyi.png"="5"swiperblock wx:for="{{postList}}" wx:for-item="item" wx:for-index="idx"//template-->
        ="onPostTap"="{{item.postId}}">
             is="postItem" data="{{...item}}"/>
        block>

post.wxss

@import "post-item/post-item-template.wxss";

 swiper{
     width:
     height:600rpx;
 }
 /*less sass*/
 swiper image{600rpx;
 }

post.js

var postsData = require('../../data/posts-data.js')

Page({
  data: {
    小程序总是会读取data对象来做数据绑定，这个动作我们称为动作A
     而这个动作A的执行，是在onLoad函数执行之后发生的
  },onLoad:  () {

     this.data.postList = postsData.postList
    this.setData({
       postList:postsData.postList
      });
  },1)">(event){
    console.log('asdfasdfasdf')
  },onPostTap:  (event) {
    var postId = event.currentTarget.dataset.postid;
     console.log("on post id is" + postId);
    wx.navigateTo({
      url: "post-detail/post-detail?id=" + postId
    })
  },onSwiperTap:  target 和currentTarget
     target指的是当前点击的组件 和currentTarget 指的是事件捕获的组件
     target这里指的是image，而currentTarget指的是swiper
     event.target.dataset.postid;
    wx.navigateTo({
      url: "post-detail/post-detail?id=" + postId
    })
  }
})

post.json

{
   "navigationBarTitleText":"文与字"
}

然后是新闻详情页

post-detail.wxml

先静后动，先样式再数据>
  ="head-image"="{{isPlayingMusic?postData.music.coverImg:postData.headImgSrc}}"="onMusicTap" class="audio"="{{isPlayingMusic? '/images/music/music-stop.png': '/images/music/music-start.png'}}"="author-date"="{{postData.avatar}}"="author">{{postData.author}}="const-text">发表于="date">{{postData.dateTime}}="title">{{postData.title}}="tool"="circle-img">
      wx:if="{{collected}}" catchtap="onColletionTap"  src="/images/icon/collection.png"wx:else catchtap="/images/icon/collection-anti.png"="onShareTap"  class="share-img"="/images/icon/share.png"="horizon"="detail">{{postData.detail}}>

post-detail.wxss

.container {
  display:
  flex-direction: column;
}

.head-image {
  width:
  height: 460rpx;
}

.hide{
  opacity: 0;
}

.audio { 102rpx; 110rpx;
  position: absolute;
  left: 50%;
  margin-left: -51rpx;
  top: 180rpx; 0.6;
}

.author-date { row; 30rpx;
  margin-top: 20rpx;
}

.avatar { 64rpx;
  vertical-align:

.author {
  font-size:
  font-weight: 300; middle;
  color: #666;
}

.const-text { 24rpx; #999;

.date { #999;
}

.title { 40rpx; 36rpx; 700;
  letter-spacing: 2px; #4b556c;
}

.tool {

.circle-img {
  float: right;
  margin-right:

.circle-img Image { 90rpx; 90rpx;
}

.share-img { 30rpx;
}

.horizon { 660rpx; 1px;
  background-color: #e5e5e5; relative; 46rpx;
  margin: 0 auto;
  z-index: -99;
}

.detail { #666;
  line-height: 44rpx; 2px;
}

post-detail.js

var postsData = require('../../../data/posts-data.js')
var app = getApp();
Page({
    data: {
        isPlayingMusic: false
    },1)"> (option) {
         option.id;
        this.data.currentPostId = postId;
        var postData = postsData.postList[postId];
        .setData({
            postData: postData
        })

        var postsCollected = wx.getStorageSync('posts_collected')
        if (postsCollected) {
            var postCollected = postsCollected[postId]
             (postCollected){
              .setData({
                collected: postCollected
              })
            }
        }
        else {
            var postsCollected = {};
            postsCollected[postId] = ;
            wx.setStorageSync('posts_collected',postsCollected);
        }

        if (app.globalData.g_isPlayingMusic && app.globalData.g_currentMusicPostId
            === postId) {
            .setData({
                isPlayingMusic: true
            })
        }
        .setMusicMonitor();
    },setMusicMonitor:  () {
        点击播放图标和总控开关都会触发这个函数
        var that = ;
        wx.onBackgroundAudioPlay( (event) {
            var pages = getCurrentPages();
            var currentPage = pages[pages.length - 1];
            if (currentPage.data.currentPostId === that.data.currentPostId) {
                 打开多个post-detail页面后，每个页面不会关闭，只会隐藏。通过页面栈拿到到
                 当前页面的postid，只处理当前页面的音乐播放。
                if (app.globalData.g_currentMusicPostId == that.data.currentPostId) {
                     播放当前页面音乐才改变图标
                    that.setData({
                        isPlayingMusic: 
                    })
                }
                 if(app.globalData.g_currentMusicPostId == that.data.currentPostId )
                 app.globalData.g_currentMusicPostId = that.data.currentPostId;
            }
            app.globalData.g_isPlayingMusic = ;

        });
        wx.onBackgroundAudioPause( () {
             that.data.currentPostId) {
                    that.setData({
                        isPlayingMusic: 
                    })
                }
            }
            app.globalData.g_isPlayingMusic = ;
             app.globalData.g_currentMusicPostId = null;
        });
        wx.onBackgroundAudioStop( () {
            that.setData({
                isPlayingMusic: 
            })
            app.globalData.g_isPlayingMusic =         });
    },onColletionTap:  this.getPostsCollectedSyc();
        .getPostsCollectedAsy();
    },getPostsCollectedAsy: ;
        wx.getStorage({
            key: "posts_collected" (res) {
                 res.data;
                 postsCollected[that.data.currentPostId];
                 收藏变成未收藏，未收藏变成收藏
                postCollected = !postCollected;
                postsCollected[that.data.currentPostId] = postCollected;
                that.showToast(postsCollected,postCollected);
            }
        })
    },getPostsCollectedSyc: );
        var postCollected = postsCollected[.data.currentPostId];
         收藏变成未收藏，未收藏变成收藏
        postCollected = !postCollected;
        postsCollected[this.data.currentPostId] = postCollected;
        .showToast(postsCollected,postCollected);
    },showModal:  (postsCollected,postCollected) {
        ;
        wx.showModal({
            title: "收藏" (res.confirm) {
                    wx.setStorageSync('posts_collected' 更新数据绑定变量，从而实现切换图片
                    that.setData({
                        collected: postCollected
                    })
                }
            }
        })
    },showToast:  更新文章是否的缓存值
        wx.setStorageSync('posts_collected' 更新数据绑定变量，从而实现切换图片
        .setData({
            collected: postCollected
        })
        wx.showToast({
            title: postCollected ? "收藏成功" : "取消成功""success"
        })
    },onShareTap: var itemList = [
            "分享给微信好友"
        ];
        wx.showActionSheet({
            itemList: itemList,itemColor: "#405f80" res.cancel 用户是不是点击了取消按钮
                 res.tapIndex 数组元素的序号，从0开始
                wx.showModal({
                    title: "用户 " + itemList[res.tapIndex],content: "用户是否取消？" + res.cancel + "现在无法实现分享功能，什么时候能支持呢"
                })
            }
        })
    },onMusicTap: var currentPostId = .data.currentPostId;
         postsData.postList[currentPostId];
        var isPlayingMusic = .data.isPlayingMusic;
         (isPlayingMusic) {
            wx.pauseBackgroundAudio();
            
            })
             app.globalData.g_currentMusicPostId = null;
            app.globalData.g_isPlayingMusic = ;
        }
         {
            wx.playBackgroundAudio({
                dataUrl: postData.music.url,title: postData.music.title,coverImgUrl: postData.music.coverImg,})
            
            })
            app.globalData.g_currentMusicPostId = .data.currentPostId;
            app.globalData.g_isPlayingMusic = ;
        }
    },
    * 定义页面分享函数
    */
    onShareAppMessage: return {
            title: '离思五首·其四''/pages/posts/post-detail/post-detail?id=0'
        }
    }

})

post-detail.json

{
    "navigationBarTitleText":"阅读"
}

贴一下模拟的新闻数据posts-data.js

var local_database = [
    {
        date: "Sep 18 2016""http://music.163.com/song/media/outer/url?id=142604.mp3"
        }
    },{
        title: "比利·林恩的中场故事""一 “李安是一位绝不会重复自己的导演，本片将极富原创性”李安众所瞩目的新片《比利林恩漫长的中场休息》，正式更名《半场无战事》。预告片首次曝光后，被视作是明年奥斯卡种子选手。该片根据同名畅销书改编。原著小说荣获美国国家图书奖。也被BBC评为21世纪最伟大的12本英文小说之一。影片讲述一位19岁德州男孩的比利·林恩入伍参加伊战，在一次交火中他大难不死，意外与战友成为大众的关注焦点，并被塑造成英雄。之后他们返回国内，在橄榄球赛中场休息时授勋。这名战争英雄却面临前所未有的心灵煎熬……李安为什么选中这部电影来拍？因为李安想要挑战前所未有的技术难题：以120帧每秒的速度、4K、3D技术全面结合，来掀起一场电影视觉革命。什么意思？所谓“电影是24格每秒的谎言”，其中的24格，就是帧数。""/images/post/bl.png""http://music.163.com/song/media/outer/url?id=108220.mp3"按住alt + shift + F 可以格式化代码样式
        title: "当我们在谈论经济学时，我们在谈论什么?""http://music.163.com/song/media/outer/url?id=27538254.mp3""这两天闲来无事，也安装了 “微信折叠”的开发工具来玩一下。以下是一些小道消息及使用体验，过两天我会写一篇文章以开发者的角度来详细评价微信小程序:微信小程序不能开发游戏类、直播类功能，小程序每个人关注的上限是20个（还不确定，不过我相信这是真的，这次公布的API里并没有视频组件。微信太大，苹果要有所顾忌，但是微信也要做出相应的让步)微信目前有没有同苹果商谈好，还是个未知数，毕竟会对AppStore有一定的冲击。抛弃了大量的javascript组件后，这个生态体系变得相当的封闭，微信解释肯定是：为了更好的性能提升。那么我们拭目以待。小程序的入口是微信里的三级菜单，就是在“Tab栏发现里的游戏下面加入一个“小程序”。反正，这一栏里的购物和游戏我是从来没点进去过的。以腾讯的尿性，小程序同服务号一样，其关系链及重要功能的开放程度会因“人”而异。对，优质的接口只会开放给腾讯的儿子们（滴滴呀、京东呀）""http://music.163.com/song/media/outer/url?id=108119.mp3""/images/post/vr.png""http://music.163.com/song/media/outer/url?id=188204.mp3""爱奇艺和创维分别作为国内领先的在线视频品牌和家电品牌。双方一直锐意创新，为用户提供优质的服务体验和产品体验。据悉，爱奇艺与创维将展开从资本到VIP会员服务等各方面的深入合作。籍由此次合作，爱奇艺将战略投资创维旗下拥有高端互联网电视品牌的酷开公司。从下一财年开始，创维旗下互联网电视将通过银河互联网电视集成播控平台，预置VIP会员服务及相关内容。这种捆绑终端与VIP内容的全新销售模式，将大幅提升互联网电视终端用户的体验，给予用户更多优质内容的选择。""http://music.163.com/song/media/outer/url?id=152428.mp3" {
    postList: local_database
}

最后是全局相关配置

app.json

{
  "pages": [
    "pages/welcome/welcome"
  ],"window": {
    "navigationBarBackgroundColor": "#405f80"
  },"tabBar": {
    "borderStyle": "white": [
      {
        "pagePath": "pages/posts/post"
      },{
        "pagePath": "pages/posts/post"
      }
    ]
  }
}

app.wxss

text{
    font-family: MicroSoft Yahei;

input{ MicroSoft YaHei;
}

小程序新闻网站详情页

相关推荐