微信小程序新闻网站详情页实例代码微信小程序新闻网站详情页实例代码
主要介绍了微信小程序新闻网站详情页的实例代码，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
准备工作：准备工作：
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
最新资源
- Gradle,Maven 插件将 Java 应用程序打包为原生 Windows、MacOS 或 Linux 可执行文件并为其创建安装程序 .zip
- Google Maps API Web 服务的 Java 客户端库.zip
- Google Java 核心库.zip
- GitBook 教授 Javascript 编程基础知识.zip
- Generation.org 开发的 JAVA 模块练习.zip
- FastDFS Java 客户端 SDK.zip
- etcd java 客户端.zip
- Esercizi di informatica！执行计划，metti alla prova！.zip
- Eloquent JavaScript 翻译 - 2ª edição .zip
- Eclipse Paho Java MQTT 客户端库 Paho 是一个 Eclipse IoT 项目 .zip
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
