微信小程序新闻网站详情页实例代码微信小程序新闻网站详情页实例代码
主要介绍了微信小程序新闻网站详情页的实例代码，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
准备工作：准备工作：
1、在微信公众号平台，申请小程序账号，获取appid 2、下载并安装微信开发者工具
3、做不同分辨率设备的自适应：单位使用rpx IPhone6下 1px=1rpx=0.5pt 使用rpx，小程序会自动在不同分辨率下进行转换
首先是项目的入口页面
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（主要是设置最上面的导航栏的颜色）
{
"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;
资源评论
weixin_38697063
- 粉丝: 6
- 资源: 956
最新资源
- CBT 3847-1999 船用扁圆形焊接钢法兰.pdf
- CBZ 27-1980 船体结构低温焊接.pdf
- CBT 3962-2005 船用焊接异径铜法兰.pdf
- CBZ 258-1989 铝合金船体氩弧焊接工艺规程.pdf
- CBZ 69-1986 铸钢艉柱手工焊接工艺.pdf
- CBZ 66-1987 铜板的焊接.pdf
- CBZ 802-2007 陶质衬垫CO2单面焊焊接工艺.pdf
- CBZ 801-2007 熔嘴电渣焊焊接工艺.pdf
- CBZ39-1987_焊接材料的验收、存放和使用.pdf
- CBZ124-1998_潜艇921A等钢结构焊接技术要求.pdf
- CBZ126-1998潜艇耐压船体可拆板切割、装配和焊接技术要求.pdf
- CECS 330-2013 钢结构焊接热处理技术规程.pdf
- CJT 32-2004 液化石油气钢瓶焊接工艺评定.pdf
- C-HRA-1镍基合金的焊接工艺性能研究.pdf
- CMT焊接在堆焊（包覆）镍基耐蚀合金层中的应用.pdf
- CNG高压储罐焊接制造质量保证.pdf
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
