Day223.wxml语法、阿昌云音乐【轮播图、推荐歌曲实现】 -微信小程序

其他 2021-03-20 10:36:45 阅读次数: 0

微信小程序

一、wxml语法

1、数据绑定

image-20210317130313816

1.1初始化数据

  • 页面.js的data选项

image-20210317123134555

1.2使用数据

  1. 模板结构中使用双大括号{ {message}}，类似vue中的插值表达式
  2. 注意事项: 小程序中为单项数据流 model —> view
<text class="username">{
   
   {msg}}</text>

1.3修改数据

  1. this.setData({message: ‘修改之后的数据’}, callback)
  2. 特点：
    a) 同步修改： this.data 值被同步修改
    b) 异步更新： 异步将 setData 函数用于将数据从逻辑层发送到视图层（异步）

image-20210317123351348

image-20210317123407252

2、事件绑定

2.1 事件分类

1) 冒泡事件

a) 定义：冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。

b) 冒泡事件列表：

https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/event.html

2) 非冒泡事件

a) 定义：当一个组件上的事件被触发后，该事件不会向父节点传递。

b) 非冒泡事件：表单事件和自定义事件通常是非冒泡事件

https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/event.html

2.2 绑定事件

  1. bind 绑定：事件绑定不会阻止冒泡事件向上冒泡
<view bindtap="handleTap" class='start_container'>
    <text class='start'>开启小程序之旅</text>
</view>
  1. catch 绑定: 事件绑定可以阻止冒泡事件向上冒泡
<view catchtap="handleTap" class='start_container'>
	<text class='start'>开启小程序之旅</text>
</view>

2.3 向事件对象传参

  1. 语法： data-key=value

image-20210317141728790

  1. 获取: event.target.dataset.key || event.currentTarget.dataset.key

image-20210317141732899

  1. Event.target 和 event.currentTarget 的区别
    a) Event.target 是触发事件的对象，但不一样是绑定事件的对象，如： 事件委托，冒泡
    b) currentTarget 触发时间的对象一定是绑定事件的对象， 没有事件委托

3、列表渲染

3.1 语法说明

  1. wx:for=’{ {arr}}’
  2. wx:key=’{ {唯一值}}’
  3. 默认的个体: item
  4. 默认的下标: index
  5. 自定义个体变量名称: wx:for-item=’myItem’
  6. 自定义下标变量名称: wx:for-index=’myIndex’

4、条件渲染

4.1 语法说明

  1. wx:if=’条件’

  2. wx:elif=’条件’

  3. wx:else

image-20210317141843302

4.2 wx:if VS hidden

  1. hidden 用法:

    <view hidden='{
       
       {true}}' ></view>

  2. wx:if 等同于 v-if, 条件为 false 的时候不加载，条件切换的时候决定元素销毁或者
    重新加载渲染

  3. hidden 等同于 v-show, 始终加载元素, 条件切换的时候决定元素的显示和隐藏

5、模板使用

5.1 定义模板

image-20210317141921222

5.2 引入模板

  1. 引入模板结构:

    <import src='模板结构相对路径' />

  2. 引入模板样式: @Import ‘模板样式路径’

5.3 使用模板

image-20210317141945762

5.4 向模板导入数据并使用数据

image-20210317142033700

6、生命周期

6.1 对应阶段说明

image-20210317142232093

  1. onLoad(Object query)
    a) 页面加载时触发。一个页面只会调用一次，可以在 onLoad 的参数中获取打开
    当前页面路径中的参数。
    b) 参数：
    名称 类型 说明
    query Object 打开当前页面路径中的参数
  2. onShow()
    a) 页面显示/切入前台时触发
    b) 会执行多次
  3. onReady()
    a) 页面初次渲染完成时触发。一个页面只会调用一次，代表页面已经准备妥当，
    可以和视图层进行交互。
  4. onHide()
    a) 页面隐藏/切入后台时触发。 如 wx.navigateTo 或底部 tab 切换到其他页面，小
    程序切入后台等。
  5. onUnload()
    a) 页面卸载时触发。如 wx.redirectTo 或 wx.navigateBack 到其他页面时。
  • 发送请求可以在onload的时候发，或者onReady的时候发，后者比前者晚一点
  • 这个页面被关闭了就会执行onUnload
  • 如果路由跳转保留页面就会执行onHide
  • 跳转后，点左上角返回之前的页面就会执行onShow

6.2 官网图示说明

image-20210317143103083

6.3 官网对应地址

https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/page-life-cycle.html

二、获取用户基本信息

image-20210317152749483

  • index.js
// pages/index/index.js
Page({
    
    
  //获取用户信息
  getUserInfo(resp){
    
    
    if (resp.detail.userInfo){
    
    
      this.setData({
    
    
        userInfo: resp.detail.userInfo
      })
    }
  },
  /**
   * 页面的初始数据
   */
  data: {
    
    
    msg:"初始化数据",
    userInfo:{
    
    }
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    
    
    wx.getUserInfo({
    
    
      success:(resp)=>{
    
    
        this.setData({
    
    
          userInfo:resp.userInfo
        })
      },
      fail:(error)=>{
    
    
        console.log(error);
      }
    })
  }
})
  • index.wxml
<view class="indexContainer">
  <image src="{
     
     {userInfo.avatarUrl}}" class="userAvatarUrl" wx:if="{
     
     {userInfo.avatarUrl}}"></image>
  <button open-type="getUserInfo" bindgetuserinfo="getUserInfo" wx:else>获取用户信息</button>
  <text class="username" wx:if="{
     
     {userInfo.nickName}}">{
   
   {userInfo.nickName}}</text>

  <view class="goStudy" catchtap="toLogs">
    <text>hello world</text>
  </view>

</view>
  • index.wxss
/* pages/index/index.wxss */

.indexContainer {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #f0f;
  height: 100vh;
}

.userAvatarUrl {
  width: 200rpx;
  height: 200rpx;
  border-radius: 50%;
  margin: 100rpx 0;
}

.username {
  font-size: 32rpx;
  margin: 100rpx 0;
}

.toStudy {
  width: 300rpx;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  font-size: 28rpx;
  border: 1rpx solid #333;
  border-radius: 10rpx;
}

button {
  width: 200rpx;
  height: 200rpx;
  border-radius: 50%;
  margin: 100rpx 0;
  font-size: 25rpx;
  line-height: 200rpx;
  text-align: center;
  background-color: forestgreen;
}
  • 测试

未授权时

image-20210317152930399

授权后

image-20210317152939940

配色随便选的，哈哈很丑，测试用的

三、轮播图

官方文档：https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html

  • index.wxml
<view class="indexContainer">

  <!--轮播图-->
  <swiper class="banners" autoplay indicator-dots indicator-color="invory" indicator-active-color='#d43c33'>
    <swiper-item>
      <image src="/static/images/nvsheng.jpg"></image>
    </swiper-item>
    <swiper-item>
      <image src="/static/images/nvsheng.jpg"></image>
    </swiper-item>
    <swiper-item>
      <image src="/static/images/nvsheng.jpg"></image>
    </swiper-item>
  </swiper>

</view>
  • index.wxss
/* pages/index/index.wxss */
.banners{
    
    
  width: 100%;
  height: 300rpx;
}
.banners image{
    
    
  width: 100%;
  height: 100%;
}
  • 效果

image-20210317155501577

四、五个图标导航区域

  • 图标icon导入

icon提供链接：https://www.iconfont.cn/home/index

image-20210317182149190

image-20210317182308216

因为小程序不是css格式，是wxss格式，就将这个css在线地址打开，新建文件.wxss并赋值到里面

image-20210317182128153

image-20210317182418773

  • index.wxml
  <!--导航区域-->
  <view class="navContainer">
    <view class="navItem">
      <text class="iconfont icon-tuijian"></text>
      <text>每日推荐</text>
    </view>
    <view class="navItem">
      <text class="iconfont icon-gedan"></text>
      <text>歌单</text>
    </view>
    <view class="navItem">
      <text class="iconfont icon-paihangbang"></text>
      <text>排行榜</text>
    </view>
    <view class="navItem">
      <text class="iconfont icon-diantai"></text>
      <text>电台</text>
    </view>
    <view class="navItem">
      <text class="iconfont icon-zhibo"></text>
      <text>直播</text>
    </view>
  </view>
  • omdex.wxss
/* 五个图标导航区域样式 */
.navContainer{
    
    
  display: flex;
}
.navItem{
    
    
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 20%;
}
.navItem .iconfont{
    
    
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  text-align: center;
  line-height: 100rpx;
  background-color: rgb(240,19,19);
  font-size: 50rpx;
  color: #fff;
  margin: 20rpx 0;
}
.navItem text{
    
    
  font-size: 28rpx;
}
.recommendContainer{
    
    
  padding: 20rpx;
}
.recommendContainer .header .title{
    
    
  font-size: 30rpx;
  line-height: 80rpx;
  color: #666;
}
.recommendContainer .header .more{
    
    
  float: right;
  border: 1rpx solid #333;
  padding: 10rpx 20rpx;
  border-radius: 30rpx;
  font-size: 25rpx;
  text-align: center;
}
.recommendContainer .header{
    
    
  padding-bottom: 20rpx;
}
  • 效果

image-20210317181904577

五、推荐歌曲区域静态搭建

  • 微信可滚动视图区域文档

地址：https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html

  • index.wxml
  <!--推荐歌曲-->
  <view class="recommendContainer">
    <view class="header">
      <text class="title">推荐歌曲</text>
      <view>
        <text>为你精心推荐</text>
        <text class="more">查看更多</text>
      </view>
    </view>
    <view id="demo1" class="scroll-view-item demo-text-1"></view>
    <!--内容区-->
    <scroll-view scroll-x class="recommendScroll" enable-flex>
      <view class="scrollItem">
        <image src="/static/images/nvsheng.jpg"></image>
        <text>贾静雯老师</text>
      </view>
      <view class="scrollItem">
        <image src="/static/images/nvsheng.jpg"></image>
        <text>贾静雯老师</text>
      </view>
      <view class="scrollItem">
        <image src="/static/images/nvsheng.jpg"></image>
        <text>贾静雯老师</text>
      </view>
      <view class="scrollItem">
        <image src="/static/images/nvsheng.jpg"></image>
        <text>贾静雯老师</text>
      </view>
      <view class="scrollItem">
        <image src="/static/images/nvsheng.jpg"></image>
        <text>贾静雯老师</text>
      </view>
      <view class="scrollItem">
        <image src="/static/images/nvsheng.jpg"></image>
        <text>贾静雯老师</text>
      </view>
      <view class="scrollItem">
        <image src="/static/images/nvsheng.jpg"></image>
        <text>贾静雯老师</text>
      </view>
    </scroll-view>
  </view>
  • wxss
/*推荐内容区*/
.scrollItem{
    
    
  width: 200rpx;
  padding: 8rpx;
}
.scrollItem image{
    
    
  width: 200rpx;
  height: 200rpx;
  border-radius: 10rpx;
}
.recommendScroll{
    
    
  display: flex;
}
.scrollItem text{
    
    
  font-size: 25rpx;
 /*单行文本溢出隐藏 省略号代替*/
 /* display: block;*/
 /* white-space: nowrap;*/
 /* overflow: hidden;*/
 /* text-overflow: ellipsis;*/

 /*多行文本溢出隐藏 省略号代替*/
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical; /*设置对齐模式*/
  -webkit-line-clamp: 2; /*设置多行的行数*/
  word-break: break-all;
  • 效果

image-20210317182457732

六、前后端交互

官方文档地址：https://developers.weixin.qq.com/miniprogram/dev/api/network/request/wx.request.html

image-20210317190717151

  • 使用Nodejs服务器，来访问网易云服务器

用cmd进入命令行

image-20210317183845432

先npm install -g nodemon 再npm start

再访问：http://localhost:3000/

image-20210317184725285

  • index.js
  onLoad: function (options) {
    
    
    wx.request({
    
    
      url:'http://localhost:3000/banner',
      data: {
    
    type:2},
      success:(resp)=>{
    
    
        console.log("请求成功：",resp);
      },
      fail:(error)=>{
    
    
        console.log("请求失败：",error);
      }
    })
  }
  • 给微信小程序中注册我们上面配置的服务器，不然会请求不合法

image-20210317185930968

image-20210317185936683

image-20210317190007111

但是我们这里访问的是本地服务器，不能使用https，所以我们只能通过以下方法

在微信开发者工作中

image-20210317190416018

再次请求

image-20210317190501288

七、封装请求功能函数库

image-20210317193707208

image-20210317193415783

  • config.js
//配置服务器相关信息
export default {
    
    
    host:'http://localhost:3000'
}
  • request.js
//发送ajax请求
/*
* 1、封装功能【函数】
*   1、功能点明确
*   2、函数内部保留固定代码（静态代码）
*   3、将动态的数据抽取成形参，由使用者根据自身的情况动态的传入实参
*   4、一个良好的函数应该设置形参默认值（ES6的形参默认值）
*
* 2、封装功能【组件】
*   1、功能点明确
*   2、组件内部保留静态代码
*   3、将动态的数据抽取成props参数，由使用者根据自身的情况以标签属性的形式动态传入props数据
*   4、一个良好的组件应该设置组件的必要性及数据类型
*       props：{
*           msg:{
*               required：true,
*               default：默认值，
*               type：String
*           }
*       }
*
* */

import config from './config'

export default (url,data={
    
    },method='GET')=>{
    
    
    return new Promise((resolve, reject)=>{
    
    
        wx.request({
    
    
            url:config.host+url,
            data,
            method,
            success:(resp)=>{
    
    
                // console.log("成功",resp);
                resolve(resp.data);//resolve修改promise状态为成功状态
            },
            fail:(err)=>{
    
    
                // console.log("错误：",err)
                reject(err);//reject修改promise状态为失败状态
            }
        })
    })
}
  • index.js
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: async function (options) {
    
    
    // wx.request({
    
    
    //   url:'http://localhost:3000/banner',
    //   data: {type:2},
    //   success:(resp)=>{
    
    
    //     console.log("请求成功：",resp);
    //   },
    //   fail:(error)=>{
    
    
    //     console.log("请求失败：",error);
    //   }
    // })
    //await：等待异步成功发送
    //async：异步发送请求
    let result = await request('/banner',{
    
    type:2})
    console.log(result);
  }

八、列表渲染

官方文档：https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/list.html

  • index.js
  data: {
    
    
    bannerList:[],//轮播图数据
  },
  onLoad: async function (options) {
    
    
    //await：等待异步成功发送
    //async：异步发送请求
    let bannerList = await request('/banner',{
    
    type:2})
    console.log(bannerList);
    this.setData({
    
    
      bannerList:bannerList.banners
    })
  }
  • index.wxml
  <!--轮播图-->
  <swiper class="banners" autoplay indicator-dots indicator-color="invory" indicator-active-color='#D4333C'>
    <swiper-item wx:for="{
     
     {bannerList}}" wx:key="bannerId">
      <image src="{
     
     {item.pic}}"></image>
    </swiper-item>
  </swiper>
  • 效果

image-20210317201723792

九、推荐歌曲动态实现

  • index.wxml
  <!--推荐歌曲-->
  <view class="recommendContainer">
    <view class="header">
      <text class="title">推荐歌曲</text>
      <view>
        <text>为你精心推荐</text>
        <text class="more">查看更多</text>
      </view>
    </view>
    <view id="demo1" class="scroll-view-item demo-text-1"></view>
    <!--内容区-->
    <scroll-view scroll-x class="recommendScroll" enable-flex>
      <view class="scrollItem" wx:for="{
     
     {recommendMusicList}}" wx:key="id">
        <image src="{
     
     {item.picUrl}}"></image>
        <text>{
   
   {item.name}}</text>
      </view>
    </scroll-view>
  </view>
  • index.js
  data: {
    
    
    recommendMusicList:[]//推荐歌曲内容
  },
  onLoad: async function (options) {
    
    
    //await：等待异步成功发送
    //async：异步发送请求
    let recommendMusicList = await request('/personalized',{
    
    limit:15})
    this.setData({
    
    
      recommendMusicList:recommendMusicList.result
    })
  }
  • 效果

image-20210317212015044

猜你喜欢

转载自blog.csdn.net/qq_43284469/article/details/114950695
今日推荐
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
《2024 年一季度互联网投融资运行情况》研究报告
报告：Django 仍然是 74% 开发者的首选
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
周排行
记一下去大梅沙的准备（2018-05-26）
Spring 注解 事务
基于HTTP协议的客户端缓存
阿里云rds 备份和还原
[PHP] 几个拖慢 PHP 程序/API 运行速度的点
python 代码风格------------PEP8规则
js控制json生成菜单——自制菜单（一）
将字符串: 'k:1|k1:2|k2:3|k3:4 ' ,处理成 python 字典: {'k':1, 'k1':2, ...}
微信小程序转支付宝小程序
Qt551.窗口滚动条
每日归档
更多
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022