微信小程序新闻网站详情页实例代码
181 浏览量
2020-10-15
19:32:44
上传
评论 1
收藏 170KB PDF 举报
微信小程序新闻网站详情页实例代码微信小程序新闻网站详情页实例代码
主要介绍了微信小程序新闻网站详情页的实例代码，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
准备工作：准备工作：
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
- 粉丝: 5
- 资源: 957
最新资源
- C语言基础-C语言编程基础之Leetcode编程题解之第39题组合总和.zip
- C语言基础-C语言编程基础之Leetcode编程题解之第38题外观数列.zip
- C语言基础-C语言编程基础之Leetcode编程题解之第37题解数独.zip
- C语言基础-C语言编程基础之Leetcode编程题解之第36题有效的数独.zip
- C语言基础-C语言编程基础之Leetcode编程题解之第35题搜索插入位置.zip
- index.wxml
- C语言基础-C语言编程基础之Leetcode编程题解之第33题搜索旋转排序数组.zip
- 基于Python实现的手写数字识别系统源码.zip
- 从网页提取禁止转载的文字
- C语言基础-C语言编程基础之Leetcode编程题解之第32题最长有效括号.zip
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
