1、在微信公众号平台，申请小程序账号，获取appid 2、下载并安装微信开发者工具
3、做不同分辨率设备的自适应：单位使用rpx IPhone6下 1px=1rpx=0.5pt 使用rpx，小程序会自动在不同分辨率下进行转换
首先是项目的入口页面
welcome.wxml
<view> <image src="https://www.jb51.net/images/avatar/1.png"></image> <text>Hello, 七月</text> <view bindtap="onTap"> <text>开启小程序之旅</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> <view> <view> <image src="https://www.jb51.net/{{avatar}}"></image> <text>{{date}}</text> </view> <text>{{title}}</text> <image src="https://www.jb51.net/{{imgSrc}}"></image> <text>{{content}} </text> <view> <image src="https://www.jb51.net/images/icon/chat.png"></image> <text>{{collection}}</text> <image src="https://www.jb51.net/images/icon/view.png"></image> <text>{{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="https://www.jb51.net/post-item/post-item-template.wxml" /> <!--<import src="https://www.jb51.net/pages/posts/post-item/post-item-template.wxml" />--> <view> <swiper catchtap="onSwiperTap" vertical="{{false}}" indicator-dots="true" autoplay="true" interval="5000"> <swiper-item> <image src="https://www.jb51.net/images/wx.png" data-postId="3"></image> </swiper-item> <swiper-item> <image src="https://www.jb51.net/images/vr.png" data-postId="4"></image> </swiper-item> <swiper-item> <image src="https://www.jb51.net/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对象来做数据绑定，这个动作我们称为动作A // 而这个动作A的执行，是在onLoad函数执行之后发生的 }, 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指的是当前点击的组件 和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