后端程序员也能看懂的微信小程序开发入门
小程序时至今日已经非常火爆了，作为软件体系中的一员，越来越多的公司与个人都在发展自己的小程序，而且小程序不再是单一的微信小程序了，还有百度小程序、支付宝小程序、抖音小程序等等。说明小程序是很不错的一个开发技术，也是便于找工作的一项技能，本文指在让大家快速了解微信小程序的入门与开发。
准备工作
在进入小程序开发之前，首先需要准备几件事情：
当以上步骤准备完毕之后，我们正式进入小程序开发，跟着我的步骤往下走吧！
开始动手
首先打开开发者工具，会看到如下界面，其中需要注意的点有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: ''
})
},
复制代码最终效果如图所示
