需要准备的东西
学习微信小程序,需要先在微信公众平台注册账号,这里需要选定小程序,然后按照提示步骤进行注册,在注册好后,会在开发部分产生一个AppId,这个在后期项目新建及导入项目会使用到。
在注册后,需要下载微信开发者工具,在这里下载你的电脑使用版本,并进行安装。
(进入上面两个都需要微信扫码)
开发小程序的官方文档可以进入小程序开发文档进行查看。
项目简介
在初始化项目后,打开:
是上图的这个样子。
app.json
对小程序做全局配置,包括标题等。
- pages字段 --用于描述当前小程序页面路径,为了让微信客户端知道你的小程序定义在哪个页面
- window字段--定义小程序所有页面的顶部背景颜色、文字颜色等。
- tarBar字段---底部导航
{
"pages": [
"pages/index/index",
"pages/logs/logs"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "首页",
"navigationBarTextStyle": "black"
},
"sitemapLocation": "sitemap.json",
"tabBar": {
"list": [
{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "./assets/tab-bar/home.png",
"selectedIconPath": "/assets/tab-bar/home-active.png"
},
{
"pagePath": "pages/logs/logs",
"text": "日志",
"iconPath": "./assets/tab-bar/user.png",
"selectedIconPath": "/assets/tab-bar/user-active.png"
}
]
}
}
每个具体页面内的json文件,也可修改自己的顶部导航文字:
{
"navigationBarTitleText": "消费信息"
}
WXML
就是每个页面写页面结构的部分
例如:
<view class="container">
<view class="userinfo">
<button wx:if="{{!hasUserInfo && canIUse}}"
open-type="getUserInfo"
bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>
<block wx:else>
<image bindtap="bindViewTap"
class="userinfo-avatar"
src="{{userInfo.avatarUrl}}"
background-size="cover"></image>
<text class="userinfo-nickname">{{userInfo.nickName}}</text>
</block>
</view>
<view class="usermotto">
<text class="user-motto">{{motto}}</text>
</view>
</view>
view类似于之前的div等。
WXSS
例如:
/**index.wxss**/
.userinfo {
display: flex;
flex-direction: column;
align-items: center;
}
.userinfo-avatar {
width: 128rpx;
height: 128rpx;
margin: 20rpx;
border-radius: 50%;
}
注意:尺寸单位变为了rpx。
js
整体开发起来像是vue和react混合体,既有data和{{}} 以及wx:if,也有setState,还有小程序特有的生命周期,
1.app.js是应用的入口
App({
onLaunch: function () {
console.log('小程序启动!')
}
})
index.js
const app = getApp()
Page({
data: {
todos:['吃饭','睡觉','打豆豆']
},
onLoad(){
console.log('index页面加载')
},
onShow(){
console.log('index页面显示')
},
onHide(){
console.log('index页面隐藏')
},
})
wxml页面渲染
<view wx:for="{{ todos }}">
<view>{{index}}:{{item}}</view>
</view>
事件
1.什么是事件
- 事件是视图层到逻辑层的通讯方式。
- 事件可以将用户的行为反馈到逻辑层进行处理。
- 事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数。
- 事件对象可以携带额外信息,如 id, dataset, touches。
2.事件的使用方式
- 在组件中绑定一个事件处理函数。
如bindtap
,当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数。
<view id="tapTest" data-hi="WeChat" bindtap="tapName"> Click me! </view>
- 在相应的Page定义中写上相应的事件处理函数,参数是event。
Page({
tapName: function(event) {
console.log(event)
}
})
多媒体
图片
<image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
音频
wxml部分:
<audio
poster="{{poster}}"
name="{{name}}"
author="{{author}}}"
src="{{src}}"
id="myAudio"
controls
loop
></audio>
<!-- </view> -->
<button type="primary" bindtap="audioPlay">播放</button>
<button type="primary" bindtap="audioPause">暂停</button>
<button type="primary" bindtap="audio14">设置当前播放时间为14秒</button>
<button type="primary" bindtap="audioStart">回到开头</button>
js部分:
onReady(e){
// 使用wx.createAudioContext获取audio上下文context
this.audioCtx = wx.createAudioContext('myAudio');
},
data:{
poster:'https://y.gtimg.cn/music/photo_new/T002R300x300M000001VUAQr2iQM54.jpg?max_age=2592000',
name:"撒野",
author:'李蚊香',
src:'https://ws.stream.qqmusic.qq.com/M500001vfvsJ21xFqb.mp3?guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E06DCBDC9AB7C49FD713D632D313AC4858BACB8DDD29067D3C60148D36E62053BF8DFEAF74C0A5CCFADD6471160CAF3E6A&fromtag=46',
// src:'../../assets/Deepmaniak- Just Like This.mp3'
position:'back'
},
audioPlay(){
this.audioCtx.play()
},
audioPause(){
this.audioCtx.pause()
},
audio14(){
this.audioCtx.seek(14)
},
audioStart(){
this.audioCtx.seek(0)
},
相机
<camera
flash="off"
binderror="error"
style="width:100%;height:300px;"
device-position="{{position}}"
></camera>
<button type="primary" bindtap="takePhoto">拍照</button>
<button type="primary" bindtap="changePosition">翻转</button>
<view>预览</view>
<image mode="widthFix" src="{{src}}"></image>
js部分:
takePhoto(){
const ctx = wx.createCameraContext()
ctx.takePhoto({
quality:'high',
success:(res) =>{
this.setData({
src:res.tempImagePath
})
}
})
},
// 摄像头翻转
changePosition(){
this.setData({
position:this.data.position === 'back'?'front':'back'
})
},
error(e){
console.log(e.detail)
}
小程序路由的切换
1.switchTab切换tab
2.redirectTo跳转页面
wx.switchTab({
url: '/index'
})
弹窗
三个
//弹窗
wx.showToast({
title:'成功',
icon:'success',
duration:2000
})
//加载提示框
wx.showLoading({
title:'加载中....'
})
setTimeout(() => {
wx.hideLoading()
},2000)
//显示模态框
wx.showModal({
title: '提示',
content:'这是一个模态框',
success(res){
if(res.confirm){
console.log('确认');
}else if(res.cancel){
console.log('cancel');
}
}
})
网络请求
//ajax请求
wx.request({
url:'http://localhost:3000/test',
success(res){
console.log('res',res.data);
}
})
当然还有很多