1.本文通过一个小案例主要讲解小程序的基础使用以及相关概念知识。

1开发环境的准备1.1注册账号

2.https://mp.weixin.qq.com/wxopen/waregister?action=step1

1.2获取APPID

3.用注册的账号登录https://mp.weixin.qq.com/，可以在菜单“设置”-“开发设置”看到小程序的AppID。小程序的AppID相当于小程序平台的一个身份证，后续你会在很多地方要用到AppID（注意这里要区别于服务号或订阅号的AppID）。

1.3开发工具

4.安装微信开发者工具：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html?t=19030621

2小程序结构目录

5.

3小程序开发

6.官方文档：https://developers.weixin.qq.com/miniprogram/dev/wxcloud/basis/getting-started.html

4bilibili项目案例4.1项目初始化

7.公共路径：https://easy-mock.com/mock/5c1dfd98e8bfa547414a5278/bili/

4.1.1app.wxss初始化

8.删除默认内容，添加：page,view,image,swiper,swiper-item,navigator,video{box-sizing:border-box;}

4.1.2app.js初始化

9.删除默认内容，输入App回车

4.1.3index目录初始化

10.index.wxml、index.wxss-删除默认内容index.js-删除默认内容，输入Page回车

4.2公共头部组件

11.MyTitle.wxml

viewclass='my_title'!--logo--navigatorclass='logo'imageclass='logo-image'style='width:120rpx;height:60rpx;'src='../../img/logo.png'/image/navigator!--搜索--viewclass='search-icon'imagestyle='width:120rpx;height:120rpx;'src='../../img/search.png'/image/view!--用户--viewclass='user-icon'imagestyle='width:34rpx;height:40rpx;'src='../../img/myself.png'/image/view!--下拉按钮--viewclass='down_app'下载APP/view/view

12.index.json

{"navigationBarTitleText":"bilibili","usingComponents":{"MyTitle":"../../components/MyTitle/MyTitle"}}

13.在index.wxml中引入公共头部

viewclass='main'!--公共头部--MyTitle/MyTitle/view4.3首页导航模块

14.index.js中：

/***页面的初始数据*/data:{//被点击的首页导航的菜单的索引currentIndexNav:0,//首页导航数据navList:[]},//点击首页导航按钮activeNav(e){this.setData({currentIndexNav:e.target.dataset.index})},/***获取首页导航数据*/getNavList(){letthat=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();},

15.仅是测试，请把“详情”中的“不校验合法域名…”勾上index.wxml中：

!--首页导航--viewclass='nav-wrap'!--自己滚动区域的组件--scroll-viewclass="nav"scroll-xviewbindtap="activeNav"data-index="{{index}}"class="nav-item{{index===currentIndexNav?'active':''}}"wx:for="{{navList}}"wx:key="{{index}}"{{item.text}}/view/scroll-view/view

16.index.wxss中：

/*首页导航*/page{color:#666;padding:10rpx;}.nav{white-space:nowrap;padding:5rpx0;}.nav-item{padding:20rpx45rpx;font-size:30rpx;display:inline-block;}.nav-item.active{border-bottom:5rpxsolid#de688b;}4.4轮播图

17.index.js中：

data:{...//轮播图数据swiperList:[]/***获取轮播图数据*/getSwiperList(){letthat=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();},

18.index.wxml中：

!--轮播图--viewclass='slides'swiperautoplayindicator-dotscircularswiper-itemwx:for="{{swiperList}}"wx:key="{{index}}"navigatorimagemode='widthFix'src='{{item.imgSrc}}'/image/navigator/swiper-item/swiper/view

19.index.wxss中：

/*轮播图*/.slides{margin-top:10rpx;}.slidesswiper{height:220rpx;}.slidesnavigator{width:100%;height:100%;}.slidesimage{width:100%;height:100%;}4.5视频列表

20.index.js中：

data:{...//视频列表数据videosList:[]},/***获取视频列表*/getVideosList(){letthat=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();},

21.在index.wxml中：

!--视频列表--viewclass='video_wrap'navigatorclass='video_item'wx:for="{{videosList}}"wx:key="{{index}}"!--图片容器--viewclass='video_img'!--图片--imagemode='widthFix'src='{{item.imgSrc}}'/image!--播放--viewclass='video_info'!--播放量--viewclass='play_count_wrap'!--图标--textclass='fafa-play-circle-o'/text!--数值--textclass='play_count'{{item.playCount}}/text/view!--评论量--viewclass='comment_count_row'/view!--图标--textclass='fafa-commenting-o'/text!--数值--textclass='comment_count'{{item.commentCount}}/text/view/view!--标题--viewclass='video_title'{{item.desc}}/view/navigator/view

22.新建styles目录，加入fontAwesome.wxss，微信小程序中引用FontAwesome字体：https://blog.csdn.net/qq_28988969/article/details/76633921

23.在app.wxss中导入FontAwesome字体：

@import"styles/fontAwesome.wxss";

24.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_imgimage{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创建视频详情页面

25.在app.json中：

"pages":["pages/index/index","pages/detail/detail"],

26.index.wxml中：

navigatorurl='../detail/detail?id={{item.id}}'...

27.detail.json中：

{"navigationBarTitleText":"视频详情","usingComponents":{"MyTitle":"../../components/MyTitle/MyTitle"}}

28.detail.js中：

/***生命周期函数--监听页面加载*/onLoad:function(options){letvideoId=options.id;this.getCurrentVideo(videoId);},/***根据视频的id获取视频详情*/getCurrentVideo(videoId){letthat=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},

29.detail.wxml中：

viewclass='main'!--公共头部--MyTitle/MyTitle!--视频详情--viewclass="video_info"!--视频标签--videosrc='{{videoInfo.videoSrc}}'controls/video!--视频标题--viewclass='video_title'text{{videoInfo.videoTitle}}/texttextclass='fafa-angle-down'/text/view!--视频作者--viewclass='video_detail'!--作者--textclass='author'{{videoInfo.author}}/text!--播放量--textclass='play_count'{{videoInfo.playCount}}/text!--评论量--textclass='comment_count'{{videoInfo.commentCount}}弹幕/text!--时间--textclass='date'{{videoInfo.date}}/text/view/view

30.detail.wxss中：

/*pages/detail/detail.wxss*/.main{padding:10rpx;color:#666;}/*视频*/.video_info{margin-top:10rpx;}.video_infovideo{width:100%;}.video_title{display:flex;justify-content:space-between;font-size:35rpx;}.video_detail{margin-top:5rpx;font-size:28rpx;}.video_detailtext{margin-left:15rpx;}.video_detail.author{color:#000;}4.6推荐视频

31.detail.js中：

/***获取推荐视频*/getOthersList(videoId){letthat=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:[]},

32.detail.wxml中：

!--推荐视频--viewclass='other_list'navigatorwx:for="{{othersList}}"wx:key="{{index}}"class='item_other'!--图片容器--viewclass='other_img_wrap'imagesrc='{{item.imgSrc}}'mode='widthFix'/image/view!--视频详情--viewclass='other_info'!--标题--viewclass='other_title'{{item.title}}/view!--播放量--viewclass='other_detail'!--播放量--textclass='play_count'{{item.playMsg}}次观看/text!--评论--textclass='commtent_count'{{item.commentCount}}/text/view/view/navigator/view

33.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_wrapimage{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;}

34.到这里结束啦！