小程序时至今日已经非常火爆了,作为软件体系中的一员,越来越多的公司与个人都在发展自己的小程序,而且小程序不再是单一的微信小程序了,还有百度小程序、支付宝小程序、抖音小程序等等。说明小程序是很不错的一个开发技术,也是便于找工作的一项技能,本文指在让大家快速了解微信小程序的入门与开发。
准备工作
在进入小程序开发之前,首先需要准备几件事情:
当以上步骤准备完毕之后,我们正式进入小程序开发,跟着我的步骤往下走吧!
开始动手
首先打开开发者工具,会看到如下界面,其中需要注意的点有2个:
- 后端服务:因为是入门体验,这里选择不使用云服务,后续会给大家介绍云开发。
- 语言:分为typescript和这里选择JavaScript,作为后端开发的我们,选择JavaScript
工程创建成功进入之后,具体的项目结构如下图所示
- pages: 存放项目页面的地方
- utils:用js写的一个工具类方法
- app.json:小程序的全局配置,包括标题,⾊系等等
- app.js:应用程序的入门
了解更多=>配置描述
试着修改app.json中navigationBarTitleText
的内容,可以看到如下结果
文件类型介绍
wxml
wxml后缀的文件是小程序中的html页面,我们打开page/index/index.wxml,
其中的 <view>
标签就是我们熟悉的<div>
更多内容介绍=>组件文档链接
wxss
WXSS可以理解为CSS样式文件,WXSS 具有 CSS 大部分的特性,小程序在 WXSS 也做了一些扩充和修改。
比如新增了尺寸单位。在写 CSS 样式时,开发者需要考虑到手机设备的屏幕会有不同的宽度和设备像 素差,采用一些技巧来换算这些像素单位。 WXSS 在底层支持新的尺寸单位 rpx ,开发者可以免去换算的烦恼,只要交给笑程序底层来换算即可,由于换算采用的浮点数运算,所以运算结果会和预期结果有一点点偏差
js
小程序的核心逻辑都在js文件里,整体小程序开发起来的感觉,像是vue和react混合体,即有data
数据定义和{{}}
双向绑定以及
wx:if 标签,还有setState
这些语法概念,小程序特有的生命周期函数。
实践真知
结合上面的描述,我们来修改一下这些文件的内容,写点我们自己的东西,
app.js
这里会打印一段日志生命周期方法,小程序启动啦!
app.json
这里会显示底部tab导航栏
pages/index/index.wxml
这里就是把首页改成了我们自己想要的效果,<view>
相当于<div>
index.js
把原有的内容都删除,改如下内容,data
定义了数据,onxxx
是页面的生命周期方法,分表标识页面的不同状态
保存编译运行下,最终会看到如下效果
至此,等于说是完成了一个简单的小程序页面了,自己怎么搞页面了,但是这一点用都没用,交互呢?按钮呢?一些动态效果呢?啥啥都没,接下来继续扩展功能,这里将学习小程序的api使用
小程序的事件绑定
在index.wxml
文件中,已经定义了<button>
标签,在html开发中,要给按钮绑定事件需要使用 onclick
属性,但在小程序的开发中,使用的bindtap
属性,
如图所示,分别给这4个按钮绑定了事件函数
既然按钮引用了这4个方法,那么就需要定义这4个函数方法,之前说过,页面的逻辑处理都是在js文件中,所以在index.js
, 追加4个方法,内容如下
Page({
toast() {
wx.showToast({
title: '成功',
icon: 'success',
duration: 2000
})
},
toLog() {
wx.switchTab({
url: '/pages/logs/logs',
})
},
showLoading() {
wx.showLoading({
title: '加载中',
})
setTimeout(function () {
wx.hideLoading({
complete: (res) => {
console.log('加载中效果消失')
},
})
}, 3000)
},
showModeal() {
wx.showModal({
title: '确定吗?',
content: '这是一个模拟弹窗',
cancelColor: 'red',
success(res) {
if (res.confirm) {
console.log('⽤户点击确定')
} else if (res.cancel) {
console.log('⽤户点击取消')
}
}
})
},
})
- wx.showToast():弹出提个提示框
- wx.switchTab():切换底部tab的内容
- wx.showLoading():显示加载的效果
- wx.hideLoading():关闭加载的效果
- wx.showModal():弹出带有选择按钮的提示框
写法上其实没有太多难处, xxx(){}
就是声明了一个方法,特殊的是其中的内部,都是wx.xxxxxx
,这个就是微信小程序的api了,就有点像java框架的api方法一样List.isEmpty()
,微信封装的都是 wx 开头的,想要什么样的功能直接.出来获取用就好,参数涵义都是微信定义好的
更多想了解=>微信小程序API指南
完成添加显示功能
回到之前的 index.wxml
文件,追加如下内容
index.js
页面逻辑的js文件追加如下内容
handleInput(e){
console.log('input',e.detail)
# 模拟react的setState,固定写法
this.setData({
# val是定义的属性,e是输入事件对象
val: e.detail.value
})
},
add(){
this.setData({
# 可以理解为把原data对象中的todos属性值进行循环遍历到一个新的todos对象中,同时把data对象中的val也追加到这个新todos中
# 类似java中的 List newBooks = list.stream().map(b->Book).add(newBook).toList()
todos: [...this.data.todos, this.data.val],
val: ''
})
},
最终效果如图所示
扩展体验
使用微信的相机api
index.wxml
添加<camera>
标签内容即可使用内置相机
<view>
<camera style="width:100%;height:300px;">
</camera>
## 给按钮绑定takePhoto方法
<button type="primary" bindtap="takePhoto">拍照</button>
</view>
index.js
添加takePhto方法的实现
takePhoto() {
const ctx = wx.createCameraContext()
ctx.takePhoto({
quality: 'high',
success: res => {
this.setData({
# 修改了图片的src地址
src: res.tempImagePath
})
}
})
},
媒体播放器
index.wxml
添加<audio>
音频组件,具体参数描述可以参考官方文档=>audio 组件描述,同样的为每个按钮绑定了方法
<view>
<audio poster="{{poster}}" name="{{musicName}}" author="{{author}}" src="{{musicSrc}}" id="myAudio" controls loop></audio>
<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>
</view>
index.js
追加内容, 以下内容和官方文档操作指南一致
onReady(e) {
// 使用 wx.createAudioContext 获取 audio 上下文 context
this.audioCtx = wx.createAudioContext('myAudio')
},
audioPlay() {
console.log(this.audioCtx)
this.audioCtx.play()
},
audioPause() {
this.audioCtx.pause()
},
audio14() {
this.audioCtx.seek(14)
},
audioStart() {
this.audioCtx.seek(0)
},
## 给data设置属性内容, 因为起那么的<audio>标签属性有用
data:{
musicName: '像我这样的人',
author: '毛不易',
poster: 'http://singerimg.kugou.com/uploadpic/softhead/400/20180611/20180611160019456.jpg',
musicSrc: 'https://sharefs.yun.kugou.com//202004130106//5f99b0098214a54497e4e59d041d0064//G146//M07//02//14//cpQEAFwqEt2AMf4dACiMsITsnwk265.mp3',
}
歌曲正在播放中哦!~
获取用户的的信息
index.wxml
使用<button>
标签获取用户信息,其中open-type="getUserInfo"
(获取用户信息,可以从bindgetuserinfo回调中获取到用户信息),
bindgetuserinfo="getUserInfo"
(用户点击该按钮时,会返回获取到的用户信息,回调的detail数据与wx.getUserInfo返回的一致,open-type="getUserInfo"时有效)
<view class="userinfo">
## wx:if 如果没有用户信息就显示这个按钮
<button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>
# 如果有就显示头像和昵称
<block wx:else>
<image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
<text class="userinfo-nickname">{{userInfo.nickName}}</text>
</block>
</view>
index.js
# 给data对象定义几个属性
data:{
userInfo: {},
hasUserInfo: false,
canIUse: wx.canIUse('button.open-type.getUserInfo')
}
# 添加方法
bindViewTap: function () {
console.log('有人点了头像')
},
getUserInfo: function (e) {
console.log(e)
app.globalData.userInfo = e.detail.userInfo
this.setData({
userInfo: e.detail.userInfo,
hasUserInfo: true
})
},
关于微信Demo中的userInfoReadyCallback解释
云开发之数据库操作
首先点击开发工具栏中的云开发按钮,之后会引导去开通云开发
环境名称和环境ID可以自定义修改,环境配置是免费初始化的,以后有需要可以扩容 接下来创建集合(可以理解为数据表),之后插入数据记录,这里的操作和mongoDB很相似 修改一下数据库的权限配置,便于测试开发,如果有人查不到数据,但代码写的没问题可以来这里看看index.js 追加如下代码,更多的内容描述参考=>云开发指南
onLoad() {
console.log('index⻚⾯加载拉')
this.getbooks()
},
getbooks() {
# 微信云开发api的使用,固定语法,这里获取全部数据
wx.cloud.database().collection('bookdb').get({
success(res) {
console.log('获取到图书数据', res)
this.setData({
books: res.data
})
}
})
},
效果如图,加载到了之前在数据库插入的数据
源码地址
点关注,不迷路
文章每周持续更新,可以微信搜索「 十分钟学编程 」第一时间阅读和催更,如果这个文章写得还不错,觉得有点东西的话 ~求点赞👍 求关注❤️ 求分享❤️
各位的支持和认可,就是我创作的最大动力,我们下篇文章见!