⼩⽩⼩程序开发⼊门经验总结，⼲货！⽣⽇惊喜可⽤
适合⼩⽩⼊门的⽣⽇惊喜⼩程序
效果图展⽰
这个程序是本⼈开发的⼀个简单⼩程序。
适合想开发⼩程序的⼩⽩们参考~，下⾯先给⼤家看看效果
确认整体框架
确认框架是每个程序员开发项⽬必须要做的⼯作~对于该⼩程序，主要框架分为以下⼏个⽅⾯：
1. 封⾯设计 ，即⾸页展⽰；
2. 答题环节 ，即实现⼀些基本的⿏标点击，弹出相应⼩窗⼝等事件；
3. 图⽚展⽰ ，即图⽚展览；
4. ⾳乐播放 ，即实现⾳乐播放以及暂停事件；
封⾯设计
效果图：
分析：
在上述的效果图，具体实现的功能有 点击图标实现页⾯跳转、背景图的设置
代码贴上↓↓↓
.wxml
.js <image class ="picture" bindtap ="clickme" src ="../picture/pig.jpeg"></image >
1Page ({ clickme : function (){ wx .navigateTo ({ url : '../letter/letter' }) }})1
2
3
4
5
6
7
8
.
json
.wxss
点击图标实现页⾯跳转
主要思路是利⽤bindtap点击事件完成触发对应的功能函数。bindtap点击事件对于⼩⽩可以简单理解为开发⼯具提供的⼀个可以响应⽤户的点击动作的⼯具.bindtap=“clickme” 即设置此图⽚对应⼀个名称为"clickme"的功能函数，接着就需要我们在 .js 中完成clickme 功能函数的具体实现。
在 clickme 的功能函数中，利⽤实现 wx.navigateTo 接⼝完成页⾯的跳转，关于该接⼝的使⽤，可以参考开发⽂档，⽽要转向的对应页⾯则只需在 url 输⼊对应的路径即可。
背景图的设置
背景图的设置，也算是我在学习过程中踩的⼀个坑。⼩程序的背景图使⽤应先将所要设置的图⽚转换为 base64码（可搜索在线转换⼯具进⾏转换），然后将base64码复制粘贴到 background-image:url("") ⾥⾯，再设置⼀下 background-size 属性即可。
答题环节
效果图：
分析：
在上述的效果图，具体实现的功能有 消息提⽰框弹出
代码贴上↓↓↓
.wxml { "navigationBarTitleText": "Birthday", "usingComponents": {}}
1
2
3
4.page { background -image : url ("//添加想要背景图⽚对应的base64码"); background -size : 100% 100%;}.picture { width :100px ; height :100px ; border -radius :90px ; margin -top :1025rpx ; margin -left :70%;}1
2
3
4
5
6
7
8
9
10
11
12
.
js
.json
.wxss <view class ="title"> Ask and Answer </view ><view class ="question"> <text decode ="{{true}}"> ; ；问：请选出最帅的那位 ; ; ; ; ; ;（点击选项哦）</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}}"> ; ; ; ；课程是旷的，考试是抄的，学分是蹭的，毕设是买的，论⽂是拼的，学位证是⽔的，三⽅协议是⽤来骗就业率的，什么是真的？球场
---《我想念》</text ></view ><image class ="picture" bindtap ="clickme" src ="../picture/pig.jpeg"></image >1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
1920
21
22
23
24Page ({ 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' }) }})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15写文章的小程序
16
17
18
19
20
21
22
23
24
25
{ "navigationBarTitleText": "Birthday", "usingComponents": {}}1
2
3
4
消息提⽰框弹出.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 : 25
rpx ;}.picture { width :80px ; height :80px ; border -radius :90px ; margin -top :30rpx ; margin -left :40%;}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
该功能的具体操作是点击相应选项弹出相应的消息提⽰框，所以还是需要⽤到 bindtap点击事件 标识对应要响应的功能函数。例如代码中的 answerD 便是点击D选项时会响应的功能函数。
实现弹出消息提⽰框，在开发⽂档中我们可以知道，可通过实现 wx.showToast 接⼝来完成。在 title 中输⼊对应的⽂字、icon默认下是“succe”，即按钮属性，在程序中我将其设置了“none”，即⽆需按钮、duration 则是提⽰框的持续时长。更多的属性，⼩⽩可以多参考开发⽂档。
图⽚展⽰
关于图⽚展⽰的话，就没有太多新功能啦，就是简单的"image"标签的使⽤，以及对应的修饰，在这⾥就不啰嗦啦。
⾳乐播放
效果图
分析：
在上述的效果图，具体实现的功能有 ⾳频播放暂停、图⽚转动
代码贴上↓↓↓
.wxml
.js
<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
const myaudio = wx.createInnerAudioContext();//创建对象
Page({
/**
* 页⾯的初始数据
*/
data:{
pS:false
},
/**
* ⽣命周期函数--监听页⾯显⽰
*/
onShow:function(){
myaudio.src ="music.163/song/media/outer/url?id=1359356908.mp3"
},
play:function(){
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论