没有合适的资源？快使用搜索试试~ 我知道了~

首页微信小程序新闻网站详情页实例代码

微信小程序新闻网站详情页实例代码

date

font

margin

10 下载量 174 浏览量更新于2023-05-04 评论收藏 410KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

试读

14页

准备工作： 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

资源详情

资源评论

资源推荐

微信小程序新闻网站详情页实例代码微信小程序新闻网站详情页实例代码

准备工作：准备工作：

1、在微信公众号平台，申请小程序账号，获取appid 2、下载并安装微信开发者工具

3、做不同分辨率设备的自适应：单位使用rpx IPhone6下 1px=1rpx=0.5pt 使用rpx，小程序会自动在不同分辨率下进行转换

首先是项目的入口页面

welcome.wxml

<text class="motto">Hello, 七月</text>

<text class="journey">开启小程序之旅</text>

</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

</view>

<text class="post-title">{{title}}</text>

<text class="post-content">{{content}}

</text>

<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>

</template>

post-item-template.wxss

.post-container{

flex-direction:column;

剩余13页未读，继续阅读

微信小程序新闻资讯新闻阅读器（源代码+截图）

微信小程序新闻资讯知乎（源代码+截图）

weixin_38584043

粉丝: 4
资源: 948

上传资源快速赚钱

我的内容管理收起

我的资源快来上传第一个资源

我的收益

登录查看自己的收益

我的积分登录查看自己的积分

我的C币登录后查看C币余额

我的收藏

我的下载

下载帮助

会员权益专享

微信小程序新闻网站详情页实例代码

评论0

会员权益专享

最新资源

微信小程序新闻网站详情页实例代码

评论0

微信小程序 新闻资讯 新闻阅读器 （源代码+截图）

微信小程序 新闻资讯 知乎 （源代码+截图）

微信小程序点击列表跳转到对应详情页过程解析

微信小程序商品详情页

微信小程序实现商品详情页跳转到购物车页

微信小程序.net mvc源代码

微信小程序stable免费2080游戏代码

微信小程序公告信息展示界面代码

微信小程序和jsp销售系统代码

微信小程序开发详情页页面如何布局

微信小程序商品详情页二维码

基于微信小程序的联机飞行棋代码

java微信小程序开发实例

微信小程序 net源代码程序

微信小程序原生的优惠券代码示例

设计一个微信小程序购物平台代码，功能为用户登录，商品展示，商品详情页，购物车，订单流程

微信小程序新闻资讯怎么做

微信小程序发布，需要上传代码包审批，代码是在自己服务器上运行吗

微信小程序开发医生端教程代码

微信小程序搭建程序代码

会员权益专享

最新资源

微信小程序新闻资讯新闻阅读器（源代码+截图）

微信小程序新闻资讯知乎（源代码+截图）