战 胜
战 胜

微信小程序【网易云音乐实战】（第五篇 转发分享、每日推荐、音乐播放、页面通信npm包、进度条、全局数据）

一、转发分享功能

onShareAppMessage(Object object)
在这里插入图片描述

微信小程序【网易云音乐实战】（第五篇 转发分享、每日推荐、音乐播放、页面通信npm包、进度条、全局数据）_第1张图片

Button
在这里插入图片描述
微信小程序【网易云音乐实战】（第五篇 转发分享、每日推荐、音乐播放、页面通信npm包、进度条、全局数据）_第2张图片

<button open-type="share" class="item btn">
    <text class="iconfont icon-gengduo">text>
button>

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function ({from}) {
    // from为 menu表示页面转发，button表示按钮转发
    console.log(from);
    if(from === "button"){
      return {
        title:"来自button的转发",
        page:"/pages/video/video",
        imageUrl:"/static/images/nvsheng.jpg"
      }
    }else{
      return {
        title:"来自menu的转发",
        page:"/pages/video/video",
        imageUrl:"/static/images/nvsheng.jpg"
      }
    }
  }

微信小程序【网易云音乐实战】（第五篇 转发分享、每日推荐、音乐播放、页面通信npm包、进度条、全局数据）_第3张图片

如果要分享给小伙伴体验，需要在小程序的 成员管理 —> 添加体验成员

二、每日推荐歌曲

接口：
微信小程序【网易云音乐实战】（第五篇 转发分享、每日推荐、音乐播放、页面通信npm包、进度条、全局数据）_第4张图片

微信小程序【网易云音乐实战】（第五篇 转发分享、每日推荐、音乐播放、页面通信npm包、进度条、全局数据）_第5张图片

<view class="recommendSongContainer">
    
    <view class="header">
        <image src="/static/images/recommendSong/recommendSong.jpg">image>
        <view class="date">
            <text class="day">{{day}} / text>
            <text class="month">{{month}}text>
        view>
    view>

    
    <view class="ListContainer">
        <view class="listHeader">
            <text>播放全部text>
            <text class="changeMore">多选text>
        view>

        
        <scroll-view scroll-y class="listScroll">
            <view class="scrollItem" wx:for="{{recommendList}}" wx:key="id">
                <image src="{{item.album.picUrl}}">image>
                <view class="musicInfo">
                    <text class="musicName">{{item.name}}text>
                    <text class="author">{{item.artists[0].name}}text>
                view>
                <text class="iconfont icon-gengduo">text>
            view>
        scroll-view>
    view>

view>


.recommendSongContainer .header{
    position: relative;
    width: 100%;
    height: 300rpx;
}

.recommendSongContainer .header image{
    width: 100%;
    height: 100%;
}

.recommendSongContainer .header .date{
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -150rpx;
    margin-top: -50rpx;

    width: 300rpx;
    height: 100rpx;
    text-align: center;
    line-height: 100rpx;
    color: #FFF;
}

.header .date .day{
    font-size: 40rpx;
}

/* 列表区域的样式  */
.ListContainer{
    position: relative;
    top: -20rpx;
    padding: 0 20rpx;
    border-radius: 30rpx;
    background: #FFF;
}

.listHeader{
    height: 80rpx;
    line-height: 80rpx;
}

.listHeader .changeMore{
    float: right;
}

/* 列表内容区样式*/
.listScroll{
    width: 100%;
    height: calc(100vh - 380rpx);
}

.scrollItem{
    display: flex;
    position: relative;
    margin-bottom: 20rpx;
}

.scrollItem image{
    width: 80rpx;
    height: 80rpx;
    border-radius: 8rpx;
}

.musicInfo{
    display: flex;
    flex-direction: column;
    margin-left: 20rpx;
    max-width: 400rpx;
}

.musicInfo text{
    height: 40rpx;
    line-height: 40rpx;
    font-size: 24rpx;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.scrollItem .iconfont{
    position: absolute;
    right: 0;
    width: 80rpx;
    height: 80rpx;
    line-height: 80rpx;
    text-align: right;
}

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // 判断用户是否登录
    let userInfo = wx.getStorageSync("userInfo");
    if(!userInfo){
      wx.showToast({
        title:"请先登录",
        icon:"none",
        success:()=>{
          // 跳转到登录界面
          wx.reLaunch({
            url:"/pages/login/login"
          })
        }
      })
    }

    // 更新日期
    this.setData({
      day:new Date().getDate(),
      month:new Date().getMonth()+1
    });

    // 获取每日推荐的数据
    this.getRecommendList()
  },

  // 获取用户每日推荐数据
  async getRecommendList() {
    let recommendList = await request("/recommend/songs");
    this.setData({
      recommendList: recommendList.recommend
    })
  },

三、音乐播放

知识点：

旋转样式：

transform-origin: 40rpx 0; /* 旋转中心*/
transform: rotate(-20deg); /* 旋转角度*/
transition: transform 1s; /* 旋转过过渡动画 */

class的动态控制：

方式一：&&
<image class="needle {{isPlay && 'needleRotate'}}" src="">image>
方式二：三元运算
<image class="needle {{isPlay?'needleRotate':''}}" src="">image>

旋转动画：

/* 磁盘的动画 : infinite 无限循环*/
.discAnimation{
    animation: disc 4s linear infinite;
    animation-delay: 1s; /* 动画延迟1s 当遥感到位旋转*/
}
/* @keyframes :设置帧动画
1) from to：
    使用与简单的动画，只有起始帧和结束帧
2) 百分比
    多用于复杂的动画，动画不止两帧
*/
@keyframes disc {
    from{
        transform:rotate(0deg);
    }
    to{
        transform:rotate(360deg);
    }
}

<view class="discContainer {{isPlay && 'discAnimation'}}">

1. 路由页面 跳转 传参

知识点1：

点击事件传参数 ： data-key=valuse

<view data-song="{{item}}" bindtap="toSongDetail">

响应函数接参数：let x = event.currentTarget.dataset.key;

let song = event.currentTarget.dataset.song;

知识点2：

路由页面跳转 传参数：url:"***?song="+song
JSON.stringify(song)先要将对象转换成字符串

// 路由跳转传参：query 参数
wx.navigateTo({
      url:"***?song="+ JSON.stringify(song) // 
})

路由跳转页面接收参数：

onLoad: function (options) {
  // 1. options：用于接收路由跳转的query参数
  // 2. 原生小程序中路由传参，对参数的长度有限制，如果参数过长会自动截取掉
  console.log(options)
},

由于通过上面的方法item一项的数据很大，所有在传参的时候会自动截取掉，所有实践中传 歌曲的id过去。

2. 获取详情歌曲数据

微信小程序【网易云音乐实战】（第五篇 转发分享、每日推荐、音乐播放、页面通信npm包、进度条、全局数据）_第6张图片

页面传参：

  // 点击歌曲 跳转不同的详情页
  toSongDetail(event){
    // 接收参数
    let song = event.currentTarget.dataset.song;
    // 路由跳转传参：query 参数
    wx.navigateTo({
      url:"/pages/songDetail/songDetail?musicId="+ song.id
    })
  },

接收参数：

onLoad: function (options) {
  // 1. options：用于接收路由跳转的query参数
  // 2. 原生小程序中路由传参，对参数的长度有限制，如果参数过长会自动截取掉
  let musicId = options.musicId
},

获取歌曲详情：

// 获取音乐的详情的功能函数
async getMusicInfo(musicId) {
  let songData = await request("/song/detail",{ids:musicId})
  this.setData({
    song:songData.songs[0]
  })
},

3. 动态设置页面标题

wx.setNavigationBarTitle(Object object)

微信小程序【网易云音乐实战】（第五篇 转发分享、每日推荐、音乐播放、页面通信npm包、进度条、全局数据）_第7张图片

// 动态修改窗口的标题
wx.setNavigationBarTitle({
  title:this.data.song.name
})

4. 音乐播放和暂停

背景音频 ：BackgroundAudioManager

微信小程序【网易云音乐实战】（第五篇 转发分享、每日推荐、音乐播放、页面通信npm包、进度条、全局数据）_第8张图片

微信小程序【网易云音乐实战】（第五篇 转发分享、每日推荐、音乐播放、页面通信npm包、进度条、全局数据）_第9张图片

微信小程序【网易云音乐实战】（第五篇 转发分享、每日推荐、音乐播放、页面通信npm包、进度条、全局数据）_第10张图片

4.1 播放 和 暂停

后台播放需要设置：
在这里插入图片描述
微信小程序【网易云音乐实战】（第五篇 转发分享、每日推荐、音乐播放、页面通信npm包、进度条、全局数据）_第11张图片

微信小程序【网易云音乐实战】（第五篇 转发分享、每日推荐、音乐播放、页面通信npm包、进度条、全局数据）_第12张图片

代码：

  // 控制音乐播放/暂停的功能函数
  async musicControl(isPlay, musicId) {
    let backgroundAudioManager = wx.getBackgroundAudioManager();
    if (isPlay == true) { // 音乐播放
      console.log("播放！");
      // 获取播放链接
      let musicLickData = await request("/song/url", {id: musicId});
      let musicLick = musicLickData.data[0].url;
      backgroundAudioManager.src = musicLick; // 添加音乐播放链接
      backgroundAudioManager.title = this.data.song.name;
    } else { // 音乐暂停
      console.log("暂停！");
      backgroundAudioManager.pause(); // 音乐暂停
    }
  },

5. 决解系统任务栏控制音乐播放状态显示不一致问题

BackgroundAudioManager

当用户点击系统的控制栏时，小程序没有检测到

微信小程序【网易云音乐实战】（第五篇 转发分享、每日推荐、音乐播放、页面通信npm包、进度条、全局数据）_第13张图片
微信小程序【网易云音乐实战】（第五篇 转发分享、每日推荐、音乐播放、页面通信npm包、进度条、全局数据）_第14张图片

/**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    /* 问题： 如果用户操作系统的控制音乐或者暂停的按钮，页面不知道，导致页面显示是否播放的状态和真实的音乐播放状态不一致
    *  解决方案：
    *     1. 通过控制音频的实例 backgroundAudioManager 去监听音乐播放/暂停
    *
    * */
    // 创建音乐控制播放实例
    this.backgroundAudioManager = wx.getBackgroundAudioManager();
    // 监听音乐播放/暂停/停止
    this.backgroundAudioManager.onPlay(()=>{
      this.changePlayState(true);
    });
    this.backgroundAudioManager.onPause(()=>{
      this.changePlayState(false);
    });
    this.backgroundAudioManager.onStop(()=>{
      this.changePlayState(false);
    });
  },

  // 修改播放状态的功能函数
  changePlayState(isPlay){
    this.setData({
      isPlay:isPlay
    })
  },

6. getApp决解页面销毁音乐播放状态问题

AppObject getApp(Object object)

微信小程序【网易云音乐实战】（第五篇 转发分享、每日推荐、音乐播放、页面通信npm包、进度条、全局数据）_第15张图片
微信小程序【网易云音乐实战】（第五篇 转发分享、每日推荐、音乐播放、页面通信npm包、进度条、全局数据）_第16张图片

微信小程序【网易云音乐实战】（第五篇 转发分享、每日推荐、音乐播放、页面通信npm包、进度条、全局数据）_第17张图片

全局保存音乐播放数据：
app.js

App({

  globalData:{
    isMusicPlay:false, // 全局标识是否有音乐播放
    musicId:"", // 音乐id
  },
})

songDetail.js

// 获取全局实例
const appInstance = getApp();
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    let musicId = options.musicId;
    this.setData({
      musicId:musicId
    });
    // 获取音乐详情
    this.getMusicInfo(musicId);

    /* 问题： 如果用户操作系统的控制音乐或者暂停的按钮，页面不知道，导致页面显示是否播放的状态和真实的音乐播放状态不一致
    *  解决方案：
    *     1. 通过控制音频的实例 backgroundAudioManager 去监听音乐播放/暂停
    *
    * */
    // 判断当前音乐是否在播放
    if(appInstance.globalData.isMusicPlay && appInstance.globalData.musicId === musicId){
      // 修改当前页面音乐播放状态为true
      this.setData({
        isPlay:true
      });
    }

    // 创建音乐控制播放实例
    this.backgroundAudioManager = wx.getBackgroundAudioManager();
    // 监听音乐播放/暂停/停止
    this.backgroundAudioManager.onPlay(()=>{
      this.changePlayState(true);
      appInstance.globalData.musicId=musicId;
    });
    this.backgroundAudioManager.onPause(()=>{
      this.changePlayState(false);
    });
    this.backgroundAudioManager.onStop(()=>{
      this.changePlayState(false);
    });
  },

  // 修改播放状态的功能函数
  changePlayState(isPlay){
    this.setData({
      isPlay:isPlay
    });
    // 修改全局音乐播放的状态
    appInstance.globalData.isMusicPlay=isPlay;
  },

7. 通过页面通信，npm包的使用

7.1 小程序使用 npm 包

1. 初始化 package.json

npm init或者 npm init -y
微信小程序【网易云音乐实战】（第五篇 转发分享、每日推荐、音乐播放、页面通信npm包、进度条、全局数据）_第18张图片
一直回车就好了

微信小程序【网易云音乐实战】（第五篇 转发分享、每日推荐、音乐播放、页面通信npm包、进度条、全局数据）_第19张图片
生成的这个package.json可以看作这个项目的说明书

2. 勾选允许使用 npm
微信小程序【网易云音乐实战】（第五篇 转发分享、每日推荐、音乐播放、页面通信npm包、进度条、全局数据）_第20张图片

3. 下载 npm包

npm install packageName

4. 构建 npm

  1. 开发者工具 --> 工具 --> 构建 npm
  2. 会自动将 node_modules 中的包，打包到 miniprogram_npm 中微信小程序【网易云音乐实战】（第五篇 转发分享、每日推荐、音乐播放、页面通信npm包、进度条、全局数据）_第21张图片

7.2 pubsub消息订阅发布，自定义事件说明

pubsun包可以帮助完成页面与页面之间的通信！

https://github.com/mroderick/PubSubJS
Install via npm (npm install pubsub-js)

在这里插入图片描述

微信小程序【网易云音乐实战】（第五篇 转发分享、每日推荐、音乐播放、页面通信npm包、进度条、全局数据）_第22张图片

微信小程序【网易云音乐实战】（第五篇 转发分享、每日推荐、音乐播放、页面通信npm包、进度条、全局数据）_第23张图片

7.3 页面通信实现

recommendSong 与 songDetail界面通信！
微信小程序【网易云音乐实战】（第五篇 转发分享、每日推荐、音乐播放、页面通信npm包、进度条、全局数据）_第24张图片

recommendSong.js

onLoad: function (options) {
......其他代码

    // ** 订阅（绑定）来自songDetail 页面发布的消息
    PubSub.subscribe("switchType",(msg,data)=>{
      let {recommendList,index} = this.data;
      if(data === "pre"){ // 上一首
        index-=1;
        if(index==-1) index=recommendList.length-1;
      }else{ // 下一首
        index=(index+1)%recommendList.length;
      }
      this.setData({
        index:index
      })
      let musicId = recommendList[index].id; // 将要更新的id
      // 将musicId 回传给songDetail页面
      PubSub.publish("musicId",musicId);
    });
 }

songDetail.js

  // 点击切换歌曲回调函数
  handleSwitch(event){
    // 获取切换的类型
    let type = event.currentTarget.id;
    // 发布消息数据给recommendSong页面
    PubSub.publish("switchType",type);

    // 接收musicId
    PubSub.subscribe("musicId",(msg,data)=>{
      console.log(msg,data);
      // 取消订阅
      PubSub.unsubscribe("musicId"); 
    });
  },

8. 歌曲进度条

知识点1：

http://momentjs.cn/ 专门处理时间的库

npm install moment
微信小程序【网易云音乐实战】（第五篇 转发分享、每日推荐、音乐播放、页面通信npm包、进度条、全局数据）_第25张图片
引入包需要 构建一下

 // songData.data.dt 就是总时长( 毫秒)
 let durationTime = moment(songData.songs[0].dt).format("mm:ss");

知识点2：

微信小程序【网易云音乐实战】（第五篇 转发分享、每日推荐、音乐播放、页面通信npm包、进度条、全局数据）_第26张图片
微信小程序【网易云音乐实战】（第五篇 转发分享、每日推荐、音乐播放、页面通信npm包、进度条、全局数据）_第27张图片

 
 <view class="programControl">
     <text>{{currentTime}}text>
     
     <view class="barControl">
         
         <view class="audio-currentTime-Bar" style="width: {{currentWidth+'rpx'}}">
             
             <view class="audio-circle">view>
         view>
     view>
     <text>{{durationTime}}text>
 view>

/* 进度条控制区域 */
.programControl{
    position: absolute;
    width: 640rpx;
    height: 80rpx;
    bottom: 200rpx;
    line-height: 80rpx;
    display: flex;
}

.barControl{
    position: relative;
    width: 430rpx;
    height: 4rpx;
    margin: auto;
    background: rgba(0,0,0,0.4);
}
.audio-currentTime-Bar{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    height: 4rpx;
    background: red;
}
/* 小圆球*/
.audio-circle{
    position: absolute;
    right: -12rpx;
    top: -4rpx;
    width: 12rpx;
    height: 12rpx;
    border-radius: 50%;
    background: #ffffff;
}

data: {
  currentTime:"00:00", //实时的时间
  durationTime:"00:00", // 歌曲总时长
  currentWidth:0, // 实时播放长度
},
  
onLoad: function (options) {
    // 监听背景音频播放进度更新事件，只有小程序在前台时会回调。
    this.backgroundAudioManager.onTimeUpdate(()=>{
      let currentTime = moment(this.backgroundAudioManager.currentTime*1000).format("mm:ss");
      let currentWidth = (this.backgroundAudioManager.currentTime/this.backgroundAudioManager.duration) * 430;
      this.setData({
        currentTime:currentTime,
        currentWidth:currentWidth
      });
    });
},

9. 一首播放完成自动切换下一首

// 监听音乐播放自然结束
this.backgroundAudioManager.onEnded(()=>{
  // 自动切换下一首,自动播放
  PubSub.publish("switchType","next");
  // 进度条恢复 0
  this.setData({
    currentWidth:0,
    currentTime:"00:00", //实时的时间
  })
});

今天拼多多赚了100 费了九牛二虎之力。。。直接卸载软件。。。

你可能感兴趣的:(微信小程序开发,小程序)

  • 店群合一模式下的社区团购新发展——结合链动 2+1 模式、AI 智能名片与 S2B2C 商城小程序源码 说私域 人工智能小程序
    摘要：本文探讨了店群合一的社区团购平台在当今商业环境中的重要性和优势。通过分析店群合一模式如何将互联网社群与线下终端紧密结合，阐述了链动2+1模式、AI智能名片和S2B2C商城小程序源码在这一模式中的应用价值。这些创新元素的结合为社区团购带来了新的机遇，提升了用户信任感、拓展了营销渠道，并实现了线上线下的完美融合。一、引言随着互联网技术的不断发展，社区团购作为一种新兴的商业模式，在满足消费者日常需
  • 广州会刊小程序开发公司哪家好｜开发多少钱费用｜专业外包服务 红匣子实力推荐
    在选择广州会刊小程序开发公司时，有几个关键因素需要考虑。首先，您应该确定自己的需求和目标，以便找到最合适的开发公司。其次，您需要考虑公司的经验和专业知识。最后，您还应该考虑公司的信誉和口碑。开发-联系电话：13642679953（微信同号）首先，您应该明确自己的需求和目标。会刊小程序是一种用于展示会议信息和日程安排的应用程序。在选择开发公司之前，您应该明确自己的需求，包括功能要求、设计风格和用户体
  • 进销存小程序源码 PHP网络版ERP进销存管理系统 全开源可二开 摸鱼小号 php
    可直接源码搭建部署发布后使用：一、功能模块介绍该系统模板主要有进，销，存三个主要模板功能组成，下面将介绍各模块所对应的功能；进：需要将产品采购入库，自动生成采购明细台账同时关联财务生成付款账单；销：是指对客户的销售订单记录，汇总生成产品销售明细及回款计划；存：库存的日常盘点与统计，库存下限预警、出入库台账、库存位置等。1.进购管理采购订单：采购下单审批→由上级审批通过采购入库；采购入库：货品到货>
  • 微信小程序开发注意事项 jun778895 微信小程序小程序
    微信小程序开发是一个融合了前端开发、用户体验设计、后端服务（可选）以及微信小程序平台特性的综合性项目。这里，我将详细介绍一个典型的小程序开发项目的全过程，包括项目规划、设计、开发、测试及部署上线等各个环节，并尽量使内容达到或超过2000字的要求。一、项目规划1.1项目背景与目标假设我们要开发一个名为“智慧校园助手”的微信小程序，旨在为学生提供一站式校园生活服务，包括课程表查询、图书馆座位预约、食堂
  • python爬取微信小程序数据,python爬取小程序数据 2301_81900439 前端
    大家好，小编来为大家解答以下问题，python爬取微信小程序数据，python爬取小程序数据，现在让我们一起来看看吧！Python爬虫系列之微信小程序实战基于Scrapy爬虫框架实现对微信小程序数据的爬取首先，你得需要安装抓包工具，这里推荐使用Charles，至于怎么使用后期有时间我会出一个事例最重要的步骤之一就是分析接口，理清楚每一个接口功能，然后连接起来形成接口串思路,再通过Spider的回调
  • 2021年化工自动化控制仪表考试及化工自动化控制仪表考试技巧 女王219 安全生产模拟考试一点通安全生产一点通题库
    题库来源：安全生产模拟考试一点通公众号小程序化工自动化控制仪表考试参考答案及化工自动化控制仪表考试试题解析是安全生产模拟考试一点通题库老师及化工自动化控制仪表操作证已考过的学员汇总，相对有效帮助化工自动化控制仪表考试技巧学员顺利通过考试。1、【单选题】辐射传热()任何介质做媒介。（A）A、不需要B、需要C、有时需要2、【单选题】同一密度的液体深度越深,压强()。（B）A、越小B、越大C、基本不变3
  • 如何建设数据中台（五）——数据汇集—打破企业数据孤岛 weixin_47088026 学习记录和总结中台数据中台程序人生经验分享
    数据汇集——打破企业数据孤岛要构建企业级数据中台，第一步就是将企业内部各个业务系统的数据实现互通互联，打破数据孤岛，主要通过数据汇聚和交换来实现。企业采集的数据可以是线上采集、线下数据采集、互联网数据采集、内部数据采集等。线上数据采集主要载体分为互联网和移动互联网两种，对应有系统平台、网页、H5、小程序、App等，可以采用前端或后端埋点方式采集数据。线下数据采集主要是通过硬件来采集，例如：WiFi
  • 分布式锁和spring事务管理 暴躁的鱼 锁及事务分布式springjava
    最近开发一个小程序遇到一个需求需要实现分布式事务管理业务需求用户在使用小程序的过程中可以查看景点，对景点地区或者城市标记是否想去，那么需要统计一个地点被标记的人数，以及记录某个用户对某个地点是否标记为想去，用两个表存储数据，一个地点表记录改地点被标记的次数，一个用户意向表记录某个用户对某个地点是否标记为想去。由于可能有多个用户同时标记一个地点，每个用户在前端点击想去按钮之后，后台接收到请求，从数据
  • 小程序通过js控制页面字体颜色属性 祈澈菇凉
    需求：当电量少于百分之20的时候，显示电量的字体显示为红色。1：在wxml里面设置属性batStyle：style="{{item.batStyle}}"电量:{{item.battery}}%2：当复合逻辑条件的时候，在js里面carList[i].batStyle="color:red";success:function(res){constcarList=res.data.list;for(
  • 分享一个基于python的电子书数据采集与可视化分析 hadoop电子书数据分析与推荐系统 spark大数据毕设项目（源码、调试、LW、开题、PPT) 计算机源码社 Python项目大数据大数据pythonhadoop计算机毕业设计选题计算机毕业设计源码数据分析spark毕设
    作者：计算机源码社个人简介：本人八年开发经验，擅长Java、Python、PHP、.NET、Node.js、Android、微信小程序、爬虫、大数据、机器学习等，大家有这一块的问题可以一起交流！学习资料、程序开发、技术解答、文档报告如需要源码，可以扫取文章下方二维码联系咨询Java项目微信小程序项目Android项目Python项目PHP项目ASP.NET项目Node.js项目选题推荐项目实战|p
  • 蜂享家佣金价格表？蜂享家邀请码在哪里？蜂享家掌柜什么申请？蜂享店是什么？ 知行导师
    问：蜂享家佣金价格表？答；商品的佣金不是固定的哦，成为蜂享家掌柜之后可以看到商品的佣金多少的哦。问：蜂享家掌柜什么申请？答：应用商店搜索蜂享家下载填写邀请码完成注册（请往下看下面提供几十个免费邀请码请自取）问：蜂享店是什么？答：蜂享店是可以分享品牌特卖商品的小程序。先应用商店搜索蜂享家下载填写邀请码完成注册，就可以用自己的蜂享店了。蜂享家app分享出来的链接就是蜂享店。注册好蜂享家成为掌柜=有了自
  • 移动订货小程序哪个好 批发订货系统源码哪个好 多用户商城系统 订货系统源码移动订货小程序批发订货系统订货系统源码
    订货小程序就是依托微信小程序的订货系统，微信小程序订货系统相较于其他终端的订货方式，能够更快进入商城，对经销商而言更为方便。今天，我们一起盘点三个主流的移动订货小程序，看看哪个移动订货小程序好。第一、核货宝订货小程序核货宝是商淘科技旗下的订货系统，可为批发企业提供不同客户不同商品、不同客户不同价格快速订货和商家账期管理。功能介绍：客户批发订货的专属数字化订货系统，可以移动端订货。与传统手写开单相比
  • uniapp 获取各种小程序code 灵魂清零 uniapp小程序
    各种小程序在进入小程序是都需要去获取code才能拿到基础信息，自己记录一下用uniapp开发小程序是获取微信小程序、百度小程序、头条小程序、支付宝小程序的codeVue.prototype.$global={appLogin(){returnnewPromise((resole,reject)=>{varthat=this;varwxLoginUrl=app.globalData.url+"/lo
  • SpringBoot整合ES搜索引擎 实现网站热搜词及热度计算 码踏云端 springbootElasticsearchspringbootelasticsearch后端热搜词热度计算java
    博主简介：历代文学网（PC端可以访问：https://literature.sinhy.com/#/literature?__c=1000，移动端可微信小程序搜索“历代文学”）总架构师，15年工作经验，精通Java编程，高并发设计，Springboot和微服务，熟悉Linux，ESXI虚拟化以及云原生Docker和K8s，热衷于探索科技的边界，并将理论知识转化为实际应用。保持对新技术的好奇心，乐于
  • 创意的果实 i夜闻
    雨伞和搭载了距离报警传感器的手机，小程序也可以，有了它们的组合，再也不担心雨伞丢丢丟的窘境了图片发自App图片发自App
  • 外卖会员卡项目怎么做？外卖会员卡项目实操讲解 鲸天千流 微信小程序
    外卖会员卡项目实操外卖会员卡项目是吃喝玩乐集于一身的一款平台，它是提供个性化优惠，积分，储值及其他服务的一项推广计划，简单来说就是你通过推广外卖会员卡获得佣金，用户通过你的会员卡获得更多的优惠与权益，从而实现互利互赢。简单来说就是小程序推广功能：领外卖优惠券，看电影，交话费，打车等一系列都可以省钱，用户只要在小程序里消费，都可以拿到一笔官定的佣金。项目详细讲说：一、小程序中有什么优惠的地方可以吸引
  • 外卖霸王餐返利外卖会员卡小程序开发 闹小艾 good506070微信小程序小程序
    外卖霸王餐返利外卖会员卡小程序开发"社交电商赋能下的外卖返利小程序"是专为商家与用户双赢而设计的创新平台。以下是其开发方案的详细步骤：一、需求梳理：首先，我们需要明确小程序的核心功能和特色。包括设定活动类型、返利策略，以及用户体验友好的界面设计。二、技术决策：技术选型是关键。我们采用小程序的开发框架，利用JavaScript作为前端开发语言，并结合微信提供的API进行后端接口调用与数据处理。三、账
  • 外卖分销分佣小程序外卖cps小程序返利系统源码分享 m0_56957302 java小程序linuxpythondocker
    外卖返利小程序源码;轻松部署搭建，小程序服务号数据互通；对接美团官方;佣金比例自定义分配;三级分佣，所有资金数据一目了然；拉新立减最低4.9元购月卡；签到20天免费领取会员卡；提现秒到账！外卖cps带分销返利源码源代码地址美团/饿了么外卖CPS联盟返利公众号小程序裂变核心源码截图步骤下载以上源代码到本地http://y.mybei.cn/修改为你自己的微信小程序，打开/dist/pages/ele
  • Axure移动端原型模板实例100+，APP原型设计模版，高保真高交互含大组件库 默林工作室 AxureRP原型模板axure原型模板
    作品概况页面数量：共100+页（长期更新中…）源文件格式：rp格式，兼容AxureRP9/10，非程序软件无源代码适用领域：APP、小程序、H5作品特色本品为「移动端原型模板实例100+」，属于APP+H5+小程序的页面实例原型模板，主要运用了中继器＋动态面板，栏目丰富样式多多，高保真高交互高复用（带仿真交互），可以快速组装成美观大方的原型图。该原型模板的页面尺寸为375×812像素，推荐演示设备
  • 微信小程序游戏开发 红匣子实力推荐
    微信小程序是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或者搜一下即可打开应用。也正因为其便利性，微信小程序在各个领域都有广泛的应用，其中包括游戏领域。本文将为你介绍微信小程序游戏开发的基本知识。开发-联系电话：13642679953（微信同号）一、开发环境准备1.微信开发者工具：这是微信官方提供的开发工具，支持小程序的开发和调试。你可以在微信公众平台下载并安装。2
  • 如何利用兼职群微信二维码进群做副业？(兼职群微信二维码进群副业途径) 幸运副业
    如何利用兼职群微信二维码进群做副业？(兼职群微信二维码进群副业途径)而兼职成为了许多人选择的一种方式。而在寻找兼职机会的过程中，利用兼职群微信二维码进群成为了一种常见的途径。在本文中，我们将探讨如何有效地利用兼职群微信二维码进群做副业，并介绍一款微信小程序——多职猫兼职平台，为您提供更多的兼职选择。推荐一篇找兼职必看的免费教程：《手机兼职，300-500/天，一单一结，大量要人》在这里可以找到各种
  • 微信小程序使用canvas画图保存图片到手机相册 岩岩很哇塞！ 微信小程序微信小程序小程序canva可画
    微信小程序要实现使用canvas绘制一个图，然后保存到手机相册**最终效果：**实现生成以下图片一、初始化canvas//wxml页面设置canvas标签//js页面初始化canvasdata:{ctx:'',details:'',windowW:375*3,windowH:265*3,ratio:3,showCanvas:false},onLoad(options){this.setData({
  • 小程序开关组件 phoebe_l_ 小程序
    前提是vant组件库不太好改，干脆就手写了一个{{leftText}}{{rightText}}import{ref,computed}from'vue';constprops=defineProps({leftText:{type:String,default:''},rightText:{type:String,default:''}});constisReverseOrder=ref(tru
  • 微信小程序常用开发框架有哪些？ +码农快讯+ 分享微信小程序小程序开发
    想要开发出一套高质量的小程序，运用框架，组件库是省时省力省心必不可少一部分，随着小程序日渐火爆，各种不同类型的小程序也渐渐更新，其中不乏一些优秀好用的框架/组件库。1：WeUI小程序–使用教程https://weui.io/官方介绍：WeUI是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。小程序开发中最常用到的一款框架，受广大
  • Taro实现微信小程序自定义拍照截图识别 书边事. taro微信小程序小程序
    效果图：代码：>请对准框内拍摄题目重新拍照文件处理中...开始识别definePageConfig({navigationStyle:"custom",navigationBarTitleText:"",//启用页面分享//enableShareAppMessage:true,//启动朋友圈分享//enableShareTimeline:true});import{reactive,toRefs,
  • 小程序云函数遇到的问题（未安装wx-server-sdk依赖 | errMsg: Environment not found） 甜辣嘟嘟嘟 前端
    在学习小程序云开发中的云函数的时候，代码执行方面遇到了一些小小的问题。1.关于未安装wx-server-sdk依赖首先，在云函数中使用wx-server-sdk，需先调用初始化方法init一次，init用于设置接下来在该云函数实例中调用云函数、数据库、文件存储时要访问的环境。例如以下代码中，constcloud=require('wx-server-sdk')cloud.init({env:'te
  • 小程序商城设计 红匣子实力推荐
    随着移动互联网的普及和发展，越来越多的人开始使用手机进行购物。为了满足用户的需求，各种电商平台纷纷推出了自己的小程序商城。小程序商城以其轻便、快捷的特点，为用户提供了便捷的移动购物体验。本文将介绍小程序商城的设计要点，帮助开发者打造一个高效、易用的购物平台。开发-联系电话：13642679953（微信同号）1.简洁明了的界面设计小程序商城的界面设计应该简洁明了，让用户一眼就能看到自己想要购买的商品
  • 微信小程序生成小程序转发链接，携带参数跳转到另外一个页面 coderYYY 前端项目教程以及代码小程序微信小程序前端javascript微信
    作者：coderYYY个人简介：前端程序媛，目前主攻web前端，后端辅助，其他技术知识也会偶尔分享欢迎和我一起交流！（评论和私信一般会回！！）个人专栏推荐：《前端项目教程以及代码》✨一、前言需求：在页面A生成分享链接（携带参数），分享到微信聊天后，好友点击链接可跳转到页面B，页面B可获取到参数二、具体实现pageA（生成链接页面）：通过给button组件设置属性
  • 小程序生命周期 前端每日三省 小程序dairyjs小程序生命周期
    100.小程序生命周期小程序作为一种轻量级的应用开发模式，在移动应用领域得到了广泛应用。为了更好地理解和掌握小程序的生命周期，本文将从应用生命周期、页面生命周期和组件生命周期三个方面进行详细讲解，并附上对应部分的代码示例。1.应用生命周期应用生命周期指的是整个小程序从启动到退出的整个过程。小程序的应用生命周期主要包含以下几个阶段：1.1onLaunch-小程序初始化在小程序初始化时，会触发onLa
  • 【小程序】生命周期 It Works 小程序生命周期
    小程序生命周期分为两类：应用生命周期和页面生命周期。应用生命周期应用生命周期包括onLaunch、onShow、onHide、onError、onUnload。onLaunch：监听小程序初始化，当小程序初始化完成时，会触发，全局只触发一次。onShow：监听小程序显示，当小程序启动，或从后台进入前台显示时，会触发。onHide：监听小程序隐藏，当小程序从前台进入后台时，会触发。onError：当
  • 书其实只有三类 西蜀石兰 类
    一个人一辈子其实只读三种书，知识类、技能类、修心类。 知识类的书可以让我们活得更明白。类似十万个为什么这种书籍，我一直不太乐意去读，因为单纯的知识是没法做事的，就像知道地球转速是多少一样（我肯定不知道），这种所谓的知识，除非用到，普通人掌握了完全是一种负担，维基百科能找到的东西，为什么去记忆？ 知识类的书，每个方面都涉及些，让自己显得不那么没文化，仅此而已。社会认为的学识渊博，肯定不是站在
  • 《TCP/IP 详解，卷1：协议》学习笔记、吐槽及其他 bylijinnan tcp
    《TCP/IP 详解，卷1：协议》是经典，但不适合初学者。它更像是一本字典，适合学过网络的人温习和查阅一些记不清的概念。 这本书，我看的版本是机械工业出版社、范建华等译的。这本书在我看来，翻译得一般，甚至有明显的错误。如果英文熟练，看原版更好： http://pcvr.nl/tcpip/ 下面是我的一些笔记，包括我看书时有疑问的地方，也有对该书的吐槽，有不对的地方请指正： 1.
  • Linux—— 静态IP跟动态IP设置 eksliang linuxIP
    一.在终端输入 vi /etc/sysconfig/network-scripts/ifcfg-eth0 静态ip模板如下： DEVICE="eth0" #网卡名称 BOOTPROTO="static" #静态IP（必须） HWADDR="00:0C:29:B5:65:CA" #网卡mac地址 IPV6INIT=&q
  • Informatica update strategy transformation 18289753290
    更新策略组件： 标记你的数据进入target里面做什么操作，一般会和lookup配合使用，有时候用0,1,1代表 forward  rejected rows被选中，rejected row是输出在错误文件里，不想看到reject输出，将错误输出到文件，因为有时候数据库原因导致某些column不能update，reject就会output到错误文件里面供查看，在workflow的
  • 使用Scrapy时出现虽然队列里有很多Request但是却不下载，造成假死状态 酷的飞上天空 request
    现象就是： 程序运行一段时间，可能是几十分钟或者几个小时，然后后台日志里面就不出现下载页面的信息，一直显示上一分钟抓取了0个网页的信息。 刚开始已经猜到是某些下载线程没有正常执行回调方法引起程序一直以为线程还未下载完成，但是水平有限研究源码未果。 经过不停的google终于发现一个有价值的信息，是给twisted提出的一个bugfix 连接地址如下http://twistedmatrix.
  • 利用预测分析技术来进行辅助医疗 蓝儿唯美 医疗
    2014年，克利夫兰诊所（Cleveland Clinic）想要更有效地控制其手术中心做膝关节置换手术的费用。整个系统每年大约进行2600例此类手术，所以，即使降低很少一部分成本，都可以为诊 所和病人节约大量的资金。为了找到适合的解决方案，供应商将视野投向了预测分析技术和工具，但其分析团队还必须花时间向医生解释基于数据的治疗方案意味着 什么。  克利夫兰诊所负责企业信息管理和分析的医疗
  • java 线程(一)：基础篇 DavidIsOK java多线程线程
                                                            &nbs
  • Tomcat服务器框架之Servlet开发分析 aijuans servlet
    最近使用Tomcat做web服务器，使用Servlet技术做开发时，对Tomcat的框架的简易分析： 疑问： 为什么我们在继承HttpServlet类之后，覆盖doGet(HttpServletRequest req, HttpServetResponse rep)方法后，该方法会自动被Tomcat服务器调用，doGet方法的参数有谁传递过来？怎样传递？ 分析之我见： doGet方法的
  • 揭秘玖富的粉丝营销之谜 与小米粉丝社区类似 aoyouzi 揭秘玖富的粉丝营销之谜
    玖富旗下悟空理财凭借着一个微信公众号上线当天成交量即破百万，第七天成交量单日破了1000万;第23天时，累计成交量超1个亿……至今成立不到10个月，粉丝已经超过500万，月交易额突破10亿，而玖富平台目前的总用户数也已经超过了1800万，位居P2P平台第一位。很多互联网金融创业者慕名前来学习效仿，但是却鲜有成功者，玖富的粉丝营销对外至今仍然是个谜。   　　近日，一直坚持微信粉丝营销
  • Java web的会话跟踪技术 百合不是茶 url会话Cookie会话Seession会话Java Web隐藏域会话
    会话跟踪主要是用在用户页面点击不同的页面时,需要用到的技术点   会话:多次请求与响应的过程     1,url地址传递参数,实现页面跟踪技术          格式:传一个参数的 url?名=值     传两个参数的 url?名=值 &名=值   关键代码
  • web.xml之Servlet配置 bijian1013 javaweb.xmlServlet配置
    定义： <servlet> <servlet-name>myservlet</servlet-name> <servlet-class>com.myapp.controller.MyFirstServlet</servlet-class> <init-param> <param-name>
  • 利用svnsync实现SVN同步备份 sunjing SVN同步E000022svnsync镜像
    1. 在备份SVN服务器上建立版本库    svnadmin create test 2. 创建pre-revprop-change文件     cd test/hooks/     cp pre-revprop-change.tmpl pre-revprop-change 3. 修改pre-revprop-
  • 【分布式数据一致性三】MongoDB读写一致性 bit1129 mongodb
    本系列文章结合MongoDB，探讨分布式数据库的数据一致性，这个系列文章包括： 数据一致性概述与CAP 最终一致性(Eventually Consistency) 网络分裂(Network Partition)问题 多数据中心(Multi Data Center) 多个写者(Multi Writer)最终一致性 一致性图表(Consistency Chart) 数据
  • Anychart图表组件-Flash图转IMG普通图的方法 白糖_ Flash
    问题背景：项目使用的是Anychart图表组件，渲染出来的图是Flash的，往往一个页面有时候会有多个flash图，而需求是让我们做一个打印预览和打印功能，让多个Flash图在一个页面上打印出来。   那么我们打印预览的思路是获取页面的body元素，然后在打印预览界面通过$("body").append(html)的形式显示预览效果，结果让人大跌眼镜：Flash是
  • Window 80端口被占用 WHY? bozch 端口占用window
    平时在启动一些可能使用80端口软件的时候，会提示80端口已经被其他软件占用，那一般又会有那些软件占用这些端口呢？    下面坐下总结：         1、web服务器是最经常见的占用80端口的，例如：tomcat , apache  , IIS , Php等等；         2
  • 编程之美-数组的最大值和最小值-分治法（两种形式） bylijinnan 编程之美
    import java.util.Arrays; public class MinMaxInArray { /** * 编程之美 数组的最大值和最小值 分治法 * 两种形式 */ public static void main(String[] args) { int[] t={11,23,34,4,6,7,8,1,2,23}; int[]
  • Perl正则表达式 chenbowen00 正则表达式perl
    首先我们应该知道 Perl 程序中，正则表达式有三种存在形式，他们分别是： 匹配：m/<regexp>;/ （还可以简写为 /<regexp>;/ ，略去 m） 替换：s/<pattern>;/<replacement>;/ 转化：tr/<pattern>;/<replacemnt>;
  • [宇宙与天文]行星议会是否具有本行星大气层以外的权力呢? comsci
          举个例子: 地球,地球上由200多个国家选举出一个代表地球联合体的议会,那么现在地球联合体遇到一个问题,地球这颗星球上面的矿产资源快要采掘完了....那么地球议会全体投票,一致通过一项带有法律性质的议案,既批准地球上的国家用各种技术手段在地球以外开采矿产资源和其它资源........    &
  • Oracle Profile 使用详解 daizj oracleprofile资源限制
    Oracle Profile 使用详解 转 一、目的： Oracle系统中的profile可以用来对用户所能使用的数据库资源进行限制，使用Create Profile命令创建一个Profile，用它来实现对数据库资源的限制使用，如果把该profile分配给用户，则该用户所能使用的数据库资源都在该profile的限制之内。 二、条件： 创建profile必须要有CREATE PROFIL
  • How HipChat Stores And Indexes Billions Of Messages Using ElasticSearch & Redis dengkane elasticsearchLucene
    This article is from an interview with Zuhaib Siddique, a production engineer at HipChat, makers of group chat and IM for teams. HipChat started in an unusual space, one you might not
  • 循环小示例，菲波拉契序列，循环解一元二次方程以及switch示例程序 dcj3sjt126com c算法
    # include <stdio.h> int main(void) { int n; int i; int f1, f2, f3; f1 = 1; f2 = 1; printf("请输入您需要求的想的序列："); scanf("%d", &n); for (i=3; i<n; i
  • macbook的lamp环境 dcj3sjt126com lamp
      sudo vim /etc/apache2/httpd.conf   /Library/WebServer/Documents 是默认的网站根目录   重启Mac上的Apache服务   这个命令很早以前就查过了，但是每次使用的时候还是要在网上查： 停止服务：sudo /usr/sbin/apachectl stop 开启服务：s
  • java ArrayList源码 下 shuizhaosi888 ArrayList源码
    版本 jdk-7u71-windows-x64   JavaSE7 ArrayList源码上：http://flyouwith.iteye.com/blog/2166890     /** * 从这个列表中移除所有c中包含元素 */ public boolean removeAll(Collection<?> c) {
  • Spring Security（08）——intercept-url配置 234390216 Spring Securityintercept-url访问权限访问协议请求方法
    intercept-url配置 目录 1.1     指定拦截的url 1.2     指定访问权限 1.3     指定访问协议 1.4     指定请求方法   1.1   &n
  • Linux环境下的oracle安装 jayung oracle
    linux系统下的oracle安装 本文档是Linux(redhat6.x、centos6.x、redhat7.x) 64位操作系统安装Oracle 11g(Oracle Database 11g Enterprise Edition Release 11.2.0.4.0 - 64bit Production)，本文基于各种网络资料精心整理而成，共享给有需要的朋友。如有问题可联系：QQ：52-7
  • hotspot虚拟机 leichenlei javaHotSpotjvm虚拟机文档
    JVM参数  http://docs.oracle.com/javase/6/docs/technotes/guides/vm/index.html   JVM工具 http://docs.oracle.com/javase/6/docs/technotes/tools/index.html   JVM垃圾回收 http://www.oracle.com
  • 读《Node.js项目实践：构建可扩展的Web应用》 ——引编程慢慢变成系统化的“砌砖活” noaighost Webnode.js
    读《Node.js项目实践：构建可扩展的Web应用》 ——引编程慢慢变成系统化的“砌砖活” 眼里的Node.JS 初初接触node是一年前的事，那时候年少不更事。还在纠结什么语言可以编写出牛逼的程序，想必每个码农都会经历这个月经性的问题：微信用什么语言写的？facebook为什么推荐系统这么智能，用什么语言写的？dota2的外挂这么牛逼，用什么语言写的？……用什么语言写这句话，困扰人也是阻碍
  • 快速开发Android应用 rensanning android
    Android应用开发过程中，经常会遇到很多常见的类似问题，解决这些问题需要花时间，其实很多问题已经有了成熟的解决方案，比如很多第三方的开源lib，参考 Android Libraries 和 Android UI/UX Libraries。 编码越少，Bug越少，效率自然会高。 但可能由于 根本没听说过、听说过但没用过、特殊原因不能用、自己已经有了解决方案等等原因，这些成熟的解决
  • 理解Java中的弱引用 tomcat_oracle java工作面试
    　不久之前，我 面试了一些求职Java高级开发工程师的应聘者。我常常会面试他们说，“你能给我介绍一些Java中得弱引用吗？”，如果面试者这样说，“嗯，是不是垃圾回收有关的？”，我就会基本满意了，我并不期待回答是一篇诘究本末的论文描述。 　　然而事与愿违，我很吃惊的发现，在将近20多个有着平均5年开发经验和高学历背景的应聘者中，居然只有两个人知道弱引用的存在，但是在这两个人之中只有一个人真正了
  • 标签输出html标签" target="_blank">关于标签输出html标签 xshdch jsp
    http://back-888888.iteye.com/blog/1181202 关于<c:out value=""/>标签的使用，其中有一个属性是escapeXml默认是true(将html标签当做转移字符，直接显示不在浏览器上面进行解析)，当设置escapeXml属性值为false的时候就是不过滤xml，这样就能在浏览器上解析html标签， &nb
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他