作为一个小程序初学者，对于微信小程序的语法必须要有所了解，微信小程序的基本语法与前端三件套类似，但是使用起来更简单易学，组件，框架，api都是比较常用的小程序制作技术，常用的组件有button，image，text等。微信小程序开发文档也提供给我们更多更全的功能性组件的使用说明文档。
以下就是今天上午学习小程序的界面设计的测试图：
左图使用的组件有image，button，navigator等组件，结合js与wxss对页面渲染以及逻辑事件的添加。中图是侧面滚动scroll-view栏，背景音乐循环播放事件，轮播图swiper自动切换，以及简单的button，包含富文本与基础文本的一些属性测试。右图则是事件的测试与数据的同步。
左图代码
wxml
<view class="container">
<view>
<block>
<view>
<image class="userinfo-avatar" src="{{src}}"></image>
</view>
</block>
<block>
<text class="userinfo">A-java-林春</text>
</block>
</view>
<view style="margin-top: 50px;">
<text class="user-motto" style="font-size: large; font-style:initial;margin: 5px;">
{{motto}}
</text>
</view>
<view class="usermotto">
<button class="userButton">
<navigator url="/pages/List/list">
林春的日志
</navigator>
</button>
<button class="userButton">
<navigator url="/pages/Comment/comment">
林春的树洞
</navigator>
</button>
</view>
</view>js
const app = getApp();
Page({
data: {
motto: '欢迎来访林春的小程序^.^',
src: 'https://www.com8.cn/wp-content/uploads/2020/11/20201108023310-5fa758e6b2660.jpg'
},
onLoad :function (options){
}
})wxss
.userinfo {
display: flex;
flex-direction: column;
align-items: center;
color: #aaa;
}
.userinfo-avatar {
overflow: hidden;
width: 128rpx;
height: 128rpx;
margin: 20rpx;
border-radius: 50%;
}
.usermotto {
margin-top: 200px;
}
.userButton {
margin: 25px;
background-color: aqua;
color: black;
overflow: hidden;
}中图代码
wxml
<!--
text组件支持长按出现文本选中的属性，其他的只能通过js设置事件
user-select="true"新版本支持使用
selectable="true"目前已废弃
-->
<text user-select="true">
横向view
{{randomNumber > 5?'这个数大于5':'这个数小于5'}}
</text>
<view class="container1">
<view>A</view>
<view>B</view>
<view>C</view>
</view>
<!-- rich-text组件支持富文本，可以将一个简单的wxml标签转化为单个结点使用 -->
<rich-text nodes="<h1 style='color:red'>滚动view<h1>"></rich-text>
<scroll-view class="container2" scroll-y>
<view>D</view>
<view>E</view>
<view>F</view>
</scroll-view>
<text>轮播view</text>
<!--
indicator-dots
默认显示面板指示点，就是轮播图里的那个滚动的底侧圆点
autoplay
默认自动切换，不写就不切换
interval
设置切换的时间间隔以ms为单位
circular
是否衔接滑动，也就是那个滑动到最后一位时要返回第一位，这个过程是否显示遍历中间图片
-->
<swiper class="swiper-container" indicator-dots="true" autoplay="true" interval="2000" circular="false">
<swiper-item>
<view class="item">
<image src="{{src}}"></image>
</view>
</swiper-item>
<swiper-item>
<view class="item">
<image src="{{src}}"></image>
</view>
</swiper-item>
<swiper-item>
<view class="item">
<image src="{{src}}"></image>
</view>
</swiper-item>
</swiper>
<text>button</text>
<view>
<button type="primary" style="margin: 10px;" open-type="contact">客服会话</button>
<button type="primary" style="margin: 10px;" open-type="share">转发</button>
<button type="primary" style="margin: 10px;">
<navigator url="/pages/index/index">返回</navigator>
</button>
</view>
wxss
/* 横向view */
.container1 view{
text-align: center;
height: 60px;
width: 60px;
/* 字母显示在块的中央;设置行高实现纵向居中 */
line-height: 60px;
}
.container1 :nth-child(1){
background-color: aqua;
}
.container1 :nth-child(2){
background-color: bisque;
}
.container1 :nth-child(3){
background-color: chartreuse;
}
.container1{
/* 横向排列 */
display: flex;
justify-content: space-around;
}
/* 滚动view */
.container2 {
width: 100px;
height: 120px;
}
.container2 view{
height: 100px;
width: 100px;
text-align: center;
line-height: 100px;
}
.container2 :nth-child(1){
background-color: darkgoldenrod;
}
.container2 :nth-child(2){
background-color: darkcyan;
}
.container2 :nth-child(3){
background-color: darkmagenta;
}
/* 轮播图 */
.swiper-container {
height: 200px;
width: 400px;
}
.item{
height: 100%;
line-height: 200px;
text-align: center;
}js
const back = wx.getBackgroundAudioManager();
Page({
/**
* 页面的初始数据
*/
data: {
// 图片的资源定位放在data里
src: 'https://www.com8.cn/wp-content/uploads/2020/11/20201108023310-5fa758e6b2660.jpg',
// 随机数
randomNumber: Math.random()*10
},
/**
* 生命周期函数--监听页面加载
*/
onLoad :function () {
this.backMusic();
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
wx.getBackgroundAudioManager().stop();
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
wx.getBackgroundAudioManager().stop();
},
//背景音乐函数
backMusic:function(){
player();
function player(){
back.title="林春的 back music";
back.src="http://music.163.com/song/media/outer/url?id=36587407.mp3";
back.onEnded(() => {
player();
})
}
}
})右图代码
wxml
<!-- 事件测试 -->
<view>
<button type="primary" bindtap="ontap">点击</button>
<!-- 数据增加与减少 有点像Vue的数据的双向绑定 -->
<button type="primary" style="margin-top: 100px;" bindtap="addnumber">点击该数自增</button>
<rich-text nodes="<h1 style='color:red;'>{{mo}}<h1>"></rich-text>
<button type="primary" bindtap="subnumber">点击该数自减</button>
<!-- 事件传参 -->
<button type="primary" style="margin-top: 30px;" bindtap="ontapdata" data-dat1="true">点击传参</button>
</view>
<view>
<!-- 文本框修改msg参数data -->
<input bindinput="inputHandler" value="{{msg}}" class="input"></input>
</view>wxss
.input{
border: 1px solid darkolivegreen;
margin: 5px;
padding: 5px;
border-radius: 3px;
}js
Page({
data: {
mo: 1,
msg: '你好！'
},
ontap(e){
console.log('你点击了这个ontap事件绑定的按钮'),
console.log(e)
},
// 数据自加
addnumber(){
// setdata就是设置数据的方法
this.setData({
// 访问data的数据就是当前页面对象里的data的指定数据
mo: this.data.mo + 1
})
},
// 数据自减
subnumber(){
this.setData({
mo: this.data.mo - 1
})
},
// 事件传参数
ontapdata(event){
// event就是事件回调函数时自动创建的一个对象
// console.log(event.target.dataset.dat1)
if(event.target.dataset.dat1 == "true"){
console.log('传递成功')
console.log(event)
}
},
// 文本框的输入
inputHandler(e){
this.setData({
msg: e.detail.value
})
}
})关于背景音乐的一些补充
微信新版提供的背景音乐管理者接口：wx.getBackgroundAudioManager()
const back = wx.getBackgroundAudioManager();
page{
......
//背景音乐函数
backMusic:function(){
player();
function player(){
back.title="林春的 back music";
back.src="http://music.163.com/song/media/outer/url?id=36587407.mp3";
back.onEnded(() => {
player();
})
}
}
}
这里要想背景音乐正常的播放，还得在app.json文件中设置
"requiredBackgroundModes": [
"audio","location"
]
让它开启后台运行的能力，不然后台背景音乐播放就会启动不了，控制台也不会报错！
2481
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
