微信小程序学习推荐:仿微信漂流瓶;使用leancloud

周末找事做做.看到微信里有个漂流瓶.试着敲了敲.

这里是用leancloud做后台.涉及到语音和文字的储存,查询.自己不会写后台代码,对于我算是个福利.

欢迎交流!

微信小程序学习推荐:仿微信漂流瓶;使用leancloud

技术点:

1.微信小程序开发之录音机 音频播放 动画 (真机可用)

2.微信小程序开发之用户系统 一键登录 获取session_key和openid

3.微信小程序开发之常见问题 不在以下合法域名列表中 wx.request合法域名配置

4.微信小程序开发之本地图片上传(leancloud)

下面带图说模块:

1.主页面

三个button.不多说了.别吐槽这画风.哈哈哈.

微信小程序学习推荐:仿微信漂流瓶;使用leancloud

2.编辑漂流瓶内容

内容可以是语音,也可以是文字.随意切换.

微信小程序学习推荐:仿微信漂流瓶;使用leancloud

这里是语音的.录音完成后直接扔出去.

微信小程序学习推荐:仿微信漂流瓶;使用leancloud

3.捡一个漂流瓶

有两种情况.一是没有捡到.就是一个海星;二是捡到了.语音或者是文字.

1.海星

微信小程序学习推荐:仿微信漂流瓶;使用leancloud

2.捡到了漂流瓶

微信小程序学习推荐:仿微信漂流瓶;使用leancloud

2.1  获取到文字.弹框显示文字

微信小程序学习推荐:仿微信漂流瓶;使用leancloud

2.2 获取到语音.直接播放

微信小程序学习推荐:仿微信漂流瓶;使用leancloud

3.我的瓶子

语音和文字两类.

微信小程序学习推荐:仿微信漂流瓶;使用leancloud

下面上代码:

1.index.wxml

<view class="play-style">   <view class="playstyle">     <image class="img" src="{{getSrc}}" bindtap="get"></image>     <text>捡一个</text>   </view>   <view class="leftstyle">     <image class="img" src="{{throwSrc}}" bindtap="throw"></image>     <text>扔一个</text>   </view>   <view class="rightstyle">     <image class="img" src="{{mySrc}}" bindtap="mine"></image>     <text>我的瓶子</text>   </view> </view>

2.index.wxss

[CSS]
page {   background-image: url('http://ac-nfyusptg.clouddn.com/0ee678402f996ad3a5c2.gif');   background-attachment: fixed;   background-repeat: no-repeat;   background-size: cover; }  .play-style {   position: fixed;   bottom: 50rpx;   left: 0;   height: 240rpx;   width: 100%;   text-align: center;   color: #fff; }  .playstyle {   position: absolute;   width: 160rpx;   height: 160rpx;   top: 10rpx;   left: 295rpx; }  .leftstyle {   position: absolute;   width: 160rpx;   height: 160rpx;   top: 10rpx;   left: 67.5rpx; }  .rightstyle {   position: absolute;   width: 160rpx;   height: 160rpx;   top: 10rpx;   right: 67.5rpx; } .img{   width: 160rpx;   height: 160rpx; } 

3.index.js

[JavaScript]
const AV = require('../../utils/av-weapp.js'); Page({   data: {     getSrc: "../../images/a.png",//捡一个     throwSrc: "../../images/b.png",//扔一个     mySrc: "../../images/c.png"//我的   },   onLoad: function () {     const user = AV.User.current();     // 调用小程序 API,得到用户信息       wx.getUserInfo({       success: ({userInfo}) => {         console.log(userInfo)         // 更新当前用户的信息           user.set(userInfo).save().then(user => {           // 成功,此时可在控制台中看到更新后的用户信息             this.globalData.user = user.toJSON();         }).catch(console.error);       }     });   },   //捡一个   get: function () {     console.log("捡一个")     //随机去后台拉取一个录音     wx.navigateTo({       url: '../get/get',       success: function (res) {         // success       },       fail: function () {         // fail       },       complete: function () {         // complete       }     })   },   //扔一个   throw: function () {     console.log("扔一个")     wx.navigateTo({       url: '../write/write',       success: function (res) {         // success       },       fail: function () {         // fail       },       complete: function () {         // complete       }     })   },   //我的瓶子   mine: function () {     console.log("我的瓶子")     wx.navigateTo({       url: '../mine/mine',       success: function (res) {         // success       },       fail: function () {         // fail       },       complete: function () {         // complete       }     })   } }) 

demo代码下载:

csdn地址:http://download.csdn.net/detail/qq_31383345/9700997
本站地址: 微信小程序学习推荐:仿微信漂流瓶;使用leancloud wx_plp.rar (161.7 KB, 下载次数: 188)

我的博客,欢迎批评!

小鱼源码网www.vipsrc.vip

开心一下:

男女相亲,在茶馆相对而坐,语拙无题,男主动挑起话题:你是怎样看待房市的?女一愣低头沉默好一会:只要姿势不太古怪,我会尽量配合,但一定要让我喊出来。
1.本站所有资源仅用于学习及研究使用,请必须在24小时内删除所下载资源,切勿用于商业用途,否则由此引发的法律纠纷及连带责任本站和发布者概不承担。资源除标明原创外均来自网络整理,版权归原作者或本站特约原创作者所有,如侵犯到您权益请联系本站删除! 2.本站站内提供的所有可下载资源(软件等等)本站保证未做任何负面改动(不包含修复bug和完善功能等正面优化或二次开发);但本网站不能保证资源的准确性、安全性和完整性,用户下载后自行斟酌,我们以交流学习为目的,并不是所有的源码都100%无错或无bug;同时本站用户必须明白,小鱼源码对提供下载的软件等不拥有任何权利(本站原创和特约原创作者除外),其版权归该资源的合法拥有者所有。 3.请您认真阅读上述内容,购买即以为着您同意上述内容。
小鱼源码下载网 » 微信小程序学习推荐:仿微信漂流瓶;使用leancloud

精品源码,商业服务,发布得积分,VIP免费下

开通会员 发布资源