本文通过一个小案例主要讲解小程序的基础使用以及相关概念知识。
1开发环境的准备
1.1 注册账号
https://mp.weixin.qq.com/wxopen/waregister?action=step1
1.2获取APPID
用注册的账号登录https://mp.weixin.qq.com/,可以在菜单 “设置”-“开发设置” 看到小程序的 AppID。
小程序的 AppID 相当于小程序平台的一个身份证,后续你会在很多地方要用到 AppID (注意这里要区别于服务号或订阅号的 AppID)。
1.3开发工具
安装微信开发者工具:https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html?t=19030621
2小程序结构目录
3小程序开发
官方文档:https://developers.weixin.qq.com/miniprogram/dev/wxcloud/basis/getting-started.html
4bilibili项目案例
4.1项目初始化
公共路径:https://easy-mock.com/mock/5c1dfd98e8bfa547414a5278/bili/
4.1.1app.wxss初始化
删除默认内容,添加:
page,view,image,swiper,swiper-item,navigator,video{ box-sizing: border-box; }
4.1.2app.js初始化
删除默认内容,输入App
回车
4.1.3index目录初始化
index.wxml、index.wxss->删除默认内容
index.js->删除默认内容,输入Page
回车
4.2公共头部组件
MyTitle.wxml
<view class='my_title'>
<!-- logo -->
<navigator class='logo'>
<image class='logo
-image' style='width:120rpx;height:60rpx;' src='../../img/logo.png'></image>
</navigator>
<!-- 搜索 -->
<view class='search-icon'>
<image style='width:120rpx;height:120rpx;' src='../../img/search.png'></image>
</view>
<!-- 用户 -->
<view class='user-icon'>
<image style='width:34rpx;height:40rpx;' src='../../img/myself.png'></image>
</view>
<!-- 下拉按钮 -->
<view class='down_app'>
下载APP
</view>
</view>
index.json
{
"navigationBarTitleText": "bilibili",
"usingComponents":{
"MyTitle":"../../components/MyTitle/MyTitle"
}
}
在index.wxml中引入公共头部
<view class='main'>
<!-- 公共头部-->
<MyTitle></MyTitle>
</view>
4.3首页导航模块
index.js中:
/**
* 页面的初始数据
*/
data: {
//被点击的首页导航的菜单的索引
currentIndexNav:0,
//首页导航数据
navList:[]
},
//点击首页导航按钮
activeNav(e){
this.setData({
currentIndexNav:e.target.dataset.index
})
},
/**
* 获取首页导航数据
*/
getNavList(){
let that=this;
//利用小程序内置发送请求的方式
wx.request({
url: 'https://easy-mock.com/mock/5c1dfd98e8bfa547414a5278/bili/navList',
success(res){
if(res.data.code===0){
that.setData({
navList:res.data.data.navList
})
}
}
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
//1 获取首页导航数据
this.getNavList();
},
仅是测试,请把“详情”中的“不校验合法域名…”勾上
index.wxml中:
<!-- 首页导航 -->
<view class='nav-wrap'>
<!-- 自己滚动区域的组件 -->
<scroll-view class="nav" scroll-x >
<view bindtap="activeNav" data-index="{{index}}" class="nav-item {{index===currentIndexNav?'active':''}}" wx:for="{{navList}}" wx:key="{{index}}">
{{item.text}}
</view>
</scroll-view>
</view>
index.wxss中:
/*首页导航*/
page{
color: #666;
padding: 10rpx;
}
.nav{
white-space: nowrap;
padding: 5rpx 0;
}
.nav-item{
padding: 20rpx 45rpx;
font-size: 30rpx;
display: inline-block;
}
.nav-item.active{
border-bottom: 5rpx solid #de688b;
}
4.4轮播图
index.js中:
data: {
...
//轮播图数据
swiperList:[]
/**
* 获取轮播图数据
*/
getSwiperList(){
let that = this;
wx.request({
url: 'https://easy-mock.com/mock/5c1dfd98e8bfa547414a5278/bili/swiperList',
success(res){
if(res.data.code===0){
that.setData({
swiperList:res.data.data.swiperList
})
}
}
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
...
//2 调用获取轮播图数据的函数
this.getSwiperList();
},
index.wxml中:
<!--轮播图-->
<view class='slides'>
<swiper autoplay indicator-dots circular>
<swiper-item wx:for="{{swiperList}}" wx:key="{{index}}">
<navigator>
<image mode='widthFix' src='{{item.imgSrc}}'></image>
</navigator>
</swiper-item>
</swiper>
</view>
index.wxss中:
/* 轮播图 */
.slides{
margin-top: 10rpx;
}
.slides swiper{
height: 220rpx;
}
.slides navigator{
width: 100%;
height: 100%;
}
.slides image{
width: 100%;
height: 100%;
}
4.5视频列表
index.js中:
data: {
...
//视频列表数据
videosList:[]
},
/**
* 获取视频列表
*/
getVideosList() {
let that = this;
wx.request({
url: 'https://easy-mock.com/mock/5c1dfd98e8bfa547414a5278/bili/videosList',
success(res) {
if (res.data.code === 0) {
that.setData({
videosList: res.data.data.videosList
})
}
}
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
...
//3 调用获取视频列表函数
this.getVideosList();
},
在index.wxml中:
<!--视频列表-->
<view class='video_wrap'>
<navigator class='video_item' wx:for="{{videosList}}" wx:key="{{index}}">
<!--图片容器-->
<view class='video_img'>
<!--图片-->
<image mode='widthFix' src='{{item.imgSrc}}'></image>
<!--播放-->
<view class='video_info'>
<!--播放量-->
<view class='play_count_wrap'>
<!--图标-->
<text class='fa fa-play-circle-o'></text>
<!--数值-->
<text class='play_count'>{{item.playCount}}</text>
</view>
<!--评论量-->
<view class='comment_count_row'></view>
<!--图标-->
<text class='fa fa-commenting-o'></text>
<!--数值-->
<text class='comment_count'>{{item.commentCount}}</text>
</view>
</view>
<!--标题-->
<view class='video_title'>{{item.desc}}</view>
</navigator>
</view>
新建styles目录,加入fontAwesome.wxss,微信小程序中引用FontAwesome字体:https://blog.csdn.net/qq_28988969/article/details/76633921
在app.wxss中导入FontAwesome字体:
@import "styles/fontAwesome.wxss";
index.wxss中:
/* 视频列表 */
.video_wrap{
display: flex;
flex-wrap: wrap;
padding:5rpx;
justify-content: space-between;
}
.video_item{
width: 48%;
margin-bottom: 20rpx;
}
.video_img{
position: relative;
}
.video_img image{
width: 100%;
border-radius: 15rpx;
}
.video_img .video_info{
position: absolute;
bottom: 10rpx;
left: 0;
width: 100%;
display:flex;
justify-content: space-around;
color: #fff;
font-size: 24rpx;
}
.video_title{
font-size: 28rpx;
display: -webkit-box;
overflow: hidden;
white-space: normal;
text-overflow: ellipsis;
word-wrap: break-word;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
4.5创建视频详情页面
在app.json中:
"pages":[
"pages/index/index",
"pages/detail/detail"
],
index.wxml中:
<navigator url='../detail/detail?id={{item.id}}' ...>
detail.json中:
{
"navigationBarTitleText": "视频详情",
"usingComponents": {
"MyTitle": "../../components/MyTitle/MyTitle"
}
}
detail.js中:
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
let videoId=options.id;
this.getCurrentVideo(videoId);
},
/**
* 根据视频的id获取视频详情
*/
getCurrentVideo(videoId){
let that = this;
wx.request({
url: 'https://easy-mock.com/mock/5c1dfd98e8bfa547414a5278/bili/videoDetail?id='+videoId,
success(res){
if(res.data.code===0){
that.setData({
videoInfo:res.data.data.videoInfo
})
}
}
})
},
/**
* 页面的初始数据
*/
data: {
//视频详情
videoInfo:null
},
detail.wxml中:
<view class='main'>
<!-- 公共头部-->
<MyTitle></MyTitle>
<!--视频详情-->
<view class="video_info">
<!--视频标签-->
<video src='{{videoInfo.videoSrc}}' controls ></video>
<!--视频标题-->
<view class='video_title'>
<text>{{videoInfo.videoTitle}}</text>
<text class='fa fa-angle-down'></text>
</view>
<!--视频作者-->
<view class='video_detail'>
<!--作者-->
<text class='author'>{{videoInfo.author}}</text>
<!--播放量-->
<text class='play_count'>{{videoInfo.playCount}}</text>
<!--评论量-->
<text class='comment_count'>{{videoInfo.commentCount}}弹幕</text>
<!--时间-->
<text class='date'>{{videoInfo.date}}</text>
</view>
</view>
detail.wxss中:
/* pages/detail/detail.wxss */
.main{
padding: 10rpx;
color: #666;
}
/*视频*/
.video_info{
margin-top: 10rpx;
}
.video_info video{
width: 100%;
}
.video_title{
display: flex;
justify-content: space-between;
font-size: 35rpx;
}
.video_detail{
margin-top: 5rpx;
font-size: 28rpx;
}
.video_detail text{
margin-left: 15rpx;
}
.video_detail .author{
color: #000;
}
4.6推荐视频
detail.js中:
/**
* 获取推荐视频
*/
getOthersList(videoId){
let that = this;
wx.request({
url: 'https://easy-mock.com/mock/5c1dfd98e8bfa547414a5278/bili/othersList?id=' + videoId,
success(res) {
if (res.data.code === 0) {
that.setData({
othersList: res.data.data.othersList
})
}
}
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
...
this.getOthersList(videoId);
},
/**
* 页面的初始数据
*/
data: {
...
//推荐视频
othersList:[]
},
detail.wxml中:
<!--推荐视频-->
<view class='other_list'>
<navigator wx:for="{{othersList}}" wx:key="{{index}}" class='item_other'>
<!--图片容器-->
<view class='other_img_wrap'>
<image src='{{item.imgSrc}}' mode='widthFix'></image>
</view>
<!--视频详情-->
<view class='other_info'>
<!--标题-->
<view class='other_title'>{{item.title}}</view>
<!--播放量-->
<view class='other_detail'>
<!--播放量-->
<text class='play_count'>{{item.playMsg}}次观看</text>
<!--评论-->
<text class='commtent_count'>{{item.commentCount}}</text>
</view>
</view>
</navigator>
</view>
detail.wxss中:
/*推荐视频*/
.other_list{
margin-top: 10rpx;
}
.item_other{
display: flex;
justify-content: space-between;
margin-bottom: 20rpx;
}
.other_img_wrap{
width: 38%;
display: flex;
justify-content: center;
align-items: center;
}
.other_ing_wrap image{
width: 90%;
border-radius: 15rpx;
}
.other_info{
width: 60%;
display: flex;
flex-direction: column;
justify-content: space-around;
}
.other_title{
font-size: 30rpx;
color: #e06f93;
}
.other_detail{
font-size: 26rpx;
color: #666;
}
到这里结束啦!