1.前期准备
(1)下载软件
(2)注册账号
(3) 创建项目
(4) 软件介绍
- 功能键
模拟器、编译器、调试器、编译预览,清缓存 - 文件名
papges(页面):四个文件(.wxml(各种组件结构),js,json,wxss(样式))
app.js:各种行为
app.wxss:样式
app.json:数据&&全局配置
project.config.json:项目地址文件
utils(工具)
2.主页面静态页面的搭建
设计首页布局
(1)代码
-
app.json
设置导航条"window":{ "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#99CC99", "navigationBarTitleText": "Welcome", "navigationBarTextStyle": "black" },
-
index.wxml
设置结构<!--index.wxml--> <view class="indexContainer"> <image class="avatar" src='/images/image/豆.webp'></image> <text class="userName">hello!</text> <view class='canInto'> <text>欢迎进入豆瓣系统!</text> </view> </view>
-
index.wxss
设置样式/**index.wxss**/ page{/*给页面设置底色*/ height: 100%; background: #99CC99; } .indexContainer{/*整体布局*/ display: flex; flex-direction: column; align-items: center; } .avatar{/*头像*/ width: 200rpx; height:200rpx; border-radius: 100rpx; margin: 100rpx 0; } .userName{/*文字*/ font-size: 50rpx; } .canInto{/*点击*/ font-size: 50rpx; border: 1px solid rgb(10, 10, 10); }
(2)成果展示
3.获取用户信息(未完成)
尝试使用了getUserInfo和getUserProfit两个接口,无法正常授权,微信名始终为微信用户,头像始终为灰色头像。
查询官方文档后才发现两个接口在2022年底停用。
目前只能通过用户手段输入信息与上传头像。
button{
font-size: 32rpx;
border: 1px solid #999;
background: #99CC99;
}
<button open-type='getUserInfo'>获取用户登录信息</button>、
//获取用户登录信息
wx.getUserInfo({
success:(data)=>{
console.log(data);
//更新 data中的userInfo
this.setData({
userInfo:data.userInfo
});
},
fail:()=>{
console.log("获取用户数据失败");
}
})
4. 页面跳转
wx.navigateTo
:保留当前页面,跳转到应用内的某个页面,可以返回到原页面。
wx.redirectTo
:关闭当前页面,跳转到应用内的某个页面,不可返回原页面
(1)代码
-
wxml
<view catchtap="handleClick" class='canInto'> <text>欢迎进入豆瓣系统!</text>![在这里插入图片描述](https://img-blog.csdnimg.cn/a2f1622f83af4fc98a7ad12d83646f1c.jpeg#pic_center)
-
js
handleClick(){ //点击跳转到list界面 wx.navigateTo({ url: '/pages/list/list', }) }
(2)成果展示
(3)注
navigateTo接口无法到tabbar 页面;当后期设计有涉及tabbar 页面的跳转时,需要使用接口wx.switchTab
5.轮转图
利用swiper组件,设计豆瓣首页图片的轮转
(1)代码
-
wxml
<!--pages/list/list.wxml--> <view> <swiper indicator-dots indicator-active-color="green"> <swiper-item> <image src="/images/image/1(首轮).webp"></image> </swiper-item> <swiper-item> <image src="/images/image/2(首轮).webp"></image> </swiper-item> <swiper-item> <image src="/images/image/3(首轮).webp"></image> </swiper-item> </swiper> </view>
-
wxss
/* pages/list/list.wxss */ swiper{ width:100%; height:400rpx; } swiper image{ width:100%; height:100%; }
(2)成果展示
(3)关于点击轮播图的跳转
以7为基础,区别:
target指向的是触发事件的元素
currentTarget指向的是捕获事件的元素
-
wxml
<swiper catchtap="carouselToDetail" indicator-dots indicator-active-color="green"> <swiper-item> <image data-index="0" src="/images/image/1(首轮).webp"></image> </swiper-item> <swiper-item> <image data-index="1" src="/images/image/2(首轮).webp"></image> </swiper-item> <swiper-item> <image data-index="2" src="/images/image/3(首轮).webp"></image> </swiper-item> </swiper>
-
js
//点击轮播图进行跳转 carouselToDetail(event){ let index=event.target.dataset.index; wx.navigateTo({ url: '/pages/datail/detail?index='+index, }) },
6.搭建影评区
利用template模块,设置一个基础模块。
(1)代码
-
wxml
<!--pages/template/list-template.wxml--> <template name='listTmp'> <view class='tmpContainer'> <view class='avatar_date'> <image src='/images/avater/1.webp'></image> <text>may 10 2023</text> </view> <text class='title'>关于《八佰》</text> <image class='contentImg' src="/images/image/1(评).webp"></image> <text class="content">天堂与地狱只隔一条河,阵地与坟墓同在一座桥,壮士与伶人只差一层皮,怂包与英雄同扛一面旗。南岸有不恨国亡的商女,北岸是壮士许国的男儿,那边有粉墨登场的关羽,这边是七进七出的赵云。四百壮士用血肉唤四万万民众觉醒,五十三米河岸当幕布为租界万国表演。硝烟后,白马尚在,旗帜未倒,英雄不老。</text> <view class='collection_love'> <image src="/images/icon/collect.png"></image> <text>100</text> <image src="/images/icon/love.png"></image> <text>78</text> </view> </view> </template>
-
wxss
/* pages/template/list-template.wxss */ .tmpContainer{ display: flex; flex-direction: column; } .avatar_date{ padding: 20rpx; } .avatar_date image{ width:70rpx; height:70rpx; border-radius: 70rpx; vertical-align: base; margin-right: 10rpx; margin-top: 30rpx; } .avatar_data text{ font-size: 36rpx; } .title{ margin-left: 10rpx; font-size: 36rpx; font-weight: 700; margin: 10rpx; } .contentImg{ width: 100%; height: 460rpx; } .content{ font-size: 32rpx; text-indent: 32rpx; } .collection_love image{ width: 32rpx; height: 32rpx; vertical-align: middle; margin-right: 10rpx; } .collection_love text{ font-size: 28rpx; margin-right: 10rpx; } /* pages/list/list.wxss */ @import '/pages/template/list-template.wxss';
(2)成果展示
7.页面渲染
利用之前设定的模块,将后台的数据通过遍历全部展现在页面中
(1)代码
-
数据模拟
let list_data = [ { date: 'may 31 2022', title: '八佰', detail_img: '/images/image/1(评).webp', avatar: '/images/avater/1.webp', author: '故乡一轮月', brief_content: '天堂与地狱只隔一条河,阵地与坟墓同在一座桥,壮士与伶人只差一层皮,怂包与英雄同扛一面旗。南岸有不恨国亡的商女,', detail_content:'略', detail_love_image1: '/images/icon/collect.png', detail_love_image2: '/images/icon/love.png', love_count: 108, attention_count: 77, postId: 0 }, ]; module.exports = {list_data};
-
wxml
<!--pages/template/list-template.wxml--> <template name='listTmp'> <view class='tmpContainer'> <view class='avatar_date'> <image src='{{avatar}}'></image> <text>{{date}}</text> </view> <text class='title'>{{title}}</text> <image class='contentImg' src="{{detail_img}}"></image> <text class="content">{{detail_content}}</text> <view class='collection_love'> <image src="/images/icon/collect.png"></image> <text>{{love_count}}</text> <image src="/images/icon/love.png"></image> <text>{{attention_count}}</text> </view> </view> </template> <!--pages/list/list.wxml--> <block wx:for="{{listArr}}" wx:key="{{index}}"> <view> <template is='listTmp' data='{{...item}}'/> </view> </block>
-
js
// pages/list/list.js let datas=require('../../datas/list-data.js'); Page({ data: { listArr:[] }, onLoad(options) { this.setData({ listArr:datas.list_data }) }, })
(2)成果展示
8.详情页动态页面展示
点击优质影评能够进入该影评,查看影评的主要内容,包括作者及其头像、发布日期、文章详情等等
利用数组下标来指定页面的跳转
同时还设置收藏、分享、转发等图标
(1)代码
-
wxml
<!--pages/datail/detail.wxml--> <view class="detailContainer"> <image class="headImg" src="{{detailObj.detail_img}}"></image> <view class="avatar_date"> <image src="{{detailObj.avatar}}"></image> <text>{{detailObj.author}}</text> <text>发布于</text> <text>{{detailObj.date}}</text> </view> <text class="title">{{detailObj.title}}</text> <view class="collection_share_container"> <view class="collection_share"> <image src="/images/icon/collection-anti.png"></image> <image src="/images/icon/share.png"></image> </view> <view class="line"></view> </view> <button>转发此文章</button> <text class="content">{{detailObj.detail_content}}</text> </view> <!--pages/list/list.wxml--> <view catchtap="toDetail" data-index="{{index}}"> <template is='listTmp' data='{{...item}}'/> </view>
-
wxss
/* pages/datail/detail.wxss */ .detailContainer{ display: flex; flex-direction: column; } .headImg{ width: 100%; height: 460rpx; } .avatar_date{ padding: 10rpx; } .avatar_date image{ width: 64rpx; height: 64rpx; border-radius: 64rpx; vertical-align: middle; } .avatar_date text{ font-size: 32rpx; margin-left: 10rpx; } .title{ font-size: 38rpx; font-weight: bold; } .collection_share_container{ position: relative; } .collection_share{ float: right; margin-right: 50rpx; } .collection_share image{ width: 90rpx; height: 90rpx; margin-right: 20rpx; } .line{ width: 90%; height: 1rpx; background: #eee; position: absolute; top: 45rpx; left: 5%; z-index: -1; } .button{ width: 280; height: 280; } .content{ margin-top: 20rpx; font-size: 32rpx; text-indent: 32rpx; }
-
js
// pages/datail/detail.js let datas=require('../../datas/list-data.js'); Page({ data: { detailObj:{} }, onLoad(options) { //获取参数值 let index=options.index; //更新data中datailObj的状态值 this.setData({ detailObj:datas.list_data[index], }) }, }) // pages/list/list.js Page({ //点击跳转到datail详情页 toDetail(event){ console.log(event); //获取点击跳转对应的下标 let index=event.currentTarget.dataset.index; wx.navigateTo({ url: '/pages/datail/detail?index='+index, }) }, })