快速打造微信小程序（超详细）

其他 2019-03-19 17:31:03 阅读次数: 0

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

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

到这里结束啦！

猜你喜欢

转载自blog.csdn.net/sinat_38930182/article/details/88352379
今日推荐
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
【转】spring中对控制反转和依赖注入的理解
tms webcore 安装和使用
java程序员进阶相关书籍
SpringMVC接受请求参数、
如何保存训练好的机器学习模型
MyEclipse、Eclipse设置项目JDK的三个地方
商超行业微信小程序开发定制一般多少钱 （行业技术人员解读）
Markdown编辑器语言——30分钟入门到到精通
Linux系统下MongoDB的简单安装与基本操作
Power Strings
每日归档
更多
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022