小程序时至今日已经非常火爆了,作为软件体系中的一员,越来越多的公司与个人都在发展自己的小程序,而且小程序不再是单一的微信小程序了,还有百度小程序、支付宝小程序、抖音小程序等等。说明小程序是很不错的一个开发技术,也是便于找工作的一项技能,本文指在让大家快速了解微信小程序的入门与开发。
在进入小程序开发之前,首先需要准备几件事情:
当以上步骤准备完毕之后,我们正式进入小程序开发,跟着我的步骤往下走吧!
首先打开开发者工具,会看到如下界面,其中需要注意的点有2个:
工程创建成功进入之后,具体的项目结构如下图所示
了解更多=>配置描述
试着修改app.json中navigationBarTitleText
的内容,可以看到如下结果
wxml后缀的文件是⼩程序中的html页面,我们打开page/index/index.wxml, 其中的 <view>
标签就是我们熟悉的<div>
更多内容介绍=>组件⽂档链接
WXSS可以理解为CSS样式文件,WXSS 具有 CSS ⼤部分的特性,⼩程序在 WXSS 也做了⼀些扩充和修改。
比如新增了尺⼨单位。在写 CSS 样式时,开发者需要考虑到⼿机设备的屏幕会有不同的宽度和设备像 素⽐,采⽤⼀些技巧来换算⼀些像素单位。 WXSS 在底层⽀持新的尺⼨单位 rpx ,开发者可以免去换算的烦恼,只要交给⼩程序底层来换算即可,由于换算采⽤的浮点数运算,所以运算结果会和预期结果有⼀点点偏差
小程序的核⼼逻辑都在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('⽤户点击取消')
}
}
})
},
})
复制代码
写法上其实没有太多难处, 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: ''
})
},
复制代码
最终效果如图所示