小程序新聞網站詳情頁

時間  2020-01-10
標籤 程序 網站 詳情 欄目 網站開發 简体版
原文   原文鏈接

準備工做：javascript

一、在微信公衆號平臺，申請小程序帳號，獲取appid
二、下載並安裝微信開發者工具java

三、作不一樣分辨率設備的自適應：單位使用rpx
IPhone6下 1px=1rpx=0.5pt
使用rpx，小程序會自動在不一樣分辨率下進行轉換json

首先是項目的入口頁面小程序

welcome.wxml微信小程序

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

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（主要是設置最上面的導航欄的顏色）sass

{
    "navigationBarBackgroundColor": "#b3d4db"
}

接下來是新聞列表頁微信

這裏是把循環的每條新聞的結構獨立出來，到post-item文件夾中微信開發

post-item-template.wxml

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

                    <image class="post-like-image" 
                    src="/images/icon/view.png"></image>
                    <text class="post-like-font">{{reading}}</text>
            </view>
        </view>
</template>

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

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

post.wxss

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

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

post.js

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

Page({
  data: {
    //小程序老是會讀取data對象來作數據綁定，這個動做咱們稱爲動做A
    // 而這個動做A的執行，是在onLoad函數執行以後發生的
  },
  onLoad: function () {

    // this.data.postList = postsData.postList
    this.setData({
       postList:postsData.postList
      });
  },

  onReachBottom:function(event){
    console.log('asdfasdfasdf')
  },

  onPostTap: function (event) {
    var postId = event.currentTarget.dataset.postid;
    // console.log("on post id is" + postId);
    wx.navigateTo({
      url: "post-detail/post-detail?id=" + postId
    })
  },

  onSwiperTap: function (event) {
    // target 和currentTarget
    // target指的是當前點擊的組件 和currentTarget 指的是事件捕獲的組件
    // target這裏指的是image，而currentTarget指的是swiper
    var postId = event.target.dataset.postid;
    wx.navigateTo({
      url: "post-detail/post-detail?id=" + postId
    })
  }
})

post.json

{
   "navigationBarTitleText":"文與字"
}

而後是新聞詳情頁

post-detail.wxml

<!--先靜後動，先樣式再數據-->
<view class="container">
  <image class="head-image" src="{{isPlayingMusic?postData.music.coverImg:postData.headImgSrc}}"></image>
  <image catchtap="onMusicTap" class="audio" src="{{isPlayingMusic? '/images/music/music-stop.png': '/images/music/music-start.png'}}"></image>
  <view class="author-date">
    <image class="avatar" src="{{postData.avatar}}"></image>
    <text class="author">{{postData.author}}</text>
    <text class="const-text">發表於</text>
    <text class="date">{{postData.dateTime}}</text>
  </view>
  <text class="title">{{postData.title}}</text>
  <view class="tool">
    <view class="circle-img">
      <image wx:if="{{collected}}" catchtap="onColletionTap"  src="/images/icon/collection.png"></image>
      <image wx:else catchtap="onColletionTap" src="/images/icon/collection-anti.png"></image>
      <image catchtap="onShareTap"  class="share-img" src="/images/icon/share.png"></image>
    </view>
    <view class="horizon"></view>
  </view>
  <text class="detail">{{postData.detail}}</text>
</view>

post-detail.wxss

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

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

.hide{
  opacity: 0;
}

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

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

.avatar {
  height: 64rpx;
  width: 64rpx;
  vertical-align: middle;
}

.author {
  font-size: 30rpx;
  font-weight: 300;
  margin-left: 20rpx;
  vertical-align: middle;
  color: #666;
}

.const-text {
  font-size: 24rpx;
  color: #999;
  margin-left: 20rpx;
}

.date {
  font-size: 24rpx;
  margin-left: 30rpx;
  vertical-align: middle;
  color: #999;
}

.title {
  margin-left: 40rpx;
  font-size: 36rpx;
  font-weight: 700;
  margin-top: 30rpx;
  letter-spacing: 2px;
  color: #4b556c;
}

.tool {
  margin-top: 20rpx;
}

.circle-img {
  float: right;
  margin-right: 40rpx;
  vertical-align: middle;
}

.circle-img Image {
  width: 90rpx;
  height: 90rpx;
}

.share-img {
  margin-left: 30rpx;
}

.horizon {
  width: 660rpx;
  height: 1px;
  background-color: #e5e5e5;
  vertical-align: middle;
  position: relative;
  top: 46rpx;
  margin: 0 auto;
  z-index: -99;
}

.detail {
  color: #666;
  margin-left: 30rpx;
  margin-top: 20rpx;
  margin-right: 30rpx;
  line-height: 44rpx;
  letter-spacing: 2px;
}

post-detail.js

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

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

        if (app.globalData.g_isPlayingMusic && app.globalData.g_currentMusicPostId
            === postId) {
            this.setData({
                isPlayingMusic: true
            })
        }
        this.setMusicMonitor();
    },

    setMusicMonitor: function () {
        //點擊播放圖標和總控開關都會觸發這個函數
        var that = this;
        wx.onBackgroundAudioPlay(function (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: true
                    })
                }
                // if(app.globalData.g_currentMusicPostId == that.data.currentPostId )
                // app.globalData.g_currentMusicPostId = that.data.currentPostId;
            }
            app.globalData.g_isPlayingMusic = true;

        });
        wx.onBackgroundAudioPause(function () {
            var pages = getCurrentPages();
            var currentPage = pages[pages.length - 1];
            if (currentPage.data.currentPostId === that.data.currentPostId) {
                if (app.globalData.g_currentMusicPostId == that.data.currentPostId) {
                    that.setData({
                        isPlayingMusic: false
                    })
                }
            }
            app.globalData.g_isPlayingMusic = false;
            // app.globalData.g_currentMusicPostId = null;
        });
        wx.onBackgroundAudioStop(function () {
            that.setData({
                isPlayingMusic: false
            })
            app.globalData.g_isPlayingMusic = false;
            // app.globalData.g_currentMusicPostId = null;
        });
    },

    onColletionTap: function (event) {
        // this.getPostsCollectedSyc();
        this.getPostsCollectedAsy();
    },

    getPostsCollectedAsy: function () {
        var that = this;
        wx.getStorage({
            key: "posts_collected",
            success: function (res) {
                var postsCollected = res.data;
                var postCollected = postsCollected[that.data.currentPostId];
                // 收藏變成未收藏，未收藏變成收藏
                postCollected = !postCollected;
                postsCollected[that.data.currentPostId] = postCollected;
                that.showToast(postsCollected, postCollected);
            }
        })
    },

    getPostsCollectedSyc: function () {
        var postsCollected = wx.getStorageSync('posts_collected');
        var postCollected = postsCollected[this.data.currentPostId];
        // 收藏變成未收藏，未收藏變成收藏
        postCollected = !postCollected;
        postsCollected[this.data.currentPostId] = postCollected;
        this.showToast(postsCollected, postCollected);
    },

    showModal: function (postsCollected, postCollected) {
        var that = this;
        wx.showModal({
            title: "收藏",
            content: postCollected ? "收藏該文章？" : "取消收藏該文章？",
            showCancel: "true",
            cancelText: "取消",
            cancelColor: "#333",
            confirmText: "確認",
            confirmColor: "#405f80",
            success: function (res) {
                if (res.confirm) {
                    wx.setStorageSync('posts_collected', postsCollected);
                    // 更新數據綁定變量，從而實現切換圖片
                    that.setData({
                        collected: postCollected
                    })
                }
            }
        })
    },

    showToast: function (postsCollected, postCollected) {
        // 更新文章是否的緩存值
        wx.setStorageSync('posts_collected', postsCollected);
        // 更新數據綁定變量，從而實現切換圖片
        this.setData({
            collected: postCollected
        })
        wx.showToast({
            title: postCollected ? "收藏成功" : "取消成功",
            duration: 1000,
            icon: "success"
        })
    },

    onShareTap: function (event) {
        var itemList = [
            "分享給微信好友",
            "分享到朋友圈",
            "分享到QQ",
            "分享到微博"
        ];
        wx.showActionSheet({
            itemList: itemList,
            itemColor: "#405f80",
            success: function (res) {
                // res.cancel 用戶是否是點擊了取消按鈕
                // res.tapIndex 數組元素的序號，從0開始
                wx.showModal({
                    title: "用戶 " + itemList[res.tapIndex],
                    content: "用戶是否取消？" + res.cancel + "如今沒法實現分享功能，何時能支持呢"
                })
            }
        })
    },

    onMusicTap: function (event) {
        var currentPostId = this.data.currentPostId;
        var postData = postsData.postList[currentPostId];
        var isPlayingMusic = this.data.isPlayingMusic;
        if (isPlayingMusic) {
            wx.pauseBackgroundAudio();
            this.setData({
                isPlayingMusic: false
            })
            // app.globalData.g_currentMusicPostId = null;
            app.globalData.g_isPlayingMusic = false;
        }
        else {
            wx.playBackgroundAudio({
                dataUrl: postData.music.url,
                title: postData.music.title,
                coverImgUrl: postData.music.coverImg,
            })
            this.setData({
                isPlayingMusic: true
            })
            app.globalData.g_currentMusicPostId = this.data.currentPostId;
            app.globalData.g_isPlayingMusic = true;
        }
    },

    /*
    * 定義頁面分享函數
    */
    onShareAppMessage: function (event) {
        return {
            title: '離思五首·其四',
            desc: '曾經滄海難爲水，除卻巫山不是雲',
            path: '/pages/posts/post-detail/post-detail?id=0'
        }
    }

})

post-detail.json

{
    "navigationBarTitleText":"閱讀"
}

貼一下模擬的新聞數據posts-data.js

var local_database = [
    {
        date: "Sep 18 2016",
        title: "正是蝦肥蟹壯時",
        imgSrc: "/images/post/crab.png",
        avatar: "/images/avatar/1.png",
        content: "菊黃蟹正肥，品嚐秋之味。徐志摩把,「看初花的荻蘆」和「到樓外樓吃蟹」,並列爲秋天來杭州不能錯過的風雅之事；用林妹妹的話講是「螯封嫩玉雙雙滿，",
        reading: "112",
        collection: "96",
        headImgSrc: "/images/post/crab.png",
        author: "林白衣",
        dateTime: "24小時前",
        detail: "菊黃蟹正肥，品嚐秋之味。徐志摩把「看初花的荻蘆」和「到樓外樓吃蟹」並列爲秋天來杭州不能錯過的風雅之事；用林妹妹的話講是「螯封嫩玉雙雙滿，殼凸紅脂塊塊香」；在《世說新語》裏，晉畢卓更是感嘆「右手持酒杯，左手持蟹螯，拍浮酒船中，便足了一輩子矣。」漫漫人生長路，美食與愛豈可辜負？因而做爲一個吃貨，忽然也很想回味一下屬於個人味蕾記憶。記憶中的秋蟹，是家人的味道，瀰漫着濃濃的親情。\n\n是誰來自山川湖海，卻囿於晝夜，廚房與愛？ 是母親，深思熟慮，聰明耐心。吃蟹前，總會拿出幾件工具，煞有介事而樂此不疲。告訴咱們螃蟹至寒，須要佐以薑茶以祛寒，在配備的米醋小碟裏，亦添入薑絲與紫蘇，前者驅寒後者增香。泡好菊花茶，歲月靜好，咱們靜等。",
        postId: 0,
        music: {
          url: "http://music.163.com/song/media/outer/url?id=142604.mp3",
            title: "夜夜夜夜-齊秦",
            coverImg: "http://y.gtimg.cn/music/photo_new/T002R150x150M000001TEc6V0kjpVC.jpg?max_age=2592000"
        }
    },
    {
        title: "比利·林恩的中場故事",
        content: "一 「李安是一位毫不會重複本身的導演，本片將極富原創性李安衆所矚目的新片《比利林恩漫長的中場休息》，正式改名《半場無戰事》。",
        imgSrc: "/images/post/bl.png",
        reading: 62,
        detail: "一 「李安是一位毫不會重複本身的導演，本片將極富原創性」李安衆所矚目的新片《比利林恩漫長的中場休息》，正式改名《半場無戰事》。預告片首次曝光後，被視做是明年奧斯卡種子選手。該片根據同名暢銷書改編。原著小說榮獲美國國家圖書獎。也被BBC評爲21世紀最偉大的12本英文小說之一。影片講述一位19歲德州男孩的比利·林恩入伍參加伊戰，在一次交火中他大難不死，意外與戰友成爲大衆的關注焦點，並被塑形成英雄。以後他們返回國內，在橄欖球賽中場休息時授勳。這名戰爭英雄卻面臨史無前例的心靈煎熬……李安爲何選中這部電影來拍？由於李安想要挑戰史無前例的技術難題：以120幀每秒的速度、4K、3D技術全面結合，來掀起一場電影視覺革命。什麼意思？所謂「電影是24格每秒的謊話」，其中的24格，就是幀數。",
        collection: 92,
        dateTime: "24小時前",
        headImgSrc: "/images/post/bl.png",
        author: "迷的城",
        date: "Nov 20 2016",
        avatar: "/images/avatar/1.png",
        postId: 1,
        music: {
          url: "http://music.163.com/song/media/outer/url?id=108220.mp3",
            title: "鬼迷心竅-李宗盛",
            coverImg: "http://y.gtimg.cn/music/photo_new/T002R150x150M000002xOmp62kqSic.jpg?max_age=2592000"
        }
    },
    {
        //按住alt + shift + F 能夠格式化代碼樣式
        title: "當咱們在談論經濟學時，咱們在談論什麼?",
        content: "引言在我跟學生課後交流時，以及我在知乎上閱讀有關「經濟」問題的論題時，常常會遇到這樣的狀況：...",
        detail: "1 引言\n\n在我跟學生課後交流時，以及我在知乎上閱讀有關「經濟」問題的論題時，常常會遇到這樣的狀況：有些人套用「經濟理論「的知識去解釋現實中發生的經濟事件，結果發現不少事情講不通，或者發現」理論告訴咱們的「與現實發生的是相反的。也有學生常常跟我說：經濟學有什麼用？爲了說明這個，我常常從兩個方面來進行解釋，嘗試用我我的所擅長的解決問題的視角和他們可以聽懂的方法來講明經濟學是什麼，它的做用邊界在哪裏：\r\n\n2 」簡筆素描「與」油畫肖像「咱們給人畫肖像畫，能夠用簡筆素描，也能夠用油畫肖像。油畫肖像能夠在最大程度上保存了人物的各方面的細節和特色，而簡筆素描則忽略了不少細節。儘管簡筆素描忽略了人物的許多細節，但咱們仍舊可以很容易的認出畫中的人物是誰。爲何？由於這種方法保留了人物最顯著的特徵，以致於咱們能夠忽略其次要特徵而對人物作出斷定。\n\n2.1 」簡筆素描「對於絕大多數的非經濟學專業大衆而言（經濟學相關專業碩士學歷以上），人們所接觸到的經濟學都是初級微觀經濟學。所謂的初級微觀經濟學，對於經濟問題的」畫法「就是一種」簡筆素描「。好比初級微觀經濟學教材中廣爲使用的這種一元一次需求函數：y=bx+a，需求量的惟一變量是產品價格。但僅憑直覺咱們就能夠斷言，現實中影響需求量的因素毫不止價格這一種，所以咱們能夠認爲這個模型對經濟問題的描述是失真的。然而但這種失真倒是必要的和有意義的，其意義在與它利於揭示價格對於需求的影響，而不在於否認影響需求的其餘因素——",
        imgSrc: "/images/post/sls.jpg",
        headImgSrc: "/images/post/sls.jpg",
        reading: 62,
        collection: 92,
        author: "知乎",
        date: "Nov 12 2016",
        dateTime: "三天前",
        avatar: "/images/avatar/3.png",
        postId: 2,
        music: {
          url: "http://music.163.com/song/media/outer/url?id=27538254.mp3",
            title: "女兒情-萬曉利",
            coverImg: "http://y.gtimg.cn/music/photo_new/T002R150x150M000004Wv5BO30pPc0.jpg?max_age=2592000"
        }
    },
    {
        title: "微信·小程序開發工具安裝指南",
        content: "這兩天閒來無事，也安裝了 「微信摺疊」的開發工具來玩一下。如下是一些小道消息及使用體驗，過兩天我會寫一篇文章以開發者的角度來詳細評價微信小程序",
        imgSrc: "/images/post/xiaolong.jpg",
        reading: 102,
        detail: "這兩天閒來無事，也安裝了 「微信摺疊」的開發工具來玩一下。如下是一些小道消息及使用體驗，過兩天我會寫一篇文章以開發者的角度來詳細評價微信小程序:微信小程序不能開發遊戲類、直播類功能，小程序每一個人關注的上限是20個（還不肯定，不過我相信這是真的，此次公佈的API裏並無視頻組件。微信太大，蘋果要有所顧忌，可是微信也要作出相應的讓步)微信目前有沒有同蘋果商談好，仍是個未知數，畢竟會對AppStore有必定的衝擊。拋棄了大量的javascript組件後，這個生態體系變得至關的封閉，微信解釋確定是：爲了更好的性能提高。那麼咱們拭目以待。小程序的入口是微信裏的三級菜單，就是在「Tab欄發現裏的遊戲下面加入一個「小程序」。反正，這一欄裏的購物和遊戲我是歷來沒點進去過的。以騰訊的尿性，小程序同服務號同樣，其關係鏈及重要功能的開放程度會因「人」而異。對，優質的接口只會開放給騰訊的兒子們（滴滴呀、京東呀）",
        collection: 92,
        dateTime: "24小時前",
        headImgSrc: "/images/post/xiaolong.jpg",
        author: "貓是貓的貓",
        date: "Nov 20 2016",
        avatar: "/images/avatar/5.png",
        postId: 3,
        music: {
          url: "http://music.163.com/song/media/outer/url?id=108119.mp3",
            title: "戀戀風塵-老狼",
            coverImg: "http://y.gtimg.cn/music/photo_new/T002R150x150M000001VaXQX1Z1Imq.jpg?max_age=2592000",
        }
    },
    {
        title: "從視覺到觸覺 這款VR手套能給你真實觸感",
        content: "8月29日消息，據國外媒體VentureBeat報道，一家名爲Dexta Robotics的公司最近發佈了一款有望變革虛擬現實手部追蹤與交互方式的新產品",
        imgSrc: "/images/post/vr.png",
        reading: 102,
        detail: "消息，據國外媒體VentureBeat報道，一家名爲Dexta Robotics的公司最近發佈了一款有望變革虛擬現實手部追蹤與交互方式的新產品。該產品名爲「Dexmo」，它是一款像手套那樣戴在手上使用的將來主義外骨骼。它內置大量的元件，可以與VR體驗進行交互，可幫助你感受握在你的雙手的虛擬物體。Dexmo據Dexta稱，「Dexmo是一款針對你的雙手的機械外骨骼。它可以捕捉你的手部運動，以及提供即時的力反饋。有了Dexmo，你能夠感覺到虛擬物體的大小、形狀和堅硬度。你能夠接觸數字世界。」市面上已經有數款產品旨在處理虛擬現實中的手部交互，也有相關的產品即將要進入市場。例如，頗受歡迎的HTC Vive頭盔配有一副控制器，其控制器可以使得追蹤系統看到你的雙手，讓你能夠用它們來在特定體驗中與物體進行交互。今年晚些時候，Oculus將開始出貨相似的手部控制產品Oculus Touch。10月，索尼也將開始出貨配備兩個PlayStation Move手部控制器的PS VR。Leap Motion甚至更進一步：利用傳感器來追蹤手指和手部的運動。",
        collection: 26,
        dateTime: "24小時前",
        headImgSrc: "/images/post/vr.png",
        author: "深白色",
        date: "Nov 20 2016",
        avatar: "../../../images/avatar/3.png",
        postId: 4,
        music: {
          url: "http://music.163.com/song/media/outer/url?id=188204.mp3",
            title: "沉默是金-張國榮",
            coverImg: "http://y.gtimg.cn/music/photo_new/T002R150x150M000003at0mJ2YrR2H.jpg?max_age=2592000"
        }
    },
    {
        title: "愛奇藝創維開展戰略合做，協力佈局開放娛樂生態",
        content: "愛奇藝和創維分別做爲國內領先的在線視頻品牌",
        imgSrc: "/images/iqiyi.png",
        reading: 96,
        detail: "愛奇藝和創維分別做爲國內領先的在線視頻品牌和家電品牌。雙方一直銳意創新，爲用戶提供優質的服務體驗和產品體驗。據悉，愛奇藝與創維將展開從資本到VIP會員服務等各方面的深刻合做。籍由這次合做，愛奇藝將戰略投資創維旗下擁有高端互聯網電視品牌的酷開公司。從下一財年開始，創維旗下互聯網電視將經過銀河互聯網電視集成播控平臺，預置VIP會員服務及相關內容。這種捆綁終端與VIP內容的全新銷售模式，將大幅提高互聯網電視終端用戶的體驗，給予用戶更多優質內容的選擇。",
        collection: 26,
        dateTime: "21小時前",
        headImgSrc: "/images/iqiyi.png",
        author: "深白色",
        date: "Nov 20 2016",
        avatar: "../../../images/avatar/5.png",
        postId: 5,
        music: {
          url: "http://music.163.com/song/media/outer/url?id=152428.mp3",
            title: "朋友-譚詠麟",
            coverImg: "http://y.gtimg.cn/music/photo_new/T002R150x150M000004eGsCN3SUheO.jpg?max_age=2592000"
        }
    },
]

module.exports = {
    postList: local_database
}

最後是全局相關配置

app.json

{
  "pages": [
    "pages/welcome/welcome",
    "pages/posts/post",
    "pages/posts/post-detail/post-detail"
  ],
  "window": {
    "navigationBarBackgroundColor": "#405f80"
  },
  "tabBar": {
    "borderStyle": "white",
    "position": "bottom",
    "list": [
      {
        "pagePath": "pages/posts/post",
        "text": "閱讀",
        "iconPath": "images/tab/yuedu.png",
        "selectedIconPath": "images/tab/yuedu_hl.png"
      },
      {
        "pagePath": "pages/posts/post",
        "text": "電影",
        "iconPath": "images/tab/yuedu.png",
        "selectedIconPath": "images/tab/yuedu_hl.png"
      }
    ]
  }
}

app.wxss

text{
    font-family: MicroSoft Yahei;
    font-size: 24rpx;
    color: #666;
}

input{
    font-family: MicroSoft YaHei;
}
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程