微信小程序漂流瓶

OGeek|极客世界-中国程序员成长平台 › 门户 › 编程› 移动开发›小程序云开发高级教程

原作者: [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 plaincopy
<!--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]view plaincopy
/**index.wxss**/  
  
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]view plaincopy
<span style="font-size:24px;">//index.js  
//获取应用实例  
var app = getApp()  
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  
      },  