微信小程序新聞網(wǎng)站詳情頁實例代碼
更新時間：2020年01月10日 08:15:49 作者：陳鶯鶯呀
這篇文章主要介紹了微信小程序新聞網(wǎng)站詳情頁的實例代碼，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下
準(zhǔn)備工作：
1、在微信公眾號平臺，申請小程序賬號，獲取appid 2、下載并安裝微信開發(fā)者工具
3、做不同分辨率設(shè)備的自適應(yīng)：單位使用rpx IPhone6下 1px=1rpx=0.5pt 使用rpx，小程序會自動在不同分辨率下進(jìn)行轉(zhuǎn)換
首先是項目的入口頁面
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（主要是設(shè)置最上面的導(dǎo)航欄的顏色）
{
"navigationBarBackgroundColor": "#b3d4db"
}
接下來是新聞列表頁
這里是把循環(huán)的每條新聞的結(jié)構(gòu)獨立出來，到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對象來做數(shù)據(jù)綁定，這個動作我們稱為動作A
// 而這個動作A的執(zhí)行，是在onLoad函數(shù)執(zhí)行之后發(fā)生的
},
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指的是當(dāng)前點擊的組件 和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
<!--先靜后動，先樣式再數(shù)據(jù)-->
<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">發(fā)表于</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 () {
//點擊播放圖標(biāo)和總控開關(guān)都會觸發(fā)這個函數(shù)
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頁面后，每個頁面不會關(guān)閉，只會隱藏。通過頁面棧拿到到
// 當(dāng)前頁面的postid，只處理當(dāng)前頁面的音樂播放。
if (app.globalData.g_currentMusicPostId == that.data.currentPostId) {
// 播放當(dāng)前頁面音樂才改變圖標(biāo)
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: "確認(rèn)",
confirmColor: "#405f80",
success: function (res) {
if (res.confirm) {
wx.setStorageSync('posts_collected', postsCollected);
// 更新數(shù)據(jù)綁定變量，從而實現(xiàn)切換圖片
that.setData({
collected: postCollected
})
}
}
})
},
showToast: function (postsCollected, postCollected) {
// 更新文章是否的緩存值
wx.setStorageSync('posts_collected', postsCollected);
// 更新數(shù)據(jù)綁定變量，從而實現(xiàn)切換圖片
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 數(shù)組元素的序號，從0開始
wx.showModal({
title: "用戶 " + itemList[res.tapIndex],
content: "用戶是否取消？" + res.cancel + "現(xiàn)在無法實現(xiàn)分享功能，什么時候能支持呢"
})
}
})
},
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;
}
},
/*
* 定義頁面分享函數(shù)
*/
onShareAppMessage: function (event) {
return {
title: '離思五首·其四',
desc: '曾經(jīng)滄海難為水，除卻巫山不是云',
path: '/pages/posts/post-detail/post-detail?id=0'
}
}
})
post-detail.json
{
"navigationBarTitleText":"閱讀"
}
貼一下模擬的新聞數(shù)據(jù)posts-data.js
var local_database = [
{
date: "Sep 18 2016",
title: "正是蝦肥蟹壯時",
imgSrc: "/images/post/crab.png",
avatar: "/images/avatar/1.png",
content: "菊黃蟹正肥，品嘗秋之味。徐志摩把,“看初花的荻蘆”和“到樓外樓吃蟹”,并列為秋天來杭州不能錯過的風(fēng)雅之事；用林妹妹的話講是“螯封嫩玉雙雙滿，",
reading: "112",
collection: "96",
headImgSrc: "/images/post/crab.png",
author: "林白衣",
dateTime: "24小時前",
detail: "菊黃蟹正肥，品嘗秋之味。徐志摩把“看初花的荻蘆”和“到樓外樓吃蟹”并列為秋天來杭州不能錯過的風(fēng)雅之事；用林妹妹的話講是“螯封嫩玉雙雙滿，殼凸紅脂塊塊香”；在《世說新語》里，晉畢卓更是感嘆“右手持酒杯，左手持蟹螯，拍浮酒船中，便足了一生矣?！甭松L路，美食與愛豈可辜負(fù)？于是作為一個吃貨，突然也很想回味一下屬于我的味蕾記憶。記憶中的秋蟹，是家人的味道，彌漫著濃濃的親情。\n\n是誰來自山川湖海，卻囿于晝夜，廚房與愛？ 是母親，深思熟慮，聰明耐心。吃蟹前，總會拿出幾件工具，煞有介事而樂此不疲。告訴我們螃蟹至寒，需要佐以姜茶以祛寒，在配備的米醋小碟里，亦添入姜絲與紫蘇，前者驅(qū)寒后者增香。泡好菊花茶，歲月靜好，我們靜等。",
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: "一 “李安是一位絕不會重復(fù)自己的導(dǎo)演，本片將極富原創(chuàng)性李安眾所矚目的新片《比利林恩漫長的中場休息》，正式更名《半場無戰(zhàn)事》。",
imgSrc: "/images/post/bl.png",
reading: 62,
detail: "一 “李安是一位絕不會重復(fù)自己的導(dǎo)演，本片將極富原創(chuàng)性”李安眾所矚目的新片《比利林恩漫長的中場休息》，正式更名《半場無戰(zhàn)事》。預(yù)告片首次曝光后，被視作是明年奧斯卡種子選手。該片根據(jù)同名暢銷書改編。原著小說榮獲美國國家圖書獎。也被BBC評為21世紀(jì)最偉大的12本英文小說之一。影片講述一位19歲德州男孩的比利·林恩入伍參加伊戰(zhàn)，在一次交火中他大難不死，意外與戰(zhàn)友成為大眾的關(guān)注焦點，并被塑造成英雄。之后他們返回國內(nèi)，在橄欖球賽中場休息時授勛。這名戰(zhàn)爭英雄卻面臨前所未有的心靈煎熬……李安為什么選中這部電影來拍？因為李安想要挑戰(zhàn)前所未有的技術(shù)難題：以120幀每秒的速度、4K、3D技術(shù)全面結(jié)合，來掀起一場電影視覺革命。什么意思？所謂“電影是24格每秒的謊言”，其中的24格，就是幀數(shù)。",
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: "當(dāng)我們在談?wù)摻?jīng)濟(jì)學(xué)時，我們在談?wù)撌裁?#63;",
content: "引言在我跟學(xué)生課后交流時，以及我在知乎上閱讀有關(guān)“經(jīng)濟(jì)”問題的論題時，經(jīng)常會遇到這樣的情況：...",
detail: "1 引言\n\n在我跟學(xué)生課后交流時，以及我在知乎上閱讀有關(guān)“經(jīng)濟(jì)”問題的論題時，經(jīng)常會遇到這樣的情況：有些人套用“經(jīng)濟(jì)理論“的知識去解釋現(xiàn)實中發(fā)生的經(jīng)濟(jì)事件，結(jié)果發(fā)現(xiàn)很多事情講不通，或者發(fā)現(xiàn)”理論告訴我們的“與現(xiàn)實發(fā)生的是相反的。也有學(xué)生經(jīng)常跟我說：經(jīng)濟(jì)學(xué)有什么用？為了說明這個，我經(jīng)常從兩個方面來進(jìn)行解釋，嘗試用我個人所擅長的解決問題的視角和他們能夠聽懂的方法來說明經(jīng)濟(jì)學(xué)是什么，它的作用邊界在哪里：\r\n\n2 ”簡筆素描“與”油畫肖像“我們給人畫肖像畫，可以用簡筆素描，也可以用油畫肖像。油畫肖像可以在最大程度上保存了人物的各方面的細(xì)節(jié)和特點，而簡筆素描則忽略了很多細(xì)節(jié)。盡管簡筆素描忽略了人物的許多細(xì)節(jié)，但我們?nèi)耘f能夠很容易的認(rèn)出畫中的人物是誰。為什么？因為這種方法保留了人物最顯著的特征，以至于我們可以忽略其次要特征而對人物做出判定。\n\n2.1 ”簡筆素描“對于絕大多數(shù)的非經(jīng)濟(jì)學(xué)專業(yè)大眾而言（經(jīng)濟(jì)學(xué)相關(guān)專業(yè)碩士學(xué)歷以上），人們所接觸到的經(jīng)濟(jì)學(xué)都是初級微觀經(jīng)濟(jì)學(xué)。所謂的初級微觀經(jīng)濟(jì)學(xué)，對于經(jīng)濟(jì)問題的”畫法“就是一種”簡筆素描“。比如初級微觀經(jīng)濟(jì)學(xué)教材中廣為使用的這種一元一次需求函數(shù)：y=bx+a，需求量的唯一變量是產(chǎn)品價格。但僅憑直覺我們就可以斷言，現(xiàn)實中影響需求量的因素絕不止價格這一種，因此我們可以認(rèn)為這個模型對經(jīng)濟(jì)問題的描述是失真的。然而但這種失真卻是必要的和有意義的，其意義在與它利于揭示價格對于需求的影響，而不在于否定影響需求的其他因素——",
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: "微信·小程序開發(fā)工具安裝指南",
content: "這兩天閑來無事，也安裝了 “微信折疊”的開發(fā)工具來玩一下。以下是一些小道消息及使用體驗，過兩天我會寫一篇文章以開發(fā)者的角度來詳細(xì)評價微信小程序",
imgSrc: "/images/post/xiaolong.jpg",
reading: 102,
detail: "這兩天閑來無事，也安裝了 “微信折疊”的開發(fā)工具來玩一下。以下是一些小道消息及使用體驗，過兩天我會寫一篇文章以開發(fā)者的角度來詳細(xì)評價微信小程序:微信小程序不能開發(fā)游戲類、直播類功能，小程序每個人關(guān)注的上限是20個（還不確定，不過我相信這是真的，這次公布的API里并沒有視頻組件。微信太大，蘋果要有所顧忌，但是微信也要做出相應(yīng)的讓步)微信目前有沒有同蘋果商談好，還是個未知數(shù)，畢竟會對AppStore有一定的沖擊。拋棄了大量的javascript組件后，這個生態(tài)體系變得相當(dāng)?shù)姆忾]，微信解釋肯定是：為了更好的性能提升。那么我們拭目以待。小程序的入口是微信里的三級菜單，就是在“Tab欄發(fā)現(xiàn)里的游戲下面加入一個“小程序”。反正，這一欄里的購物和游戲我是從來沒點進(jìn)去過的。以騰訊的尿性，小程序同服務(wù)號一樣，其關(guān)系鏈及重要功能的開放程度會因“人”而異。對，優(yōu)質(zhì)的接口只會開放給騰訊的兒子們（滴滴呀、京東呀）",
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: "戀戀風(fēng)塵-老狼",
coverImg: "http://y.gtimg.cn/music/photo_new/T002R150x150M000001VaXQX1Z1Imq.jpg?max_age=2592000",
}
},
{
title: "從視覺到觸覺 這款VR手套能給你真實觸感",
content: "8月29日消息，據(jù)國外媒體VentureBeat報道，一家名為Dexta Robotics的公司最近發(fā)布了一款有望變革虛擬現(xiàn)實手部追蹤與交互方式的新產(chǎn)品",
imgSrc: "/images/post/vr.png",
reading: 102,
detail: "消息，據(jù)國外媒體VentureBeat報道，一家名為Dexta Robotics的公司最近發(fā)布了一款有望變革虛擬現(xiàn)實手部追蹤與交互方式的新產(chǎn)品。該產(chǎn)品名為“Dexmo”，它是一款像手套那樣戴在手上使用的未來主義外骨骼。它內(nèi)置大量的元件，能夠與VR體驗進(jìn)行交互，可幫助你感覺握在你的雙手的虛擬物體。Dexmo據(jù)Dexta稱，“Dexmo是一款針對你的雙手的機(jī)械外骨骼。它能夠捕捉你的手部運動，以及提供即時的力反饋。有了Dexmo，你可以感受到虛擬物體的大小、形狀和堅硬度。你可以接觸數(shù)字世界?！笔忻嫔弦呀?jīng)有數(shù)款產(chǎn)品旨在處理虛擬現(xiàn)實中的手部交互，也有相關(guān)的產(chǎn)品即將要進(jìn)入市場。例如，頗受歡迎的HTC Vive頭盔配有一副控制器，其控制器能夠使得追蹤系統(tǒng)看到你的雙手，讓你可以用它們來在特定體驗中與物體進(jìn)行交互。今年晚些時候，Oculus將開始出貨類似的手部控制產(chǎn)品Oculus Touch。10月，索尼也將開始出貨配備兩個PlayStation Move手部控制器的PS VR。Leap Motion甚至更進(jìn)一步：利用傳感器來追蹤手指和手部的運動。",
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: "愛奇藝創(chuàng)維開展戰(zhàn)略合作，合力布局開放娛樂生態(tài)",
content: "愛奇藝和創(chuàng)維分別作為國內(nèi)領(lǐng)先的在線視頻品牌",
imgSrc: "/images/iqiyi.png",
reading: 96,
detail: "愛奇藝和創(chuàng)維分別作為國內(nèi)領(lǐng)先的在線視頻品牌和家電品牌。雙方一直銳意創(chuàng)新，為用戶提供優(yōu)質(zhì)的服務(wù)體驗和產(chǎn)品體驗。據(jù)悉，愛奇藝與創(chuàng)維將展開從資本到VIP會員服務(wù)等各方面的深入合作。籍由此次合作，愛奇藝將戰(zhàn)略投資創(chuàng)維旗下?lián)碛懈叨嘶ヂ?lián)網(wǎng)電視品牌的酷開公司。從下一財年開始，創(chuàng)維旗下互聯(lián)網(wǎng)電視將通過銀河互聯(lián)網(wǎng)電視集成播控平臺，預(yù)置VIP會員服務(wù)及相關(guān)內(nèi)容。這種捆綁終端與VIP內(nèi)容的全新銷售模式，將大幅提升互聯(lián)網(wǎng)電視終端用戶的體驗，給予用戶更多優(yōu)質(zhì)內(nèi)容的選擇。",
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
}
最后是全局相關(guān)配置
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;
}
總結(jié)
以上所述是小編給大家介紹的微信小程序新聞網(wǎng)站詳情頁實例代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！
相關(guān)文章
js 利用image對象實現(xiàn)圖片的預(yù)加載提高訪問速度
我們來學(xué)習(xí)一種名為圖像預(yù)裝載（image preloading）的小技巧來提高圖像訪問速度，一些瀏覽器試圖通過在本地緩存中保存這些圖片來解決此問題，感興趣的朋友可以了解下2013-03-03
Three.js?中的屏幕空間環(huán)境光遮蔽SSAO
這篇文章主要為大家介紹了Three.js?中屏幕空間環(huán)境光遮蔽SSAO的原理及實現(xiàn)解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-04-04
這篇文章主要為大家詳細(xì)介紹了vue2.0實戰(zhàn)第一篇基礎(chǔ)入門的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03
目前隨著元宇宙概念的爆火，THREE技術(shù)已經(jīng)深入到了物聯(lián)網(wǎng)、VR、游戲、數(shù)據(jù)可視化等多個平臺，今天我們主要基于THREE實現(xiàn)一個三維的VR看房小項目，感興趣的朋友跟隨小編一起看看吧2022-10-10
js鼠標(biāo)滑輪滾動事件綁定的簡單實例(兼容主流瀏覽器)
本篇文章主要介紹了js鼠標(biāo)滑輪滾動事件綁定的簡單實例(兼容主流瀏覽器)。需要的朋友可以過來參考下，希望對大家有所幫助2014-01-01
淺析JavaScript如何解決跨域問題并手寫一個jsonp
跨域是指瀏覽器為了安全性,實施的同源策略,同源策略要求,只有協(xié)議、域名和端口號完全相同的網(wǎng)頁,才能共享資源,本文整理了一些常用的跨域解決方法,希望對大家有所幫助2024-03-03
JavaScript/jQuery 表單美化插件小結(jié)
用過一些表單美化的工具，覺得不錯，特地分享一下2012-02-02
最近在寫插件的過程中，需要使用 JS 判斷是否有滾動條，搜了一下，大致方法都差不多，但都有些啰嗦，代碼不夠簡潔。最終通過參考不同方法，寫了一個比較簡單的方法2018-04-04
js跨域我用的比較多的就是jsonp和程序代理。但是jsonp只能用get，而且是js異步調(diào)用，有時候不能滿足項目要求2012-08-08
uni-app微信小程序登錄并使用vuex存儲登錄狀態(tài)的思路詳解
這篇文章主要介紹了uni-app微信小程序登錄并使用vuex存儲登錄態(tài)的思路，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2019-11-11