小白微信小程序开发入门经验总结，干货！生日惊喜可用

效果图展示

这个程序是本人开发的一个简单微信小程序。
适合想开发小程序的小白们参考~，下面先给大家看看效果

确认整体框架

确认框架是每个程序员开发项目必须要做的工作~对于该小程序，主要框架分为以下几个方面：

1. 封面设计 ，即首页展示；
2. 答题环节 ，即实现一些基本的鼠标点击，弹出相应小窗口等事件；
3. 图片展示 ，即图片展览；
4. 音乐播放 ，即实现音乐播放以及暂停事件；

封面设计

效果图：
分析：
在上述的效果图，具体实现的功能有 点击图标实现页面跳转、背景图的设置

代码贴上↓↓↓
.wxml

<image class="picture" bindtap="clickme" src="../picture/pig.jpeg"></image>

.js

Page({

  clickme: function(){
    wx.navigateTo({
      url: '../letter/letter'
    })
  }
})

.json

{
  "navigationBarTitleText": "Birthday",
  "usingComponents": {}
}

.wxss

.page{
  background-image: url("//添加想要背景图片对应的base64码");
  background-size: 100% 100%;
}

.picture{
  width:100px; 
  height:100px; 
  border-radius:90px; 
  margin-top:1025rpx; 
  margin-left:70%;
}

点击图标实现页面跳转

主要思路是利用bindtap点击事件完成触发对应的功能函数。bindtap点击事件对于小白可以简单理解为微信开发工具提供的一个可以响应用户的点击动作的工具.bindtap=“clickme” 即设置此图片对应一个名称为"clickme"的功能函数，接着就需要我们在 .js 中完成clickme功能函数的具体实现。

在 clickme 的功能函数中，利用实现 wx.navigateTo 接口完成页面的跳转，关于该接口的使用，可以参考微信开发文档，而要转向的对应页面则只需在 url 输入对应的路径即可。

背景图的设置

背景图的设置，也算是我在学习过程中踩的一个坑。微信小程序的背景图使用应先将所要设置的图片转换为 base64码（可搜索在线转换工具进行转换），然后将base64码复制粘贴到 background-image:url("") 里面，再设置一下 background-size 属性即可。

答题环节

效果图：

分析：
在上述的效果图，具体实现的功能有 消息提示框弹出

代码贴上↓↓↓
.wxml

<view class="title">
  Ask and Answer
</view>

<view class="question">
  <text decode="{{true}}">&nbsp;&nbsp;问：请选出最帅的那位
  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;（点击选项哦）</text>
</view>

<view class="answer">
  <view class="seletionA" bindtap="answerB">A.TT</view>
  <view class="seletionB" bindtap="answerB">B.暖心师兄</view>
  <view class="seletionC" bindtap="answerB">C.亚当</view>
  <view class="seletionD" bindtap="answerD">D.藏..</view>
</view>

<view class="story">
<text decode="{{true}}">
&nbsp;&nbsp;&nbsp;&nbsp;课程是旷的，考试是抄的，学分是蹭的，毕设是买的，论文是拼的，学位证是水的，三方协议是用来骗就业率的，什么是真的？球场上流过的汗，操场上跑过的圈，宿舍里开过的黑，分离时流过的泪，寝室里放过的dj，卧谈会争论的妹，小饭馆买过的醉，食堂里排过的队，图书馆占过的位，所有回不去的，都是真的。
---《我想念》
</text>
</view>

<image class="picture" bindtap="clickme" src="../picture/pig.jpeg"></image>

.js

Page({

  answerB: function () {
    wx.showToast({
      title: '诚实！加一分！',
      icon: 'none',
      duration: 1500 //持续的时间
    })
  },

  answerD: function () {
    wx.showToast({
      title: '好行你居然敢点！马上选别的！',
      icon: 'none',
      duration: 1500 //持续的时间
    })
  },

  clickme: function () {
    wx.navigateTo({
      url: '../Photo/Photo'
    })
  }

})

.json

{
  "navigationBarTitleText": "Birthday",
  "usingComponents": {}
}

.wxss

.page{
  background-image: url("//添加想要背景图片对应的base64码");
  background-size: 100% 100%;
}

.title{
  width: 690rpx;
  height: 150rpx;
  margin-top: 30rpx;
  margin-bottom: 30rpx;
  text-align: center;
  margin-right: 30rpx;
  margin-left: 30rpx;
  color: #ffffff;
  font-size: 60rpx;
  line-height: 140rpx;
  font-weight: 550;
  
}

.question{
  font-size: 30rpx;
  margin-right: 20%;
  margin-left: 20%;
  margin-top: 15rpx;
  color: #ffffff;
  font-weight: 550;
}

.answer{
  margin-right: 20%;
  margin-left: 40%;
  margin-top: 30rpx;
  color: #ffffff;
  font-weight: 650;
}

.seletionA,.seletionB,.seletionC,.seletionD{
  margin-top: 50rpx;
}

.story{
  margin-right: 20%;
  margin-left: 20%;
  margin-top: 60rpx;
  color: #ffffff;
  font-weight: 650;
  font-size: 25rpx;
}

.picture{
  width:80px; 
  height:80px; 
  border-radius:90px; 
  margin-top:30rpx; 
  margin-left:40%;
}

消息提示框弹出

该功能的具体操作是点击相应选项弹出相应的消息提示框，所以还是需要用到 bindtap点击事件 标识对应要响应的功能函数。例如代码中的 answerD 便是点击D选项时会响应的功能函数。

实现弹出消息提示框，在微信开发文档中我们可以知道，可通过实现 wx.showToast 接口来完成。在 title 中输入对应的文字、icon默认下是“succe”，即按钮属性，在程序中我将其设置了“none”，即无需按钮、duration 则是提示框的持续时长。更多的属性，小白可以多参考微信开发文档。

图片展示

关于图片展示的话，就没有太多新功能啦，就是简单的"image"标签的使用，以及对应的修饰，在这里就不啰嗦啦。

音乐播放

效果图
分析：
在上述的效果图，具体实现的功能有 音频播放暂停、图片转动

代码贴上↓↓↓
.wxml

<view class="title">
  Muisc House
</view>

<!-- 当前为停止状态 -->
<view class="player" wx:if="{{pS == false}}" bindtap="play">
  <image class="playerOn" src="../../pages/picture/pig.jpeg"></image>
</view>

<!-- 当前为播放状态 -->
<view class="player" wx:if="{{pS == true}}" bindtap="stop">
  <image class="playerStop" src="../../pages/picture/pig.jpeg"></image>
</view>

<view class="story">
<text decode="{{true}}">
文字
</text>
</view>

.js

const myaudio = wx.createInnerAudioContext();//创建对象

Page({

  /**
   * 页面的初始数据
   */
  data: {
    pS: false
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    myaudio.src ="http://music.163.com/song/media/outer/url?id=1359356908.mp3"
  
  },

  play: function () {
    
    if (wx.setInnerAudioOption) {
      wx.setInnerAudioOption({
        obeyMuteSwitch: false,
        autoplay: true
      })
    } else {
      myaudio.obeyMuteSwitch = false;
      myaudio.autoplay = true;
    }

    //监听各个阶段
    myaudio.onCanplay(() => {
      console.log('可以播放');
    });
    myaudio.onPlay(() => {
      console.log('监听到音频开始播放');
    });
    myaudio.onEnded(() => {
      console.log('音频自然播放结束事件');
    });
    myaudio.onStop(() => {
      console.log('音频停止事件');
    });
    myaudio.onError((res) => {
      console.log(res.errMsg);
      console.log(res.errCode);
    });
    myaudio.onWaiting((res) => {
      console.log('音频加载中事件，当音频因为数据不足，需要停下来加载时会触发')
    });

    myaudio.play();
    console.log(myaudio.duration);
    this.setData({ pS: true });
  },

  
  // 停止
  stop: function () {
    myaudio.pause();
    this.setData({ pS: false });
  }
  
})

.json

{
  "navigationBarTitleText": "Birthday",
  "usingComponents": {}
}

.wxss

.page{
  background-image: url("//添加想要背景图片对应的base64码");
  background-size: 100% 100%;
}

.title{
  width: 690rpx;
  height: 150rpx;
  margin-top: 30rpx;
  margin-bottom: 30rpx;
  text-align: center;
  margin-right: 30rpx;
  margin-left: 30rpx;
  color: #292929;
  font-size: 60rpx;
  line-height: 140rpx;
  font-weight: 550;
  
}

.player{
  widows: 100%;
  padding-bottom: 30rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.playerOn,.playerStop{
  border-radius: 180rpx;
  margin: 10% 20% 0% 25%;
  width: 400rpx;
  height: 400rpx;
  
}

.playerStop{
  animation: audio-rotate 8s linear infinite;
}

/*旋转动画*/
@keyframes audio-rotate{
  0%{
    transform: rotateZ(0deg);
  }
  100%{
    transform: rotateZ(360deg);
  }
}

.story{
  margin-right: 20%;
  margin-left: 20%;
  margin-top: 60rpx;
  color: #292929;
  font-weight: 650;
  font-size: 25rpx;
}

音频播放暂停

该功能的具体操作是点击图标实现音频的播放以及暂停两种状态，由此可知，便需要有true和false两种情况。关于这一点，只需要在标签中使用如wx:if="{{pS == false}}" 即可进行判断，再响应对应的功能函数。

音频的播放我采用的是wx.createInnerAudioContext() api，先创建一个实例即对象（可理解为该对象就是音频文件），通过操作该对象来实现对音频的操作。

play 功能函数主要功能即是播放，由于微信开发文档提供了相应的方法，所以我们只需要调用 .play() 即可。对于上面的监听函数主要是为了测试bug，小白可暂时不深学。stop() 功能函数主要功能便是暂停，同样地，我们只需要调用 .pause() 即可。

最后一个是音乐链接。我们只需要在 onShow 功能函数中添加（该生命周期函数，可简单理解为当我们加载页面时，音乐链接也随之加载，只要页面未关闭，该链接就不用重新加载）。接着利用如 “myaudio.src=” 方法添加即可。

在这里说一下本人踩过的坑，相信很多小白都会遇到。就是音乐链接的准确性，首先一定要保证音乐链接正确，如果错误console是不会提示的，但是就是加载不出来。还有的是关于兼容性问题，一些音频文件在安卓和开发工具可加载，但是ios上不行，关于这一点，小白可通过微信开发文档确认音频文件格式是否兼容。

图片转动

关于图片的转动，在效果图里并没展示，主要效果就是点击播放后，图片会旋转，暂停时即不动。而实现这一点，主要是在wxss中进行属性修饰。同样地，由于这里涉及了两种状态，所以我们可以使用 true 和 false 来判断。在该程序中，我定义了一个 pS 变量，当 pS == false 时，采用wxss中对应标识的属性修饰，反之。借此来实现图片的转动，具体的属性设置可参考以上代码。

总结

在开发过程中，我发现了微信小程序有一个2M的限制，不过在找其他文章学习后，利用分包功能可解决此问题，微信开发工具提供的分包功能让用户开发小程序使用容量可到8M，在这里就不啰嗦啦~

作为大二的计算机专业学生，可能学的不多，但是我会尽力地去学，这是我的第一篇CSDN文章，也是我整理的觉得可能对一些跟我一样刚接触的小白有帮助的干货。若有一些写得不好，请各位尽管说出来，大家一起学习进步~谢谢每一位看完的小伙伴(^▽)。

参考文章
①音频相关：
https://blog.csdn.net/weixin_33897722/article/details/88712410
②分包加载：
https://blog.csdn.net/acmdown/article/details/80037660