• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

微信小程序漂流瓶

原作者: [db:作者] 来自: [db:来源] 收藏 邀请



技术点:

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

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

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

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


下面带图说模块:

1.主页面

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



2.编辑漂流瓶内容

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



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



3.捡一个漂流瓶

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

1.海星



2.捡到了漂流瓶



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



2.2 获取到语音.直接播放



3.我的瓶子

语音和文字两类.



下面上代码:

1.index.wxml

[html] view plain copy
 
 
  1. <!--index.wxml-->  
  2. <view class="play-style">  
  3.   <view class="playstyle">  
  4.     <image class="img" src="{{getSrc}}" bindtap="get"></image>  
  5.     <text>捡一个</text>  
  6.   </view>  
  7.   <view class="leftstyle">  
  8.     <image class="img" src="{{throwSrc}}" bindtap="throw"></image>  
  9.     <text>扔一个</text>  
  10.   </view>  
  11.   <view class="rightstyle">  
  12.     <image class="img" src="{{mySrc}}" bindtap="mine"></image>  
  13.     <text>我的瓶子</text>  
  14.   </view>  
  15. </view>  
2.index.wxss
[css] view plain copy
 
 
  1. /**index.wxss**/  
  2.   
  3. page {  
  4.   background-imageurl('http://ac-nfyusptg.clouddn.com/0ee678402f996ad3a5c2.gif');  
  5.   background-attachmentfixed;  
  6.   background-repeatno-repeat;  
  7.   background-size: cover;  
  8. }  
  9.   
  10. .play-style {  
  11.   positionfixed;  
  12.   bottom: 50rpx;  
  13.   left: 0;  
  14.   height240rpx;  
  15.   width100%;  
  16.   text-aligncenter;  
  17.   color#fff;  
  18. }  
  19.   
  20. .playstyle {  
  21.   positionabsolute;  
  22.   width160rpx;  
  23.   height160rpx;  
  24.   top: 10rpx;  
  25.   left: 295rpx;  
  26. }  
  27.   
  28. .leftstyle {  
  29.   positionabsolute;  
  30.   width160rpx;  
  31.   height160rpx;  
  32.   top: 10rpx;  
  33.   left: 67.5rpx;  
  34. }  
  35.   
  36. .rightstyle {  
  37.   positionabsolute;  
  38.   width160rpx;  
  39.   height160rpx;  
  40.   top: 10rpx;  
  41.   right: 67.5rpx;  
  42. }  
  43.   
  44. .img {  
  45.   width160rpx;  
  46.   height160rpx;  
  47. }  
3.index.js
[javascript] view plain copy
 
 
  1. <span style="font-size:24px;">//index.js  
  2. //获取应用实例  
  3. var app = getApp()  
  4. const AV = require('../../utils/av-weapp.js');  
  5. Page({  
  6.   data: {  
  7.     getSrc: "../../images/a.png",//捡一个  
  8.     throwSrc: "../../images/b.png",//扔一个  
  9.     mySrc: "../../images/c.png"//我的  
  10.   },  
  11.   onLoad: function () {  
  12.     const user = AV.User.current();  
  13.     // 调用小程序 API,得到用户信息    
  14.     wx.getUserInfo({  
  15.       success: ({userInfo}) => {  
  16.         console.log(userInfo)  
  17.         // 更新当前用户的信息    
  18.         user.set(userInfo).save().then(user => {  
  19.           // 成功,此时可在控制台中看到更新后的用户信息    
  20.           this.globalData.user = user.toJSON();  
  21.         }).catch(console.error);  
  22.       }  
  23.     });  
  24.   },  
  25.   //捡一个  
  26.   get: function () {  
  27.     console.log("捡一个")  
  28.     //随机去后台拉取一个录音  
  29.     wx.navigateTo({  
  30.       url: '../get/get',  
  31.       success: function (res) {  
  32.         // success  
  33.       },  

鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
JavaScript-模拟收银台小程序 - 极速小乌龟发布时间:2022-07-18
下一篇:
小程序单张图片裁剪发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap